ReactJS vodič za početnike: učite uz primjer korak po korak

Što je ReactJS?

ReactJS je otvoreno sučelje JavaBiblioteka skripti za izgradnju korisničkih sučelja. ReactJS održavaju Facebook i zajednica pojedinačnih programera i tvrtki. Naširoko se koristi kao baza za izradu jednostraničkih web stranica i mobilnih aplikacija. Vrlo je jednostavan za korištenje i omogućuje korisnicima stvaranje komponenti korisničkog sučelja za višekratnu upotrebu.

Značajke ReactJS-a

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

Komponente: Komponente su poput čistih javascript funkcija koje olakšavaju izradu koda dijeljenjem logike u nezavisni kod koji se može ponovno koristiti. Komponente možemo koristiti kao funkcije, a komponente kao klase. Komponente također imaju stanje, rekvizite koji olakšavaju život. Unutar klase održava se stanje svakog od rekvizita.

Virtualni DOM: React stvara virtualni dom, tj. predmemoriju strukture podataka u memoriji. Samo konačne promjene DOM-a kasnije su ažurirane u DOM-u preglednika.

Javascript Izrazi: JS izrazi mogu se koristiti u jsx datotekama pomoću vitičastih zagrada, na primjer {}.

Prednosti ReactJS-a

Evo važnih prednosti/prednosti 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 preglednika. Time aplikacija postaje brža.
Možete izraditi komponente po svom izboru korištenjem značajke komponente react. Komponente se mogu ponovno koristiti, a također mogu biti korisne u održavanju koda.
Reactjs je javascript biblioteka otvorenog koda, tako da je lako započeti s njom.
ReactJS je u kratkom vremenu postao vrlo popularan i održavaju ga Facebook i Instagram. Koriste ga mnoge poznate tvrtke poput Applea, Netflix, Itd
Facebook održava ReactJS, biblioteku, tako da se dobro održava i ažurira.
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 nego na Html.

Nedostaci ReactJS-a

Ovdje su mane/mane korištenja ReactJS-a:

Većina koda napisana je u JSX-u, tj. Html i css dio su javascripta, što može biti prilično zbunjujuće jer većina drugih okvira preferira držati Html odvojenim od javascript koda.
Veličina datoteke ReactJS je velika.

Korištenje ReactJS-a iz CDN-a

Da bismo počeli raditi s reactom, prvo moramo instalirati reactjs. Lako možete početi koristiti reactjs koristeći CDN javascript datoteke, kao što je prikazano u nastavku.

Idite na službenu stranicu reactj-a da biste dobili CDN poveznice, tj. https://reactjs.org/docs/cdn-links.html i dobit ćete potrebne datoteke za objašnjenje sljedeće slike.

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 najnovijom react verzijom za react-development.js i react-dom.developement.js. Datoteke možete ugostiti na svojoj strani kako biste počeli raditi s reactj-om.

U slučaju da planirate koristiti CDN datoteke, svakako zadržite atribut cross-origin kako biste izbjegli probleme s cross-domain. Reactjs kod ne može se izvršiti izravno u pregledniku i potrebno ga je prenijeti pomoću Babela u javascript prije izvršenja u pregledniku.

Ovdje je BabelJS skripta koja se može koristiti:

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Ovdje je radni primjer ReactJS 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/[email protected]/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ći ćemo u detalje koda u sljedećem poglavlju, da vidimo kako se ovdje radi s CDN datotekama. Rečeno je da izravno korištenje babel skripte nije dobra praksa, a novopridošlice je za sada mogu 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 nodejs. Ako nije instaliran, prođite kroz ovaj vodič za nodejs (https://www.guru99.com/node-js-tutorial.html) instalacija.

Nakon što instalirate nodejs, stvorite mapu reactproj/.

Za početak postavljanja projekta pokrenite naredbu npm init.

Ovako će izgledati struktura mape:

reactproj\
package.json

Sada ćemo instalirati pakete koji su nam potrebni.

Evo popisa paketa za reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

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

Napravite mapu src / gdje će sav js kod doći u tu mapu. Sav kod za reactjs projekt bit će dostupan u mapi src/. Napravite datoteku index.js i dodajte import react i react-dom, kao što je prikazano u nastavku.

index.js

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

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

Vratili smo osnovni kod za reactjs. Detalje o tome objasnit ćemo u sljedećem poglavlju. Želimo prikazati Pozdrav iz Guru99 Tutorials a isto se daje elementu dom s id-om "root". Preuzeto je 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 u nastavku

index.html

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

Paket react-skripti će se pobrinuti za kompajliranje koda i pokretanje poslužitelja za prikaz html datoteke tj. index.html. Morate dodati naredbu u package.json koja će se pobrinuti za korištenje react-skripti 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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Za početak testiranja reactj pokrenite naredbu

npm run start

C:\reactproj>npm run start		
> [email protected] start C:\reactproj		
> react-scripts start

Otvorit će preglednik s url-om 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>

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

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

Kako napraviti svoju prvu postavku React projekta

Evo vodiča korak po korak u ovom ReactJS vodiču za početak prve react aplikacije.

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) Napišite jednostavan kod.
Napisat ćemo jednostavan kod u ovom tutorialu React JS, u kojem ćemo prikazati poruku "Pozdrav iz Guru99 Tutorials!"

ReactDOM.render(

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

ReactDOM.render će dodati oznaku elementu s id root-om. Ovo je html datoteka 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 kod.

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 prevođenje konačne datoteke pokrenite sljedeću naredbu:

npm run start

Kada pokrenete gornju naredbu, ona će kompajlirati datoteke i obavijestiti vas ako dođe do pogreške, ako sve izgleda dobro, otvorit će preglednik i pokrenuti datoteku index.html na http://localhost:3000/index.html

Naredba: npm run start:

C:\reactproj>npm run start

> [email protected] start C:\reactproj
> react-scripts start

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

Što je JSX?

JSX je proširenje za javascript. To je skripta predloška u kojoj ćete imati moć korištenja HTML-a i Javascript 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 domu imat će događaje kojima se treba rukovati, promjene stanja itd.

U slučaju Reacta, to nam omogućuje da koristimo Html i javascript u istoj datoteci i brinemo o promjenama stanja u domu na učinkovit način.

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 da bismo dodali izraze. Izrazi se koriste unutar vitičastih zagrada {} i proširuju se tijekom vremena izvođenja. Izrazi u Reactu isti su kao javascript izrazi.

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.

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 potrebni kod i koristit ćemo datoteku text.jsx u index.js. Želimo h1tag varijabla koja će se koristiti unutar script.js, tako da se ista izvozi kao što je prikazano gore u test.jsx

Ovdje je modificirani kod 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 poput čistih javascript funkcija koje olakšavaju izradu koda dijeljenjem logike u neovisan kod koji se može ponovno koristiti.

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 koja je vratila 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. i dodijeljen Pozdrav_comp varijablu i isti se eksportira korištenjem exporta.

Iskoristimo sada 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 možemo koristiti u datoteci index.js 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 koristi se kao Html oznaka, tj. .

Ovdje je rezultat istog.

Što je stanje u ReactJS?

Stanje je javascript objekt sličan propsima koji imaju podatke koji se koriste s reactjs renderom. Podaci o stanju privatni su objekt i koriste se unutar komponenti unutar klase.

Primjer države

Ovdje je radni primjer 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?

Rekviziti su svojstva koja se koriste unutar komponente. Djeluju kao globalni objekt 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 pripisati 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 rekvizitima 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

Životni ciklus komponente podijeljen je u faze inicijalizacije, montaže, ažuriranja i demontaže.

Ovdje je detaljno objašnjenje svake komponente.

Komponenta u reactjs ima sljedeće faze:

Inicijalizacija: Ovo je prva faza životnog ciklusa komponente.

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

Montiranje: U ovoj fazi, komponenta se prikazuje unutar dom. Izloženi smo sljedećim metodama u stanju montaže.

componentDidMount(): Ovo se također poziva kada je komponenta upravo dodana u dom.

render(): imate ovu metodu za sve stvorene komponente. Vraća Html čvor.

Nadopune: U ovom stanju korisnik komunicira s domom i ažurira se. Na primjer, unesete nešto u tekstni okvir, pa se svojstva stanja ažuriraju.

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

shouldComponentUpdate() : poziva se kada se komponenta ažurira.

componentDidUpdate() : nakon ažuriranja komponente.

Demontaža: ovo stanje se pojavljuje kada komponenta nije potrebna ili uklonjena.

Sljedeće su metode dostupne u stanju demontaže:

Component willUnmount(): poziva se kada se komponenta ukloni ili uništi.

Radni primjer

Ovdje je radni primjer koji pokazuje metode pozvane u svakom stanju.

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:

Rad s obrascima

U reactjs Html ulazni elementi poput , i <select /> ima vlastito stanje i potrebno ga je ažurirati kada korisnik stupi u interakciju pomoću metode setState().

U ovom poglavlju ćemo vidjeti kako raditi s obrascima 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, tako da za tu reakciju postoji posebna metoda tzv setState, koji pomaže održati stanje kad god dođe do promjene.

Koristili smo događaje onChange i onClick na okvir za tekst i gumb za slanje. Kada korisnik uđe u tekstni okvir, poziva se događaj onChange, a polje imena unutar stanja objekta stanja ažurira se 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 tekstni okvir:

Kliknite gumb za slanje

Rad s događajima u ReactJS

Rad s događajima u reactjs-u isti je kao što biste radili u javascriptu. Možete koristiti sve rukovatelje događajima koji se koriste u javascriptu. Metoda setState() koristi se za ažuriranje stanja kada korisnik komunicira s bilo kojim Html elementom.

Ovdje je radni primjer kako koristiti događaje u reactjs.

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, tako da za tu reakciju postoji posebna metoda tzv setState, koji pomaže održati stanje kad god dođe do promjene.

Iskoristili smo događaje mijenjamo se i na klik na okvir za tekst i gumb. Kada korisnik unese unutar tekstualnog okvira mijenjamo se poziva se događaj, a polje naziva unutar stanja objekta stanja ažurira se 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

Pogledat ćemo radni primjer kako bismo razumjeli rad ugrađenog css-a 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 boju: 'crveni' stil oznaci h1.

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 stila 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

Kreirajmo vanjski css, za to stvorimo mapu css/ i dodamo style.css u nju.

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>
    <script src = "out/script.min.js"></script>
  </body>
</html>

Dodajmo sada klasu u oznaku h1 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')
);

Atributu className dati su detalji klase. Testirajmo sada u pregledniku.

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

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

rezime

ReactJS je front-end otvorenog koda JavaBiblioteka skripti za izradu korisničkog sučelja. Održava ga Facebook i danas ga koriste mnoge tvrtke za razvoj korisničkog sučelja.
Osnovne značajke ReactJS-a uključuju JSX, komponente (funkcionalne komponente i komponente temeljene na klasi), životni ciklus komponente, rekvizite i podršku stanja za komponentu, rad s javascript izrazima.
Postavljanje projekta ReactJS objašnjeno je korištenjem CDN datoteka i korištenjem npm paketa za izradu projekta.
JSX je proširenje za javascript. To je skripta predloška u kojoj ćete imati moć korištenja Html-a i JavaScripta zajedno.
Komponente su poput čistih javascript funkcija koje olakšavaju izradu koda dijeljenjem logike u neovisan kod koji se može ponovno koristiti.
Stanje je javascript objekt sličan propsima koji imaju podatke koji se koriste s reactjs renderom. Podaci o stanju privatni su objekt i koriste se unutar komponenti unutar klase.
Rekviziti su svojstva koja se koriste unutar komponente.
Životni ciklus komponente podijeljen je u faze inicijalizacije, montaže, ažuriranja i demontaže.
U reactjs html ulazni elementi poput , i <select /> ima vlastito stanje i potrebno ga je ažurirati kada korisnik stupi u interakciju pomoću metode setState().
Rad s događajima u reactjs-u isti je kao što biste radili u javascriptu. Možete koristiti sve rukovatelje događajima koji se koriste u javascriptu. Metoda setState() koristi se za ažuriranje stanja kada korisnik komunicira s bilo kojim Html elementom.
ReactJS vam omogućuje rad s vanjskim css-om kao i s ugrađenim css-om pomoću javascript izraza.

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

Možda ti se svidi:

5 NAJBOLJIH React tečajeva s...

Što je ReactJS?

Značajke ReactJS-a

Prednosti ReactJS-a

Nedostaci ReactJS-a

Korištenje ReactJS-a iz CDN-a

Za dev

Za prod

POVEZANI ČLANCI

Korištenje NPM paketa

Kako napraviti svoju prvu postavku React projekta

Što je JSX?

Zašto nam treba JSX u Reactu?

Izrazi u JSX

Što su komponente u ReactJS?

Komponente kao funkcije

Klasa kao komponenta

Što je stanje u ReactJS?

Primjer države

Što su Props u ReactJS?

Props to Function Component

Rekviziti za komponentu klase

Životni ciklus komponente

Radni primjer

Rad s obrascima

Rad s događajima u ReactJS

Rad s Inline CSS-om u ReactJS-u

Rad s vanjskim CSS-om u ReactJS-u

rezime