React je dobro znana knjižnica JavaScript, ki jo lahko uporabite za izdelavo uporabniških vmesnikov za vsestranske spletne aplikacije. React je prilagodljiv in ga lahko kombinirate z drugimi tehnologijami, da ustvarite zmogljivejše in učinkovitejše aplikacije.

Naučite se integrirati React z različnimi tehnologijami in pridobili boste koristi iz več virov.

1. React + Redux

Redux je knjižnica za upravljanje stanja, ki se uporablja v povezavi z Reactom. Redux omogoča centralizirano upravljanje stanja aplikacij. Pri gradnji kompleksnih aplikacij s številnimi stanji React in Redux dobro delujeta skupaj.

Tukaj je ilustracija uporabe Reduxa z Reactom:

uvoz Reagiraj od'reagirati';
uvoz { createStore } od'redux';
uvoz {Ponudnik} od'react-redux';
konst začetniState = { štetje: 0 };
funkcijoreduktor(stanje = začetno stanje, dejanje) {
stikalo (action.type) {
Ovitek'POVEČANJE':
vrnitev { štetje





instagram viewer
: stanje.štetje + 1 };
Ovitek'DEKREMENT':
vrnitev { štetje: state.count - 1 };
privzeto:
vrnitev država;
 }
}

konstuvoz Reagiraj od'reagirati';
uvoz {useQuery, gql} od'@apollo/klient';
konst GET_USERS = gql`
 poizvedba GetUsers {
 uporabniki {
 id
 ime
 }
 }
;
funkcijoUporabniki() {
konst { nalaganje, napaka, podatki } = useQuery (GET_USERS);
če (nalaganje) vrnitev<str>Nalaganje...str>;
če (napaka) vrnitev<str>Napaka :(str>;
vrnitev (
store = createStore (reduktor);
funkcijoštevec() {
konst count = useSelector(država => stanje.štetje);
konst dispatch = useDispatch();
vrnitev (


Število: {count}</p>
 odprema({ vrsta: 'POVEČANJE' })}>+</button>
 odprema({ vrsta: 'DEKREMENT' })}>-</button>
 </div>
 );
}
funkcijoaplikacija() {
vrnitev (


 </Provider>
 );
}
izvozprivzeto aplikacija;

Ta primer ustvari trgovino Redux z začetnim stanjem 0. Funkcija reduktorja nato obravnava POVEČANJE in ZMANJŠANJE operacije. Koda uporablja useSelector in useDispatch kljukice, da dobite tekoče štetje in posamezno odpošljete dejavnosti.

Nazadnje, da bo trgovina dostopna celotni aplikaciji, ovijte komponento števca v komponento ponudnika.

2. Upodabljanje na strani strežnika z Next.js

Next.js je razvojno ogrodje, ki optimizira hitrost spletnega mesta in SEO taktike s prenosom HTML odjemalcem in uporabo upodabljanje komponent React na strani strežnika.

Njegov zmogljiv nabor orodij deluje skupaj z Reactom in zagotavlja izjemno zmogljivost in visoko uvrstitev v iskalnikih.

// strani/index.js
uvoz Reagiraj od'reagirati';
funkcijodomov() {
vrnitev (


Pozdravljen, svet!</h1>


To je strežniško upodobljena komponenta React.</p>
 </div>
 );
}
izvozprivzeto Domov;

V tem modelu označite imenovano komponento React domov. Next.js ustvari statično stran HTML z vsebino te komponente, ko jo upodobi na strežniku. Ko stran prejme obisk odjemalca, pošlje HTML odjemalcu in hidrira komponento, kar ji omogoči delovanje kot dinamična komponenta React.

3. Pridobivanje podatkov z GraphQL

GraphQL je poizvedovalni jezik za API-je, ki ponuja spretno, močno in prilagodljivo alternativo REST-u. Z GraphQL lahko hitreje pridobite podatke in hitreje posodobite uporabniški vmesnik.

To je ponazoritev načina uporabe GraphQL z Reactom:

uvoz Reagiraj od'reagirati';
uvoz {useQuery, gql} od'@apollo/klient';
konst GET_USERS = gql`
 poizvedba GetUsers {
 uporabniki {
 id
 ime
 }
 }
;
funkcijoUporabniki() {
konst { nalaganje, napaka, podatki } = useQuery (GET_USERS);
če (nalaganje) vrnitev<str>Nalaganje...str>;
če (napaka) vrnitev<str>Napaka :(str>;
vrnitev (


 {data.users.map(uporabnik => (
{uporabniško.ime}</li>
 ))}
 </ul>
 );
}
funkcijoaplikacija() {
vrnitev (


Uporabniki</h1>

 </div>
 );
}
izvozprivzeto aplikacija;

Ta model se imenuje useQuery funkcijo od @apollo/stranka knjižnico, ki prinaša pregled odjemalcev iz programskega vmesnika GraphQL. Seznam uporabnikov se nato prikaže v uporabniškem vmesniku.

4. Oblikovanje s CSS-in-JS

CSS-in-JS je metoda, ki temelji na JavaScriptu za oblikovanje komponent React. Omogoča preprostejše upravljanje zapletenih slogovnih listov in vam omogoča pisanje slogov v modularnem slogu in slogu, ki temelji na komponentah.

Tukaj je ilustracija uporabe CSS-in-JS z Reactom:

uvoz Reagiraj od'reagirati';
uvoz stilizirano od'styled-components';
konst Gumb = styled.button`
 Barva ozadja: #007bff;
 barva: #fff;
 oblazinjenje: 10px 20px;
 mejni polmer: 5px;
 velikost pisave: 16px;
 kazalec: kazalec;
 &:hover {
 Barva ozadja: #0069d9;
 }
;
funkcijoaplikacija() {
vrnitev (


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

Ta primer ustvari a oblikovan gumb komponento, ki uporablja stilizirano funkcijo. Določa ton gumba, ton besedila, blaženje, pomik črte, dimenzijo besedila in kazalec.

Definirano je tudi stanje lebdenja, ki spremeni barvo ozadja, ko uporabnik lebdi nad gumbom. Gumb je končno upodobljen s komponento React.

5. Integracija z D3 za vizualizacijo podatkov

D3 je knjižnica JavaScript za obdelavo podatkov in vizualizacijo. Z Reactom lahko naredite zmogljive in interaktivne vizualizacije podatkov. Ilustracija uporabe D3 z Reactom je naslednja:

uvoz Reagiraj, {useRef, useEffect} od'reagirati';
uvoz * kot d3 od'd3';
funkcijoStolpični diagram({ podatki }) {
konst ref = useRef();
 useEffect(() => {
konst svg = d3.select (ref.current);
konst širina = svg.attr('premer');
konst višina = svg.attr('višina');
konst x = d3.scaleBand()
 .domain (data.map((d) => d.label))
 .razpon([0, premer])
 .padding(0.5);
konst y = d3.scaleLinear()
 .domena([0, d3.max (podatki, (d) => d.vrednost)])
 .razpon([višina, 0]);
 svg.selectAll('rect')
 .data (podatki)
 .enter()
 .priloži('rect')
 .attr('x', (d) => x (d.label))
 .attr('y', (d) => y (d.vrednost))
 .attr('premer', x.bandwidth())
 .attr('višina', (d) => višina - y (d.vrednost))
 .attr('fill', '#007bff');
 }, [podatki]);
vrnitev (
400}>
 {/* sem gredo sekire */}
 </svg>
 );
}
izvozprivzeto Stolpični diagram;

Ta koda opredeljuje a Stolpični diagram komponenta, ki sprejema a podatke prop v prejšnjem delčku kode. Pokliče useRef kavelj, da se sklicuje na komponento SVG, ki jo bo uporabila za risanje obrisa.

Nato upodobi palice grafikona in določi lestvice z kavelj useEffect()., ki preslika vrednosti podatkov v koordinate zaslona.

6. Dodajanje funkcionalnosti v realnem času z WebSockets

Implementacija WebSockets vzpostavi popolnoma delujočo dvosmerno pot, ki omogoča neprekinjeno komunikacijo med odjemalcem in strežnikom. Omogočajo Reactu dodajanje nenehne uporabnosti spletnim aplikacijam, na primer deskam za razprave, posodobitvam v živo in opozorilom.

WebSockets z Reactom uporabljate na naslednji način:

uvoz Odziv, {useState, useEffect} od'reagirati';
uvoz io od'socket.io-client';
funkcijoKlepetalnica() {
konst [sporočila, setMessages] = useState([]);
konst [inputValue, setInputValue] = useState('');
konst vtičnica = io(' http://localhost: 3001');
 useEffect(() => {
 socket.on('sporočilo', (sporočilo) => {
 setMessages([...sporočila, sporočilo]);
 });
 }, [sporočila, vtičnica]);
konst handleSubmit = (e) => {
 e.preventDefault();
 socket.emit('sporočilo', vhodnaVrednost);
 setInputValue('');
 };
vrnitev (




 {messages.map((sporočilo, i) => (
{sporočilo}</li>
 ))}
 </ul>


 vrsta="besedilo"
 vrednost={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"oddaj">Pošlji</button>
 </form>
 </div>
 );
}
izvozprivzeto Klepetalnica;

V tem primeru definirate a Klepetalnica komponento, ki uporablja odjemalec socket.io knjižnico za povezavo s strežnikom WebSocket. Lahko uporabite useState kavelj za obravnavo niza sporočil in vrednotenja informacij.

Po prejemu novega sporočila se useEffect hook registrira poslušalca, da sproži posodobitev dogodka sporočila na seznamu sporočil. Če želite počistiti in poslati vhodno vrednost za sporočilo o dogodku, obstaja a handleSubmit funkcijo.

Nato se na zaslonu prikažeta obrazec z vnosnim poljem in gumbom ter posodobljen seznam sporočil.

Z vsako oddajo obrazca pokličite handleSubmit funkcija je neizogibna. Za dostavo sporočila strežniku ta metoda uporablja vtičnico.

7. Integracija z React Native za mobilni razvoj

React Local je sistem za gradnjo lokalnih univerzalnih aplikacij z uporabo Reacta, ki se povezujejo za promocijo prenosnih aplikacij za stopnje iOS in Android.

Z integracijo React Native z Reactom lahko uporabite zasnovo, ki temelji na komponentah, in kodo React za večkratno uporabo na mobilnih in spletnih platformah. To skrajša cikle razvoja mobilnih aplikacij in čas do trženja. React Native je priljubljeno ogrodje za razvoj domačih mobilnih aplikacij, ki uporablja knjižnico React.

Predstavljamo bistveno programiranje in knjižnice, kot je Node.js, Odgovorite na lokalni CLI, in Xcode oz Android Studio, je temeljnega pomena za oblikovalce, ki se ukvarjajo z iOS in Android ločeno. Končno preproste komponente React Native omogočajo razvijalcem, da ustvarijo robustne in s funkcijami bogate mobilne aplikacije za platformi iOS in Android.

Združite React z drugimi tehnologijami

React je zelo priljubljena in učinkovita knjižnica za izdelavo spletnih aplikacij. React je odlična možnost za ustvarjanje uporabniških vmesnikov, vendar se uporablja tudi z drugimi tehnologijami za povečanje njegovih zmogljivosti.

Z integracijo Reacta s temi tehnologijami lahko razvijalci ustvarijo bolj zapletene in napredne aplikacije, ki ponujajo boljšo uporabniško izkušnjo. React in njegov ekosistem orodij in knjižnic pokrivajo vse, kar je potrebno za ustvarjanje osnovnega spletnega mesta ali kompleksne spletne aplikacije.