MANUEL RADOVANOVIĆ : Moć JSX renderovanja u vašim React projektima, primer Book List

U prethodnoj lekciji našeg React tutorijala, pogledajte ovde; smo se bavili određenim instalacijama i svemu što vam je neophodno da započnete da kreirate neke interesantne React komponente. Upoznali ste se sa tim šta je React a šta je React Native. Kreirali ste svoju prvu JSX aplikaciju helloword. Tokom ovog procesa možda se primetili koliko React ima dosta sličnosti sa Node.js tutorijalom, pogledajte ovde. U ovoj lekciji ćemo objasniti šta je JSX, šta je JSX renderovanje, dopunićemo prethodnu lekciju nekim detaljima sa kojima nismo hteli da vas preopteretimo i pomoći ćemo vam da iskodirate jednu jednostavnu komponentu koja demonstrira kako bi ste na nekoj HTML stranici dodavali spisak knjiga na neku listu knjiga. Ova lekcija će vam definitivno razjasniti i olakšati kreiranje vaši budući React projekata. Kad bi ste pitali programere šta je to JSX, verovatno bi ste mogli dobiti najmanje tri različita odgovora.

JSX - JavaScript Syntax eXtension, neformalno JavaScript XML je JavaScript ekstenzija koja omogućava kreiranje stabla DOM – Document Object Model-a koristeći sintaksu sličnu XML-u.

JSX je XML/HTML sintaksa označavanja ugrađena u JavaScript kôd koja se koristi za deklarisanje React komponenata. To je jezik koji se koristi za opisivanje UI- korisnički interfejsa izrađenih pomoću React-a.

JSX – JavaScript XML je proširenje JavaScript programskog jezika koje omogućava HTML sličnog koda unutar JavaScript-a.

Sva tri odgovora su tačna iako definišu JSX na totalno tri različita načina.

( JSX renderovanje u React-u )

Pogledajte razliku između JSX i JavaScript-a:

JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

JSX:

const element = <h1> Hello, world! </h1>;

Jednostavnost JSX-a je očigledna. Ali šta je to JSX renderovanje? JSX renderovanje je proces pretvaranja JSX kôda u JavaScript objekte koji se zatim mogu interpretirati i prikazati u veb pretraživaču. Kada React aplikacija radi, JSX se prevodi u pozive React.createElement koji stvaraju virtualni DOM - Document Object Model. Virtualni DOM je interna reprezentacija strukture korisničkog okruženja u React-u. Kada se stanje aplikacije promeni, React upoređuje virtualni DOM sa pravim DOM-om i ažurira samo delove koji su se promenili, što poboljšava performanse aplikacije. Ukratko, JSX olakšava pisanje korisničkog okruženja u React-u, dok JSX renderovanje omogućava React-u da efikasno upravlja ažuriranjem okruženja i održava brz i responzivan doživljaj za korisnike. Da se ne biste izgubili u opštoj teoriji, jednostavnije je razumeti sav ovaj koncept kroz praktičan primer.

Kako da kreiram Book List – Listu knjiga React komponentu?

Pretpostavimo da imate zadatak da na jednoj veb stranici treba da imate ispisanu listu knjiga, ali i mogućnost da vi dodajete knjige u listu, preciznije nazive knjiga i autora. Naravno naša React komponenta je samo demonstrativne prirode i onog momenta kada refrish-ujete veb stranicu, knjige koje ste uneli na vašu listu će biti automatski izbrisane sa liste. U praksi bi ste verovatno ovoj komponenti morali dodati kod koji čuva listu knjiga u nekoj tekstualnoj datoteci ili bazi podataka. Onda bi ste verovatno hteli i mogućnost da možete obrisati knjigu sa liste, napraviti promenu u slučaju da ste pogrešno napisali podatke o knjizi, možda bi ste hteli da kreirate i validaciju podataka, ne želite duplikate na listi ili bi ste još hteli dodati Bootstrap na vaše HTML kontrole itd. Iz tog razloga, naša React komponenta je najbanalnija ali je možete sami proširiti za vaše potrebe. Ako se baš pitate što to sve ne biste uradili u PHP programskom jeziku, šta će vam React; možda bi ste trebali da obratite pažnju na bitnu činjenicu. React komponenta za razliku od PHP programskog jezika deluje samo na deo HTML stranice i prikazuje vam rezultate bez potrebe za refrish veb stranice. Zamislite da na Facebook stranici se vrši refrish vaše početne stranice kad god kliknete neki lajk. Pa to bi bila noćna mora! Nego podsetite se kako smo kreirali našu prvu aplikaciju helloworld u prethodnoj lekciji, pogledaj ovde; pa sad kreirajte potpuno novi folder u našem direktorijumu react_tutorial i nazovite ga lesson2. Iz ovog direktorijuma pokrenite Visual Studio Code, sledećom komandom:

manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ code .

Otvorite Terminal Panel u Visual Studio Code-u. Otkucajte sledeću komandu. Obratite pažnju na npx a ne na npm komandu!

manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ npx create-react-app booklist

Potrebno je oko 6 minuta, zato sačekajte to vreme da se sve instalira. Kad se sve instalira, pogledajte u Explorer Panel-u šta je sve za vas kreirano.

( Struktura foldera i fajlova u React projektu kreirani za vaš početak )

Komanda koju ste prethodno izvršili generiše osnovnu strukturu projekta za vas, što uključuje sledeće foldere i fajlove:

node_modules – ovaj folder sadrži sve vanjske biblioteke i pakete koji su potrebni za vaš React projekt. Ovi paketi se instaliraju putem npm - Node Package Manager-a prilikom izvršavanja create-react-app komande.

public – ovaj folder sadrži statičke resurse vaše aplikacije, poput HTML fajla index.html, ikona i drugih fajlova koje se koriste kao deo vašeg korisničkog okruženja.

index.html – je osnovni HTML fajl vaše aplikacije. Ovde se definiše temeljni okvir vaše veb stranice i uključuju se potrebni JavaScript fajlovi.

favicon.ico - ikona koja se prikazuje na vrhu kartice veb pregledača.

src – ovaj folder sadrži izvorni kôd vaše React aplikacije.

index.js – je glavni JavaScript fajl koji se koristi za pokretanje vaše React aplikacije. Ovde se obično uvoze potrebne komponente i renderuje se glavna komponenta App u HTML DOM – Document Object Model-u

App.js – je glavna komponenta vaše React aplikacije. Ovde definišete strukturu korisničkog okruženja i logiku aplikacije.

App.css - je CSS fajl koji sadrži stilove za App.js komponentu.

logo.svg – ovaj fajl sadrži logo React-a koji se često koristi u početnim projektima.

serviceWorker.js je fajl koji sadrži implementaciju service worker-a za omogućavanje PWA -Progressive Web App mogućnosti.

package.json -ovo je osnovni fajl koji sadrži informacije o vašem projektu i dependencies - ovisnostima koje koristi. Također sadrži skripte za pokretanje, izgradnju i testiranje vaše aplikacije.

README.md – je osnovni fajl koji sadrži informacije o vašem projektu, uključujući upute za instalaciju, upotrebu i druge korisne informacije.
Itd.

Organizacija i ova mala struktura foldera i fajlova će vam definitivno povećati kreativnost i olakšati rad sa React projektima. Kreirajte novi folder u src folderu i nazovite isti components i u tom folderu kreirajte novu datoteku i nazovite je BookList.jsx Obratite pažnju da naziv ovog fajla u praksi uglavnom ima prvo slovo veliko. U BookList.jsx datoteku ukucajte sledeći JavaScript kôd.

import React, { useState } from 'react';

function BookList() {

// Define state for storing books and input values

const [books, setBooks] = useState([

{ id: 1, title: "The Road to learn React", author: "Robin Wieruch" },

{ id: 2, title: "Beginning React", author: "Greg Lim" },

{ id: 3, title: "React Explained", author: "Zac Gordon" }

]);

const [newBookTitle, setNewBookTitle] = useState("");

const [newBookAuthor, setNewBookAuthor] = useState("");

// Function to add a new book

const addBook = () => {

const newBook = {

id: Math.random(),

title: newBookTitle,

author: newBookAuthor

};

setBooks([...books, newBook]);

// Reset input fields after adding a new book

setNewBookTitle("");

setNewBookAuthor("");

};

return (

<div>

<div>

<input

type="text"

placeholder="Enter title"

value={newBookTitle}

onChange={(e) => setNewBookTitle(e.target.value)}

<input

type="text"

placeholder="Enter author"

value={newBookAuthor}

onChange={(e) => setNewBookAuthor(e.target.value)}

</div>

<ul>

{books.map(book => (

<h3>{book.title}</h3>

<p>by {book.author}</p>

</li>

))}

</ul>

</div>

);

}

export default BookList;

Pogledajte malo pažljivije ovaj kôd. Kad je u pitanju HTML sintaksa, ona je sva grupisana u samo jednu strukturu <div> elemenata kao podređeni elementi, zato što je React-u potreban samo jedan osnovan elemenat za renderovanje. HTML elementi renderovanja pomoću JSX-a prate regularnu sintaksu HTML elementa ali uz nekoliko suptilnih razlika u prepoznavanju atributa, velikih i malih slova. To znači da React ne prepoznaje elemenat <Button>, već mora biti ispisan malim slovima <button>. Rečnik JSX označavanja su osnovni gradivni blokovi React-a. Sa njima možete vršite enkapsulaciju HTML-a, kreirati ugnježdene elemente, da kreirate komponente sa imenskim prostorom, da ugradite JavaScript izraze ili da izvršite mapiranje kolekcija u elemente kao u prethodnom primeru books.map koji vraća novi niz. React vam zaista nudi izuzetne mnogobrojne mogućnosti od kojih ćemo neke i sami koristiti u našem React tutorijalu. Kliknite na datoteku index.html u folderu public. Zatim promenite element title.

Na ovaj način možete da promenite naziv vaše veb stranice koji se pojavljuje na vrhu kartice vašeg pretraživača kada prikazuje vašu veb stranicu. U index.html možete promeniti i logo koji je ostavljen u navedenom primeru, i staviti neki svoj. Kliknite na fajl App.js i promenite sadržaj fajla u sledeći.

import React from 'react';

import BookList from './components/BookList';

function App() {

return (

</div>

);

}

export default App;

Obratite pažnju da za naziv className, div elementa; možete nazvati kako god hoćete. Funkcija App () jednostavno pokreće kroz novoformirani elemenat <BookList /> i izvršava našu komponentu.

( Izvršavanje BookList React komponente na glavnoj veb stranici React projekta )

Pokrenite, server sledećom komandom.

manuel@manuel-virtual-machine:~/react_tutorial/lesson2/booklist$ npm start

Dodajte u vašu listu par knjiga, dobićete sličan rezultat kao na prethodnoj slici. Ako izvršite refrish na vašem veb pretraživaču, knjige koje ste uneli će se izbrisati iz razloga kojih smo već objasnili u ovoj lekciji. Kako kreiranje Book List primera izgleda, možete pogledati i u video-u.