React on tuntud JavaScripti teek, mida saate kasutada mitmekülgsete veebirakenduste kasutajaliideste loomiseks. React on kohandatav ja saate seda kombineerida teiste tehnoloogiatega, et luua võimsamaid ja tõhusamaid rakendusi.

Õppige, kuidas integreerida Reacti erinevate tehnoloogiatega ja saate kasu mitmest allikast.

1. React + Redux

Redux on olekuhalduse raamatukogu, mida kasutatakse koos Reactiga. Redux hõlbustab tsentraliseeritud rakenduste olekuhaldust. Paljude olekutega keerukate rakenduste ehitamisel töötavad React ja Redux hästi koos.

Siin on näide Reduxi kasutamisest Reactiga:

importida Reageerige alates'reageeri';
importida { CreateStore } alates'redux';
importida { Pakkuja } alates'react-redux';
konst esialgne olek = { loendama: 0 };
funktsioonireduktor(olek = esialgne olek, tegevus) {
lüliti (action.type) {
juhtum'INCREMENT':
tagasi { loendama: olek.loendus + 1 };
juhtum'DECEMENT':
tagasi { loendama: state.count - 1 };
vaikimisi:
tagasi riik;
 }
}





instagram viewer

konstimportida Reageerige alates'reageeri';
importida { useQuery, gql } alates'@apollo/klient';
konst GET_USERS = gql`
 päring GetUsers {
 kasutajad {
 id
 nimi
 }
 }
;
funktsiooniKasutajad() {
konst { laadimine, viga, andmed } = useQuery (GET_USERS);
kui (laadimine) tagasi<lk>Laadimine...lk>;
kui (viga) tagasi<lk>Viga :(lk>;
tagasi (
store = createStore (redutseerija);
funktsiooniLoendur() {
konst count = useSelector(olek => osariik.count);
konst dispatch = useDispatch();
tagasi (


Loendus: {count}</p>
 saatmine({ tüüp: 'INCREMENT' })}>+</button>
 saatmine({ tüüp: 'DECEMENT' })}>-</button>
 </div>
 );
}
funktsiooniRakendus() {
tagasi (


 </Provider>
 );
}
eksportidavaikimisi Rakendus;

See näide loob Reduxi poe algolekuga 0. Seejärel tegeleb reduktorfunktsiooniga KASVU ja VÄHENDAMINE operatsioonid. Kood kasutab useSelector ja useDispatch konksud käimasoleva loenduse saamiseks ja tegevuste individuaalseks saatmiseks.

Lõpuks, et muuta pood kogu rakendusele juurdepääsetavaks, mähkige loenduri komponent pakkuja komponenti.

2. Serveripoolne renderdamine Next.js-iga

Next.js on arendusraamistik, mis optimeerib veebisaidi kiirust ja SEO taktikat, edastades HTML-i klientidele ja kasutades Reacti komponentide serveripoolne renderdamine.

Selle võimas tööriistakomplekt töötab koos Reactiga, pakkudes erakordset jõudlust ja kõrgeid positsioone otsingumootorites.

// pages/index.js
importida Reageerige alates'reageeri';
funktsiooniKodu() {
tagasi (


Tere, maailm!</h1>


See on serveri poolt renderdatud Reacti komponent.</p>
 </div>
 );
}
eksportidavaikimisi Kodu;

Selles mudelis iseloomustate Reacti komponenti nimega Kodu. Next.js loob selle komponendi sisuga staatilise HTML-lehe, kui see selle serveris renderdab. Kui leht saab kliendilt külastuse, saadab see kliendile HTML-i ja hüdreerib komponenti, võimaldades sellel toimida dünaamilise Reacti komponendina.

3. Andmete toomine GraphQL-iga

GraphQL on API-de päringukeel, mis pakub asjatundlikku, tugevat ja kohandatavat alternatiivi REST-ile. GraphQL-iga saate andmeid kiiremini kätte ja kasutajaliidest kiiremini värskendada.

See on näide GraphQL-i kasutamisest Reactiga:

importida Reageerige alates'reageeri';
importida { useQuery, gql } alates'@apollo/klient';
konst GET_USERS = gql`
 päring GetUsers {
 kasutajad {
 id
 nimi
 }
 }
;
funktsiooniKasutajad() {
konst { laadimine, viga, andmed } = useQuery (GET_USERS);
kui (laadimine) tagasi<lk>Laadimine...lk>;
kui (viga) tagasi<lk>Viga :(lk>;
tagasi (


 {data.users.map(kasutaja => (
{kasutaja.nimi}</li>
 ))}
 </ul>
 );
}
funktsiooniRakendus() {
tagasi (


Kasutajad</h1>

 </div>
 );
}
eksportidavaikimisi Rakendus;

See mudel nimetab useQuery funktsioonist @apollo/klient raamatukogu, et tuua GraphQL-i programmeerimisliidesest klientide ülevaade. Seejärel kuvatakse kasutajaliideses kasutajate loend.

4. Stiilimine CSS-in-JS-iga

CSS-in-JS on JavaScriptil põhinev meetod Reacti komponentide kujundamiseks. See muudab keerukate stiilitabelite haldamise lihtsamaks ja võimaldab kirjutada stiile modulaarses ja komponendipõhises stiilis.

Siin on näide selle kohta, kuidas kasutada CSS-in-JS-i koos Reactiga:

importida Reageerige alates'reageeri';
importida stiilis alates"stiilis komponendid";
konst Nupp = stiiliga.nupp`
 taustavärv: #007bff;
 värv: #fff;
 polsterdus: 10px 20px;
 piiri raadius: 5px;
 fondi suurus: 16px;
 kursor: kursor;
 &:hõljuma {
 taustavärv: #0069d9;
 }
;
funktsiooniRakendus() {
tagasi (


Klõpsake mind!</Button>
 </div>
 );
}
eksportidavaikimisi Rakendus;

See näide loob a stiiliga nupp komponenti kasutades stiilis funktsiooni. See määrab nupu kasutuskogemuse tooni, tekstitooni, pehmenduse, joone pühkmise, teksti mõõtme ja kursori.

Samuti on määratletud hõljutusolek, mis muudab taustavärvi, kui kasutaja hõljutab kursorit nupu kohal. Lõpuks renderdatakse nupp komponendi React abil.

5. Integreerimine D3-ga andmete visualiseerimiseks

D3 on andmetega manipuleerimise ja visualiseerimise JavaScripti teek. Reacti abil saate teha võimsaid ja interaktiivseid andmevisualisatsioone. Näide selle kohta, kuidas D3-d Reactiga kasutada, on järgmine:

importida Reageerida, { useRef, useEffect } alates'reageeri';
importida * nagu d3 alates'd3';
funktsiooniTulpdiagramm({ andmed }) {
konst ref = useRef();
 useEffect(() => {
konst svg = d3.select (ref.current);
konst laius = svg.attr('laius');
konst kõrgus = svg.attr('kõrgus');
konst x = d3.scaleBand()
 .domain (data.map((d) => d.silt))
 .range([0, laius])
 .padding(0.5);
konst y = d3.scaleLinear()
 .domain([0, d3.max (andmed, (d) => d.value)])
 .range([kõrgus, 0]);
 svg.selectAll('õige')
 .data (andmed)
 .sisenema()
 .append('õige')
 .attr('x', (d) => x (d.silt))
 .attr('y', (d) => y (d.väärtus))
 .attr('laius', x.bandwidth())
 .attr('kõrgus', (d) => kõrgus - y (d.väärtus))
 .attr('täida', '#007bff');
 }, [andmed]);
tagasi (
400}>
 {/* kirved lähevad siia */}
 </svg>
 );
}
eksportidavaikimisi Tulpdiagramm;

See kood määratleb a Tulpdiagramm komponent, mis aktsepteerib a andmeid prop eelmises koodilõigul. See kutsub useRef konks, et viidata SVG komponendile, mis kasutab seda kontuuri joonistamiseks.

Pärast seda renderdab see diagrammi tulbad ja määratleb skaalad useEffect() konks, mis kaardistab andmete väärtused ekraani koordinaatidega.

6. Reaalajas funktsionaalsuse lisamine WebSocketsi abil

WebSocketsi juurutamine loob täielikult toimiva kahesuunalise tee, mis võimaldab pidevat suhtlust kliendi ja serveri vahel. Need võimaldavad Reactil lisada veebirakendustele pidevat kasulikkust, näiteks arutelutahvleid, reaalajas värskendusi ja hoiatusi.

Reactiga kasutate WebSocketsi järgmisel viisil:

importida Reageerida, { useState, useEffect } alates'reageeri';
importida io alates'socket.io-client';
funktsiooniJututuba() {
konst [messages, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst pesa = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('sõnum', (sõnum) => {
 setMessages([...sõnumid, sõnum]);
 });
 }, [sõnumid, pesa]);
konst käepideEsita = (e) => {
 e.preventDefault();
 socket.emit('sõnum', inputValue);
 setInputValue('');
 };
tagasi (




 {messages.map((sõnum, st) => (
{sõnum}</li>
 ))}
 </ul>


 tüüp="tekst"
 väärtus={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Esita">Saada</button>
 </form>
 </div>
 );
}
eksportidavaikimisi Jututuba;

Selles näites määratlete a Jututuba komponent, mis kasutab socket.io-klient raamatukogu WebSocketi serveriga ühenduse loomiseks. Võite kasutada useState konks, et tulla toime sõnumite ja infohinnanguga.

Uue sõnumi saamisel useEffect konks registreerib kuulaja, et käivitada sõnumite loendis sõnumisündmuse värskendus. Sündmuse teate sisendväärtuse kustutamiseks ja saatmiseks on olemas a käepide Esita funktsiooni.

Seejärel kuvatakse ekraanil nii sisestusvälja ja nupuga vorm kui ka uuendatud sõnumiloend.

Iga vormi esitamise korral pöörduge käepide Esita funktsioon on vältimatu. Sõnumi serverisse edastamiseks kasutab see meetod pistikupesa.

7. Integreerimine React Native'iga mobiilside arendamiseks

React Local on süsteem kohalike universaalsete rakenduste loomiseks Reacti abil, mis ühendatakse iOS-i ja Androidi etappide kaasaskantavate rakenduste reklaamimiseks.

Kasutades React Native'i integreerimist Reactiga, saate kasutada Reacti komponendipõhist disaini ja korduvkasutatavat koodi mobiili- ja veebiplatvormidel. See vähendab mobiilirakenduse arendustsükleid ja turule jõudmise aega. React Native on populaarne raamistik kohalike mobiilirakenduste arendamiseks, mis kasutab Reacti teeki.

Tutvustame olulist programmeerimist ja teeke, nagu Node.js, Vastake kohalikule CLI-le, ja Xcode või Android Studio, on iOS-i ja Androidiga eraldi tegelevate disainerite jaoks ülioluline. Lõpuks võimaldavad lihtsad React Native komponendid arendajatel luua iOS-i ja Androidi platvormidele tugevaid ja funktsioonirikkaid mobiilirakendusi.

Ühendage React teiste tehnoloogiatega

React on populaarne ja tõhus raamatukogu veebirakenduste loomiseks. React on suurepärane võimalus kasutajaliideste loomiseks, kuid seda kasutatakse ka koos teiste tehnoloogiatega oma võimaluste suurendamiseks.

Integreerides Reacti nende tehnoloogiatega, saavad arendajad luua keerukamaid ja täiustatud rakendusi, mis pakuvad paremat kasutuskogemust. React ning selle tööriistade ja teekide ökosüsteem hõlmab kõike, mis on vajalik lihtsa veebisaidi või keeruka veebirakenduse loomiseks.