Wednesday, April 12, 2023

Naučite React na najbolji način, praktični saveti za početnike

Ako živite u Srbiji i bavite se JavaScript programiranjem ili idete na fakultet ili radite sa ljudima koji zaista imaju ogromno iskustvo sa korišćenjem React-a, čak i od izvanredni profesora i predavača; nemojte da se začudite da baš od njih čujete izjave tipa: “ReactJS je najbolji JavaScript framework!“ ReactJS ili React.js su vam samo nazivi za istu stvar, a to je React. Ponekad ga developeri tako nazivaju da bi preciznije naznačili da se React koristi za Internet aplikaciju, ali React nije framework – radni okvirReact je JavaScript biblioteka otvorenog koda koja vam služi da kreirate interfejse. Uglavnom se misli na veb interfejse, ali React možete da koristite za pravljenje interfejse i za druge uređaje. Ali ako govorimo o React Native, onda govorimo o framework – radnom okviru, koji koristi React biblioteku za pravljenje mobilni aplikacija. Radni principi React Native-a su gotovo identični React-u, osim što React Native ne manipuliše DOM- Document Object Model - Objektni Model Dokumenta - om putem Virtual DOM-a. On se izvršava u pozadinskom procesu, preko JavaScript-a direktno na krajnjem uređaju. O React Native-u će u budućnosti biti reči u posebnom tutorijalu na ovom blogu, ali za sada se nadam da smo raščistili šta je React i da su vam stvari mnogo jasnije. Tačno je da React razvija Facebook, Instagram i zajednica ali njegov tvorac je Džordan Volke (Jordan Walke), Softver inženjer u Facebook-u.


( React je JavaScript biblioteka otvorenog koda )

Zbog velike popularnosti React-a, njegove primene na robusnim i velikim projektima, mnogi programeri koji nisu dolazili u kontakt sa React-om, često imaju pogrešnu percepciju da je i React nešto robusno, kompleksno i teško za učenje. Međutim, to je netačno. ReactJavaScript biblioteka otvorenog koda je jednostavna i jednostavno se koristi za kreiranje interfejsa, pogotovo ako imate osnovno znanje o HTML-u, CSS-uJavaScript-uReact u stvari nema mnogo složenih koncepata, već se jednostavno fokusira na kreiranju i korišćenju jednostavni komponenti koje se lako i ponovo upotrebljavaju. Svejedno je da li te komponente pravite za velike ili jednostavne male projekte. Vaša JSX – JavaScript XML komponenta može biti jednostavno dugme na veb stranici, ili može predstavljati čak celu stranicu. Ono što je sigurno jeste da kada pozovete tu komponentu, nećete morati osvežavati veb stranicu. React vam omogućava da napravite promene na stranici, ali da serveru pošaljete samo jedan zahtev, umesto mnogo njih, kao što je to slučaj sa PHP-om, Django-om ili programskim jezikom Java. Zamislite samo koliko bi ste na Facebook-u morali čekati i osvežavati svaku veb stranicu za sve što kliknete, da Facebook ne koristi React ! Ono što još ide u prilog React-u da je jednostavan; jeste činjenica da je on podeljen samo na dva glavna API-ja. React Component API – koji je zadužen za delove veb stranice koje prikazuje React DOM, i React DOM – koji je zadužen za izvršavanje renderovanja na veb stranici. Sve ostalo su detalji!

Kako da počnem da učim React?

Prvo odlučite koji operativni sistem želite da koristite? Mi ćemo koristiti Linux, Ubuntu. Zato što pretpostavljamo šta god pravili, većina veb projekata završi na zakupljenom Ubuntu Server-u. Mada što se tiče React-a, to neće imati neki značajan uticaj na učenje. Ako vi već koristite Windows operativni sistem, ali hoćete da koristite Ubuntu; onda pogledajte sledeći video kako da ga instalirate na virtualnoj mašini VMware Workstation Player 17 ili novoji.


( Linux - 1. How to install Ubuntu? ) 

Otvorite pretraživač i pogledajte koja je trenutno najnovija Node.js verzija. Otvorite vaš terminal i otkucajte sledeće komande:

manuel@manuel-virtual-machine:~$ sudo apt-get update

manuel@manuel-virtual-machine:~$ sudo apt-get upgrade

manuel@manuel-virtual-machine:~$ node --version

v18.15.0

Ukoliko na zvaničnoj stranici Node.js , na dugmetu LTS – Long Term Support; nemate istu verziju kao što je vaša ili uopšte nemate instaliran Node.js  ili je Node.js kod vas starija verzija; onda ponovo instalirajte Node.js . Ukoliko ne znate kako da instalirate Node.js  pogledajte sledeći video.


( Linux - 14. How to install Node.js ? )

Ukoliko koristite Windows operativni sistem i ne znate kako da instalirate Node.js, pogledajte sledeći video:


( Windows - 13. How to install Node.js ? )

Ako ste sve obavili kako treba i ako je sve u redu, kreirajte direktorijum u kojem ćemo da kreiramo naš React projekat i prebacite se u njega. Pokrenite Visual Studio Code.

manuel@manuel-virtual-machine:~$ mkdir react_tutorial

manuel@manuel-virtual-machine:~$ cd react_tutorial

manuel@manuel-virtual-machine:~/react_tutorial$ mkdir lesson1

manuel@manuel-virtual-machine:~/react_tutorial$ cd lesson1

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

Vi možete da koristite IDE – programersko razvojno okruženje koje god hoćete, ali mi koristimo Visual Studio Code. Ukoliko nemate instaliran Visual Studio Code, pogledajte video kako da ga instalirate.


( Linux - 2. How to install Visual Studio Code and .NET Core ? )

Ako koristite Windows operativni sistem:


( Windows - 1. How to install Visual Studio Code & .Net Core ? )

Ukoliko ste sve instalirali uspešno i pokrenuli Visual Studio Code, zatvorite Welcome Page, i sa vaše leve strane kliknite na dugme Extensions. Zatim instalirajte sledeće ekstenzije, da bi vam kodiranje bilo lakše i prijatnije.

  • ES7 React/Redux/GraphQL/React-Native snippets
  • ES7 + React/Redux/GraphQL/React-Native snippets
  • Simple React Snippets
  • ESLint
  • React PropTypes Intellisense
  • Prettier – Code formatter

Ukoliko ste instalirali navedene ekstenzije. Zatvorite Visual Studio Code, zatim ga ponovo otvorite.

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

Otvorite Terminal PanelVisual 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 helloworld


( Pregled npm komandi na npmjs.com, npm zvaničnoj stranici )

Potvrdite instalaciju i sačekajte neko vreme da se sve instalira. Kad se sve instalira, pogledajte u  Explorer Panel-u šta je sve za vas kreirano.


( React direktorijumi i datoteke, kreirane da bolje organizujete projekat )

U Terminal Panel-u, pređite komandom cd u helloworld direktorijum, koji ste kreirali. Zatim ukucajte sledeću komandu.

manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ cd helloworld

manuel@manuel-virtual-machine:~/react_tutorial/lesson1/helloworld$ npm start

Ukoliko vam je port 3000 zauzet iz bilo kog razloga, potvrdite sa y da vam se otvori stranica na pregledaču na drugom portu. Npm će verovatno izabrati 3001 port, automatski za vas. Sam će pokrenuti vaš default pretraživač i onda ćete videti sledeću veb stranicu koja označava da ste sve uspešno odradili.


( Veb stranica kad uspešno instalitrate i pokrenete React )

Vratite se u Visual Studio Code, kliknite na Terminal Panel. Ako hoćete da stopirate server, pritisnite CTRL + C na vašoj tastaturi. U Explorer Panel-u kliknite na direktorijum src vašeg projekta. Zatim kreirajte u njemu folder components, i u tom folderu kreirajte novu datoteku i nazovite je Helloworld.jsx Obratite pažnju da naziv ove datoteke treba da ima prvo slovo veliko. U Helloworld.jsx datoteku ukucajte sledeći JavaScript  kôd. Umesto mog imena stavite svoje!

function Helloworld() {

    return <h1>Hello World, from Manuel!</h1>

}

export default Helloworld;

Kao što ste videli prvo smo napravili folder components. Taj folder ste mogli nazvati kako god hoćete; i u njemu možete da držite koliko god hoćete JSX – JavaScript XML komponenti. Svaku od ovih komponenti možete da koristite i pozivate kad god vam trebaju. Kad se komponenta pozove, promena će se automatski prikazati na vašoj index.html stranici bez potrebe za osvežavanjem veb stranice. Međutim, da bi se to desilo vi morate prvo izvesti vašu komponentu. To se radi sledećom komandom:

export default Helloworld;

Zatim je importovati u App.js datoteku, da ona odredi gde i kako će se prikazati na vašoj index.html stranici. Zatim izmenite ovu datoteku. Prvo joj dodajte sledeći import.

import Helloworld from './components/Helloworld';

Zatim izmenite div elemenat klase App da izgleda ovako:

<div className="App">

      <Helloworld />  

 </div>

Otkucajte sledeću komandu u Terminal Panel-u.

manuel@manuel-virtual-machine:~/react_tutorial/lesson1/helloworld$ npm start

Otvoriće vam se pregledač sa sličnim rezultatom u zavisnosti od vašeg imena.

Hello World, from Manuel!


( Renderovana veb stranica React-om ) 

 Kako sve ovo izgleda, možete pogledati i na video-u


( React - 1. How to create your first React app? )


 

 

 

 

 

  

 

 

 




No comments:

Post a Comment