Tutorijal o kreiranju web aplikacije pomoću React.js-a

React.js je popularna biblioteka za razvoj front-end aplikacija koja se koristi za izgradnju interaktivnih korisničkih interfejsa (UI). Razvijen od strane Facebooka, React.js koriste mnoge velike kompanije, uključujući Instagram, Airbnb i WhatsApp. Ako želite izgraditi efikasne, brze i responzivne web aplikacije, React.js bi mogao biti pravi izbor za vas.

Pendahuluan

Prije nego što počnemo, provjerite da li imate Node.js i npm (Node Package Manager) instalirane na vašem računaru. Node.js i npm su neophodni jer pružaju okruženje i alate potrebne za razvoj web aplikacija pomoću React.js-a.

Korak 1: Inicijalizacija React projekta

Za kreiranje nove React.js aplikacije, možemo koristiti Create React App, alat za kreiranje aplikacija koji minimizira početnu konfiguraciju. Pokrenite sljedeću naredbu u terminalu ili komandnoj liniji:

“`bash
npx kreiraj-reakt-aplikaciju moja-aplikacija
cd moja aplikacija
npm start
"`

Ova naredba će kreirati novi direktorij pod nazivom `my-app`, preuzeti i instalirati sve potrebne zavisnosti i pokrenuti razvojni server. Sada možete otvoriti preglednik i pristupiti `http://localhost:3000` da biste vidjeli zadanu React.js aplikaciju.

Korak 2: Struktura foldera

Pogledajmo strukturu foldera koju je kreirao Create React App:

"`
moja-aplikacija/
├── moduli_čvorova/
├── javno/
│ └── index.html
└── izvor/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
"`

– `node_modules/`: Sadrži sve zavisnosti vašeg projekta.
– `public/`: Sadrži statičke datoteke, uključujući `index.html` koja je ulazna tačka aplikacije.
– `src/`: Gdje ćete provoditi većinu vremena. Sadrži React komponente, CSS datoteke i ostale resurse.

Korak 3: Brisanje nepotrebnih datoteka

Za početak, obrišemo neke nepotrebne datoteke. Obrišite `logo.svg` i `App.test.js` unutar mape `src/`. Zatim otvorite `App.css` i `index.css`, brišući sav CSS kod unutar njih kako biste započeli s čistim stilskim listom.

Korak 4: Kreiranje vaše prve komponente

React.js je baziran na komponentama. Komponente su gradivni blokovi vaše web aplikacije. Hajde da modificiramo `App.js` da bismo kreirali našu prvu komponentu.

Otvorite `src/App.js` i zamijenite ga sljedećim kodom:

“`jsx
import React from 'react';
import './App.css';

funkcija Aplikacija() {
povratak (

);
}

izvoz zadane aplikacije;
"`

Inicijalizirajte React kod unutar `App.js` koristeći JSX (JavaScript XML), što nam omogućava pisanje HTML-slične sintakse unutar JavaScripta. Sačuvajte promjene i pogledajte rezultate u vašem pregledniku.

Korak 5: Dodavanje novih komponenti

Sada dodajmo neke nove komponente. Napravite novu mapu pod nazivom `components` unutar mape `src`. Zatim kreirajte novu datoteku `HelloWorld.js` u mapi `components`.

“`jsx
import React from 'react';

funkcija ZdravoSvijete() {
povratak (

);
}

izvoz zadanih vrijednosti HelloWorld;
"`

Otvorite `App.js` i uvezite komponentu `HelloWorld` koju smo upravo kreirali:

“`jsx
import React from 'react';
import './App.css';
uvoz HelloWorld iz './components/HelloWorld';

funkcija Aplikacija() {
povratak (

);
}

izvoz zadane aplikacije;
"`

Sada, `App.js` renderira komponentu `HelloWorld` na glavnoj stranici.

Korak 6: Dodavanje upravljanja stanjem pomoću useState

React ima vrlo moćne hooks-ove za upravljanje stanjem. Dodajmo neko stanje našoj aplikaciji. Na primjer, dodajmo brojač koji se povećava svaki put kada se klikne na dugme.

Otvorite `HelloWorld.js` i dodajte state i `useState` hook:

“`jsx
uvoz React, {useState } iz 'react';

funkcija ZdravoSvijete() {
const[broj, postaviBroj] = koristiState(0);

const incrementCount = () => {
postaviBroj(broj + 1);
}

povratak (

);
}

izvoz zadanih vrijednosti HelloWorld;
"`

Stanje `count` je inicijalizirano s vrijednošću 0, i svaki put kada se klikne na dugme, funkcija `incrementCount` će povećati ovu vrijednost.

Korak 7: Dodavanje stila

Za dodavanje stila možemo koristiti CSS u datoteci `App.css` ili možemo koristiti CSS-in-JS biblioteku poput styled-components. Za sada ćemo se držati standardnog CSS-a.

Otvorite `App.css` i dodajte neke stilove:

"css"
.Aplikacija {
tekstualno poravnanje: centar;
}

.App-header {
boja-pozadine: 282c34;
minimalna visina: 100vh;
displej: flex;
flex-direction: stupac;
poravnati predmete: centar;
justify-content: centar;
veličina fonta: calc(10px + 2vmin);
boja: bijela;
}

dugme {
padding: 10px 20px;
margin-top: 20px;
Veličina fonta: 16px;
}
"`

Korak 8: Dodavanje rutiranja pomoću React Routera

Da bismo dodali navigaciju između različitih stranica u našoj aplikaciji, možemo koristiti React Router. Instalirajte React Router pokretanjem sljedeće naredbe:

“`bash
npm install react-router-dom
"`

Zatim, kreirajte dvije nove komponente: `Home.js` i `About.js` u mapi `components`.

`Home.js`:
“`jsx
import React from 'react';

funkcija Početna() {
povratak (

);
}

izvoz zadanih postavki Početna;
"`

`About.js`:
“`jsx
import React from 'react';

funkcija About() {
povratak (

);
}

izvoz zadanih podataka O nama;
"`

Zatim otvorite `App.js` i postavite rutiranje:

“`jsx
import React from 'react';
uvoz { BrowserRouter kao Ruter, Ruta, Link, Prekidač } iz 'react-router-dom';
import './App.css';
uvoz HelloWorld iz './components/HelloWorld';
uvezi Početna iz './komponente/Početna';
uvezi O nama iz './components/About';

funkcija Aplikacija() {
povratak (

);
}

izvoz zadane aplikacije;
"`

Ovim smo dodali osnovnu navigaciju između različitih stranica u našoj aplikaciji.

Zatvaranje

To je osnovni tutorijal za kreiranje web aplikacije pomoću React.js-a. Obradili smo postavljanje projekta, kreiranje komponenti, upravljanje stanjem, stiliziranje i usmjeravanje. React.js ima bogat ekosistem s brojnim bibliotekama i alatima koji vam mogu pomoći u izgradnji složenijih web aplikacija.

Sretno, i nadam se da će vam ovaj tutorijal pomoći da započnete svoje putovanje s React.js-om!