Kao najpopularniju knjižnicu sučelja, svatko želi naučiti React. ReactJS je u osnovi JavaScript. Ali to ne znači da morate naučiti sve u JavaScriptu da biste prešli na ReactJS. Razumijevanje temeljnih koncepata JavaScripta pomoći će vam da lakše shvatite koncepte Reacta i u konačnici će ubrzati vašu sposobnost rada na projektima.
Izložimo bitne koncepte koje biste trebali znati o JavaScriptu prije prelaska na ReactJS.
1. Funkcije strelica
Funkcije strelica naširoko se koriste u Reactu. Od verzije 16.8 React je prešao s komponenti temeljenih na klasi na funkcionalne komponente. Funkcije strelica omogućuju stvaranje funkcija s kraćom sintaksom.
Ilustrirajmo to na sljedećim primjerima:
Redovita funkcija
funkcijapozdrav() {
povratak'zdravo'
}
konzola.log (pozdrav()) //helloFunkcija strelice
neka pozdrav = () =>'zdravo'
konzola.log (pozdrav()) //helloGornje dvije funkcije imaju isti izlaz, iako je sintaksa drugačija. Funkcija strelice izgleda kraće i čistije od obične funkcije. Obično komponente Reacta imaju sljedeću strukturu:
uvoz Reagirati iz'reagirati'konst Knjiga = () => {
povratak (
Knjiga</div>)
}
izvozzadano Knjiga
Funkcije strelica nemaju imena. Ako ga želite imenovati, dodijelite ga varijabli. Razlika između regularne i streličaste funkcije nije samo sintaksa. Saznajte više o funkcijama strelica u Mozilla dokumentacija programera.
2. Destrukturiranje
Destrukturiranje se koristi za dobivanje podataka iz složenih struktura podataka. U JavaScriptu nizovi i objekti mogu pohraniti mnoge vrijednosti. Možete manipulirati vrijednostima i koristiti ih u različitim dijelovima aplikacije.
Da biste dobili ove vrijednosti, morate destrukturirati varijablu. Ovisno o strukturi podataka s kojom radite, možete koristiti oznaku s točkom (.) ili zagradom. Na primjer:
konst student = {'Ime': 'Mary',
'adresa': 'South Park, Betlehem',
'dob': 15
}
Destrukturiranje:
konzola.log (ime.studenta) // izlaz MarijaU gornjem primjeru, notacija točka pristupa vrijednosti ključa 'name'. U ReactJS-u ćete koristiti koncept destrukturiranja za dobivanje i dijeljenje vrijednosti u vašoj aplikaciji. Destrukturiranje pomaže u izbjegavanju ponavljanja i čini vaš kod čitljivijim.
3. Metode polja
Tijekom rada na React projektima nekoliko ćete se puta susresti s nizovima. Niz je skup podataka. Podatke pohranjujete u nizove, tako da ih možete ponovno koristiti kada zatrebaju.
Metode polja prvenstveno se koriste za manipulaciju, dohvaćanje i prikaz podataka. Neke često korištene metode polja su karta(), filtar(), i smanjiti(). Morate biti upoznati s metode polja kako biste razumjeli kada primijeniti svaki.
Na primjer, karta() metoda ponavlja sve stavke u nizu. Djeluje na svaki element niza kako bi stvorio novi niz.
konst brojevi = [9, 16, 25, 36];
konst squaredArr = numbers.map(matematika.sqrt) // 3,4,5,6
Često ćete koristiti metode polja u ReactJS-u. Koristit ćete ih za pretvaranje nizova u nizove, spajanje, dodavanje stavki i uklanjanje stavki iz drugih nizova.
4. Kratki uvjeti
Uvjeti su izjave koje JavaScript koristi za donošenje odluka u kodu. Kratki uvjeti uključuju && (i), II (ili) i ternarni operator. Ovo su kraći izrazi uvjeta i naredbi if/else.
Sljedeći primjer pokazuje kako se koristi ternarni operator.
Kod s if/else naredbom:
funkcijavrijeme otvaranja(dan) {
ako (dan == NEDJELJA) {
povratak12;
}
drugo {
povratak9;
}
}Kod s ternarnim operatorom:
funkcijavrijeme otvaranja(dan) {
povratak dan == NEDJELJA? 12: 9;
}Upoznavanje različite vrste kondicionala s posebnim osvrtom na kratke kondicionale. Oni se široko koriste u Reactu.
5. Literali predloška
Literali predloška koriste povratne oznake (``) za definiranje niza. Literali predloška omogućuju vam manipuliranje podacima niza čineći ih dinamičnijima. Označeni literali predloška omogućuju izvođenje operacija unutar niza. Ovo su kraći izrazi uvjeta i naredbi if/else.
Na primjer:
neka ime = "Jane";neka prezime = "srna";
neka tekst = `Dobro došli ${firstName}, ${prezime}!`; // Dobro došla Jane Doe!
6. Operatori širenja
Operator Spread (...) kopira vrijednosti jednog objekta ili niza u drugi. Sintaksa se sastoji od tri točke iza kojih slijedi naziv varijable. Na primjer (...ime). Spaja svojstva dvaju nizova ili objekata.
Sljedeći primjer pokazuje kako koristiti operator spread za kopiranje vrijednosti jedne varijable u drugu.
konst imena = ['Mary', 'Jane'];
konst članovi grupe = ['Fred', ...imena, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]
Operator širenja možete koristiti za izvođenje niza operacija. To uključuje kopiranje sadržaja niza, umetanje niza u drugi, pristup ugniježđenim nizovima i prosljeđivanje nizova kao argumenata. Možete koristiti operator širenja u ReactJS-u za rukovanje promjenama stanja u komponentama.
Zašto učiti ReactJS?
ReactJS je popularan s dobrim razlogom. Ima kratku krivulju učenja, pouzdan je i brzo se renderira u DOM. Podržava samostalne komponente i ima sjajne alate za uklanjanje pogrešaka.
ReactJS uključuje nove JavaScript koncepte iz ECMAScripta 6 (ES6). Učenje temeljnih koncepata u JavaScriptu olakšat će razvoj projekata u ReactJS-u.
Povrh svega, ReactJS ima sjajnu zajednicu koja neprestano objavljuje nova ažuriranja. Ako želite naučiti JavaScript biblioteku, ReactJS bi bio izvrstan izbor. Okvir Next.js nadopunjuje ograničenja ReactJS-a. Kombinacija to dvoje čini ReactJS moćnom front-end bibliotekom.
