Phunziro pa Kupanga Pulogalamu ya pa Intaneti Pogwiritsa Ntchito React.js

React.js ndi laibulale yotchuka yopangira mapulogalamu yomwe imagwiritsidwa ntchito popanga ma interfaces ogwiritsira ntchito (UIs). Yopangidwa ndi Facebook, React.js yakhala ikugwiritsidwa ntchito ndi makampani ambiri akuluakulu, kuphatikizapo Instagram, Airbnb, ndi WhatsApp. Ngati mukufuna kupanga mapulogalamu apaintaneti ogwira ntchito, achangu, komanso oyankha, React.js ikhoza kukhala chisankho choyenera kwa inu.

Pendauluan

Tisanayambe, onetsetsani kuti mwayika Node.js ndi npm (Node Package Manager) pa kompyuta yanu. Node.js ndi npm ndizofunikira chifukwa zimapereka malo ndi zida zofunika popanga mapulogalamu apaintaneti pogwiritsa ntchito React.js.

Gawo 1: Kuyambitsa Ntchito ya React

Kuti tipange pulogalamu yatsopano ya React.js, tingagwiritse ntchito Pangani React App, chida chopangira mapulogalamu chomwe chimachepetsa kasinthidwe koyambirira. Yendetsani lamulo lotsatirali mu terminal yanu kapena command prompt:

“`bash
pulogalamu ya npx yopangira-yochita-pulogalamu yanga
pulogalamu yanga ya cd
npm kuyamba
``

Lamuloli lipanga chikwatu chatsopano chotchedwa `my-app`, kutsitsa ndikuyika zonse zofunika, ndikuyambitsa seva yopangira. Tsopano mutha kutsegula msakatuli ndikupeza `http://localhost:3000` kuti muwone pulogalamu yokhazikika ya React.js.

Gawo 2: Kapangidwe ka Foda

Tiyeni tiwone kapangidwe ka chikwatu chomwe Create React App yapanga:

``
pulogalamu yanga/
├── ma node_modules/
├── pagulu/
│ └── index.html
└── src/
├── App.css
├── Mapulogalamu.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
``

– `node_modules/`: Ili ndi zonse zomwe zimadalira pa polojekiti yanu.
– `public/`: Ili ndi mafayilo osasinthika, kuphatikiza `index.html` yomwe ndi malo olowera a pulogalamuyo.
– `src/`: Kumene mudzakhala nthawi yanu yambiri. Muli zigawo za React, mafayilo a CSS, ndi zinthu zina.

Gawo 3: Kuchotsa Mafayilo Osafunikira

Kuti tiyambe ndi clean slate, tiyeni tichotse mafayilo osafunikira. Chotsani `logo.svg` ndi `App.test.js` mkati mwa chikwatu cha `src/`. Kenako, tsegulani `App.css` ndi `index.css`, ndikuchotsa ma code onse a CSS mkati mwawo kuti muyambe ndi clean stylesheet.

Gawo 4: Kupanga Chigawo Chanu Choyamba

React.js imachokera ku zigawo. Zigawo ndi zomwe zimamangira pulogalamu yanu ya pa intaneti. Tiyeni tisinthe `App.js` kuti tipange gawo lathu loyamba.

Tsegulani `src/App.js` ndikuyikamo khodi iyi:

“`jsx
lowetsani React kuchokera ku 'react';
lowetsani './App.css';

ntchito ya App() {
kubwerera (

);
}

Tumizani pulogalamu yokhazikika;
``

Yambitsani khodi ya React mkati mwa `App.js` pogwiritsa ntchito JSX (JavaScript XML), yomwe imatithandiza kulemba mawu ofanana ndi HTML mkati mwa JavaScript. Sungani zosintha zanu ndikuwona zotsatira mu msakatuli wanu.

Gawo 5: Kuwonjezera Zigawo Zatsopano

Tsopano tiyeni tiwonjezere zigawo zatsopano. Pangani chikwatu chatsopano chotchedwa `components` mkati mwa chikwatu cha `src`. Kenako pangani fayilo yatsopano `HelloWorld.js` mu chikwatu cha `components`.

“`jsx
lowetsani React kuchokera ku 'react';

ntchito HelloWorld() {
kubwerera (

);
}

kutumiza HelloWorld yosasinthika;
``

Tsegulani `App.js` ndikulowetsa gawo la `HelloWorld` lomwe tangopanga kumene:

“`jsx
lowetsani React kuchokera ku 'react';
lowetsani './App.css';
lowetsani HelloWorld kuchokera ku './components/HelloWorld';

ntchito ya App() {
kubwerera (

);
}

Tumizani pulogalamu yokhazikika;
``

Tsopano, `App.js` ikuwonetsa gawo la `HelloWorld` patsamba lalikulu.

Gawo 6: Kuwonjezera State Management ndi useState

React ili ndi ma crochet amphamvu kwambiri poyang'anira boma. Tiyeni tiwonjezere boma lina ku pulogalamu yathu. Mwachitsanzo, tiyeni tiwonjezere kauntala yomwe imawonjezeka nthawi iliyonse batani likadina.

Tsegulani `HelloWorld.js` ndikuwonjezera chigawo ndi `useState` cholumikizira:

“`jsx
lowetsani React, { useState} kuchokera ku 'react';

ntchito HelloWorld() {
const [kuwerengera, setCount] = useState(0);

Chiwerengero chowonjezeka cha const = () => {
setCount(kuwerengera + 1);
}

kubwerera (

);
}

kutumiza HelloWorld yosasinthika;
``

Mkhalidwe wa `count` umayambitsidwa ndi mtengo wa 0, ndipo nthawi iliyonse batani likadina, ntchito ya `incrementCount` idzawonjezera mtengo uwu.

Gawo 7: Kuwonjezera Masitayilo

Kuti tiwonjezere kapangidwe kake, tingagwiritse ntchito CSS mu fayilo ya `App.css` kapena tingagwiritse ntchito laibulale ya CSS-in-JS monga styled-components. Tiyeni tigwiritse ntchito CSS yokhazikika pakadali pano.

Tsegulani `App.css` ndikuwonjezera masitayilo ena:

"css"
Pulogalamu {
lembani mawu: pakati;
}

Mutu wa pulogalamu {
mtundu wakumbuyo: 282c34;
kutalika kwa mphindi: 100vh;
onetsani: kusintha;
flex-direction: column;
align-zinthu: pakati;
lungamitsa-zili: pakati;
kukula kwa zilembo: calc(10px + 2vmin);
Mtundu: woyera;
}

batani {
padding: 10px 20px;
m'mphepete: 20px;
kukula kwazithunzi: 16px;
}
``

Gawo 8: Kuwonjezera Routing ndi React Router

Kuti tiwonjezere kuyenda pakati pa masamba osiyanasiyana mu pulogalamu yathu, titha kugwiritsa ntchito React Router. Ikani React Router poyendetsa lamulo lotsatirali:

“`bash
npm kukhazikitsa react-router-dom
``

Kenako, pangani zigawo ziwiri zatsopano: `Home.js` ndi `About.js` mu chikwatu cha `components`.

`Home.js`:
“`jsx
lowetsani React kuchokera ku 'react';

ntchito Tsamba Loyamba () {
kubwerera (

);
}

kutumiza katundu wokhazikika pa tsamba loyamba;
``

`About.js`:
“`jsx
lowetsani React kuchokera ku 'react';

ntchito About() {
kubwerera (

);
}

kutumiza zinthu mwachisawawa Zokhudza;
``

Kenako, tsegulani `App.js` ndikukhazikitsa njira yolumikizira:

“`jsx
lowetsani React kuchokera ku 'react';
lowetsani { BrowserRouter monga Router, Router, Link, Switch} kuchokera ku 'react-router-dom';
lowetsani './App.css';
lowetsani HelloWorld kuchokera ku './components/HelloWorld';
lowetsani Tsamba Loyamba kuchokera ku './components/Home';
lowetsani Zambiri kuchokera ku './components/About';

ntchito ya App() {
kubwerera (

);
}

Tumizani pulogalamu yokhazikika;
``

Ndi izi, tawonjezera njira zoyambira pakati pa masamba osiyanasiyana mu pulogalamu yathu.

Kutseka

Imeneyi ndi njira yoyambira yopangira pulogalamu ya pa intaneti pogwiritsa ntchito React.js. Takambirana za kukhazikitsa mapulojekiti, kupanga zigawo, kasamalidwe ka boma, kalembedwe, ndi njira zoyendetsera zinthu. React.js ili ndi malo osungira zinthu okhala ndi malaibulale ambiri ndi zida zomwe zingakuthandizeni kupanga mapulogalamu ovuta kwambiri pa intaneti.

Zabwino zonse, ndipo ndikukhulupirira kuti phunziroli likuthandizani kuyamba ulendo wanu ndi React.js!