Ìdánilẹ́kọ́ lórí Ṣíṣẹ̀dá Ohun èlò wẹ́ẹ̀bù nípa lílo React.js

React.js jẹ́ ilé ìkàwé ìdàgbàsókè front-end kan tí a ń lò láti kọ́ àwọn ojú-ọ̀nà olùlò ìbánisọ̀rọ̀ (UI). Láti ọwọ́ Facebook ni a ti ṣe àgbékalẹ̀ rẹ̀, React.js ni ọ̀pọ̀ ilé-iṣẹ́ ńláńlá ti lò, títí bí Instagram, Airbnb, àti WhatsApp. Tí o bá ń wá láti kọ́ àwọn ohun èlò ìkànnì ayélujára tí ó gbéṣẹ́, kíákíá, àti ìdáhùnpadà, React.js lè jẹ́ àṣàyàn tí ó tọ́ fún ọ.

Pendahuluan

Kí a tó bẹ̀rẹ̀, rí i dájú pé o ti fi Node.js àti npm (Node Package Manager) sí kọ̀ǹpútà rẹ. Node.js àti npm ṣe pàtàkì nítorí wọ́n ń pèsè àyíká àti irinṣẹ́ tí a nílò láti ṣe àgbékalẹ̀ àwọn ohun èlò wẹ́ẹ̀bù nípa lílo React.js.

Igbesẹ 1: Bibẹrẹ Iṣẹ akanṣe React

Láti ṣẹ̀dá ohun èlò React.js tuntun, a lè lo Create React App, ohun èlò ìṣẹ̀dá ohun èlò tí ó dín ìṣètò àkọ́kọ́ kù. Ṣíṣẹ́ àṣẹ wọ̀nyí nínú terminal tàbí àṣẹ àṣẹ rẹ:

"' bash
npx ṣẹda-react-app mi-app
cd mi-app
ibẹrẹ Npm
““

Àṣẹ yìí yóò ṣẹ̀dá àkójọ ìwé tuntun kan tí orúkọ rẹ̀ ń jẹ́ `my-app`, yóò gba gbogbo àwọn ìgbẹ́kẹ̀lé tí ó yẹ sílẹ̀ kí ó sì fi sórí ẹ̀rọ, yóò sì bẹ̀rẹ̀ sí í lo ẹ̀rọ ìdàgbàsókè náà. O lè ṣí ẹ̀rọ aṣàwárí kan nísinsìnyí kí o sì wọlé sí `http://localhost:3000` láti rí àkójọ React.js tí ó jẹ́ àìyípadà.

Igbese 2: Eto Folda

Ẹ jẹ́ ká wo bí ètò fódà tí Create React App ti ṣẹ̀dá ṣe rí:

““
àpù mi/
├── Àwọn módù_ìdìpọ̀/
├── gbogbogbò/
│ └── index.html
└── src/
├── App.css
├── Àpù.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
““

– `node_modulu/`: Ó ní gbogbo àwọn ìgbẹ́kẹ̀lé iṣẹ́ rẹ.
– `public/`: Ó ní àwọn fáìlì àìdúró, pẹ̀lú `index.html` èyí tí ó jẹ́ ojú-ọ̀nà ìṣíṣẹ́ náà.
– `src/`: Ibi tí o máa lo àkókò rẹ jùlọ. Ó ní àwọn ohun èlò React, àwọn fáìlì CSS, àti àwọn ohun ìní mìíràn nínú.

Igbese 3: Paarẹ awọn faili ti ko wulo

Láti bẹ̀rẹ̀ pẹ̀lú slate mímọ́, ẹ jẹ́ kí a pa àwọn fáìlì tí kò pọndandan rẹ́. Pa `logo.svg` àti `App.test.js` rẹ́ nínú fódà `src/`. Lẹ́yìn náà, ṣí `App.css` àti `index.css`, kí o sì pa gbogbo kódì CSS tó wà nínú wọn rẹ́ láti bẹ̀rẹ̀ pẹ̀lú stylesheet mímọ́.

Igbesẹ 4: Ṣiṣẹda Apakan Akọkọ Rẹ

React.js jẹ́ ti a gbé kalẹ̀ lórí àwọn èròjà. Àwọn èròjà ni àwọn ohun èlò ìkọ́lé fún ohun èlò wẹ́ẹ̀bù rẹ. Ẹ jẹ́ kí a ṣe àtúnṣe sí `App.js` láti ṣẹ̀dá èròjà àkọ́kọ́ wa.

Ṣí `src/App.js` kí o sì fi kódì yìí rọ́pò rẹ̀:

"jsx
gbe wọle React lati 'fesi';
gbe wọle './App.css';

iṣẹ́ App() {
pada (

);
}

okeere aiyipada App;
““

Ṣe ìbẹ̀rẹ̀ kódù React nínú `App.js` nípa lílo JSX (JavaScript XML), èyí tí ó fún wa láyè láti kọ ìkọ̀wé HTML-like nínú JavaScript. Fipamọ́ àwọn àyípadà rẹ kí o sì wo àwọn àbájáde nínú ẹ̀rọ aṣàwárí rẹ.

Igbesẹ 5: Fifi Awọn Eroja Tuntun kun

Ẹ jẹ́ kí a fi àwọn èròjà tuntun kún un. Ṣẹ̀dá fódà tuntun kan tí a ń pè ní `components` nínú fódà `src`. Lẹ́yìn náà, ṣẹ̀dá fáìlì tuntun kan `HelloWorld.js` nínú fódà `components`.

"jsx
gbe wọle React lati 'fesi';

iṣẹ́ HelloWorld() {
pada (

);
}

ìfiránṣẹ́ àyípadà HelloWorld;
““

Ṣí `App.js` kí o sì gbé apa `HelloWorld` tí a ṣẹ̀ṣẹ̀ ṣẹ̀dá wọlé:

"jsx
gbe wọle React lati 'fesi';
gbe wọle './App.css';
gbe HelloWorld wọle lati './components/HelloWorld';

iṣẹ́ App() {
pada (

);
}

okeere aiyipada App;
““

Ní báyìí, `App.js` ṣe àtúnṣe apa `HelloWorld` lórí ojú ìwé àkọ́kọ́.

Igbesẹ 6: Fifi Isakoso Ipinle kun pẹlu useState

React ní àwọn ìkọ́ tó lágbára gan-an fún ṣíṣàkóso ipò. Ẹ jẹ́ ká fi ipò díẹ̀ kún ohun èlò wa. Fún àpẹẹrẹ, ẹ jẹ́ ká fi àkọsílẹ̀ kan kún un tí ó máa ń pọ̀ sí i nígbàkúgbà tí a bá tẹ bọ́tìnì kan.

Ṣí `HelloWorld.js` kí o sì fi ìsopọ̀ ìpínlẹ̀ àti `useState` kún un:

"jsx
gbe wọle React, { useState } lati 'react';

iṣẹ́ HelloWorld() {
const [ìka, setCount] = Ìpínlẹ̀ (0);

ìfàsẹ́yìn const Count = () => {
setCount(iye + 1);
}

pada (

);
}

ìfiránṣẹ́ àyípadà HelloWorld;
““

A máa bẹ̀rẹ̀ ipò `count` pẹ̀lú iye 0, nígbàkúgbà tí a bá sì tẹ bọ́tìnì náà, iṣẹ́ `incrementCount` yóò mú iye yìí pọ̀ sí i.

Igbesẹ 7: Fifi Aṣa kun

Láti fi àwòrán kún un, a lè lo CSS nínú fáìlì `App.css` tàbí a lè lo ibi ìkàwé CSS-in-JS bíi styled-components. Ẹ jẹ́ ká tẹ̀síwájú pẹ̀lú CSS boṣewa fún ìgbà yìí.

Ṣí `App.css` kí o sì fi àwọn àṣà díẹ̀ kún un:

"css
.App {
titọ-ọrọ: aarin;
}

.Àkọlé-àpù {
àwọ̀ ẹ̀yìn: 282c34;
giga-kekere: 100vh;
ifihan: rọ;
Flex-itọsọna: ọwọn;
mö-ohun: aarin;
justify-content: center;
Ìwọ̀n fọ́ọ̀ǹtì: calc (10px + 2vmin);
awọ: funfun;
}

bọ́tìnì {
fifẹ: 10px 20px;
ala-oke: 20px;
iwọn font: 16px;
}
““

Igbesẹ 8: Fifi Ipa ọna kun pẹlu React Router

Láti fi ìlọ kiri láàrín àwọn ojú ìwé tó yàtọ̀ síra nínú ohun èlò wa, a lè lo React Router. Fi React Router sori ẹ̀rọ nípa ṣíṣe àṣẹ wọ̀nyí:

"' bash
npm fi sori ẹrọ react-router-dom
““

Lẹ́yìn náà, ṣẹ̀dá àwọn ẹ̀yà tuntun méjì: `Home.js` àti `About.js` nínú fódà `components`.

`Ilé.js`:
"jsx
gbe wọle React lati 'fesi';

iṣẹ́ Ilé() {
pada (

);
}

okeere aiyipada Home;
““

`Nípa.js`:
"jsx
gbe wọle React lati 'fesi';

iṣẹ́ Nípa() {
pada (

);
}

àyípadà ìtajà síta Nípa;
““

Lẹ́yìn náà, ṣí `App.js` kí o sì ṣètò ipa ọ̀nà:

"jsx
gbe wọle React lati 'fesi';
gbe wọle { BrowserRouter gẹ́gẹ́ bí Olùdarí, Ọ̀nà, Ìjápọ̀, Yípadà } láti 'react-router-dom';
gbe wọle './App.css';
gbe HelloWorld wọle lati './components/HelloWorld';
gbe Ile wọle lati './components/Home';
gbe Nipa wọle lati './components/About';

iṣẹ́ App() {
pada (

);
}

okeere aiyipada App;
““

Pẹlu eyi, a ti fi lilọ kiri ipilẹ kun laarin awọn oju-iwe oriṣiriṣi ninu ohun elo wa.

Penutup

Ìdánilẹ́kọ̀ọ́ ìpìlẹ̀ nìyẹn fún ṣíṣẹ̀dá ohun èlò ìkànnì ayélujára nípa lílo React.js. A ti ṣe àgbékalẹ̀ ìṣètò iṣẹ́, ìṣẹ̀dá àwọn ẹ̀yà ara, ìṣàkóso ìpínlẹ̀, ṣíṣe àwòrán, àti ìtọ́sọ́nà. React.js ní ètò ìṣẹ̀dá tó lọ́rọ̀ pẹ̀lú ọ̀pọ̀lọpọ̀ àwọn ilé ìkàwé àti irinṣẹ́ tí ó lè ràn ọ́ lọ́wọ́ láti kọ́ àwọn ohun èlò ìkànnì ayélujára tó díjú sí i.

Orire rere, mo si nireti pe ikẹkọ yii yoo ran ọ lọwọ lati bẹrẹ irin-ajo rẹ pẹlu React.js!