React on tunnettu JavaScript-kirjasto, jonka avulla voit tehdä käyttöliittymiä monipuolisille verkkosovelluksille. React on mukautuva ja voit yhdistää sen muihin teknologioihin tehokkaampien ja tehokkaampien sovellusten tekemiseksi.

Opi integroimaan React eri teknologioiden kanssa, niin saat hyödyt useista lähteistä.

1. React + Redux

Redux on tilanhallintakirjasto, jota käytetään yhdessä Reactin kanssa. Redux mahdollistaa keskitetyn sovellusten tilanhallinnan. Kun rakennetaan monimutkaisia ​​sovelluksia, joissa on monta tilaa, React ja Redux toimivat hyvin yhdessä.

Tässä on esimerkki siitä, kuinka Reduxia käytetään Reactin kanssa:

tuonti Reagoi alkaen'reagoi';
tuonti { CreateStore } alkaen"redux";
tuonti { Palveluntarjoaja } alkaen'react-redux';
konst aloitustila = { Kreivi: 0 };
toimintovähennin(tila = aloitustila, toiminta) {
vaihtaa (toiminta.tyyppi) {
tapaus'LISÄYS'





instagram viewer
:
palata { Kreivi: state.count + 1 };
tapaus'DECEMENT':
palata { Kreivi: state.count - 1 };
oletuksena:
palata osavaltio;
 }
}

konsttuonti Reagoi alkaen'reagoi';
tuonti { useQuery, gql } alkaen'@apollo/asiakas';
konst GET_USERS = gql`
 kysely GetUsers {
 käyttäjät {
 id
 nimi
 }
 }
;
toimintoKäyttäjät() {
konst { lataus, virhe, tiedot } = useQuery (GET_USERS);
jos (Ladataan) palata<s>Ladataan...s>;
jos (virhe) palata<s>Virhe :(s>;
palata (
store = createStore (vähennys);
toimintoLaskuri() {
konst count = useSelector(osavaltio => state.count);
konst lähetys = useDispatch();
palata (


Count: {count}</p>
 lähettää({ tyyppi: 'LISÄYS' })}>+</button>
 lähettää({ tyyppi: 'DECEMENT' })}>-</button>
 </div>
 );
}
toimintoSovellus() {
palata (


 </Provider>
 );
}
viedäoletuksena Sovellus;

Tämä esimerkki luo Redux-myymälän, jonka alkutila on 0. Supistustoiminto hoitaa sitten LISÄYS ja VÄHENTÄMINEN toiminnot. Koodi käyttää useSelector ja useDispatch koukut saadakseen jatkuvan laskennan ja lähettääksesi toiminnot yksitellen.

Lopuksi, jotta kauppa on koko sovelluksen käytettävissä, kääri vastakomponentti toimittajakomponenttiin.

2. Palvelinpuolen renderöinti Next.js: n avulla

Next.js on kehityskehys, joka optimoi verkkosivuston nopeuden ja SEO taktiikkaa välittämällä HTML: ää asiakkaille ja käyttämällä React-komponenttien palvelinpuolen renderöinti.

Sen tehokas työkalusarja toimii yhdessä Reactin kanssa tarjoten poikkeuksellisen suorituskyvyn ja korkeat sijoitukset hakukoneissa.

// pages/index.js
tuonti Reagoi alkaen'reagoi';
toimintoKoti() {
palata (


Hei maailma!</h1>


Tämä on palvelimen luoma React-komponentti.</p>
 </div>
 );
}
viedäoletuksena Koti;

Tässä mallissa luonnehdit React-komponenttia nimeltä Koti. Next.js tekee staattisen HTML-sivun, joka sisältää tämän komponentin sisällön, kun se hahmontaa sen palvelimella. Kun sivu saa käynnin asiakkaalta, se lähettää HTML-koodin asiakkaalle ja kosteuttaa komponentin, jolloin se voi toimia dynaamisena React-komponenttina.

3. Tietojen haku GraphQL: lla

GraphQL on sovellusliittymien kyselykieli, joka tarjoaa asiantuntevan, vahvan ja mukautuvan vaihtoehdon REST: lle. GraphQL: n avulla saat tietoja nopeammin ja päivität käyttöliittymän nopeammin.

Tämä on esimerkki tavasta käyttää GraphQL: ää Reactin kanssa:

tuonti Reagoi alkaen'reagoi';
tuonti { useQuery, gql } alkaen'@apollo/asiakas';
konst GET_USERS = gql`
 kysely GetUsers {
 käyttäjät {
 id
 nimi
 }
 }
;
toimintoKäyttäjät() {
konst { lataus, virhe, tiedot } = useQuery (GET_USERS);
jos (Ladataan) palata<s>Ladataan...s>;
jos (virhe) palata<s>Virhe :(s>;
palata (


 {data.users.map(käyttäjä => (
{käyttäjänimi}</li>
 ))}
 </ul>
 );
}
toimintoSovellus() {
palata (


Käyttäjät</h1>

 </div>
 );
}
viedäoletuksena Sovellus;

Tämä malli kutsuu useQuery toiminto alkaen @apollo/asiakas kirjasto tuodaksesi asiakkaiden luettelon GraphQL-ohjelmointiliittymästä. Käyttäjäluettelo näytetään sitten käyttöliittymässä.

4. Muotoilu CSS-in-JS: llä

CSS-in-JS on JavaScript-pohjainen menetelmä React-komponenttien muotoiluun. Sen avulla on helpompi hallita monimutkaisia ​​tyylitaulukoita ja voit kirjoittaa tyylejä modulaarisessa ja komponenttipohjaisessa tyylissä.

Tässä on esimerkki CSS-in-JS: n käyttämisestä Reactin kanssa:

tuonti Reagoi alkaen'reagoi';
tuonti tyylistä alkaen"tyylilliset komponentit";
konst Button = styled.button`
 taustaväri: #007bff;
 väri: #fff;
 pehmuste: 10px 20px;
 rajan säde: 5px;
 Fonttikoko: 16px;
 kohdistin: osoitin;
 &:hover {
 taustaväri: #0069d9;
 }
;
toimintoSovellus() {
palata (


Klikkaa minua!</Button>
 </div>
 );
}
viedäoletuksena Sovellus;

Tämä esimerkki luo a tyylinen painike komponenttia käyttämällä tyylistä toiminto. Se määrittää painikkeen käyttöäänen, tekstin sävyn, pehmusteen, rivin pyyhkäisyn, tekstin ulottuvuuden ja kohdistimen.

Määritetään myös hover-tila, joka muuttaa taustaväriä, kun käyttäjä vie hiiren painikkeen päälle. Painike renderöidään lopulta React-komponentilla.

5. Integrointi D3:n kanssa tietojen visualisointia varten

D3 on tietojen käsittelyyn ja visualisointiin tarkoitettu JavaScript-kirjasto. Voit tehdä tehokkaita ja interaktiivisia datavisualisointeja Reactin avulla. Esimerkki D3:n käytöstä Reactin kanssa on seuraava:

tuonti React, { useRef, useEffect } alkaen'reagoi';
tuonti * kuten d3 alkaen'd3';
toimintoPylväsdiagrammi({ data }) {
konst ref = useRef();
 useEffect(() => {
konst svg = d3.select (ref.current);
konst leveys = svg.attr('leveys');
konst korkeus = svg.attr('korkeus');
konst x = d3.scaleBand()
 .domain (data.map((d) => d.label))
 .range([0, leveys])
 .padding(0.5);
konst y = d3.scaleLinear()
 .domain([0, d3.max (data, (d) => d.arvo)])
 .range([height, 0]);
 svg.selectAll("oikea")
 .data (data)
 .tulla sisään()
 .append("oikea")
 .attr('x', (d) => x (d.tunniste))
 .attr('y', (d) => y (d.arvo))
 .attr('leveys', x.kaistanleveys())
 .attr('korkeus', (d) => korkeus - y (d.arvo))
 .attr('täyttää', '#007bff');
 }, [tiedot]);
palata (
400}>
 {/* kirveet menevät tänne */}
 </svg>
 );
}
viedäoletuksena Pylväsdiagrammi;

Tämä koodi määrittelee a Pylväsdiagrammi komponentti, joka hyväksyy a tiedot prop edellisessä koodinpätkässä. Se kutsuu useRef koukku viitataksesi SVG-komponenttiin, joka käyttää sitä ääriviivan piirtämiseen.

Sen jälkeen se renderöi kaavion palkit ja määrittelee asteikot useEffect()-koukku, joka kartoittaa datan arvot näytön koordinaatteihin.

6. Reaaliaikaisten toimintojen lisääminen WebSocketsin avulla

WebSocketsin käyttöönotto luo täysin toimivan kaksisuuntaisen väylän, joka mahdollistaa jatkuvan viestinnän asiakkaan ja palvelimen välillä. Niiden avulla React voi lisätä jatkuvaa hyödyllisyyttä verkkosovelluksiin, kuten keskustelupalstoihin, reaaliaikaisiin päivityksiin ja varoituksiin.

Käytät WebSocketsia Reactin kanssa seuraavalla tavalla:

tuonti React, { useState, useEffect } alkaen'reagoi';
tuonti io alkaen'socket.io-client';
toimintoChattihuone() {
konst [viestit, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst pistorasia = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('viesti', (viesti) => {
 setMessages([...viestit, viesti]);
 });
 }, [viestit, pistorasia]);
konst handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('viesti', inputValue);
 setInputValue('');
 };
palata (




 {messages.map((viesti, i) => (
{viesti}</li>
 ))}
 </ul>


 tyyppi="teksti"
 arvo={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Lähetä">Lähetä</button>
 </form>
 </div>
 );
}
viedäoletuksena Chattihuone;

Tässä esimerkissä määrität a Chattihuone komponentti, joka käyttää socket.io-client kirjasto muodostaa yhteyden WebSocket-palvelimeen. Voit käyttää useState koukku käsitellä viestejä ja tiedon arvostusta.

Saatuaan uuden viestin, useEffect koukku rekisteröi kuuntelijan käynnistämään viestitapahtumapäivityksen viestiluetteloon. Tapahtumaviestin syöttöarvon tyhjentämiseksi ja lähettämiseksi on olemassa a käsitteleLähetä toiminto.

Sen jälkeen sekä lomake, jossa on syöttökenttä ja painike, että päivitetty viestiluettelo näkyvät näytöllä.

Jokaisen lomakkeen lähetyksen yhteydessä on pyydettävä käsitteleLähetä toiminto on väistämätön. Viestin toimittamiseen palvelimelle tämä menetelmä käyttää socketia.

7. Integrointi React Nativen kanssa mobiilikehitystä varten

React Local on järjestelmä paikallisten universaalien sovellusten rakentamiseen Reactin avulla, jotka muodostavat yhteyden iOS- ja Android-vaiheiden kannettavien sovellusten edistämiseksi.

React Nativen ja Reactin integroinnin avulla voit käyttää Reactin komponenttipohjaista suunnittelua ja uudelleenkäytettävää koodia mobiili- ja verkkoalustoilla. Tämä lyhentää mobiilisovellusten kehityssyklejä ja markkinoilletuloaikaa. React Native on suosittu kehys alkuperäisten mobiilisovellusten kehittämiseen, joka hyödyntää React-kirjastoa.

Esittelyssä tärkeä ohjelmointi ja kirjastot, kuten Node.js, Vastaa paikalliseen CLI: hen, ja Xcode tai Android Studio, on olennainen suunnittelijoille, jotka käsittelevät iOS: ää ja Androidia erikseen. Lopuksi yksinkertaisten React Native -komponenttien avulla kehittäjät voivat luoda kestäviä ja monipuolisia mobiilisovelluksia iOS- ja Android-alustoille.

Yhdistä React muiden tekniikoiden kanssa

React on suosittu ja tehokas kirjasto verkkosovellusten rakentamiseen. React on loistava vaihtoehto käyttöliittymien luomiseen, mutta sitä käytetään myös muiden teknologioiden kanssa tehostamaan sen ominaisuuksia.

Integroimalla Reactin näihin teknologioihin kehittäjät voivat luoda monimutkaisempia ja kehittyneempiä sovelluksia, jotka tarjoavat paremman käyttökokemuksen. React ja sen työkalujen ja kirjastojen ekosysteemi kattavat kaiken, mitä tarvitaan perussivuston tai monimutkaisen verkkosovelluksen luomiseen.