Leson patikilye sou kreye yon aplikasyon entènèt lè l sèvi avèk React.js

React.js se yon bibliyotèk devlopman front-end popilè ki itilize pou konstwi koòdone itilizatè (UI) entèaktif. Devlope pa Facebook, anpil gwo konpayi, tankou Instagram, Airbnb, ak WhatsApp, te itilize React.js. Si w ap chèche konstwi aplikasyon entènèt efikas, rapid, epi ki reponn byen, React.js ta ka bon chwa pou ou.

Pendahuluan

Anvan nou kòmanse, asire w ou gen Node.js ak npm (Node Package Manager) enstale sou òdinatè w la. Node.js ak npm esansyèl paske yo bay anviwònman ak zouti ki nesesè pou devlope aplikasyon entènèt lè l sèvi avèk React.js.

Etap 1: Inisyalize Pwojè React la

Pou kreye yon nouvo aplikasyon React.js, nou ka itilize Create React App, yon zouti kreyasyon aplikasyon ki minimize konfigirasyon inisyal la. Egzekite kòmand sa a nan tèminal ou a oswa nan èd memwa kòmand ou a:

"'bash
npx kreye-reak-app aplikasyon-mwen an
cd my-app
npm kòmanse
"`

Kòmand sa a pral kreye yon nouvo anyè ki rele `my-app`, telechaje epi enstale tout depandans nesesè yo, epi demarre sèvè devlopman an. Kounye a ou ka louvri yon navigatè epi jwenn aksè nan `http://localhost:3000` pou wè aplikasyon React.js pa defo a.

Etap 2: Estrikti Dosye

Ann pran yon ti gade sou estrikti dosye ke Create React App te kreye a:

"`
aplikasyon-mwen/
├── node_modules/
piblik/
│ └── endèks.html
└── sous/
├── Aplikasyon.css
App.js
App.test.js
├── endèks.css
├── index.js
└── logo.svg
"`

– `node_modules/`: Gen ladan l tout depandans pwojè w la.
– `public/`: Gen ladan l fichye estatik, tankou `index.html` ki se pwen antre aplikasyon an.
– `src/`: Kote w ap pase pifò tan w. Li gen ladan l konpozan React, fichye CSS, ak lòt byen.

Etap 3: Efase dosye ki pa nesesè yo

Pou nou kòmanse ak yon fèy papye pwòp, ann efase kèk fichye ki pa nesesè. Efase `logo.svg` ak `App.test.js` ki anndan dosye `src/` la. Apre sa, ouvri `App.css` ak `index.css`, efase tout kòd CSS ki anndan yo pou nou ka kòmanse ak yon fèy papye pwòp.

Etap 4: Kreye Premye Konpozan ou an

React.js baze sou konpozan. Konpozan yo se blòk konstriksyon aplikasyon entènèt ou an. Ann modifye `App.js` pou kreye premye konpozan nou an.

Louvri `src/App.js` epi ranplase li ak kòd sa a:

"`jsx
enpòte React soti nan 'react';
enpòte './App.css';

fonksyon Aplikasyon() {
retounen (

);
}

ekspòte aplikasyon pa defo a;
"`

Inisyalize kòd React ki andedan `App.js` la avèk JSX (JavaScript XML), ki pèmèt nou ekri yon sentaks ki sanble ak HTML nan JavaScript. Sove chanjman ou yo epi gade rezilta yo nan navigatè w la.

Etap 5: Ajoute Nouvo Konpozan

Kounye a, ann ajoute kèk nouvo konpozan. Kreye yon nouvo dosye ki rele `components` andedan dosye `src` la. Apre sa, kreye yon nouvo fichye `HelloWorld.js` nan dosye `components` la.

"`jsx
enpòte React soti nan 'react';

fonksyon BonjouMond() {
retounen (

);
}

ekspòtasyon default HelloWorld;
"`

Louvri `App.js` epi enpòte konpozan `HelloWorld` nou sot kreye a:

"`jsx
enpòte React soti nan 'react';
enpòte './App.css';
enpòte HelloWorld soti nan './components/HelloWorld';

fonksyon Aplikasyon() {
retounen (

);
}

ekspòte aplikasyon pa defo a;
"`

Kounye a, `App.js` ap rann konpozan `HelloWorld` la sou paj prensipal la.

Etap 6: Ajoute Jesyon Eta a avèk useState

React gen hooks ki vrèman puisan pou jere eta. Ann ajoute kèk eta nan aplikasyon nou an. Pa egzanp, ann ajoute yon kontè ki ogmante chak fwa yo klike sou yon bouton.

Louvri `HelloWorld.js` epi ajoute state ak hook `useState` la:

"`jsx
enpòte React, { useState } soti nan 'react';

fonksyon BonjouMond() {
konstan [konte, meteKonte] = itilizeEta(0);

konstan incrementCount = () => {
meteKonte(konte + 1);
}

retounen (

);
}

ekspòtasyon default HelloWorld;
"`

Eta `count` la inisyalize ak yon valè 0, epi chak fwa ou klike sou bouton an, fonksyon `incrementCount` la ap ogmante valè sa a.

Etap 7: Ajoute Stil

Pou ajoute stil, nou ka itilize CSS nan fichye `App.css` la oubyen nou ka itilize yon bibliyotèk CSS-in-JS tankou styled-components. Ann rete ak CSS estanda a pou kounye a.

Louvri `App.css` epi ajoute kèk stil:

"`css
.Aplikasyon {
tèks-aliyen: sant;
}

.Aplikasyon-antèt {
koulè-background: 282c34;
wotè minimòm: 100vh;
ekspozisyon: flechir;
flex-direksyon: kolòn;
aliman-atik: sant;
jistifye-kontni: sant;
gwosè-font: kalkil(10px + 2vmin);
koulè: blan;
}

bouton {
padding: 10px 20px;
maj-tèt: 20px;
font-gwosè: 16px;
}
"`

Etap 8: Ajoute Routage ak React Router

Pou ajoute navigasyon ant diferan paj nan aplikasyon nou an, nou ka itilize React Router. Enstale React Router lè w egzekite kòmand sa a:

"'bash
npm enstale reyaji-routeur-dom
"`

Apre sa, kreye de nouvo konpozan: `Home.js` ak `About.js` nan dosye `components` la.

`Akèy.js`:
"`jsx
enpòte React soti nan 'react';

fonksyon Lakay() {
retounen (

);
}

ekspòtasyon default Akèy;
"`

`About.js`:
"`jsx
enpòte React soti nan 'react';

fonksyon A pwopo() {
retounen (

);
}

ekspòtasyon default Enfòmasyon sou;
"`

Apre sa, ouvri `App.js` epi konfigire routaj la:

"`jsx
enpòte React soti nan 'react';
enpòte { BrowserRouter kòm Routeur, Wout, Lyen, Chanjman } soti nan 'react-router-dom';
enpòte './App.css';
enpòte HelloWorld soti nan './components/HelloWorld';
enpòte Kay soti nan './components/Home';
enpòte About soti nan './components/About';

fonksyon Aplikasyon() {
retounen (

);
}

ekspòte aplikasyon pa defo a;
"`

Avèk sa, nou te ajoute navigasyon debaz ant diferan paj nan aplikasyon nou an.

Penutup

Sa a se yon leson debaz pou kreye yon aplikasyon entènèt lè l sèvi avèk React.js. Nou te kouvri konfigirasyon pwojè, kreyasyon konpozan, jesyon eta, stil, ak routaj. React.js gen yon ekosistèm rich ak anpil bibliyotèk ak zouti ki ka ede w bati aplikasyon entènèt ki pi konplèks.

Bon chans, e mwen espere leson patikilye sa a ap ede w kòmanse vwayaj ou a avèk React.js!