Õpetus veebirakenduse loomiseks React.js abil

React.js on populaarne esiotsa arendusteek, mida kasutatakse interaktiivsete kasutajaliideste (UI) loomiseks. Facebooki väljatöötatud React.js-i on kasutanud paljud suured ettevõtted, sealhulgas Instagram, Airbnb ja WhatsApp. Kui otsite tõhusate, kiirete ja responsiivsete veebirakenduste loomist, võib React.js olla teie jaoks õige valik.

Pendahuluan

Enne alustamist veenduge, et teie arvutisse oleksid installitud Node.js ja npm (Node Package Manager). Node.js ja npm on olulised, kuna need pakuvad keskkonda ja tööriistu, mida on vaja veebirakenduste arendamiseks React.js abil.

1. samm: Reacti projekti initsialiseerimine

Uue React.js rakenduse loomiseks saame kasutada Create React Appi, rakenduste loomise tööriista, mis minimeerib esialgse konfigureerimise. Käivitage terminalis või käsureal järgmine käsk:

""bash
npx create-react-app minu rakendus
cd minu rakendus
npm algus
""

See käsk loob uue kataloogi nimega `my-app`, laadib alla ja installib kõik vajalikud sõltuvused ning käivitab arendusserveri. Nüüd saate avada brauseri ja minna aadressile `http://localhost:3000`, et näha React.js vaikerakendust.

2. samm: kaustade struktuur

Vaatame kaustastruktuuri, mille Create React App on loonud:

""
minu-rakendus/
├── sõlme_moodulid/
├── avalik/
│ └── indeks.html
└── allikas/
├── Rakenduse.css
├── Rakendus.js
├── Rakenduse test.js
├── index.css
├── index.js
└── logo.svg
""

– `node_modules/`: Sisaldab kõiki teie projekti sõltuvusi.
– `public/`: Sisaldab staatilisi faile, sh `index.html`, mis on rakenduse sisenemispunkt.
– `src/`: Kus veedad suurema osa ajast. Sisaldab Reacti komponente, CSS-faile ja muid ressursse.

3. samm: mittevajalike failide kustutamine

Puhast leheküljest alustamiseks kustutame mõned mittevajalikud failid. Kustutame kaustast `src/` failid `logo.svg` ja `App.test.js`. Seejärel avame failid `App.css` ja `index.css`, kustutades kogu neis oleva CSS-koodi ja alustades puhta stiililehega.

4. samm: esimese komponendi loomine

React.js on komponentidel põhinev. Komponendid on teie veebirakenduse ehitusplokid. Muutame faili `App.js`, et luua meie esimene komponent.

Ava `src/App.js` ja asenda see järgmise koodiga:

jsx
import React alates 'react';
impordi './App.css';

funktsioon Rakendus() {
tagasi (

);
}

eksporti vaikerakendus;
""

Initsialiseeri Reacti kood failis `App.js` JSX-i (JavaScript XML) abil, mis võimaldab meil kirjutada HTML-ilaadset süntaksit JavaScripti sees. Salvesta muudatused ja vaata tulemusi oma brauseris.

5. samm: uute komponentide lisamine

Nüüd lisame mõned uued komponendid. Looge kausta `src` sisse uus kaust nimega `components`. Seejärel looge kausta `components` uus fail `HelloWorld.js`.

jsx
import React alates 'react';

funktsioon TereMaailm() {
tagasi (

);
}

ekspordi vaikimisi HelloWorld;
""

Ava `App.js` ja impordi äsja loodud `HelloWorld` komponent:

jsx
import React alates 'react';
impordi './App.css';
impordi HelloWorld kaustast './components/HelloWorld';

funktsioon Rakendus() {
tagasi (

);
}

eksporti vaikerakendus;
""

Nüüd renderdab `App.js` `HelloWorld` komponendi pealehel.

6. samm: olekuhalduse lisamine useState'iga

Reactil on oleku haldamiseks väga võimsad konksud. Lisame oma rakendusele oleku. Näiteks lisame loenduri, mis suureneb iga nupuvajutusega.

Ava `HelloWorld.js` ja lisa sinna state ja `useState` konksud:

jsx
impordi React, { useState } funktsioonist 'react';

funktsioon TereMaailm() {
const [loendus, setCount] = useState(0);

konstantne juurdekasvuArv = () => {
setCount(loendus + 1);
}

tagasi (

);
}

ekspordi vaikimisi HelloWorld;
""

Olek `count` initsialiseeritakse väärtusega 0 ja iga kord, kui nuppu klõpsatakse, suurendab funktsioon `incrementCount` seda väärtust.

7. samm: stiili lisamine

Stiili lisamiseks võime kasutada CSS-i failis `App.css` või CSS-in-JS teeki, näiteks styled-components. Jääme praegu standardse CSS-i juurde.

Ava `App.css` ja lisa veidi stiili:

"` css
.Rakendus {
teksti-joondus: keskus;
}

.Rakenduse päis {
taustavärv: 282c34;
min-kõrgus: 100vh;
kuva: flex;
paindesuund: veerg;
joonda üksused: keskel;
õigustama-sisu: keskpunkt;
fondi suurus: calc(10px + 2vmin);
värvus: valge;
}

nupp {
polster: 10px 20px;
margin-top: 20px;
font-size: 16px;
}
""

8. samm: marsruutimise lisamine React Routeriga

Rakenduse erinevate lehtede vahelise navigeerimise lisamiseks saame kasutada React Routerit. React Routeri installimiseks käivitage järgmine käsk:

""bash
npm install react-ruuter-dom
""

Seejärel loo kausta `components` kaks uut komponenti: `Home.js` ja `About.js`.

`Home.js`:
jsx
import React alates 'react';

funktsioon Avaleht() {
tagasi (

);
}

ekspordi vaikimisi kodu;
""

`About.js`:
jsx
import React alates 'react';

funktsioon Teave() {
tagasi (

);
}

ekspordi vaikimisi Teave;
""

Seejärel avage `App.js` ja seadistage marsruutimine:

jsx
import React alates 'react';
impordi { BrowserRouter ruuterina, marsruudina, lingina, lülitina } kaustast 'react-router-dom';
impordi './App.css';
impordi HelloWorld kaustast './components/HelloWorld';
impordi kodu kaustast './components/Home';
impordi teave kaustast './components/About';

funktsioon Rakendus() {
tagasi (

);
}

eksporti vaikerakendus;
""

Sellega oleme lisanud oma rakenduses erinevate lehtede vahel põhilise navigeerimise.

Sulgemine

See on põhiline õpetus veebirakenduse loomiseks React.js-i abil. Oleme käsitlenud projekti seadistamist, komponentide loomist, olekuhaldust, stiilimist ja marsruutimist. React.js-il on rikkalik ökosüsteem arvukate teekide ja tööriistadega, mis aitavad teil luua keerukamaid veebirakendusi.

Edu ja loodan, et see õpetus aitab sul React.js-iga teekonda alustada!