Kako napraviti React aplikaciju?

Kako napraviti React aplikaciju?

React je jedna od najpopularnijih JavaScript biblioteka. Pokreće se na strani korisnika, odnosno u browseru. Omogućava nam da pravimo brze aplikacije sa dinamičkim korisničkim interfejsom.

U ovom blog postu proćićemo kroz postupak kreiranja tvoje prve React aplikacije. Biće nam potreban i text editor – ja ću koristi Visual Studio Code. Takođe koristićemo Node package manager (npm), tako da nam je neophodan Node koji možeš preuzeti putem linka Node.js.

Kreiranje i pokretanje aplikacije

Komandom cd otvaramo direktorijum u kom se nalazi naša aplikacija.

cd my-app

Zatim pokrećemo aplikaciju komandom:

npm start

Sada je naša aplikacija pokrenuta, i automatski bi trebalo da se otvori stranica u browseru na adresi http://localhost:3000/ class=”bluemark (ako se ne otvori automatski poseti ovu adresu).

Struktura React aplikacije

create-react-app napraviće nam strukturu aplikacije prikazanu na slici ispod. React koristi alat webpack koji objedinjuje sve direktorijume i fajlove u jedan fajl koji browser može razumeti.

package.json

Fajl package.json sadrži informacije o našoj aplikaciji kao što su:

• name: ime naše aplikacije
• version: trenutna verzija
• dependencies: sadrži sve neophodne dependencies i pakete koji se koriste. Kada budemo instalirali nove pakete oni će ovde biti vidljivi. Ovde imamo tri glavna paketa, sama react biblioteka – mi koristimo verziju 16.13.1, react-dom – koji nam omogućava prikazivanje komponenti u browseru, i react-scripts.
• scripts:scripts: ovde su definisani nazivi pomoću kojih možemo na lakši način pristupiti react-scripts komandama. Na primer start nam omogućava da pokrenemo development server,test da pokrećemo testove…

public/index.html

U public direktorijumu nalazi se index.html fajl koji predstavlja polaznu tačku naše aplikacije. React je SPA (Single Page Aplication) što znači da se sve dešava na jednoj stranici i da navigacijom korisnika kroz aplikaciju nećemo imati učitavanja novih stranica. Sve što kreiramo prikazivaće se unutar div taga koji ima atrbut id sa vrednoscu “root”. Zato nam je ovaj div veoma važan.

src

U src direktorijumu App.js fajl predstavlja glavnu App komponentu, stilizacija njenih elemenata nalazi se u App.css. Fajl index.js predstavlja mesto u kome smeštamo aplikaciju u div sa id=”root”. U njemu još uključujemo React, ReactDOM i glavnu App komponentu. Na liniji broj 7 vidimo način na koji se renderuje App komponenta u element sa atributom id=”root”.

Kako tvoja React aplikacija napreduje, možeš da organizuješ komponente i njima povezane fajlove u posebne foldere.

Ukoliko te nešto dodatno zanima uvek možeš da pogledaš React Dokumentaciju.