Lernilo pri Kreado de TTT-Aplikaĵo Uzante React.js

React.js estas populara biblioteko por front-end-disvolvado uzata por konstrui interagajn uzantinterfacojn (UI-ojn). Disvolvita de Facebook, React.js estis uzata de multaj gravaj kompanioj, inkluzive de Instagram, Airbnb kaj WhatsApp. Se vi volas konstrui efikajn, rapidajn kaj respondemajn retajn aplikaĵojn, React.js eble estas la ĝusta elekto por vi.

Pendahuluan

Antaŭ ol ni komencos, certigu, ke vi havas Node.js kaj npm (Node Package Manager) instalitajn sur via komputilo. Node.js kaj npm estas esencaj ĉar ili provizas la medion kaj ilojn necesajn por disvolvi retajn aplikaĵojn uzante React.js.

Paŝo 1: Inicialigo de la React-Projekto

Por krei novan React.js-aplikaĵon, ni povas uzi Create React App, aplikaĵ-krean ilon kiu minimumigas komencan agordon. Rulu la jenan komandon en via terminalo aŭ komandlinio:

“`bash
npx krei-reakti-aplikaĵon mia-aplikaĵo
cd mia-aplikaĵo
npm komenco
“

Ĉi tiu komando kreos novan dosierujon nomatan `mia-aplikaĵo`, elŝutos kaj instalos ĉiujn necesajn dependecojn, kaj lanĉos la programservilon. Vi nun povas malfermi retumilon kaj aliri `http://localhost:3000` por vidi la defaŭltan React.js-aplikaĵon.

Paŝo 2: Dosierstrukturo

Ni rigardu la dosierstrukturon, kiun kreis Create React App:

“
mia-aplikaĵo/
├── nodo_moduloj/
publika/
│ └── indekso.html
fonto/
├── Aplikaĵo.css
├── Aplikaĵo.js
├── Aplikaĵo.test.js
├── indekso.css
├── index.js
└── logoo.svg
“

– `node_modules/`: Enhavas ĉiujn viajn projektajn dependecojn.
– `public/`: Enhavas senmovajn dosierojn, inkluzive de `index.html` kiu estas la enirejo de la aplikaĵo.
– `src/`: Kie vi pasigos la plejparton de via tempo. Enhavas React-komponantojn, CSS-dosierojn kaj aliajn aktivaĵojn.

Paŝo 3: Forigi Nenecesajn Dosierojn

Por komenci per pura stilo, ni forigu kelkajn nenecesajn dosierojn. Forigu `logo.svg` kaj `App.test.js` en la dosierujo `src/`. Poste, malfermu `App.css` kaj `index.css`, forigante la tutan CSS-kodon en ili por komenci per pura stilfolio.

Paŝo 4: Kreante Vian Unuan Komponanton

React.js estas komponent-bazita. Komponantoj estas la konstrubriketoj de via TTT-aplikaĵo. Ni modifu `App.js` por krei nian unuan komponenton.

Malfermu `src/App.js` kaj anstataŭigu ĝin per la jena kodo:

“`jsx
importi Reakcion el 'reagi';
importi './Aplikaĵo.css';

funkcio Aplikaĵo() {
reveni (

);
}

eksporti defaŭltan Aplikaĵon;
“

Inicialigu la React-kodon ene de `App.js` uzante JSX (JavaScript XML), kiu permesas al ni skribi HTML-similan sintakson ene de JavaScript. Konservu viajn ŝanĝojn kaj vidu la rezultojn en via retumilo.

Paŝo 5: Aldonante Novajn Komponantojn

Nun ni aldonu kelkajn novajn komponantojn. Kreu novan dosierujon nomatan `components` ene de la dosierujo `src`. Poste kreu novan dosieron `HelloWorld.js` en la dosierujo `components`.

“`jsx
importi Reakcion el 'reagi';

funkcio SalutonMondo() {
reveni (

);
}

eksporti defaŭltan SalutonMondo;
“

Malfermu `App.js` kaj importu la komponenton `HelloWorld`, kiun ni ĵus kreis:

“`jsx
importi Reakcion el 'reagi';
importi './Aplikaĵo.css';
importi SalutonMondo el './komponantoj/SalutonMondo';

funkcio Aplikaĵo() {
reveni (

);
}

eksporti defaŭltan Aplikaĵon;
“

Nun, `App.js` prezentas la komponenton `HelloWorld` sur la ĉefa paĝo.

Paŝo 6: Aldonante Ŝtatan Administradon per useState

React havas tre potencajn hokojn por administri staton. Ni aldonu iom da stato al nia aplikaĵo. Ekzemple, ni aldonu nombrilon kiu pliiĝas ĉiufoje kiam butono estas alklakita.

Malfermu `HelloWorld.js` kaj aldonu `state` kaj `useState` hokon:

“`jsx
importi React, { uziStaton } el 'react';

funkcio SalutonMondo() {
konstanto [kalkulo, agordiKalkulon] = uziStaton(0);

konstanto pliigoKvanto = () => {
agordiKalkulon(kalkulo + 1);
}

reveni (

);
}

eksporti defaŭltan SalutonMondo;
“

La stato `count` estas inicialigita kun valoro de 0, kaj ĉiufoje kiam la butono estas alklakita, la funkcio `incrementCount` pliigos ĉi tiun valoron.

Paŝo 7: Aldonante Stiladon

Por aldoni stiladon, ni povas uzi CSS en la dosiero `App.css` aŭ ni povas uzi CSS-en-JS-bibliotekon kiel styled-components. Ni restu ĉe norma CSS por nun.

Malfermu `App.css` kaj aldonu iom da stilo:

“`css
.Aplikaĵo {
tekst-vicigi: centro;
}

.Aplikaĵa-kaplinio {
fonkoloro: 282c34;
min-alteco: 100vh;
montri: fleksi;
fleks-direkto: kolumno;
vicigi-erojn: centri;
pravigi-enhavo: centro;
tipargrandeco: kalkulita(10px + 2vmin);
koloro: blanka;
}

butono {
kompletigo: 10px 20px;
rando-supro: 20px;
tiparo-grandeco: 16px;
}
“

Paŝo 8: Aldonante Vojigon per React Router

Por aldoni navigadon inter malsamaj paĝoj en nia aplikaĵo, ni povas uzi React Router. Instalu React Router per la jena komando:

“`bash
npm instali react-router-dom
“

Poste, kreu du novajn komponantojn: `Home.js` kaj `About.js` en la dosierujo `components`.

`Hejmo.js`:
“`jsx
importi Reakcion el 'reagi';

funkcio Hejmo() {
reveni (

);
}

eksporti defaŭltan Hejmon;
“

`Pri.js`:
“`jsx
importi Reakcion el 'reagi';

funkcio Pri() {
reveni (

);
}

eksporti defaŭltan Pri;
“

Poste, malfermu `App.js` kaj agordu vojigon:

“`jsx
importi Reakcion el 'reagi';
importi { RetumiloEnkursigilo kiel Enkursigilo, Itinero, Ligilo, Ŝaltilo } el 'react-enkursigilo-dom';
importi './Aplikaĵo.css';
importi SalutonMondo el './komponantoj/SalutonMondo';
importi Hejmon el './komponantoj/Hejmo';
importi Pri el './komponantoj/Pri';

funkcio Aplikaĵo() {
reveni (

);
}

eksporti defaŭltan Aplikaĵon;
“

Per ĉi tio, ni aldonis bazan navigadon inter malsamaj paĝoj en nia aplikaĵo.

Fermo

Jen baza lernilo por krei retan aplikaĵon per React.js. Ni traktis projektan agordon, komponentan kreadon, ŝtatadministradon, stiladon kaj vojigon. React.js havas riĉan ekosistemon kun multaj bibliotekoj kaj iloj, kiuj povas helpi vin konstrui pli kompleksajn retajn aplikaĵojn.

Bonŝancon, kaj mi esperas, ke ĉi tiu lernilo helpos vin komenci vian vojaĝon kun React.js!