Uvodni vodič 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 voditi od nule, korak po korak, kroz osnovne koncepte Reacta 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 neovisne 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 opisujete što želite prikazati, a React automatski obrađuje ažuriranja i renderiranje.
• Učinkovitost: React koristi virtualni DOM i pametni diff algoritam, koji učinkovito ažuriraju korisničko sučelje i smanjuju nepotrebno renderiranje.
• Velika podrška zajednice: React ima veliku zajednicu i bogat ekosustav, 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. Obično se npm instalira zajedno s Node.js. yarn se može instalirati s https://yarnpkg.com/.

Stvaranje vaše prve React aplikacije

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

1. Stvaranje pomoću npm-a:

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

2. Stvaranje 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 stvoriti direktorij pod nazivom my-first-react-app i inicijalizirati React projekt u tom direktoriju. Naredba npm start ili yarn start pokrenut će razvojni poslužitelj, a vašoj React aplikaciji možete pristupiti u pregledniku na http://localhost:3000.

Struktura direktorija

Struktura direktorija projekta koju stvara create-react-app je sljedeća:

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

Razumijevanje React komponenti

React aplikacije se sastoje od komponenti. Komponente su nezavisni, višekratno upotrebljivi 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 nazvanu App.
• return ( ... ) Vraća JSX izraz koji opisuje što bi komponenta trebala 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 će Babel pretvoriti u standardni JavaScript kod 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 stvaranje varijable stanja pod nazivom count i inicijalizira je na 0. setCount je funkcija 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 - Stvara dva gumba, vezana 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 Module:

CSS Module vam omogućuje 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:

.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 Module

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

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

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

# Brojač

      Trenutni broj: {count}

      +
      -
    
  );
}

export default App;

Korištenje obične CSS datoteke:

Mož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će CSS stilove:

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! Zatim 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 stvoriti i obraditi obrasce.
• Usmjeravanje (Routing): Naučite kako koristiti React Router za stvaranje aplikacija s više stranica.
• Redux ili Context API: Naučite kako upravljati stanjem aplikacije.
• Hooks: Dublje istražite React Hooks, kao što su useEffect, useContext itd.

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