Vodič za početnike za React: Izgradite svoje prvo korisničko sučelje od nule

React je JavaScript biblioteka za izgradnju korisničkih sučelja. Razvijen i održavan od strane Facebooka, postao je jedan od najpopularnijih alata u front-end razvoju. Ovaj vodič će vas provesti kroz osnove Reacta korak po korak, od nule, i izgraditi jednostavno korisničko sučelje.

Zašto odabrati React?

React ima sljedeće prednosti:

• Komponentizacija: React razlaže korisničko sučelje na nezavisne komponente koje se mogu ponovno koristiti. To olakšava održavanje i razumijevanje koda.
• Deklarativnost: React koristi deklarativni stil programiranja, što znači da samo trebate opisati što želite prikazati, a React će automatski obraditi ažuriranja i renderiranje.
• Efikasnost: React koristi virtualni DOM i pametni diff algoritam, koji efikasno ažuriraju korisničko sučelje i smanjuju nepotrebno renderiranje.
• Ogromna podrška zajednice: React ima ogromnu zajednicu i bogat ekosistem, gdje možete pronaći mnoštvo tutorijala, biblioteka i alata koji će vam pomoći u razvoju.
• Mogućnost rada na više platformi: React Native vam omogućuje korištenje Reacta za razvoj nativnih mobilnih aplikacija (iOS i Android).

Priprema

Prije nego što počnete, morate osigurati da imate instalirane sljedeće alate na svom računalu:

• Node.js: Node.js je JavaScript runtime okruženje za pokretanje React razvojnih alata. Možete ga preuzeti i instalirati s https://nodejs.org/.
• npm ili yarn: npm (Node Package Manager) i yarn su JavaScript upravitelji paketima za instaliranje i upravljanje React ovisnostima. npm se obično instalira zajedno s Node.js. yarn se može instalirati s https://yarnpkg.com/.

Kreiranje vaše prve React aplikacije

Koristit ćemo create-react-app za brzo kreiranje React projekta.

1. Kreiranje pomoću npm-a:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Kreiranje pomoću yarn-a:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Nakon izvršavanja gornjih naredbi, create-react-app će automatski kreirati direktorij pod nazivom my-first-react-app i inicijalizirati React projekt u tom direktoriju. Naredba npm start ili yarn start će pokrenuti razvojni server, a vašoj React aplikaciji možete pristupiti u pregledniku na http://localhost:3000.

Struktura direktorija

Struktura direktorija projekta kreiranog pomoću create-react-app je sljedeća:

my-first-react-app/
├── node_modules/         # Biblioteke o kojima projekat ovisi
├── public/               # Statički resursi (npr. HTML datoteke)
│   ├── index.html        # Ulazna HTML datoteka aplikacije
│   └── ...
├── src/                  # React izvorni kod
│   ├── App.css           # CSS stilovi za App komponentu
│   ├── App.js            # App komponenta
│   ├── App.test.js       # Test datoteka za App komponentu
│   ├── index.css         # Globalni CSS stilovi
│   ├── index.js          # Ulazna JavaScript datoteka aplikacije
│   ├── logo.svg          # React logo
│   └── ...
├── .gitignore            # Git datoteka za ignorisanje
├── package.json          # Metapodaci i zavisnosti projekta
├── README.md             # Dokumentacija projekta
└── yarn.lock             # Datoteka za zaključavanje verzija zavisnosti (ako se koristi yarn)

Razumijevanje React Komponenti

React aplikacije su sastavljene od komponenti. Komponente su nezavisni, višekratni blokovi koda koji se koriste za renderiranje određenih dijelova korisničkog sučelja.

U datoteci src/App.js možete vidjeti zadanu App komponentu:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Objašnjenje koda:

• import React from 'react'; Uvozi React biblioteku.
• function App() { ... } Definira funkcijsku komponentu pod nazivom App.
• return ( ... ) Vraća JSX izraz koji opisuje sadržaj koji komponenta treba renderirati.
• export default App; Izvozi App komponentu kako bi se mogla koristiti u drugim datotekama.

JSX (JavaScript XML)

JSX je proširenje JavaScript sintakse koje vam omogućuje pisanje koda sličnog HTML-u unutar JavaScript koda. U gornjem primjeru, ... je JSX izraz. JSX kod se pretvara u standardni JavaScript kod pomoću Babel-a, kako bi ga preglednik mogao razumjeti.

Izmjena App Komponente

Izmijenimo App komponentu kako bismo stvorili jednostavan brojač.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
```  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Brojač

      Trenutni broj: {count}

      +
      -
    
  );
}

export default App;

Objašnjenje izmjena:

• import React, { useState } from 'react'; Uvozi useState Hook. useState je React Hook koji se koristi za dodavanje stanja u funkcijske komponente.
• const [count, setCount] = useState(0); Koristi useState Hook za kreiranje varijable stanja pod nazivom count i inicijalizira je na 0. setCount je funkcija koja se koristi za ažuriranje stanja count.
• const increment = () => { setCount(count + 1); }; Definira funkciju pod nazivom increment koja se koristi za povećanje stanja count za 1.
• const decrement = () => { setCount(count - 1); }; Definira funkciju pod nazivom decrement koja se koristi za smanjenje stanja count za 1.
• Trenutni broj: {count} Prikazuje vrijednost stanja count na stranici. {count} je JSX izraz koji se koristi za umetanje JavaScript varijabli u JSX kod.
• + i - Kreiraju dva gumba, koji su vezani za funkcije increment i decrement. onClick je rukovatelj događajima koji se koristi za izvršavanje određene funkcije kada se klikne gumb.

Nakon spremanja datoteke src/App.js, preglednik će se automatski osvježiti i vidjet ćete jednostavan brojač. Klikom na gumb "+" povećat će se broj, a klikom na gumb "-" smanjit će se broj.

Korištenje CSS stilova

Možete koristiti CSS za uljepšavanje svoje React aplikacije. create-react-app podržava CSS Module i obične CSS datoteke.

Korištenje CSS Modula:

CSS Moduli vam omogućuju stvaranje neovisnih CSS stilova za svaku komponentu, izbjegavajući sukobe stilova. Da biste koristili CSS Module u komponenti, morate stvoriti datoteku koja završava s .module.css.

Na primjer, stvorite datoteku pod nazivom App.module.css i dodajte sljedeće CSS stilove u nju:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Zatim uvezite CSS Module u datoteku src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Uvoz CSS Modula

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Koristite styles objekat za referenciranje CSS klasa */}
      

# Brojač

      Trenutni broj: {count}

      +
      -
    
  );
}

export default App;

Korištenje obične CSS datoteke:

Mžete koristiti i običnu CSS datoteku za definiranje globalnih stilova. U datoteci src/index.css možete definirati globalne stilove.

Na primjer, dodajte sljedeći CSS stil:

body {
  font-family: sans-serif;
}

Ovaj stil će se primijeniti na body element cijele aplikacije.

Sljedeći koraci

Čestitamo, završili ste svoju prvu React aplikaciju! Sljedeće, možete naučiti više o Reactu, na primjer:

• Komunikacija komponenti: Naučite kako omogućiti komunikaciju između različitih komponenti.
• Obrada obrazaca: Naučite kako kreirati i obrađivati obrasce.
• Ruting: Naučite kako koristiti React Router za kreiranje aplikacija s više stranica.
• Redux ili Context API: Naučite kako upravljati stanjem aplikacije.
• Hooks: Detaljnije upoznajte React Hooks, kao što su useEffect, useContext itd.

Zapamtite, React je tehnologija koja zahtijeva stalnu praksu i učenje. Sretno u učenju!