Koyarwa kan Ƙirƙirar Aikace-aikacen Yanar Gizo ta Amfani da React.js

React.js sanannen ɗakin karatu ne na ci gaba na gaba-gaba wanda ake amfani da shi don gina hanyoyin sadarwa masu hulɗa (UIs). Kamfanin Facebook ne ya ƙirƙira shi, kuma manyan kamfanoni da yawa sun yi amfani da React.js, ciki har da Instagram, Airbnb, da WhatsApp. Idan kuna neman gina aikace-aikacen yanar gizo masu inganci, sauri, da amsawa, React.js na iya zama zaɓi mafi dacewa a gare ku.

Pendahuluan

Kafin mu fara, tabbatar da cewa an sanya Node.js da npm (Node Package Manager) a kwamfutarka. Node.js da npm suna da mahimmanci domin suna samar da yanayi da kayan aikin da ake buƙata don haɓaka aikace-aikacen yanar gizo ta amfani da React.js.

Mataki na 1: Fara Aikin React

Domin ƙirƙirar sabon aikace-aikacen React.js, za mu iya amfani da Create React App, kayan aikin ƙirƙirar aikace-aikace wanda ke rage saitin farko. Gudanar da umarni mai zuwa a cikin tashar ku ko umarnin umarni:

"Bash
npx create-react-app my-app
cd my-app
npm farawa
““

Wannan umarni zai ƙirƙiri sabon kundin adireshi mai suna `my-app`, zazzagewa da shigar da duk abubuwan da suka dace, sannan fara sabar haɓakawa. Yanzu zaku iya buɗe burauza kuma ku sami damar shiga `http://localhost:3000` don ganin aikace-aikacen React.js na asali.

Mataki na 2: Tsarin Fayil

Bari mu dubi tsarin fayil ɗin da Create React App ya ƙirƙira:

““
manhajata/
├── node_modules/
├── jama'a/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── tambari.svg
““

– `node_modules/`: Ya ƙunshi duk abubuwan da suka dogara da aikinka.
– `public/`: Ya ƙunshi fayiloli marasa motsi, gami da `index.html` wanda shine wurin shigar da aikace-aikacen.
– `src/`: Inda za ku yi amfani da mafi yawan lokacinku. Ya ƙunshi abubuwan da ke cikin React, fayilolin CSS, da sauran kadarori.

Mataki na 3: Share Fayiloli marasa amfani

Don fara da tsabtataccen tsari, bari mu goge wasu fayiloli marasa amfani. Share `logo.svg` da `App.test.js` a cikin babban fayil ɗin `src/`. Sannan, buɗe `App.css` da `index.css`, share duk lambar CSS da ke cikinsu don farawa da takardar salo mai tsabta.

Mataki na 4: Ƙirƙirar Sashenka na Farko

React.js ya dogara ne akan abubuwan da aka haɗa. Abubuwan da aka haɗa sune tubalan ginin aikace-aikacen yanar gizonku. Bari mu gyara `App.js` don ƙirƙirar ɓangaren farko namu.

Buɗe `src/App.js` kuma maye gurbinsa da lambar da ke ƙasa:

"jsx
shigo da React daga 'react';
shigo da './App.css';

Manhajar aiki() {
dawo (

);
}

fitarwa ta tsoho App;
““

Fara lambar React a cikin `App.js` ta amfani da JSX (JavaScript XML), wanda ke ba mu damar rubuta tsarin rubutu mai kama da HTML a cikin JavaScript. Ajiye canje-canjenku kuma duba sakamakon a cikin burauzar ku.

Mataki na 5: Ƙara Sabbin Abubuwan Haɗaka

Yanzu bari mu ƙara wasu sabbin abubuwan haɗin. Ƙirƙiri sabon babban fayil mai suna `components` a cikin babban fayil ɗin `src`. Sannan ƙirƙiri sabon fayil ɗin `HelloWorld.js` a cikin babban fayil ɗin `components`.

"jsx
shigo da React daga 'react';

aiki HelloWorld() {
dawo (

);
}

fitarwa ta asali HelloWorld;
““

Buɗe `App.js` sannan ka shigo da bangaren `HelloWorld` da muka ƙirƙira yanzu:

"jsx
shigo da React daga 'react';
shigo da './App.css';
shigo da HelloWorld daga './components/HelloWorld';

Manhajar aiki() {
dawo (

);
}

fitarwa ta tsoho App;
““

Yanzu, `App.js` yana nuna ɓangaren 'HelloWorld' a babban shafin.

Mataki na 6: Ƙara Gudanar da Jiha tare da amfani da Jihar

React yana da ƙaƙƙarfan ƙugiya don sarrafa yanayin. Bari mu ƙara wani yanayi a cikin aikace-aikacenmu. Misali, bari mu ƙara ƙirgawa wanda ke ƙaruwa duk lokacin da aka danna maɓalli.

Buɗe `HelloWorld.js` kuma ƙara ƙaho na state da `useState`:

"jsx
shigo da React, { useState } daga 'react';

aiki HelloWorld() {
const [ƙida, setCount] = amfaniState(0);

ƙaruwar constƘida = () => {
setCount(ƙida + 1);
}

dawo (

);
}

fitarwa ta asali HelloWorld;
““

Ana fara yanayin `count` da ƙimar 0, kuma duk lokacin da aka danna maɓallin, aikin `incrementCount` zai ƙara wannan ƙimar.

Mataki na 7: Ƙara Salo

Don ƙara salo, za mu iya amfani da CSS a cikin fayil ɗin `App.css` ko kuma za mu iya amfani da ɗakin karatu na CSS-in-JS kamar styled-components. Bari mu tsaya kan daidaitaccen CSS a yanzu.

Buɗe `App.css` kuma ƙara ɗan salo:

"`css
.App {
matattara-rubutu: tsakiya;
}

.Taken-app {
launin bango: 282c34;
matsakaicin tsayi: 100vh;
nuni: lankwasa;
flex-directory: shafi;
daidaita-kayan: tsakiya;
gaskata-abun ciki: tsakiya;
girman font: calc (10px + 2vmin);
launi: fari;
}

maballin {
Nunawa: 10px 20px;
gefe-sama: 20px;
girman font: 16px;
}
““

Mataki na 8: Ƙara Hanya ta hanyar amfani da React Router

Don ƙara kewayawa tsakanin shafuka daban-daban a cikin aikace-aikacenmu, za mu iya amfani da React Router. Shigar da React Router ta hanyar gudanar da umarni mai zuwa:

"Bash
npm shigar react-router-dom
““

Sannan, ƙirƙiri sabbin abubuwa guda biyu: `Home.js` da `About.js` a cikin babban fayil ɗin `components`.

`Gida.js`:
"jsx
shigo da React daga 'react';

aiki Gida() {
dawo (

);
}

fitarwa ta asali Gida;
““

`Game da.js`:
"jsx
shigo da React daga 'react';

aiki Game da() {
dawo (

);
}

fitarwa ta tsoho Game da;
““

Na gaba, buɗe `App.js` kuma saita hanyar sadarwa:

"jsx
shigo da React daga 'react';
shigo da { BrowserRouter as Router, Route, Link, Switch } daga 'react-router-dom';
shigo da './App.css';
shigo da HelloWorld daga './components/HelloWorld';
shigo da Gida daga './components/Home';
shigo da Game da daga './components/About';

Manhajar aiki() {
dawo (

);
}

fitarwa ta tsoho App;
““

Da wannan, mun ƙara kewayawa ta asali tsakanin shafuka daban-daban a cikin aikace-aikacenmu.

Penutup

Wannan koyaswar asali ce don ƙirƙirar aikace-aikacen yanar gizo ta amfani da React.js. Mun rufe tsarin aiki, ƙirƙirar sassa, gudanar da jiha, salo, da kuma hanyar sadarwa. React.js yana da wadataccen tsarin yanayi tare da ɗakunan karatu da kayan aiki da yawa waɗanda zasu iya taimaka muku gina aikace-aikacen yanar gizo masu rikitarwa.

Sa'a mai kyau, kuma ina fatan wannan koyaswar za ta taimaka maka ka fara tafiyarka da React.js!