ReactJS vodič za početnike

Što je ReactJS?

ReactJS je otvoreno sučelje JavaBiblioteka skripti za izgradnju korisničkih sučelja. ReactJS održava Meta (prije poznata kao Facebook) i zajednica pojedinačnih programera i tvrtki. Široko se koristi kao osnova za izradu jednostraničnih i mobilnih aplikacija. Vrlo je jednostavan za korištenje i omogućuje korisnicima stvaranje UI komponenti za višekratnu upotrebu.

Prije nego što napišete prvi redak React koda, korisno je znati što razlikuje biblioteku od obične JavaSkripta. Sljedeći odjeljak prolazi kroz njegove glavne značajke.

Značajke ReactJS-a

JSX: JSX je proširenje za JavaSkripta. Iako nije obavezno koristiti JSX u Reactu, to je jedna od dobrih značajki i jednostavan je za korištenje.

KomponenteKomponente su kao čiste JavaSkriptne funkcije koje olakšavaju kod dijeljenjem logike u ponovno upotrebljiv neovisni kod. Komponente možemo koristiti kao funkcije, a komponente kao klase. Komponente također imaju stanje i svojstva, što olakšava život. Unutar komponente klase održavaju se stanje i svojstva.

Virtualni DOM: React stvara virtualni DOM, tj. predmemoriju strukture podataka u memoriji. Samo se konačne promjene kasnije ažuriraju u DOM-u preglednika, što omogućuje brzo renderiranje.

JavaIzrazi skripte: JS izrazi se mogu koristiti u JSX datotekama pomoću vitičastih zagrada, na primjer {}.

Prednosti ReactJS-a

Evo važnih prednosti/koristi korištenja ReactJS-a:

• ReactJS koristi virtualni DOM koji koristi predmemoriju strukture podataka u memoriji, a samo se konačne promjene ažuriraju u DOM-u preglednika. To ubrzava aplikaciju.
• Možete kreirati komponente po svom izboru pomoću značajke React komponenti. Komponente se mogu ponovno koristiti i korisne su u održavanju koda.
• ReactJS je programski kod otvorenog koda JavaBiblioteka skripti, tako da je s njom lako započeti.
• ReactJS je postao vrlo popularan u kratkom roku i pokreće proizvode poput Facebooka i InstagramKoriste ga mnoge poznate tvrtke poput Applea, Netflix, Itd
• Meta održava ReactJS biblioteku, tako da je dobro održavana i ažurirana.
• ReactJS se može koristiti za razvoj bogatog korisničkog sučelja za desktop i mobilne aplikacije.
• Jednostavan za otklanjanje pogrešaka i testiranje jer se većina kodiranja obavlja u njemu JavaScript a ne u HTML-u.

Nedostaci ReactJS-a

Evo nedostataka/mana korištenja ReactJS-a:

• Većina koda je napisana u JSX-u, tj. HTML i CSS su dio JavaSkripta. Može biti prilično zbunjujuće, jer većina drugih okvira preferira keeping HTML odvojen od JavaKod skripte.
• Veličina ReactJS datoteke je relativno velika.

Znajući kompromise, spremni ste postaviti React. Najbrži način da ga isprobate je izravno s CDN-a, što ćemo prvo obraditi; postavke temeljene na npm-u za stvarne projekte slijede nakon toga.

Korištenje ReactJS-a iz CDN-a

Da bismo počeli raditi s Reactom, prvo moramo dodati ReactJS na našu stranicu. ReactJS možete jednostavno početi koristiti s CDN-om. JavaDatoteke skripti, kao što je prikazano dolje.

Idite na stranicu s dokumentacijom za stariju verziju Reacta kako biste dobili CDN poveznice, tj. https://legacy.reactjs.org/docs/cdn-links.html, a potrebne datoteke objašnjene su na sljedećoj slici.

Za dev

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Za prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

zamijeniti verzija s verzijom Reacta koju želite za react.development.js i react-dom.development.js. Na ovoj stranici koristimo verziju 16 pa se primjeri u nastavku izvode nepromijenjeni.

U slučaju da planirate koristiti CDN datoteke, obavezno zadržite atribut crossorigin kako biste izbjegli probleme s međudomenskim pristupom. ReactJS kod ne može se izvršiti izravno u pregledniku i potrebno ga je transpilirati pomoću Babela u običan kod. JavaSkripta prije izvršavanja u pregledniku.

Ovdje je BabelJS skripta koja se može koristiti:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Evo radnog ReactJS primjera koji koristi CDN datoteke i BabelJS skriptu.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Izlaz:

U sljedećem poglavlju ćemo detaljnije objasniti kod; pogledajmo kako ovdje funkcioniraju CDN datoteke. Izravno korištenje Babel skripte nije dobra praksa i početnici bi je zasad trebali koristiti samo za učenje ReactJS-a. U produkciji ćete morati instalirati React pomoću npm paketa.

Korištenje NPM paketa

Provjerite imate li instaliran Node.js. Ako nije instaliran, pogledajte ovaj vodič za Node.js (https://www.guru99.com/node-js-tutorial.html) instalacija.

Nakon što instalirate Node.js, stvorite mapu reactproj/.

Za početak postavljanja projekta pokrenite naredbu npm init.

Ovako će izgledati struktura mapa:

reactproj\
package.json

Sada ćemo instalirati pakete koji su nam potrebni.

Evo popisa paketa za ReactJS. React smo pričvrstili na verziju 16 tako da ReactDOM.render primjeri na ovoj stranici rade točno onako kako je prikazano:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Otvorite naredbeni redak i pokrenite gornje naredbe unutar mape reactproj/.

Napravite mapu src / gdje će ići sav JS kod. Sav kod za ReactJS projekt bit će dostupan u mapi src/. Izradite datoteku index.js i uvezite react i react-dom, kao što je prikazano dolje.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Napisali smo osnovni kod za ReactJS. Detalje ćemo objasniti u sljedećem poglavlju. Želimo prikazati Pozdrav, iz Guru99 Vodiči, a isti se dodjeljuje DOM elementu s ID-jem „root“. Preuzima se iz datoteke index.html, koja je početna datoteka, kao što je prikazano u nastavku.

Napravite mapu public/ i dodajte index.html u nju kao što je prikazano dolje.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Paket react-scripts će se pobrinuti za kompajliranje koda i pokretanje poslužitelja za prikaz HTML datoteke, tj. index.html. Potrebno je dodati naredbu u package.json koja će se pobrinuti za korištenje react-scripts za kompajliranje koda i pokretanje poslužitelja, kao što je prikazano u nastavku:

 "scripts": {
    "start": "react-scripts start"
  }

Nakon instaliranja svih paketa i dodavanja gornje naredbe, konačni package.json je sljedeći:

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Za početak testiranja ReactJS-a, pokrenite naredbu:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Otvorit će se preglednik s URL http://localhost:3000/ kao što je prikazano u nastavku:

javno/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Koristit ćemo isti postupak za izvršavanje JavaDatoteke skripti također u sljedećim poglavljima. Dodajte sve svoje .js i .jsx datoteke u mapu src/. Struktura datoteka bit će sljedeća:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Kako napraviti svoju prvu postavku React projekta

Evo detaljnog vodiča u ovom ReactJS tutorialu za početak s prvom React aplikacijom.

Korak 1) Uvezite react pakete.
1. Da bismo započeli s ReactJS-om, prvo moramo uvesti react pakete kako slijedi.

import React from 'react';
import ReactDOM from 'react-dom';

2. Spremite datoteku kao index.js u mapu src/.

Korak 2) Pišite jednostavno Code.
Napisat ćemo jednostavan kod u ovom tutorialu React JS, u kojem ćemo prikazati poruku "Pozdrav, iz Guru99 tutorijala!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render će dodati oznaku elementu s ID-om root. Evo HTML datoteke koju imamo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Korak 3) Sastavite Code.

Zatim u ovom vodiču za React.js moramo kompajlirati kod da bismo dobili izlaz u pregledniku.

Ovo je struktura mape:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Dodali smo naredbe za kompajliranje konačne datoteke u package.json kako slijedi:

"scripts": {
    "start": "react-scripts start"
  },

Za kompajliranje konačne datoteke pokrenite sljedeću naredbu:

npm run start

Kada pokrenete gornju naredbu, kompajlirat će datoteke i obavijestiti vas ako postoji neka greška. Ako sve izgleda u redu, otvorit će preglednik i pokrenuti stranicu na http://localhost:3000/

Naredba: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Korak 4) Provjerite izlaz.
The URL http://localhost:3000 otvorit će se u pregledniku nakon što se kod kompajlira, kao što je prikazano u nastavku:

Kako postaviti React s Viteom (moderni pristup)

Gore navedena postavka react-scripts dolazi iz Create React App (CRA), koji je godinama bio standardni početni alat. React tim je službeno ukinuo Create React App u veljači 2025., tako da bi novi projekti trebali koristiti moderni alat za izgradnju. Najpopularniji izbor danas je vijak, koji brže počinje i stvara manje verzije.

Evo kako stvoriti novi React projekt s Viteom:

Korak 1) Pokrenite naredbu scaffolding u svom terminalu:

npm create vite@latest my-react-app -- --template react

Korak 2) Premjestite se u mapu i instalirajte ovisnosti:

cd my-react-app
npm install

Korak 3) Pokrenite razvojni server:

npm run dev

Vite poslužuje aplikaciju na http://localhost:5173/ prema zadanim postavkama i ponovno se učitava odmah kada spremite datoteku.

Ključne razlike u odnosu na stariju postavku na ovoj stranici:

• Ulazna datoteka je src/main.jsx umjesto src/index.js.
• Instalira najnoviji React, koji koristi createRoot umjesto ReactDOM.rendera.
• index.html se nalazi u korijenu projekta, a ne u public/.
• Konstrukcije se proizvode s npm run build u mapu dist/.

Za potrebe full-stacka poput usmjeravanja i renderiranja na poslužitelju, React tim također preporučuje frameworkove poput Dalje.jsSve što naučite u poglavljima u nastavku - JSX, komponente, stanje i props - primjenjuje se nepromijenjeno u Vite ili Next.js projektu.

Što je JSX?

JSX je proširenje za JavaSkripta. To je predložak skripte u kojem ćete imati moć korištenja HTML-a i JavaScenarij zajedno.

Evo jednostavnog primjera JSX koda.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Zašto nam treba JSX u Reactu?

Za korisničko sučelje potreban nam je HTML, a svaki element u DOM-u imat će događaje koje treba obraditi, promjene stanja itd.

U slučaju Reacta, omogućuje nam korištenje HTML-a i JavaSkriptirajte u istoj datoteci i učinkovito se pobrinite za promjene stanja u DOM-u.

Izrazi u JSX

Evo jednostavnog primjera kako koristiti izraze u JSX-u.

U ranijim ReactJS primjerima, napisali smo nešto poput:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Sada ćemo promijeniti gornji kod kako bismo dodali izraze. Izrazi se koriste unutar vitičastih zagrada {} i proširuju se tijekom izvođenja. Izrazi u Reactu su isti kao JavaIzrazi skripte.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Testirajmo sada isto u pregledniku.

Na gornjoj snimci zaslona možete vidjeti da izraz {display} nije zamijenjen. React ne zna što učiniti kada se izraz koristi unutar .js datoteke.

Dodajmo sada promjene i stvorimo .jsx datoteku, kao što je prikazano u nastavku:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Dodali smo potreban kod i koristit ćemo datoteku test.jsx u index.js. Želimo da h1tag varijabla koja će se koristiti unutar index.js, pa se ista izvozi kao što je prikazano gore u test.jsx.

Evo izmijenjenog koda u index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Da bismo koristili test.jsx u index.js, prvo ga moramo uvesti kao što je prikazano u nastavku:

import h1tag from './test.jsx';

Sada možemo koristiti h1tag u ReactDOM.renderu kao što je prikazano u nastavku:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Evo rezultata kada isto provjerimo u pregledniku:

Što su komponente u ReactJS?

Komponente su kao čiste JavaSkriptne funkcije koje olakšavaju kod dijeljenjem logike u ponovno upotrebljiv neovisni kod.

Komponente kao funkcije

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Napravili smo funkciju tzv Bok koji vraća oznaku h1, kao što je prikazano gore. Naziv funkcije djeluje kao element, kao što je prikazano u nastavku:

const Hello_comp = <Hello />;
export default Hello_comp;

Komponenta Bok koristi se kao HTML oznaka, tj. , dodijeljeno Pozdrav_comp varijabla, a ista se izvozi pomoću exporta.

Sada ćemo koristiti ovu komponentu u datoteci index.js kao što je prikazano u nastavku:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Evo izlaza u pregledniku:

Klasa kao komponenta

Ovdje je primjer ReactJS koji koristi klasu kao komponentu.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Komponentu Hello u datoteci index.js možemo koristiti na sljedeći način:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Komponenta Hello se koristi kao HTML tag, tj. .

Ovdje je rezultat istog.

Komponente klase u odnosu na komponente funkcije i hooks-ove

Sada ste vidjeli oba načina pisanja komponente, pa koji biste trebali koristiti? Ova stranica uči o komponentama klase jer one eksplicitno čine koncepte stanja i životnog ciklusa, što je vrijedno za početnike i još uvijek se pojavljuje u naslijeđenim kodnim bazama. Međutim, otkako je React 16.8 uveo Hookove, funkcijske komponente također mogu sadržavati stanje i one su preporučeni stil za sav novi kod.

Aspekt	Komponenta klase	Funkcijska komponenta s kukama
Država	this.state i this.setState()	useState() Hook
Životni ciklus	componentDidMount, componentDidUpdate, componentWillUnmount	useEffect() Hook pokriva sva tri
Sintaksa	Više standardnih elemenata (konstruktor, bind, this)	Kraće, nema ove ključne riječi
Status	Podržano, stari stil	Preporučuje se za novi kod

Evo primjera stanja s ove stranice prepisanog pomoću useState hooka:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Obje verzije prikazuju isti izlaz. Naučite sintaksu klase korištenu u poglavljima u nastavku, a zatim vježbajte pretvaranje svakog primjera u Hookove.

Što je stanje u ReactJS?

Država je JavaObjekt skripte, sličan propsima, koji sadrži podatke koji će se koristiti s ReactJS renderiranjem. Podaci o stanju su privatni objekt i koriste se unutar komponenti unutar klase.

Primjer države

Evo radnog primjera kako koristiti stanje unutar klase.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Ovo dobivamo kada ga testiramo u pregledniku:

Što su Props u ReactJS?

Svojstva (props) su svojstva koja se koriste unutar komponente. Djeluju kao globalni objekti ili varijable koje se mogu koristiti unutar komponente.

Props to Function Component

Ovdje je primjer prosljeđivanja rekvizita funkcijskoj komponenti.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Kao što je gore prikazano, dodali smo msg pripisuju komponenta. Istom se može pristupiti kao rekviziti unutar funkcije Hello, koja je objekt koji će imati msg detalje atributa, a isti se koristi kao izraz.

Komponenta se koristi u index.js na sljedeći način:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Evo izlaza u pregledniku:

Rekviziti za komponentu klase

Za pristup propsima u klasi, možemo to učiniti na sljedeći način:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

The msg atribut se prosljeđuje komponenti u index.js na sljedeći način:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Ovo je izlaz u pregledniku:

Također provjerite: - AngularJS vodič za početnike: Naučite AngularJS korak po korak

Životni ciklus komponente

Nakon što smo obradili komponente, stanje i svojstva, sljedeći korak je razumijevanje kada React poziva metode vaše komponente. Životni ciklus komponente podijeljen je na faze inicijalizacije, montiranja, ažuriranja i odmontiranja.

Evo detaljnog objašnjenja svake faze.

Komponenta u ReactJS-u ima sljedeće faze:

Inicijalizacija: Ovo je prva faza životnog ciklusa komponente.

Ovdje će imati zadane rekvizite i stanje na početnoj razini.

MontiranjeU ovoj fazi, komponenta se renderira unutar DOM-a. U stanju montiranja imamo pristup sljedećim metodama:

• render(): Ovu metodu imate za sve kreirane komponente. Vraća HTML čvor.
• componentDidMount(): Ovo se poziva odmah nakon što je komponenta dodana u DOM.

NadopuneU ovom stanju, korisnik komunicira s DOM-om i on se ažurira. Na primjer, unesete nešto u tekstualni okvir, pa se svojstva stanja ažuriraju.

Sljedeće su metode dostupne u stanju ažuriranja:

• shouldComponentUpdate(): poziva se prije ponovnog renderiranja; omogućuje vam da odlučite treba li komponentu ažurirati. Vraćanje vrijednosti true ponovno renderira komponentu.
• componentDidUpdate(): poziva se nakon što je komponenta ažurirana.

Demontaža: Ovo stanje se javlja kada komponenta nije potrebna ili je uklonjena.

Sljedeća metoda je dostupna u stanju odmontiranja:

• componentWillUnmount(): poziva se neposredno prije nego što se komponenta ukloni ili uništi.

Radni primjer metoda životnog ciklusa

Evo radnog primjera koji prikazuje metode koje se pozivaju u svakoj fazi.

Primjer: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Kada provjerite izlaz u pregledniku:

U konzoli preglednika dobivate:

Kada korisnik unese u tekstni okvir:

U konzoli se prikazuju sljedeće poruke:

Sada kada znate kada se komponenta renderira i ažurira, primijenimo stanje i događaje na praktičan slučaj upotrebe: obradu korisničkog unosa putem obrazaca.

Rad s obrascima

U ReactJS-u, HTML ulazni elementi poput , , i <select /> imaju vlastito stanje i potrebno ih je ažurirati kada korisnik interagira, korištenjem metode setState().

U ovom poglavlju ćemo vidjeti kako raditi s formama u ReactJS-u.

Evo primjera rada:

oblik.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Za polja za unos moramo održavati stanje, pa za to React pruža posebnu metodu pod nazivom setState, što pomaže u održavanju stanja kad god dođe do promjene. U stvarnoj aplikaciji, također pozovite event.preventDefault() unutar formSubmit kako bi se spriječilo ponovno učitavanje stranice u pregledniku prilikom slanja.

Koristili smo događaje onChange i onClick na tekstualnom okviru i gumbu za slanje. Kada korisnik upiše tekst unutar tekstualnog okvira, poziva se događaj onChange i ažurira se polje name unutar objekta stanja, kao što je prikazano u nastavku:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Ispis u pregledniku je sljedeći:

Korak 1) Unesite svoje ime u tekstualni okvir:

Korak 2) Kliknite na gumb za slanje:

Rad s događajima u ReactJS

Obrasci su samo jedan izvor interakcije s korisnikom. Rad s događajima u ReactJS-u je isti kao što biste to radili u JavaSkripta. Možete koristiti sve rukovatelje događajima koji se koriste u JavaSkripta. Metoda setState() koristi se za ažuriranje stanja kada korisnik interagira s bilo kojim HTML elementom.

Evo radnog primjera kako koristiti događaje u ReactJS-u.

događaji.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Za polja za unos moramo održavati stanje, pa za to React pruža setState metoda koja pomaže u održavanju stanja kad god dođe do promjene.

Koristili smo događaje mijenjamo se i na klik na tekstualnom okviru i gumbu. Kada korisnik upiše nešto unutar tekstualnog okvira, mijenjamo se događaj se poziva i polje imena unutar objekta stanja se ažurira, kao što je prikazano u nastavku:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Evo izlaza u pregledniku:

Kada korisnik unese ime:

Kada korisnik klikne na gumb Kliknite ovdje:

Rad s Inline CSS-om u ReactJS-u

Nakon što vaše komponente obrade podatke i događaje, posljednji korak je njihovo stiliziranje. Pogledat ćemo radni primjer kako bismo razumjeli inline CSS u ReactJS-u.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Dodao sam stil color: 'red' u h1 oznaku.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Ispis u pregledniku je sljedeći:

Možete stvoriti objekt sa stilom koji želite na elementu i koristiti izraz za dodavanje stila, kao što je prikazano u gornjem primjeru.

Rad s vanjskim CSS-om u ReactJS-u

Izradimo vanjsku CSS datoteku. Za to stvorite mapu css/ i u nju dodajte style.css.

style.css

.h1tag {
color:red;
}

Dodajte style.css svojoj datoteci index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Sada dodajmo klasu h1 oznaci u .jsx datoteci.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Atribut className dobiva detalje klase. Imajte na umu da JSX koristi naziv klase umjesto HTML atributa class, jer je class rezervirana ključna riječ u JavaSkripta. Sada testirajmo to u pregledniku.

Ovo je ono što vidite kada pregledate h1 oznaku u pregledniku:

Možete vidjeti da je class=”h1tag” uspješno dodan u h1 tag.

Zašto je ReactDOM.render zamijenjen s createRoot

Svaki primjer na ovoj stranici montira aplikaciju s ReactDOM.render, što je ispravno za React 16 i 17, verzije na koje je ovaj tečaj usmjeren. React 18, objavljen u ožujku 2022., zamijenio je tu ulaznu točku s createRoot API-jem, a React 19 je u potpunosti uklonio ReactDOM.render. Razlog je konkurentnost: createRoot omogućuje Reactu da istovremeno pripremi nekoliko verzija korisničkog sučelja, prekine renderiranje niskog prioriteta i zadrži...ping i animacije glatke. Značajke poput automatskog grupiranja, useTransition i streaminga temeljenog na napetosti ovise o tome.

Moderni ekvivalent index.js-a korištenog na ovoj stranici izgleda ovako:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Sve ostalo što ste ovdje naučili - komponente, JSX, stanje, svojstva i događaji - funkcionira na isti način nakon ove promjene u jednom retku na ulaznoj točki. Razlike u verzijama poput ove često se pojavljuju u Pitanja za intervju za React JS, stoga se isplati razumjeti oba API-ja.

Pitanja i odgovori

Također provjerite: - Top 70 React pitanja i odgovora za intervju (ažurirano)