Vadnica o ustvarjanju spletne aplikacije z uporabo React.js

React.js je priljubljena knjižnica za razvoj front-end aplikacij, ki se uporablja za izdelavo interaktivnih uporabniških vmesnikov (UI). React.js, ki ga je razvil Facebook, uporabljajo številna velika podjetja, vključno z Instagramom, Airbnb in WhatsAppom. Če želite graditi učinkovite, hitre in odzivne spletne aplikacije, je React.js morda prava izbira za vas.

Uvod

Preden začnemo, se prepričajte, da imate v računalniku nameščen Node.js in npm (Node Package Manager). Node.js in npm sta bistvena, ker zagotavljata okolje in orodja, potrebna za razvoj spletnih aplikacij z uporabo React.js.

1. korak: Inicializacija projekta React

Za ustvarjanje nove aplikacije React.js lahko uporabimo orodje Create React App, ki zmanjšuje začetno konfiguracijo. V terminalu ali ukaznem pozivu zaženite naslednji ukaz:

“`bash
npx create-response-app my-app
cd moja aplikacija
npm začetek
""

Ta ukaz bo ustvaril nov imenik z imenom `my-app`, prenesel in namestil vse potrebne odvisnosti ter zagnal razvojni strežnik. Zdaj lahko odprete brskalnik in dostopate do `http://localhost:3000`, da si ogledate privzeto aplikacijo React.js.

2. korak: Struktura map

Oglejmo si strukturo map, ki jo je ustvarila aplikacija Create React:

""
moja-aplikacija/
├── moduli_vozlišč/
├── javno/
│ └── indeks.html
└── vir/
├── Aplikacija.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
""

– `node_modules/`: Vsebuje vse odvisnosti vašega projekta.
– `public/`: Vsebuje statične datoteke, vključno z `index.html`, ki je vstopna točka aplikacije.
– `src/`: Kjer boste preživeli večino časa. Vsebuje komponente React, datoteke CSS in druga sredstva.

3. korak: Brisanje nepotrebnih datotek

Za začetek izbrišimo nekaj nepotrebnih datotek. Izbriši `logo.svg` in `App.test.js` v mapi `src/`. Nato odpri `App.css` in `index.css`, izbriši vso kodo CSS v njih, da začnemo s čisto slogovno predlogo.

4. korak: Ustvarjanje prve komponente

React.js temelji na komponentah. Komponente so gradniki vaše spletne aplikacije. Spremenimo `App.js`, da ustvarimo našo prvo komponento.

Odprite datoteko `src/App.js` in jo zamenjajte z naslednjo kodo:

“jsx
uvozi React iz 'react';
uvozi './App.css';

funkcija App() {
vrnitev (

);
}

izvoz privzete aplikacije;
""

Inicializirajte kodo React znotraj `App.js` z uporabo JSX (JavaScript XML), kar nam omogoča pisanje sintakse, podobne HTML-ju, znotraj JavaScripta. Shranite spremembe in si oglejte rezultate v brskalniku.

5. korak: Dodajanje novih komponent

Zdaj pa dodajmo nekaj novih komponent. V mapi `src` ustvarimo novo mapo z imenom `components`. Nato v mapi `components` ustvarimo novo datoteko `HelloWorld.js`.

“jsx
uvozi React iz 'react';

funkcija Pozdravljen,Svet() {
vrnitev (

);
}

izvoz privzeto HelloWorld;
""

Odprite `App.js` in uvozite komponento `HelloWorld`, ki smo jo pravkar ustvarili:

“jsx
uvozi React iz 'react';
uvozi './App.css';
uvozi HelloWorld iz './components/HelloWorld';

funkcija App() {
vrnitev (

);
}

izvoz privzete aplikacije;
""

Zdaj `App.js` upodobi komponento `HelloWorld` na glavni strani.

6. korak: Dodajanje upravljanja stanja z useState

React ima zelo zmogljive kljuke za upravljanje stanja. Dodajmo nekaj stanja naši aplikaciji. Na primer, dodajmo števec, ki se poveča vsakič, ko kliknemo gumb.

Odprite `HelloWorld.js` in dodajte kljukico `state` in `useState`:

“jsx
import React, { useState } from 'react';

funkcija Pozdravljen,Svet() {
const [count, setCount] = useState(0);

const incrementCount = () => {
setCount(štetje + 1);
}

vrnitev (

);
}

izvoz privzeto HelloWorld;
""

Stanje `count` se inicializira z vrednostjo 0 in vsakič, ko kliknemo gumb, funkcija `incrementCount` poveča to vrednost.

7. korak: Dodajanje stila

Za dodajanje stilov lahko uporabimo CSS v datoteki `App.css` ali pa knjižnico CSS-in-JS, kot je styled-components. Zaenkrat se držimo standardnega CSS-ja.

Odprite `App.css` in dodajte nekaj stilov:

“css
.Aplikacija {
poravnava besedila: center;
}

.Glava aplikacije {
barva-ozadja: 282c34;
minimalna višina: 100vh;
zaslon: flex;
flex-direction: stolpec;
poravnati predmete: sredina;
justify-content: center;
velikost pisave: calc(10px + 2vmin);
barva: bela;
}

gumb {
oblazinjenje: 10px 20px;
zgornja meja: 20px;
velikost pisave: 16px;
}
""

8. korak: Dodajanje usmerjanja z usmerjevalnikom React

Za dodajanje navigacije med različnimi stranmi v naši aplikaciji lahko uporabimo React Router. Namestitev React Routerja izvedemo z naslednjim ukazom:

“`bash
npm namestite reakcijski usmerjevalnik-dom
""

Nato v mapi `components` ustvarite dve novi komponenti: `Home.js` in `About.js`.

`Domov.js`:
“jsx
uvozi React iz 'react';

funkcija Home() {
vrnitev (

);
}

izvoz privzetega doma;
""

`About.js`:
“jsx
uvozi React iz 'react';

funkcija About() {
vrnitev (

);
}

izvoz privzeto O;
""

Nato odprite `App.js` in nastavite usmerjanje:

“jsx
uvozi React iz 'react';
uvozi { BrowserRouter kot usmerjevalnik, pot, povezava, stikalo } iz 'react-router-dom';
uvozi './App.css';
uvozi HelloWorld iz './components/HelloWorld';
uvozite Domov iz './components/Home';
uvozi O iz './components/About';

funkcija App() {
vrnitev (

);
}

izvoz privzete aplikacije;
""

S tem smo v naši aplikaciji dodali osnovno navigacijo med različnimi stranmi.

Zapiranje

To je osnovni vodič za ustvarjanje spletne aplikacije z uporabo React.js. Obravnavali smo nastavitev projekta, ustvarjanje komponent, upravljanje stanja, oblikovanje in usmerjanje. React.js ima bogat ekosistem s številnimi knjižnicami in orodji, ki vam lahko pomagajo pri gradnji kompleksnejših spletnih aplikacij.

Vso srečo in upam, da vam bo ta vadnica pomagala pri začetku vaše poti z React.js!