Mafunzo kuhusu Kuunda Programu ya Wavuti kwa Kutumia React.js

React.js ni maktaba maarufu ya uundaji wa sehemu ya mbele inayotumika kujenga violesura shirikishi vya watumiaji (UI). Iliyotengenezwa na Facebook, React.js imetumiwa na makampuni mengi makubwa, ikiwa ni pamoja na Instagram, Airbnb, na WhatsApp. Ikiwa unatafuta kujenga programu za wavuti zenye ufanisi, haraka, na zinazoitikia , React.js inaweza kuwa chaguo sahihi kwako.

Pendauluan

Kabla hatujaanza, hakikisha una Node.js na npm (Kidhibiti Kifurushi cha Node) kwenye kompyuta yako. Node.js na npm ni muhimu kwa sababu hutoa mazingira na zana zinazohitajika ili kutengeneza programu za wavuti kwa kutumia React.js.

Hatua ya 1: Kuanzisha Mradi wa React

Ili kuunda programu mpya ya React.js, tunaweza kutumia Create React App, zana ya kuunda programu ambayo hupunguza usanidi wa awali. Endesha amri ifuatayo katika kidhibiti chako cha mwisho au kidokezo cha amri:

"bash"
programu ya npx ya kuunda-react-app programu yangu
programu yangu ya cd
npm kuanza
""

Amri hii itaunda saraka mpya inayoitwa `my-app`, kupakua na kusakinisha vitegemezi vyote muhimu, na kuanzisha seva ya usanidi. Sasa unaweza kufungua kivinjari na kufikia `http://localhost:3000` ili kuona programu chaguo-msingi ya React.js.

Hatua ya 2: Muundo wa Folda

Hebu tuangalie muundo wa folda ambao Create React App imeunda:

""
programu yangu/
├── moduli_za_nodi/
├── umma/
│ └── index.html
└── src/
├── Programu.css
├── Programu.js
├── Programu.jaribio.js
├── index.css
├── index.js
└── logo.svg
""

– `node_modules/`: Ina vitegemezi vyako vyote vya mradi.
– `public/`: Ina faili tuli, ikiwa ni pamoja na `index.html` ambayo ni sehemu ya kuingia ya programu.
– `src/`: Ambapo utatumia muda wako mwingi. Ina vipengele vya React, faili za CSS, na mali zingine.

Hatua ya 3: Kufuta Faili Zisizo za Lazima

Ili kuanza na orodha safi, hebu tufute baadhi ya faili zisizohitajika. Futa `logo.svg` na `App.test.js` ndani ya folda ya `src/`. Kisha, fungua `App.css` na `index.css`, ukifuta msimbo wote wa CSS ndani yake ili kuanza na lahajedwali safi.

Hatua ya 4: Kuunda Kipengele Chako cha Kwanza

React.js inategemea vipengele. Vipengele ni vizuizi vya ujenzi wa programu yako ya wavuti. Hebu turekebishe `App.js` ili kuunda kipengele chetu cha kwanza.

Fungua `src/App.js` na uibadilishe na msimbo ufuatao:

"`jsx
ingiza React kutoka 'react';
ingiza './App.css';

Programu ya kitendakazi () {
kurudi (

);
}

Hamisha Programu chaguo-msingi;
""

Anzisha msimbo wa React ndani ya `App.js` kwa kutumia JSX (JavaScript XML), ambayo inaturuhusu kuandika sintaksia inayofanana na HTML ndani ya JavaScript. Hifadhi mabadiliko yako na uone matokeo katika kivinjari chako.

Hatua ya 5: Kuongeza Vipengele Vipya

Sasa hebu tuongeze vipengele vipya. Unda folda mpya inayoitwa `components` ndani ya folda ya `src`. Kisha unda faili mpya `HelloWorld.js` kwenye folda ya `components`.

"`jsx
ingiza React kutoka 'react';

kazi HelloWorld() {
kurudi (

);
}

tuma HelloWorld chaguo-msingi;
""

Fungua `App.js` na uingize kipengele cha `HelloWorld` ambacho tumekiunda hivi punde:

"`jsx
ingiza React kutoka 'react';
ingiza './App.css';
ingiza HelloWorld kutoka './components/HelloWorld';

Programu ya kitendakazi () {
kurudi (

);
}

Hamisha Programu chaguo-msingi;
""

Sasa, `App.js` huonyesha kipengele cha `HelloWorld` kwenye ukurasa mkuu.

Hatua ya 6: Kuongeza Usimamizi wa Jimbo na useState

React ina viunganishi vyenye nguvu sana vya kudhibiti hali. Hebu tuongeze hali fulani kwenye programu yetu. Kwa mfano, hebu tuongeze kihesabu kinachoongezeka kila wakati kitufe kinapobofywa.

Fungua `HelloWorld.js` na uongeze hali na ndoano ya `useState`:

"`jsx
ingiza React, { useState } kutoka 'react';

kazi HelloWorld() {
const [hesabu, setiHesabu] = useState(0);

Idadi ya ongezeko la const = () => {
setiHesabu (hesabu + 1);
}

kurudi (

);
}

tuma HelloWorld chaguo-msingi;
""

Hali ya `hesabu` huanzishwa kwa thamani ya 0, na kila wakati kitufe kinapobofywa, kitendakazi cha `incrementCount` kitaongeza thamani hii.

Hatua ya 7: Kuongeza Mitindo

Ili kuongeza mitindo, tunaweza kutumia CSS katika faili ya `App.css` au tunaweza kutumia maktaba ya CSS-in-JS kama vile vipengele vilivyotengenezwa kwa mtindo. Hebu tuendelee na CSS ya kawaida kwa sasa.

Fungua `App.css` na uongeze mitindo:

"css"
Programu {
andika-maandishi: katikati;
}

Kichwa cha programu {
rangi ya usuli: 282c34;
urefu wa chini: 100vh;
onyesha: kubadilika;
flex-mwelekeo: safu;
align-vitu: katikati;
kuhalalisha-maudhui: kituo;
ukubwa wa fonti: calc(10px + 2vmin);
rangi: nyeupe;
}

kitufe {
padding: 10px 20px;
kiasi-juu: 20px;
saizi ya herufi: 16px;
}
""

Hatua ya 8: Kuongeza Routing kwa kutumia React Router

Ili kuongeza urambazaji kati ya kurasa tofauti katika programu yetu, tunaweza kutumia React Router. Sakinisha React Router kwa kuendesha amri ifuatayo:

"bash"
npm install react-router-dom
""

Kisha, unda vipengele viwili vipya: `Home.js` na `About.js` kwenye folda ya `components`.

`Home.js`:
"`jsx
ingiza React kutoka 'react';

kazi ya Nyumbani() {
kurudi (

);
}

tuma Nyumbani chaguo-msingi;
""

`Kuhusu.js`:
"`jsx
ingiza React kutoka 'react';

kitendakazi Kuhusu() {
kurudi (

);
}

tuma chaguo-msingi Kuhusu;
""

Ifuatayo, fungua `App.js` na usanidi uelekezaji:

"`jsx
ingiza React kutoka 'react';
ingiza { BrowserRouter kama Router, Route, Link, Switch } kutoka 'react-router-dom';
ingiza './App.css';
ingiza HelloWorld kutoka './components/HelloWorld';
ingiza Nyumbani kutoka './components/Home';
ingiza Kuhusu kutoka './components/About';

Programu ya kitendakazi () {
kurudi (

);
}

Hamisha Programu chaguo-msingi;
""

Kwa hili, tumeongeza urambazaji wa msingi kati ya kurasa tofauti katika programu yetu.

Kufunga

Huo ni mafunzo ya msingi ya kuunda programu ya wavuti kwa kutumia React.js. Tumeshughulikia usanidi wa mradi, uundaji wa vipengele, usimamizi wa hali, uundaji wa mitindo, na uelekezaji. React.js ina mfumo ikolojia tajiri wenye maktaba na zana nyingi ambazo zinaweza kukusaidia kujenga programu changamano zaidi za wavuti.

Bahati nzuri, na natumaini mafunzo haya yatakusaidia kuanza safari yako na React.js!