Reagirajte funkcionalne komponente, rekviziti i JSX - Vodič za početnike React.js-a

React je jedna od najpopularnijih JavaScript knjižnica za izgradnju korisničkih sučelja.

Ako želite postati front-end programer ili pronaći posao za web razvoj, vjerojatno bi vam koristilo dubinsko učenje React-a.

U ovom ćete postu naučiti neke od osnova React-a poput stvaranja komponente, JSX sintakse i Propsa. Ako nemate iskustva sa Reactom ili ga nemate previše, ovaj je post za vas.

Za početak, evo kako možete instalirati React.

Što je JSX?

Prvo što ćete shvatiti nakon instalacije vašeg prvog React projekta je da JavaScript funkcija vraća neki HTML kôd:

function App() { return ( 

Edit src/App.js and save to reload.

); }

Ovo je posebno i važeće sintaksno proširenje za React koje se naziva JSX (JavaScript XML). Obično u projektima povezanim s frontendom HTML, CSS i JavaScript kod držimo u odvojenim datotekama. Međutim, u Reactu ovo djeluje malo drugačije.

U React projektima ne stvaramo zasebne HTML datoteke, jer nam JSX omogućuje pisanje HTML-a i JavaScript-a kombinirane zajedno u istu datoteku, kao u gornjem primjeru. Međutim, svoj CSS možete odvojiti u drugu datoteku.

U početku bi se JSX mogao činiti pomalo čudnim. Ali ne brinite, naviknut ćete se.

JSX je vrlo praktičan, jer također možemo izvršiti bilo koji JavaScript kôd (logiku, funkcije, varijable i tako dalje) unutar HTML-a izravno koristeći kovrčave zagrade {}, poput ove:

function App() { const text = 'Hello World'; return ( 

{text}

); }

Također, JavaScript varijablama možete dodijeliti HTML oznake:

const message = 

React is cool!

;

Ili možete vratiti HTML unutar JavaScript logike (kao što su slučajevi if-else):

render() { if(true) { return 

YES

; } else { return

NO

; } }

Neću ulaziti u daljnje detalje JSX-a, ali pri pisanju JSX-a uzmite u obzir sljedeća pravila:

  • Oznake HTML i komponente uvijek moraju biti zatvorene
  • Neki atributi poput "class" postaju "className" (jer se klasa odnosi na JavaScript klase), "tabindex" postaje "tabIndex" i treba ga napisati camelCase
  • Ne možemo vratiti više od jednog HTML elementa odjednom, zato ih umotajte u nadređenu oznaku:
return ( 

Hello

World

);
  • ili ih možete zamijeniti praznim oznakama:
return (  

Hello

World

);

Također možete pogledati moj udžbenik React for Beginners za više informacija:

Što su funkcionalne i klasne komponente?

Nakon navikavanja na JSX sintaksu, sljedeće što treba razumjeti je struktura React-a zasnovana na komponentama.

Ako ponovno posjetite primjer koda na vrhu ovog posta, vidjet ćete da funkcija vraća JSX kôd. Ali funkcija App () nije uobičajena funkcija - ona je zapravo komponenta. Pa, što je komponenta?

Što je komponenta?

Komponenta je neovisni blok koda za višekratnu upotrebu koji dijeli korisničko sučelje na manje dijelove. Na primjer, ako smo gradili korisničko sučelje Twittera s Reactom:

Umjesto da gradimo cijelo korisničko sučelje pod jednom datotekom, možemo i trebali bismo podijeliti sve odjeljke (označene crvenom bojom) na manje neovisne dijelove. Drugim riječima, to su komponente.

React ima dvije vrste komponenata: funkcionalnui razred. Pogledajmo svaku sada detaljnije.

Funkcionalne komponente

Prva i preporučena vrsta komponenata u Reactu su funkcionalne komponente. Funkcionalna komponenta je u osnovi JavaScript / ES6 funkcija koja vraća React element (JSX). Prema službenim dokumentima Reacta, funkcija u nastavku valjana je funkcionalna komponenta:

function Welcome(props) { return 

Hello, {props.name}

; }

Također možete stvoriti funkcionalnu komponentu s definicijom funkcije strelice:

const Welcome = (props) => { return 

Hello, {props.name}

; }
Ova je funkcija valjana React komponenta jer prihvaća pojedinačni argument "rekviziti" (što je svojstvo) s podacima i vraća React element. - reagiraj.org

Da biste kasnije mogli koristiti komponentu, prvo je morate izvesti kako biste je mogli uvesti negdje drugdje:

function Welcome(props) { return 

Hello, {props.name}

; } export default Welcome;

Nakon uvoza komponentu možete nazvati kao u ovom primjeru:

import Welcome from './Welcome'; function App() { return ( ); }

Dakle, funkcionalna komponenta u Reactu:

  • je funkcija JavaScript / ES6
  • mora vratiti element React (JSX)
  • uvijek započinje velikim slovom (konvencija imenovanja)
  • uzima rekvizite kao parametar ako je potrebno

Što su komponente razreda?

Druga vrsta komponente je komponenta klase. Komponente klase su ES6 klase koje vraćaju JSX. Ispod vidite našu istu funkciju dobrodošlice, ovaj put kao komponentu klase:

class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

Za razliku od funkcionalnih komponenata, komponente klase moraju imati dodatnu render () metodu za vraćanje JSX-a.

Zašto koristiti komponente razreda?

Nekad smo koristili komponente klase zbog "stanja". U starijim verzijama React-a (verzija <16.8) nije bilo moguće koristiti stanje unutar funkcionalnih komponenata.

Stoga su nam bile potrebne funkcionalne komponente samo za generiranje korisničkog sučelja, dok bismo komponente klase koristili za upravljanje podacima i neke dodatne operacije (poput metoda životnog ciklusa).

To se promijenilo uvođenjem React Hooks-a, a sada također možemo koristiti stanja u funkcionalnim komponentama. (Ja ću pokrivati ​​stanje i udice u sljedećim postovima, pa ih zasad ne zamjerite).

Komponenta razreda:

  • je ES6 klasa, bit će komponenta nakon što 'proširi' React komponentu.
  • uzima Rekvizite (u konstruktoru) ako je potrebno
  • mora imati render ()metoda za vraćanje JSX-a

Što su rekviziti u Reactu?

Drugi važan koncept komponenata je način na koji komuniciraju. React ima poseban objekt nazvan prop (označava svojstvo) koji koristimo za prijenos podataka s jedne komponente na drugu.

Ali budite oprezni - rekviziti samo prenose podatke u jednosmjernom toku (samo od roditeljskih do podređenih komponenti). S rekvizitima nije moguće prenijeti podatke s djeteta na roditelja ili na komponente na istoj razini.

Ponovno posjetimo gornju funkciju App () kako bismo vidjeli kako prosljeđivati ​​podatke rekvizitima.

Prvo, moramo definirati oslonac na komponenti dobrodošlice i dodijeliti joj vrijednost:

import Welcome from './Welcome'; function App() { return ( ); }

Rekviziti su prilagođene vrijednosti, a komponente čine i dinamičnijima. Budući da je komponenta dobrodošlice ovdje dijete, moramo definirati rekvizite na njenom roditelju (App), tako da možemo proslijediti vrijednosti i dobiti rezultat jednostavnim pristupanjem "imenu" rekvizita:

function Welcome(props) { return 

Hello, {props.name}

; }

React rekviziti su stvarno korisni

Dakle, React programeri koriste rekvizite za prosljeđivanje podataka i oni su korisni za ovaj posao. Ali što je s upravljanjem podacima? Rekviziti se koriste za prosljeđivanje podataka, a ne za manipulaciju njima. O upravljanju podacima reagirat ću u svojim budućim postovima ovdje na freeCodeCamp.

U međuvremenu, ako želite saznati više o React & Web razvoju, slobodno se pretplatite na moj YouTube kanal.

Hvala na čitanju!