Uvodni vodnik v React: Iz nič do izgradnje vašega prvega uporabniškega vmesnika

# Uvodni vodnik v React: Iz nič do izgradnje vašega prvega uporabniškega vmesnika

React je knjižnica JavaScript za izgradnjo uporabniških vmesnikov. Razvil in vzdržuje ga Facebook in je postal eno najbolj priljubljenih orodij v razvoju sprednjega dela. Ta vodnik vas bo vodil od začetka, korak za korakom, skozi osnovne koncepte Reacta in izgradnjo preprostega uporabniškega vmesnika.

## Zakaj izbrati React?

React ima naslednje prednosti:

* **Komponentizacija:** React razdeli uporabniški vmesnik na neodvisne, ponovno uporabne komponente. To olajša vzdrževanje in razumevanje kode.
* **Deklarativnost:** React uporablja deklarativni slog programiranja, kar pomeni, da morate samo opisati, kaj želite predstaviti, React pa bo samodejno obravnaval posodobitve in upodabljanje.
* **Učinkovitost:** React uporablja virtualni DOM in inteligentni diff algoritem, ki učinkovito posodablja uporabniški vmesnik in zmanjšuje nepotrebno upodabljanje.
* **Obsežna podpora skupnosti:** React ima obsežno skupnost in bogat ekosistem, kjer lahko najdete veliko vadnic, knjižnic in orodij, ki vam pomagajo pri razvoju.
* **Zmožnost medplatformskosti:** React Native vam omogoča uporabo Reacta za razvoj izvornih mobilnih aplikacij (iOS in Android).

## Priprava

Preden začnete, se morate prepričati, da imate na računalniku nameščena naslednja orodja:

* **Node.js:** Node.js je izvajalno okolje JavaScript, ki se uporablja za izvajanje razvojnih orodij React. Lahko ga prenesete in namestite s spletnega mesta [https://nodejs.org/](https://nodejs.org/).
* **npm ali yarn:** npm (Node Package Manager) in yarn sta upravitelja paketov JavaScript, ki se uporabljata za namestitev in upravljanje odvisnosti Reacta. Običajno se npm namesti skupaj z Node.js. Yarn lahko namestite s spletnega mesta [https://yarnpkg.com/](https://yarnpkg.com/).

## Ustvarjanje vaše prve aplikacije React

Za hitro ustvarjanje projekta React bomo uporabili `create-react-app`.

1. **Ustvarjanje z npm:**

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

2. Ustvarjanje z yarn:

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

Po izvedbi zgornjih ukazov bo create-react-app samodejno ustvaril imenik z imenom my-first-react-app in inicializiral projekt React v tem imeniku. Ukaz npm start ali yarn start bo zagnal razvojni strežnik, vašo aplikacijo React pa si lahko ogledate v brskalniku na naslovu http://localhost:3000.

Struktura imenikov

Struktura imenikov projekta, ki ga ustvari create-react-app, je naslednja: my-first-react-app/ ├── node_modules/ # Knjižnice, od katerih je odvisen projekt ├── public/ # Statični viri (npr. HTML datoteke) │ ├── index.html # Vstopna HTML datoteka aplikacije │ └── ... ├── src/ # Izvorna koda React │ ├── App.css # CSS slogi komponente App │ ├── App.js # Komponenta App │ ├── App.test.js # Testna datoteka komponente App │ ├── index.css # Globalni CSS slogi │ ├── index.js # Vstopna JavaScript datoteka aplikacije │ ├── logo.svg # React logo │ └── ... ├── .gitignore # Datoteka za ignoriranje Git ├── package.json # Metapodatki in odvisnosti projekta ├── README.md # Dokumentacija projekta └── yarn.lock # Datoteka za zaklepanje različic odvisnosti (če uporabljate yarn)

Razumevanje React komponent

Aplikacije React so sestavljene iz komponent. Komponente so neodvisni, ponovno uporabni bloki kode, ki se uporabljajo za upodabljanje določenih delov uporabniškega vmesnika.

V datoteki src/App.js lahko vidite privzeto komponento App:

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;

Razlaga kode:

• import React from 'react'; uvozi knjižnico React.
• function App() { ... } definira funkcijsko komponento z imenom App.
• return ( ... ) vrne JSX izraz, ki opisuje, kaj naj komponenta upodobi.
• export default App; izvozi komponento App, da jo je mogoče uporabiti v drugih datotekah.

JSX (JavaScript XML)

JSX je razširitev sintakse JavaScript, ki vam omogoča pisanje kode, podobne HTML, v kodi JavaScript. V zgornjem primeru je ... JSX izraz. Kodo JSX bo Babel pretvoril v standardno kodo JavaScript, da jo bo brskalnik lahko razumel.

Spreminjanje komponente App

Spremenimo komponento App in ustvarimo preprost števec.

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 (
    
      

# Števec

      Trenutno število: {count}

      +
      -
    
  );
}

export default App;

Spremembe:

• import React, { useState } from 'react'; Uvozi useState Hook. useState je React Hook, ki se uporablja za dodajanje stanja v funkcijske komponente.
• const [count, setCount] = useState(0); Uporabi useState Hook za ustvarjanje spremenljivke stanja z imenom count in jo inicializira na 0. setCount je funkcija za posodabljanje stanja count.
• const increment = () => { setCount(count + 1); }; Definira funkcijo z imenom increment, ki se uporablja za povečanje stanja count za 1.
• const decrement = () => { setCount(count - 1); }; Definira funkcijo z imenom decrement, ki se uporablja za zmanjšanje stanja count za 1.
• Trenutno število: {count} Prikaže vrednost stanja count na strani. {count} je JSX izraz, ki se uporablja za vstavljanje JavaScript spremenljivk v JSX kodo.
• + in - Ustvarita dva gumba, ki sta vezana na funkciji increment in decrement. onClick je obravnavalnik dogodkov, ki se uporablja za izvajanje določene funkcije, ko je gumb kliknjen.

Ko shranite datoteko src/App.js, se bo brskalnik samodejno osvežil in videli boste preprost števec. Klik na gumb "+" bo povečal število, klik na gumb "-" pa ga bo zmanjšal.

Uporaba CSS stilov

Za polepšanje vaše React aplikacije lahko uporabite CSS. create-react-app podpira CSS Module in običajne CSS datoteke.

Uporaba CSS Modules:

CSS Modules vam omogočajo, da ustvarite neodvisne CSS sloge za vsako komponento in se izognete konfliktom slogov. Če želite uporabiti CSS Modules v komponenti, morate ustvariti datoteko, ki se konča z .module.css.

Na primer, ustvarite datoteko z imenom App.module.css in ji dodajte naslednje CSS sloge:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

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

Nato uvozite CSS Modules v datoteko src/App.js:

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

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

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

  return (
     {/* Uporaba objekta styles za sklicevanje na CSS razrede */}
      

# Števec

      Trenutno število: {count}

      +
      -
    
  );
}

export default App;

Uporaba navadne CSS datoteke:

Uporabite lahko tudi navadno CSS datoteko za definiranje globalnih stilov. V datoteki src/index.css lahko definirate globalne stile.

Na primer, dodajte naslednje CSS stile:

body {
  font-family: sans-serif;
}

Ta stil bo uporabljen za celoten body element aplikacije.

Naslednji koraki

Čestitke, dokončali ste svojo prvo React aplikacijo! Nato se lahko naučite več o Reactu, na primer:

• Komunikacija med komponentami: Naučite se, kako omogočiti komunikacijo med različnimi komponentami.
• Obdelava obrazcev: Naučite se, kako ustvariti in obdelati obrazce.
• Usmerjanje (Routing): Naučite se, kako ustvariti aplikacijo z več stranmi z uporabo React Routerja.
• Redux ali Context API: Naučite se, kako upravljati stanje aplikacije.
• Hooks: Poglobljeno spoznajte React Hookse, kot so useEffect, useContext itd.

Zapomnite si, React je tehnologija, ki zahteva nenehno vadbo in učenje. Želim vam prijetno učenje!