Kako se grade react komponente?

Na drugom mestu smo govorili o tome šta je to react.js. Ovde ćemo pokazati kako se upotrebljava i kako se grade komponente unutar react aplikacija.

Da biste uopšte radili sa reactom, neophodno je da na svom računaru imate instaliran node i da znate da upotrebljavate npm. Ukoliko niste upoznati sa tim kako ovo funkcioniše, savetujemo da se zaustavite ovde i da prvo pročitate članke koji se tiču ovih dveju stvari. Za node upućujemo vas ovde, dok sve što bi trebalo da znate o npm-u kako biste pratili rad sa react-om možete pronaći ovde.

Dakle, preporucujemo da upotrebljavate zvaničan react-ov paket za pokretanje react aplikacija koga možete naći na npm-u. Sve što bi trebalo da uradite nakon što ste instalirali node i npm na vaš računar je da otvorite terminal vašeg računara i da ukucate sledeću komandu npm install create-react-app. Potom, nakon što sačekate da se instalira na vašu mašinu create reat app, ukucajte u terminalu sledeće komande:
npm create-react-app mala-aplikacija
cd mala-aplikacija
npm start

Nakon toga će se najverovatnije otvoriti vaš pretraživač na adresi localhost:3000. Ukoliko se ne otvori, idite sami na ovu adresu vašeg pretraživača i videćete da je pokrenuta vrlo prosta mala aplikacija u kojoj vas react pozdravlja. U vašem omiljenom tekst editoru koga koristite da bi programirali, otvorite folder mala aplikacija jer ćemo tu dodavati komponente. Uđite u src folder. Kada otvorite folder, videćete da se tu nalazi par fajlova od kojih je jedan index.js. Dodajte pored njega button.js fajl i u njega upišite sledeće:

import React from "react";

const onButtonClick = () => alert("Kliknuto je dugme");

function Button() {

return <"button">Klikni mene<"/button"> // samo bez navodnika

}

export default Button;

Ovo je prosta react komponenta koja se sastoji iz jednog dugmeta koje je povezano sa funkcijom koja poziva alert funkciju javascripta. Da bi ovo bilo unutar naše aplikacije, moramo to ubaciti unutar komponente koja se pikazuje u našem pretraživaču, a to je komponenta koja se zove App i koja se nalazi u index.js fajlu. To ćemo uraditi na sledeći način:
Udjite u index.js fajl i ispod
import ReactDOM from "react-dom";
dodajte
import Button from "./button.js";

a zatim ispod
<"h2">Start editing to see some magic happen!<"/h2"> // samo bez navodnika
dodajte samo sledeću liniju koda
<"Button /"> // samo bez navodnika

Zatim u pretraživaču pritisnite dugme koje se sada pojavilo i videćete alert box sa tekstom “Kliknuto je dugme”.

Znači, komponente se najčešće razvijaju u posebnim fajlovima. Potom se iz tog fajla komponenta izveze komandom export. U fajl/komponentu gde bi novostvorenu komponentu trebalo upotrebiti se potom uveze komponenta komandom import i upotrebi se ta komponenta na mestu gde je potrebno i to je to.