Što je React? - Kako to djeluje - Kako ga koristiti - Upotrebe i prednosti

Sadržaj:

Anonim

Pregled reakcije

React je jedna od JavaScript otvorenih izvora. Koristi se za izgradnju interaktivnih korisničkih sučelja. To je učinkovita, deklarativna i fleksibilna knjižnica. Bavi se komponentom V, tj. Prikazom Model-View-Controller-a (MVC). To nije cijeli okvir, već samo knjižnica sučelja. Omogućuje stvaranje ili izradu složenih korisničkih sučelja pomoću izoliranih i malih dijelova koda poznatih kao komponente. Glavna prednost komponenti je u tome što promjena bilo koje komponente ne utječe na čitavu aplikaciju.

To je razvio softver inženjer, Jordan Walke radeći na Facebooku. Facebook ih je rasporedio na njihov newsfeed i upotrijebio ga za poboljšanje njihovog korisničkog sučelja. Objavljeno je u svibnju 2013. godine.

Posebno se koristi za aplikacije na jednoj stranici. Njegova je svrha biti skalabilan, jednostavan i brz. To se može koristiti u kombinaciji s različitim JavaScript okvirima ili knjižnicama kao što je Angular JS.

Značajke React-a

Pogledajmo bitne i najzahtjevnije značajke Reacta:

1. JSX

JSX znači JavaScript XML. To je proširenje za sintaksu jezika JS. Pruža način da se generiraju komponente koristeći sintaksu sličnu HTML-u. React koristi JSX za pisanje svojih komponenti. Može koristiti i čisti JavaScript, ali više voli JSX. Koristi ga Babel, predprocesor za pretvaranje teksta sličnog HTML-u koji se nalazi u JavaScript datotekama u standardne JS objekte. HTML kôd može biti ugrađen u JavaScript da bi HTML kod bio više i lakše razumljiv i poboljšao performanse JavaScripta i učinio aplikaciju robusnom.

2. Model objekta virtualnog dokumenta

React napravi predmemoriju podataka u memoriji podataka, zatim izračuna razliku između prethodnog DOM-a i novog, a zatim ažurira izvršene promjene ili mutacije. Ažurira samo promjene, a ne cijelu aplikaciju. To pomaže povećati brzinu i performanse te smanjuje trošenje memorije.

3. Testabilnost

Reaktivni pogledi koriste se kao funkcije stanja u kojem država određuje ponašanje komponente. Stoga možemo izvršiti promjene u stanju, a zatim ga proslijediti prikazu ReactJS, a zatim odrediti izlaz i akcije, funkcije i događaji. To olakšava testiranje i uklanjanje pogrešaka.

4. SSR

To je stajanje na strani poslužitelja. Omogućuje unaprijed prikaz početnog stanja komponenti na strani poslužitelja. Preglednik može prikazati bez čekanja da se izvrši ili učita sve JavaScript. Zbog toga se web stranice brže učitavaju. Korisniku pomaže da pregledava web stranice čak i kad React još uvijek preuzima JavaScript, povezuje događaje ili stvara virtualni DOM na početku rada.

5. Jednosmjerno povezivanje podataka

Omogućuje jednosmjerni protok podataka, tj. Jednosmjerno povezivanje podataka. Zbog ove značajke postoji bolja kontrola nad aplikacijom. Zbog toga se stanje aplikacije mora nalaziti u određenim trgovinama i zbog toga su sve ostale komponente lagano povezane. To povećava fleksibilnost i učinkovitost aplikacije.

6. Jednostavnost

JSX datoteke čine aplikaciju jednostavnom i razumljivom. Za kodiranje se može koristiti standardni JavaScript, ali korištenje JSX-a olakšava. Nekoliko metoda životnog ciklusa i njegov pristup temeljen na komponentama pojednostavljuju učenje i izvršavanje.

7. Krivulja učenja

U usporedbi s drugim okvirima, krivulja učenja Reacta je niska. Početnici koji imaju osnovni programski jezik mogu lako naučiti reagirati.

Kako radi?

Kad je razvojni tim Facebooka napravio aplikacije na strani klijenta, ustanovio je da je Model objekta predmeta (DOM) spor. Da bi se brže postiglo, virtualni DOM koji je stablo DOM-a u JavaScript-u implementira se u React.

React djeluje na Virtual DOM. Ne manipulira dokumentom u pregledniku nakon što se promjene izvrše, napravi promjene na virtualnom DOM-u. Kada se virtualni DOM potpuno ažurira, tada ažurira DOM preglednika na najefikasniji mogući način. Virtualni DOM of React u potpunosti ostaje u sjećanju. Predstavlja DOM web preglednika, pa kada se napiše React komponenta, napravi se virtualna komponenta koju je jeftino stvoriti, a koja React pretvara u DOM. React je napravljen da se koristi u pregledniku, ali s Node.js može se koristiti i sa poslužiteljem.

Kako to koristimo?

Korištenje Reacta je jednostavno, uključujući uključivanje JS datoteke u HTML. Pogledajmo uporabu React-a jednostavnim primjerom:

Kodirati:


First React Code



ReactDOM. render( First Code, document. querySelector ('#application')
);



First React Code



ReactDOM. render( First Code, document. querySelector ('#application')
);



First React Code



ReactDOM. render( First Code, document. querySelector ('#application')
);

Čini se malo teško, ali je lako implementirati i učiti.

Tko koristi reagiranje?

React postaje popularan na današnjem tržištu i njegove značajke pomažu velikim kompanijama u poboljšanju njihovog iskustva i sučelja.

Internetski divovi poput Facebooka, Instagrama, Netflixa, New York Timesa, Yahoo Mail, Khan Academy, WhatsApp, Vivaldijevog preglednika, Codecademyja i Dropboxa koriste React na jedan ili drugi način. Sberbank Rusije je također koristila React o izradi web stranice njihove banke.

Mnoge web stranice poput github.com, reddit.com, outlook.live.com, bitbucket.org, account.godaddy.com i mnoge druge također koriste React.

Prednosti React-a

  • SEO prijateljski
  • Lako je stvoriti testne slučajeve za korisničko sučelje.
  • React komponente se mogu lako ponovo upotrijebiti.
  • Osigurava brže prikazivanje.
  • Otklanjanje pogrešaka je jednostavno.
  • Jednostavnost migracija.
  • Povećava produktivnost.
  • Pisanje komponenata je jednostavno.
  • Stabilan kod.
  • Korisna je skupina alata za razvojne programere.
  • Za razvoj mobilnih aplikacija dostupan je React native
  • Lako za naučiti.
  • Poboljšava performanse.

Nedostaci React-a

  • Visok tempo razvoja.
  • Loša dokumentacija.
  • Dodatna SEO gnjavaža.
  • Samo orijentirano na pogled.
  • Biblioteka React velike veličine.
  • Krivulja učenja za početnike.
  • Zahtijeva ručnu obradu promjena podataka.
  • U nekim slučajevima vam treba više koda.

Preporučeni članak

Ovo je vodič za Što je React. Ovdje smo razgovarali o konceptima, definiciji i razumijevanju s prednostom i nedostatkom Reacta. Možete i proći naše druge predložene članke da biste saznali više -

  1. Što je Agile programiranje?
  2. Što je multiithreading u javi?
  3. Primjene Raspberry Pi
  4. Što je JMS? | Definicija | Obrazloženje
  5. React Native vs React
  6. Stvaranje gumba stila u React Native