React je dobro poznata JavaScript biblioteka koju možete koristiti za izradu korisničkih sučelja za svestrane web aplikacije. React je prilagodljiv i možete ga kombinirati s drugim tehnologijama kako biste napravili moćnije i učinkovitije aplikacije.

Naučite kako integrirati React s različitim tehnologijama i dobit ćete prednosti iz više izvora.

1. React + Redux

Redux je biblioteka za upravljanje stanjem koja se koristi zajedno s Reactom. Redux olakšava centralizirano upravljanje stanjem aplikacije. Pri izradi složenih aplikacija s mnogo stanja, React i Redux dobro rade zajedno.

Evo ilustracije kako koristiti Redux s Reactom:

uvoz Reagirati iz'reagirati';
uvoz { createStore } iz'redux';
uvoz { Pružatelj } iz'react-redux';
konst početno stanje = { računati: 0 };
funkcijareduktor(stanje = početno stanje, radnja) {
sklopka (action.type) {
slučaj'POVEĆANJE':
povratak { računati: stanje.brojiti + 





instagram viewer
1 };
slučaj'DEKREMENT':
povratak { računati: state.count - 1 };
zadano:
povratak država;
 }
}

konstuvoz Reagirati iz'reagirati';
uvoz {useQuery, gql} iz'@apollo/klijent';
konst GET_USERS = gql`
 upit GetUsers {
 korisnici {
 iskaznica
 Ime
 }
 }
;
funkcijaKorisnici() {
konst { učitavanje, pogreška, podaci } = useQuery (GET_USERS);
ako (Učitavam) povratak<str>Učitavam...str>;
ako (greška) povratak<str>Greška :(str>;
povratak (
store = createStore (reduktor);
funkcijaBrojač() {
konst count = useSelector(država => država.count);
konst otprema = useDispatch();
povratak (


Broj: {count}</p>
 otprema ({ tip: 'POVEĆANJE' })}>+</button>
 otprema ({ tip: 'DEKREMENT' })}>-</button>
 </div>
 );
}
funkcijaaplikacija() {
povratak (


 </Provider>
 );
}
izvozzadano aplikacija;

Ovaj primjer stvara Redux trgovinu s početnim stanjem 0. Funkcija reduktora tada obrađuje POVEĆANJE i SMANJIVANJE operacije. Kod koristi useSelector i useDispatch kuke za dobivanje tekućeg brojanja i slanje aktivnosti pojedinačno.

Na kraju, da bi trgovina bila dostupna cijeloj aplikaciji, zamotajte komponentu brojača u komponentu pružatelja usluga.

2. Renderiranje na strani poslužitelja s Next.js

Next.js je razvojni okvir koji optimizira brzinu web stranice i SEO taktike prijenosom HTML-a klijentima i korištenjem renderiranje React komponenti na strani poslužitelja.

Njegov moćni skup alata radi uz React, pružajući iznimne performanse i visoko rangiranje u tražilicama.

// stranice/index.js
uvoz Reagirati iz'reagirati';
funkcijaDom() {
povratak (


Zdravo, svijete!</h1>


Ovo je React komponenta koju je prikazao poslužitelj.</p>
 </div>
 );
}
izvozzadano Dom;

U ovom modelu karakterizirate komponentu React tzv Dom. Next.js stvara statičnu HTML stranicu sa sadržajem ove komponente kada je renderira na poslužitelju. Kada stranica primi posjet od klijenta, ona će poslati HTML klijentu i hidratizirati komponentu, omogućujući joj da funkcionira kao dinamička React komponenta.

3. Dohvaćanje podataka s GraphQL-om

GraphQL je jezik upita za API-je koji nudi vještu, jaku i prilagodljivu alternativu REST-u. S GraphQL-om možete brže dobiti podatke i brže ažurirati korisničko sučelje.

Ovo je ilustracija načina korištenja GraphQL-a s Reactom:

uvoz Reagirati iz'reagirati';
uvoz {useQuery, gql} iz'@apollo/klijent';
konst GET_USERS = gql`
 upit GetUsers {
 korisnici {
 iskaznica
 Ime
 }
 }
;
funkcijaKorisnici() {
konst { učitavanje, pogreška, podaci } = useQuery (GET_USERS);
ako (Učitavam) povratak<str>Učitavam...str>;
ako (greška) povratak<str>Greška :(str>;
povratak (


 {data.users.map(korisnik => (
{user.name}</li>
 ))}
 </ul>
 );
}
funkcijaaplikacija() {
povratak (


Korisnici</h1>

 </div>
 );
}
izvozzadano aplikacija;

Ovaj model naziva useQuery funkcija iz @apollo/klijent knjižnica za donošenje pregleda klijenata iz programskog sučelja GraphQL. Popis korisnika tada se prikazuje u korisničkom sučelju.

4. Stiliziranje s CSS-in-JS

CSS-in-JS je metoda zasnovana na JavaScriptu za stiliziranje komponenti Reacta. Olakšava upravljanje složenim tablicama stilova i omogućuje pisanje stilova u modularnom stilu koji se temelji na komponentama.

Evo ilustracije kako koristiti CSS-in-JS s Reactom:

uvoz Reagirati iz'reagirati';
uvoz stilizirani iz'styled-components';
konst Button = styled.button`
 boja pozadine: #007bff;
 boja: #fff;
 padding: 10px 20px;
 radijus granice: 5px;
 veličina fonta: 16px;
 kursor: pokazivač;
 &:hover {
 boja pozadine: #0069d9;
 }
;
funkcijaaplikacija() {
povratak (


Kliknite me!</Button>
 </div>
 );
}
izvozzadano aplikacija;

Ovaj primjer stvara a stilizirani gumb komponenta koja koristi stilizirani funkcija. Definira ton doživljaja gumba, ton teksta, ublažavanje, pomicanje linije, dimenziju teksta i kursor.

Također je definirano stanje lebdenja koje mijenja boju pozadine kada korisnik lebdi iznad gumba. Gumb se konačno renderira pomoću komponente React.

5. Integracija s D3 za vizualizaciju podataka

D3 je JavaScript biblioteka za manipulaciju podacima i vizualizaciju. Pomoću Reacta možete napraviti snažne i interaktivne vizualizacije podataka. Ilustracija kako koristiti D3 s Reactom je sljedeća:

uvoz Reagiraj, {useRef, useEffect} iz'reagirati';
uvoz * kao d3 iz'd3';
funkcijaGrafikon({ podaci }) {
konst ref = useRef();
 useEffect(() => {
konst svg = d3.select (ref.current);
konst širina = svg.attr('širina');
konst visina = svg.attr('visina');
konst x = d3.scaleBand()
 .domena (data.map((d) => d.oznaka))
 .raspon([0, širina])
 .padding(0.5);
konst y = d3.scaleLinear()
 .domena([0, d3.max (podaci, (d) => d.vrijednost)])
 .raspon([visina, 0]);
 svg.selectAll('pravo')
 .data (podaci)
 .Unesi()
 .dodati('pravo')
 .attr('x', (d) => x (d.oznaka))
 .attr('y', (d) => y (d.vrijednost))
 .attr('širina', x.bandwidth())
 .attr('visina', (d) => visina - y (d.vrijednost))
 .attr('ispuniti', '#007bff');
 }, [podaci]);
povratak (
400}>
 {/* sjekire idu ovdje */}
 </svg>
 );
}
izvozzadano Grafikon;

Ovaj kod definira a Grafikon komponenta koja prihvaća a podaci prop u prethodnom isječku koda. Poziva se upotrebaRef kuka za izradu reference na SVG komponentu koja će je koristiti za crtanje obrisa.

Nakon toga renderira stupce grafikona i definira razmjere pomoću useEffect() kuka, koji preslikava vrijednosti podataka u koordinate zaslona.

6. Dodavanje funkcionalnosti u stvarnom vremenu s WebSockets

Implementacija WebSockets uspostavlja potpuno operativan dvosmjerni put koji omogućuje kontinuiranu komunikaciju između klijenta i poslužitelja. Omogućuju Reactu da doda kontinuiranu korisnost web aplikacijama, na primjer, ploče za raspravu, ažuriranja uživo i upozorenja.

WebSockets koristite na sljedeći način s Reactom:

uvoz Reagiraj, {useState, useEffect} iz'reagirati';
uvoz io iz'socket.io-client';
funkcijaSoba za razgovore() {
konst [poruke, setPoruke] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst utičnica = io(' http://localhost: 3001');
 useEffect(() => {
 utičnica.on('poruka', (poruka) => {
 setMessages([...poruke, poruka]);
 });
 }, [poruke, utičnica]);
konst handleSubmit = (e) => {
 e.preventDefault();
 utičnica.emit('poruka', ulazna vrijednost);
 setInputValue('');
 };
povratak (




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


 vrsta="tekst"
 vrijednost={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"podnijeti">Pošalji</button>
 </form>
 </div>
 );
}
izvozzadano Soba za razgovore;

U ovom primjeru definirate a Soba za razgovore komponenta koja koristi utičnica.io-klijent biblioteku za povezivanje s WebSocket poslužiteljem. Možete koristiti useState kuka za rješavanje niza poruka i poštovanja informacija.

Po primitku nove poruke, useEffect kuka registrira slušatelja za pokretanje ažuriranja događaja poruke na popisu poruka. Za brisanje i slanje ulazne vrijednosti za poruku o događaju, postoji a rukovanjePošalji funkcija.

Naknadno će se na ekranu prikazati obrazac s poljem za unos i gumbom, kao i ažurirani popis poruka.

Sa svakim slanjem obrasca, pozivanje na rukovanjePošalji funkcija je neizbježna. Za isporuku poruke poslužitelju, ova metoda koristi utičnicu.

7. Integracija s React Native za mobilni razvoj

React Local je sustav za izgradnju lokalnih univerzalnih aplikacija pomoću Reacta, koje se povezuju za promoviranje prijenosnih aplikacija za iOS i Android faze.

Koristeći integraciju React Native s Reactom, možete koristiti dizajn temeljen na komponentama i višekratni kod Reacta na mobilnim i web platformama. To smanjuje razvojne cikluse mobilnih aplikacija i vrijeme izlaska na tržište. React Native popularan je okvir za razvoj nativnih mobilnih aplikacija koje koriste biblioteku React.

Predstavljamo vitalno programiranje i knjižnice, poput Node.js, Odgovori Lokalni CLI, i Xcode ili Android Studio, temeljna je za dizajnere koji se zasebno bave iOS-om i Androidom. Konačno, jednostavne React Native komponente omogućuju programerima stvaranje robusnih mobilnih aplikacija bogatih značajkama za iOS i Android platforme.

Kombinirajte React s drugim tehnologijama

React je popularna i učinkovita biblioteka za izradu online aplikacija. React je izvrsna opcija za kreiranje korisničkih sučelja, ali se također koristi s drugim tehnologijama za povećanje njegovih mogućnosti.

Integrirajući React s ovim tehnologijama, programeri mogu stvoriti složenije i naprednije aplikacije koje nude bolje korisničko iskustvo. React i njegov ekosustav alata i biblioteka pokrivaju sve što je potrebno za izradu osnovne web stranice ili složene web aplikacije.