Reacti sissejuhatav juhend: ehita oma esimene kasutajaliides nullist

React on JavaScripti teek kasutajaliideste ehitamiseks. Selle on välja töötanud ja hooldab Facebook ning see on muutunud üheks populaarseimaks tööriistaks veebirakenduste arenduses. See juhend viib sind samm-sammult läbi Reacti põhimõistete ja aitab ehitada lihtsa kasutajaliidese.

Miks valida React?

Reactil on järgmised eelised:

• Komponentpõhine: React jagab kasutajaliidese sõltumatuteks, taaskasutatavateks komponentideks. See muudab koodi lihtsamini hooldatavaks ja arusaadavaks.
• Deklaratiivne: React kasutab deklaratiivset programmeerimisstiili, mis tähendab, et sa kirjeldad ainult seda, mida sa soovid kuvada, ja React tegeleb automaatselt uuenduste ja renderdamisega.
• Tõhus: React kasutab virtuaalset DOM-i ja nutikat diff-algoritmi, et tõhusalt uuendada kasutajaliidest, vähendades tarbetut renderdamist.
• Suur kogukonna tugi: Reactil on suur kogukond ja rikkalik ökosüsteem, kust leiad palju õpetusi, teeke ja tööriistu, mis aitavad sul arendada.
• Platvormideülene võimekus: React Native võimaldab sul kasutada Reacti natiivsete mobiilirakenduste (iOS ja Android) arendamiseks.

Ettevalmistused

Enne alustamist pead veenduma, et sinu arvutisse on installitud järgmised tööriistad:

• Node.js: Node.js on JavaScripti käituskeskkond, mida kasutatakse Reacti arendustööriistade käitamiseks. Sa saad selle alla laadida ja installida aadressilt https://nodejs.org/.
• npm või yarn: npm (Node Package Manager) ja yarn on JavaScripti paketihaldurid, mida kasutatakse Reacti sõltuvuste installimiseks ja haldamiseks. Tavaliselt installitakse npm koos Node.js-iga. yarni saab installida aadressilt https://yarnpkg.com/.

Loo oma esimene Reacti rakendus

Me kasutame create-react-app tööriista, et kiiresti Reacti projekt luua.

1. Loo npm-iga:

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

2. Loo yarn-iga:

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

Pärast ülaltoodud käskude käivitamist loob create-react-app automaatselt kataloogi nimega my-first-react-app ja initsialiseerib selles kataloogis Reacti projekti. Käsk npm start või yarn start käivitab arendusserveri ja sa saad oma Reacti rakendust vaadata brauseris aadressil http://localhost:3000.

Kataloogi struktuur

create-react-app loodud projekti kataloogi struktuur on järgmine:

my-first-react-app/
├── node_modules/         # Projekti sõltuvused
├── public/               # Staatilised ressursid (nt HTML-failid)
│   ├── index.html        # Rakenduse sisenemispunkt HTML-fail
│   └── ...
├── src/                  # Reacti lähtekood
│   ├── App.css           # App komponendi CSS-stiilid
│   ├── App.js            # App komponent
│   ├── App.test.js       # App komponendi testfail
│   ├── index.css         # Globaalsed CSS-stiilid
│   ├── index.js          # Rakenduse sisenemispunkt JavaScripti fail
│   ├── logo.svg          # Reacti logo
│   └── ...
├── .gitignore            # Git ignore fail
├── package.json          # Projekti metaandmed ja sõltuvused
├── README.md             # Projekti dokumentatsioon
└── yarn.lock             # Sõltuvuste versioonide lukustusfail (kui kasutatakse yarn'i)

Reacti komponentide mõistmine

Reacti rakendused koosnevad komponentidest. Komponendid on iseseisvad, taaskasutatavad koodiplokid, mida kasutatakse kasutajaliidese konkreetsete osade renderdamiseks.

Failis src/App.js näete vaikimisi App komponenti:

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;

Koodi seletus:

• import React from 'react'; Impordib Reacti teegi.
• function App() { ... } Defineerib funktsionaalse komponendi nimega App.
• return ( ... ) Tagastab JSX avaldise, mis kirjeldab, mida komponent peaks renderdama.
• export default App; Ekspordib App komponendi, et seda saaks teistes failides kasutada.

JSX (JavaScript XML)

JSX on JavaScripti süntaksi laiendus, mis võimaldab teil JavaScripti koodis kirjutada HTML-i sarnast koodi. Ülaltoodud näites on ... JSX avaldis. JSX kood teisendatakse Babeli abil tavaliseks JavaScripti koodiks, et brauser saaks sellest aru.

App komponendi muutmine

Muudame App komponenti, et luua lihtne loendur.

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 (
 
 

 # Loendur

 Praegune loend: {count}

 +
 -
 
 );
}

export default App;

Muudatuste selgitus:

• import React, { useState } from 'react'; Impordib useState Hooki. useState on Reacti Hook, mida kasutatakse funktsioonikomponentides oleku lisamiseks.
• const [count, setCount] = useState(0); Kasutab useState Hooki, et luua oleku muutuja nimega count ja initsialiseerida see väärtusega 0. setCount on funktsioon, mida kasutatakse count oleku uuendamiseks.
• const increment = () => { setCount(count + 1); }; Defineerib funktsiooni nimega increment, mida kasutatakse count oleku suurendamiseks 1 võrra.
• const decrement = () => { setCount(count - 1); }; Defineerib funktsiooni nimega decrement, mida kasutatakse count oleku vähendamiseks 1 võrra.
• Praegune loend: {count} Kuvab lehel count oleku väärtuse. {count} on JSX avaldis, mida kasutatakse JavaScripti muutujate sisestamiseks JSX koodi.
• + ja - Loovad kaks nuppu, mis on vastavalt seotud funktsioonidega increment ja decrement. onClick on sündmuse käsitleja, mida kasutatakse määratud funktsiooni käivitamiseks, kui nupule klõpsatakse.

Pärast src/App.js faili salvestamist värskendatakse brauser automaatselt ja näete lihtsat loendurit. Nupule "+" klõpsamine suurendab loendit ja nupule "-" klõpsamine vähendab loendit.

CSS-i stiilide kasutamine

Saate oma Reacti rakenduse välimust CSS-i abil parandada. create-react-app toetab CSS-mooduleid ja tavalisi CSS-faile.

CSS-moodulite kasutamine:

CSS-moodulid võimaldavad teil luua iga komponendi jaoks eraldi CSS-stiile, vältides stiilide konflikte. CSS-moodulite kasutamiseks komponendis peate looma faili, mis lõpeb nimega .module.css.

Näiteks looge fail nimega App.module.css ja lisage sinna järgmised CSS-stiilid:

.App {
 text-align: center;
}

.App h1 {
 color: blue;
}

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

Seejärel importige CSS-moodulid faili src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Impordi CSS-moodulid

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

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

  return (
     {/* Kasuta styles objekti CSS klassidele viitamiseks */}
      

# Loendur

      Praegune loend: {count}

      +
      -
    
  );
}

export default App;

Tavalise CSS faili kasutamine:

Sa võid kasutada ka tavalist CSS faili globaalsete stiilide defineerimiseks. src/index.css failis saad defineerida globaalseid stiile.

Näiteks, lisa järgnev CSS stiil:

body {
  font-family: sans-serif;
}

See stiil rakendatakse kogu rakenduse body elemendile.

Järgmine samm

Palju õnne, sa oled lõpetanud oma esimese Reacti rakenduse! Järgmisena saad õppida rohkem Reacti kohta, näiteks:

• Komponentidevaheline suhtlus: Õpi, kuidas erinevad komponendid saavad omavahel suhelda.
• Vormide käsitlemine: Õpi, kuidas luua ja käsitleda vorme.
• Marsruutimine: Õpi, kuidas kasutada React Routerit mitmelehelise rakenduse loomiseks.
• Redux või Context API: Õpi, kuidas hallata rakenduse olekut.
• Hooks: Süvene React Hookidesse, näiteks useEffect, useContext jne.

Pea meeles, et React on tehnoloogia, mis vajab pidevat harjutamist ja õppimist. Head õppimist!