React är ett välkänt JavaScript-bibliotek som du kan använda för att skapa användargränssnitt för mångsidiga webbapplikationer. React är anpassningsbar och du kan kombinera den med andra tekniker för att göra mer kraftfulla och effektiva appar.

Lär dig hur du integrerar React med olika tekniker så får du fördelar från flera källor.

1. Reagera + Redux

Redux är ett tillståndshanteringsbibliotek som används i samband med React. Redux underlättar centraliserad hantering av applikationstillstånd. När du bygger komplexa applikationer med många tillstånd fungerar React och Redux bra tillsammans.

Här är en illustration av hur du använder Redux med React:

importera Reagera från'reagera';
importera { createStore } från'på nytt';
importera { Leverantör } från'reagera-redux';
konst initialState = { räkna: 0 };
fungerareducerare(state = initialState, action) {
växla (action.type) {
fall'ÖKNING'





instagram viewer
:
lämna tillbaka { räkna: state.count + 1 };
fall'MINSKNING':
lämna tillbaka { räkna: state.count - 1 };
standard:
lämna tillbaka stat;
 }
}

konstimportera Reagera från'reagera';
importera { useQuery, gql } från'@apollo/klient';
konst GET_USERS = gql`
 fråga GetUsers {
 användare {
 id
 namn
 }
 }
;
fungeraAnvändare() {
konst { loading, error, data } = useQuery (GET_USERS);
om (läser in) lämna tillbaka<sid>Läser in...sid>;
om (fel) lämna tillbaka<sid>Fel :(sid>;
lämna tillbaka (
store = createStore (reducerare);
fungeraDisken() {
konst count = useSelector(stat => state.count);
konst dispatch = useDispatch();
lämna tillbaka (


Räkna: {count}</p>
 avsändande({ typ: 'ÖKNING' })}>+</button>
 avsändande({ typ: 'MINSKNING' })}>-</button>
 </div>
 );
}
fungeraApp() {
lämna tillbaka (


 </Provider>
 );
}
exporterastandard App;

Detta exempel skapar en Redux-butik med initialtillståndet 0. En reducerfunktion hanterar då ÖKNING och MINSKNING operationer. Koden använder useSelector och använd Dispatch krokar för att få den löpande räkningen och skicka aktiviteterna individuellt.

Slutligen, för att göra butiken tillgänglig för hela applikationen, linda in räknarkomponenten i leverantörskomponenten.

2. Rendering på serversidan med Next.js

Next.js är ett utvecklingsramverk som optimerar webbplatsens hastighet och SEO taktik genom att överföra HTML till klienter och använda server-side rendering av React-komponenter.

Dess kraftfulla verktygsuppsättning fungerar tillsammans med React och ger exceptionell prestanda och hög sökmotorrankning.

// pages/index.js
importera Reagera från'reagera';
fungeraHem() {
lämna tillbaka (


Hej världen!</h1>


Detta är en server-renderad React-komponent.</p>
 </div>
 );
}
exporterastandard Hem;

I den här modellen karakteriserar du en React-komponent som kallas Hem. Next.js skapar en statisk HTML-sida med innehållet i denna komponent när den renderar den på servern. När sidan får ett besök från klienten kommer den att skicka HTML till klienten och hydratisera komponenten, vilket gör att den kan fungera som en dynamisk React-komponent.

3. Datahämtning med GraphQL

GraphQL är ett frågespråk för API: er som erbjuder ett skickligt, starkt och anpassningsbart alternativ till REST. Med GraphQL kan du få data snabbare och uppdatera användargränssnittet snabbare.

Detta är en illustration av sättet att använda GraphQL med React:

importera Reagera från'reagera';
importera { useQuery, gql } från'@apollo/klient';
konst GET_USERS = gql`
 fråga GetUsers {
 användare {
 id
 namn
 }
 }
;
fungeraAnvändare() {
konst { loading, error, data } = useQuery (GET_USERS);
om (läser in) lämna tillbaka<sid>Läser in...sid>;
om (fel) lämna tillbaka<sid>Fel :(sid>;
lämna tillbaka (


 {data.users.map(användare => (
{användarnamn}</li>
 ))}
 </ul>
 );
}
fungeraApp() {
lämna tillbaka (


Användare</h1>

 </div>
 );
}
exporterastandard App;

Denna modell kallar useQuery funktion från @apollo/klient bibliotek för att få en genomgång av klienter från GraphQL-programmeringsgränssnittet. Användarlistan visas sedan i användargränssnittet.

4. Styling med CSS-in-JS

CSS-in-JS är en JavaScript-baserad metod för styling av React-komponenter. Det gör det enklare att hantera komplexa stilmallar och låter dig skriva stilar i en modulär och komponentbaserad stil.

Här är en illustration av hur man använder CSS-in-JS med React:

importera Reagera från'reagera';
importera stylad från"stilade komponenter";
konst Knapp = styled.button`
 bakgrundsfärg: #007bff;
 färg: #fff;
 stoppning: 10px 20px;
 gränsradie: 5px;
 textstorlek: 16px;
 markör: pekare;
 &:hover {
 bakgrundsfärg: #0069d9;
 }
;
fungeraApp() {
lämna tillbaka (


Klicka på mig!</Button>
 </div>
 );
}
exporterastandard App;

Detta exempel skapar en stilig knapp komponent med hjälp av stylad fungera. Den definierar knappens upplevelseton, textton, dämpning, linjesvep, textdimension och markör.

Ett hovringsläge som ändrar bakgrundsfärgen när användaren håller muspekaren över knappen definieras också. Knappen renderas slutligen med hjälp av en React-komponent.

5. Integrering med D3 för datavisualisering

D3 är ett JavaScript-bibliotek för datamanipulering och visualisering. Du kan göra kraftfulla och interaktiva datavisualiseringar med hjälp av React. En illustration av hur du använder D3 med React är följande:

importera Reagera, { useRef, useEffect } från'reagera';
importera * som d3 från'd3';
fungeraStapeldiagram({ data }) {
konst ref = useRef();
 useEffect(() => {
konst svg = d3.select (ref.current);
konst width = svg.attr('bredd');
konst höjd = svg.attr('höjd');
konst x = d3.scaleBand()
 .domain (data.map((d) => d.label))
 .räckvidd([0, bredd])
 .stoppning(0.5);
konst y = d3.scaleLinear()
 .domän([0, d3.max (data, (d) => d.värde)])
 .range([höjd, 0]);
 svg.selectAll('rätt')
 .data (data)
 .stiga på()
 .bifoga('rätt')
 .attr('x', (d) => x (d.label))
 .attr('y', (d) => y (d.värde))
 .attr('bredd', x.bandwidth())
 .attr('höjd', (d) => höjd - y (d.värde))
 .attr('fylla', '#007bff');
 }, [data]);
lämna tillbaka (
400}>
 {/* yxor går här */}
 </svg>
 );
}
exporterastandard Stapeldiagram;

Denna kod definierar en Stapeldiagram komponent som accepterar en data prop i föregående kodavsnitt. Den kallar användRef krok för att göra en referens till SVG-komponenten som kommer att använda den för att rita konturen.

Efter det återger den staplarna i diagrammet och definierar skalorna med useEffect() krok, som mappar värdena för data till skärmens koordinater.

6. Lägga till realtidsfunktionalitet med WebSockets

Genom att implementera WebSockets etableras en fullt fungerande tvåvägsväg som möjliggör kontinuerlig kommunikation mellan en klient och server. De gör det möjligt för React att lägga till kontinuerlig användbarhet till webbapplikationer, till exempel diskussionsforum, liveuppdateringar och varningar.

Du använder WebSockets på följande sätt med React:

importera Reagera, { useState, useEffect } från'reagera';
importera io från'socket.io-client';
fungeraChattrum() {
konst [meddelanden, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst socket = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('meddelande', (meddelande) => {
 setMessages([...meddelanden, meddelande]);
 });
 }, [meddelanden, socket]);
konst handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('meddelande', inputValue);
 setInputValue('');
 };
lämna tillbaka (




 {meddelanden.karta((meddelande, dvs) => (
{meddelande}</li>
 ))}
 </ul>


 typ="text"
 värde={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Skicka in">Skicka</button>
 </form>
 </div>
 );
}
exporterastandard Chattrum;

I det här exemplet definierar du en Chattrum komponent som använder socket.io-klient bibliotek för att ansluta till en WebSocket-server. Du kan använda useState krok för att hantera sammanfattningen av meddelanden och informationsaktningen.

När du får ett nytt meddelande, useEffect hook registrerar en lyssnare för att utlösa en meddelandehändelseuppdatering till meddelandelistan. För att rensa och skicka ett inmatningsvärde för händelsemeddelandet finns det en handleSubmit fungera.

Därefter kommer både formuläret med inmatningsfält och knapp samt den uppdaterade meddelandelistan att visas på skärmen.

Med varje inlämning av formulär, anropar du handleSubmit funktion är oundviklig. För att leverera meddelandet till servern använder den här metoden socket.

7. Integrering med React Native för mobil utveckling

React Local är ett system för att bygga lokala universella applikationer med hjälp av React, som ansluter för att främja bärbara applikationer för iOS och Android-steg.

Genom att använda integrationen av React Native med React kan du använda den komponentbaserade designen och den återanvändbara koden för React över mobil- och webbplattformar. Detta minskar utvecklingscyklerna för mobilappar och tiden till marknaden. React Native är ett populärt ramverk för att utveckla inbyggda mobilappar som använder sig av React-biblioteket.

Vi introducerar viktig programmering och bibliotek, som Node.js, Svara Lokal CLI, och Xcode eller Android Studio, är grundläggande för designers som arbetar med iOS och Android separat. Slutligen, enkla React Native-komponenter gör det möjligt för utvecklare att skapa robusta och funktionsrika mobilapplikationer för iOS- och Android-plattformarna.

Kombinera React med andra teknologier

React är ett omtyckt och effektivt bibliotek för att bygga onlineappar. React är ett utmärkt alternativ för att skapa användargränssnitt, men det används också med andra teknologier för att öka dess kapacitet.

Genom att integrera React med dessa teknologier kan utvecklare skapa mer intrikata och avancerade appar som erbjuder en bättre användarupplevelse. React och dess ekosystem av verktyg och bibliotek täcker allt som behövs för att skapa en grundläggande webbplats eller en komplex webbapplikation.