React ir labi zināma JavaScript bibliotēka, ko varat izmantot, lai izveidotu lietotāja interfeisus daudzpusīgām tīmekļa lietojumprogrammām. React ir pielāgojams, un to var apvienot ar citām tehnoloģijām, lai izveidotu jaudīgākas un efektīvākas lietotnes.

Uzziniet, kā integrēt React ar dažādām tehnoloģijām, un jūs gūsit priekšrocības no vairākiem avotiem.

1. React + Redux

Redux ir valsts pārvaldības bibliotēka, ko izmanto kopā ar React. Redux atvieglo centralizētu lietojumprogrammu stāvokļa pārvaldību. Veidojot sarežģītas lietojumprogrammas ar daudziem stāvokļiem, React un Redux labi darbojas kopā.

Šeit ir ilustrācija, kā lietot Redux ar React:

imports Reaģēt no'reaģēt';
imports { CreateStore } no"redux";
imports { nodrošinātājs } no'react-redux';
konst sākotnējāState = { skaitīt: 0 };
funkcijureduktors(stāvoklis = sākotnējaisState, darbība) {
slēdzis (darbība.veids) {





instagram viewer

lietu'INCREMENT':
atgriezties { skaitīt: stāvoklis.skaits + 1 };
lietu'DECREMENT':
atgriezties { skaitīt: state.count - 1 };
noklusējuma:
atgriezties Valsts;
 }
}

konstimports Reaģēt no'reaģēt';
imports { useQuery, gql } no'@apollo/klients';
konst GET_USERS = gql`
 vaicājums GetUsers {
 lietotāji {
 id
 nosaukums
 }
 }
;
funkcijuLietotāji() {
konst { ielāde, kļūda, dati } = useQuery (GET_USERS);
ja (ielādē) atgriezties<lpp>Notiek ielāde...lpp>;
ja (kļūda) atgriezties<lpp>Kļūda :(lpp>;
atgriezties (
veikals = createStore (reducētājs);
funkcijuSkaitītājs() {
konst count = useSelector(Valsts => state.count);
konst dispatch = useDispatch();
atgriezties (


Skaits: {count}</p>
 nosūtīšana({ veids: 'INCREMENT' })}>+</button>
 nosūtīšana({ veids: 'DECREMENT' })}>-</button>
 </div>
 );
}
funkcijuApp() {
atgriezties (


 </Provider>
 );
}
eksportētnoklusējuma Lietotne;

Šajā piemērā tiek izveidots Redux veikals ar sākotnējo stāvokli 0. Pēc tam to apstrādā reduktora funkcija PIEAUGUMS un SAMAZINĀJUMS operācijas. Kods izmanto useSelector un useDispatch āķi, lai iegūtu notiekošo uzskaiti un nosūtītu darbības atsevišķi.

Visbeidzot, lai veikals būtu pieejams visai lietojumprogrammai, ietiniet skaitītāja komponentu nodrošinātāja komponentā.

2. Servera puses renderēšana, izmantojot Next.js

Next.js ir izstrādes ietvars, kas optimizē vietnes ātrumu un SEO taktika, pārsūtot HTML klientiem un izmantojot React komponentu atveidošana servera pusē.

Tā jaudīgais rīku komplekts darbojas kopā ar React, nodrošinot izcilu veiktspēju un augstu meklētājprogrammu klasifikāciju.

// pages/index.js
imports Reaģēt no'reaģēt';
funkcijuMājas() {
atgriezties (


Sveika, pasaule!</h1>


Šis ir servera atveidots React komponents.</p>
 </div>
 );
}
eksportētnoklusējuma Mājas;

Šajā modelī jūs raksturojat React komponentu, ko sauc Mājas. Next.js izveido statisku HTML lapu ar šī komponenta saturu, kad tas atveido to serverī. Kad lapa saņem klienta apmeklējumu, tā klientam nosūtīs HTML un hidratēs komponentu, ļaujot tai darboties kā dinamiskam React komponentam.

3. Datu ienešana ar GraphQL

GraphQL ir API vaicājumu valoda, kas piedāvā prasmīgu, spēcīgu un pielāgojamu alternatīvu REST. Izmantojot GraphQL, varat ātrāk iegūt datus un ātrāk atjaunināt lietotāja saskarni.

Šis ir GraphQL izmantošanas ar React ilustrācija:

imports Reaģēt no'reaģēt';
imports { useQuery, gql } no'@apollo/klients';
konst GET_USERS = gql`
 vaicājums GetUsers {
 lietotāji {
 id
 nosaukums
 }
 }
;
funkcijuLietotāji() {
konst { ielāde, kļūda, dati } = useQuery (GET_USERS);
ja (ielādē) atgriezties<lpp>Notiek ielāde...lpp>;
ja (kļūda) atgriezties<lpp>Kļūda :(lpp>;
atgriezties (


 {data.users.map(lietotājs => (
{user.name}</li>
 ))}
 </ul>
 );
}
funkcijuApp() {
atgriezties (


Lietotāji</h1>

 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šis modelis tiek saukts par useQuery funkcija no @apollo/klients bibliotēku, lai no GraphQL programmēšanas saskarnes parādītu visu klientu sarakstu. Pēc tam lietotāju saraksts tiek parādīts lietotāja saskarnē.

4. Stils ar CSS-in-JS

CSS-in-JS ir uz JavaScript balstīta metode React komponentu veidošanai. Tas atvieglo sarežģītu stilu lapu pārvaldību un ļauj rakstīt stilus moduļu un komponentu stilā.

Šeit ir ilustrācija, kā izmantot CSS-in-JS ar React:

imports Reaģēt no'reaģēt';
imports stilizēts no'stilizēti komponenti';
konst Poga = styled.button`
 fona krāsa: #007bff;
 krāsa: #fff;
 polsterējums: 10px 20px;
 robežas rādiuss: 5px;
 fonta izmērs: 16px;
 kursors: rādītājs;
 &:hover {
 fona krāsa: #0069d9;
 }
;
funkcijuApp() {
atgriezties (


Noklikšķiniet uz manis!</Button>
 </div>
 );
}
eksportētnoklusējuma Lietotne;

Šis piemērs rada a veidota poga komponents, izmantojot stilizēts funkciju. Tas nosaka pogas lietošanas toni, teksta toni, amortizāciju, līnijas slaucīšanu, teksta izmēru un kursoru.

Ir noteikts arī kursora novietošanas stāvoklis, kas maina fona krāsu, kad lietotājs virza kursoru virs pogas. Poga beidzot tiek atveidota, izmantojot React komponentu.

5. Integrēšana ar D3 datu vizualizācijai

D3 ir datu manipulācijas un vizualizācijas JavaScript bibliotēka. Izmantojot React, varat izveidot jaudīgas un interaktīvas datu vizualizācijas. Ilustrācija, kā lietot D3 ar React, ir šāda:

imports Reaģēt, { useRef, useEffect } no'reaģēt';
imports * kā d3 no'd3';
funkcijuJoslu diagramma({dati}) {
konst ref = useRef();
 useEffect(() => {
konst svg = d3.select (ref.current);
konst platums = svg.attr('platums');
konst augstums = svg.attr('augstums');
konst x = d3.scaleBand()
 .domain (data.map((d) => d.label))
 .range([0, platums])
 .padding(0.5);
konst y = d3.scaleLinear()
 .domain([0, d3.max (dati, (d) => d.value)])
 .range([augstums, 0]);
 svg.selectAll('pareizi')
 .data (dati)
 .enter()
 .append('pareizi')
 .attr('x', (d) => x (d.label))
 .attr('y', (d) => y (d.vērtība))
 .attr('platums', x.joslas platums())
 .attr('augstums', (d) => augstums — y (d.vērtība))
 .attr('aizpildīt', '#007bff');
 }, [dati]);
atgriezties (
400}>
 {/* cirvji iet šeit */}
 </svg>
 );
}
eksportētnoklusējuma Joslu diagramma;

Šis kods definē a Joslu diagramma komponents, kas pieņem a datus iepriekšējā koda fragmentā. To sauc par useRef āķis, lai sniegtu atsauci uz SVG komponentu, kas to izmantos kontūras zīmēšanai.

Pēc tam tas atveido diagrammas joslas un definē skalas ar useEffect() āķis, kas kartē datu vērtības ar ekrāna koordinātām.

6. Reāllaika funkcionalitātes pievienošana, izmantojot WebSockets

Ieviešot WebSockets, tiek izveidots pilnībā funkcionējošs divvirzienu ceļš, kas nodrošina nepārtrauktu saziņu starp klientu un serveri. Tie ļauj React nepārtraukti papildināt tīmekļa lietojumprogrammas, piemēram, diskusiju dēļus, tiešsaistes atjauninājumus un brīdinājumus.

Izmantojot React, jūs izmantojat WebSockets šādā veidā:

imports Reaģēt, { useState, useEffect } no'reaģēt';
imports io no'socket.io-client';
funkcijuTērzēšanas telpa() {
konst [ziņas, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst ligzda = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('ziņa', (ziņa) => {
 setMessages([...ziņas, ziņa]);
 });
 }, [ziņas, ligzda]);
konst HandSubmit = (e) => {
 e.preventDefault();
 socket.emit('ziņa', inputValue);
 setInputValue('');
 };
atgriezties (




 {ziņas.map((ziņa, t.i) => (
{ziņa}</li>
 ))}
 </ul>


 tips="teksts"
 vērtība={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Iesniegt">Sūtīt</button>
 </form>
 </div>
 );
}
eksportētnoklusējuma Tērzēšanas istaba;

Šajā piemērā jūs definējat a Tērzēšanas telpa komponents, kas izmanto socket.io-client bibliotēka, lai izveidotu savienojumu ar WebSocket serveri. Jūs varat izmantot useState āķis, lai tiktu galā ar ziņojumu un informācijas cieņu.

Saņemot jaunu ziņojumu, useEffect hook reģistrē klausītāju, lai aktivizētu ziņojuma notikuma atjauninājumu ziņojumu sarakstā. Lai notīrītu un nosūtītu notikuma ziņojuma ievades vērtību, pastāv a rokturisIesniegt funkciju.

Pēc tam ekrānā tiks parādīta gan forma ar ievades lauku un pogu, gan atjauninātais ziņojumu saraksts.

Ar katru veidlapas iesniegšanu, aicinot rokturisIesniegt funkcija ir neizbēgama. Lai nosūtītu ziņojumu uz serveri, šī metode izmanto ligzdu.

7. Integrācija ar React Native mobilajai attīstībai

React Local ir sistēma lokālu universālu lietojumprogrammu izveidei, izmantojot React, kas savienojas, lai reklamētu pārnēsājamas lietojumprogrammas iOS un Android posmiem.

Izmantojot React Native integrāciju ar React, varat izmantot uz komponentiem balstītu React dizainu un atkārtoti lietojamu kodu mobilajās un tīmekļa platformās. Tas samazina mobilo lietotņu izstrādes ciklus un laiku, kas nepieciešams, lai tas nonāktu tirgū. React Native ir populārs ietvars vietējo mobilo lietotņu izstrādei, kas izmanto React bibliotēku.

Iepazīstinām ar svarīgu programmēšanu un bibliotēkām, piemēram Node.js, Atbildiet uz vietējo CLI, un Xcode vai Android Studio, ir būtiski svarīgi dizaineriem, kas nodarbojas ar iOS un Android atsevišķi. Visbeidzot, vienkāršie React Native komponenti ļauj izstrādātājiem izveidot stabilas un ar funkcijām bagātas mobilās lietojumprogrammas iOS un Android platformām.

Apvienojiet React ar citām tehnoloģijām

React ir iecienīta un efektīva bibliotēka tiešsaistes lietotņu veidošanai. React ir lieliska iespēja izveidot lietotāja saskarnes, taču tā tiek izmantota arī ar citām tehnoloģijām, lai palielinātu tās iespējas.

Integrējot React ar šīm tehnoloģijām, izstrādātāji var izveidot sarežģītākas un uzlabotas lietotnes, kas piedāvā labāku lietotāja pieredzi. React un tās rīku un bibliotēku ekosistēma aptver visu, kas nepieciešams pamata tīmekļa vietnes vai sarežģītas tīmekļa lietojumprogrammas izveidei.