Dzidziso pakugadzira Web Application Uchishandisa React.js

React.js iraibhurari inozivikanwa yekugadzira mapurogiramu epamberi inoshandiswa kugadzira mainteractive user interfaces (UIs). Yakagadzirwa neFacebook, React.js yakashandiswa nemakambani mazhinji makuru, anosanganisira Instagram, Airbnb, neWhatsApp. Kana uchida kugadzira mawebhusaiti anoshanda, anokurumidza, uye anopindura, React.js ingave sarudzo yakakunakira.

Pendauluan

Tisati tatanga, iva nechokwadi chekuti une Node.js ne npm (Node Package Manager) zvakaiswa pakombuta yako. Node.js ne npm zvakakosha nekuti zvinopa nharaunda uye maturusi anodiwa kugadzira mawebhusaiti uchishandisa React.js.

Danho 1: Kutanga React Project

Kuti tigadzire application itsva yeReact.js, tinogona kushandisa Create React App, chishandiso chekugadzira application chinoderedza magadzirirwo ekutanga. Mhanya murairo unotevera muterminal yako kana command prompt:

"`bash
npx gadzira-react-app my-app
cd yangu-app
npm kutanga
``

Murairo uyu uchagadzira dhairekitori idzva rinonzi `my-app`, wodhawunirodha woisa zvese zvinodiwa, wotanga sevha yekugadzira. Iye zvino unogona kuvhura browser wopinda `http://localhost:3000` kuti uone application yeReact.js.

Danho rechipiri: Kuumbwa kweFolda

Ngatitarisei marongerwo eforodha akagadzirwa neCreate React App:

``
yangu-app/
├── node_modules/
├── yeruzhinji/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
``

– `node_modules/`: Ine zvese zvinoenderana neprojekiti yako.
– `public/`: Ine mafaira asingachinji, kusanganisira `index.html` inova ndiyo nzvimbo yekupinda application.
– `src/`: Kwauchapedza nguva yako yakawanda. Ine zvikamu zveReact, mafaira eCSS, nezvimwe zvinhu.

Danho rechitatu: Kubvisa Mafaira Asingadiwi

Kutanga nekubvisa slate, ngatibvise mamwe mafaira asina basa. Bvisa `logo.svg` uye `App.test.js` mukati meforodha re`src/`. Wobva wavhura `App.css` uye `index.css`, wobvisa kodhi yese yeCSS iri mukati mawo kuti utange nepepa remavara rakachena.

Danho rechina: Kugadzira Chikamu Chako Chekutanga

React.js inoenderana nezvikamu. Zvikamu ndizvo zvinovaka application yako yewebhu. Ngatigadzirise `App.js` kuti tigadzire chikamu chedu chekutanga.

Vhura `src/App.js` woitsiva nekodhi inotevera:

"`jsx
import React kubva 'react';
pinza './App.css';

basa reApp() {
dzoka (

);
}

kutumira kunze App yakajairika;
``

Tanga kodhi yeReact mukati me `App.js` uchishandisa JSX (JavaScript XML), iyo inotibvumira kunyora syntax yakafanana neHTML mukati meJavaScript. Chengetedza shanduko dzako uye ona mhedzisiro mubrowser yako.

Danho rechishanu: Kuwedzera Zvikamu Zvitsva

Ngatiwedzerei zvimwe zvikamu zvitsva. Gadzirai folda itsva inonzi `components` mukati mefolda ye `src`. Wobva wagadzira faira idzva `HelloWorld.js` mufolda ye `components`.

"`jsx
import React kubva 'react';

basa rekuti HelloWorld() {
dzoka (

);
}

kutumira kunze kweiyo HelloWorld;
``

Vhura `App.js` wobva wapinza chikamu che`HelloWorld` chatachangobva kugadzira:

"`jsx
import React kubva 'react';
pinza './App.css';
pinza HelloWorld kubva ku './components/HelloWorld';

basa reApp() {
dzoka (

);
}

kutumira kunze App yakajairika;
``

Zvino, `App.js` inoburitsa chikamu che`HelloWorld` papeji guru.

Danho 6: Kuwedzera State Management ne useState

React ine zvibatiso zvine simba zvekugadzirisa mamiriro enzvimbo. Ngatiwedzere mamwe mamiriro enzvimbo muapplication yedu. Semuenzaniso, ngatiwedzerei kanzura inowedzera pese painodzvanywa bhatani.

Vhura `HelloWorld.js` wobva wawedzera state ne`useState` hook:

"`jsx
pinza React, { useState } kubva ku 'react';

basa rekuti HelloWorld() {
const [kuverenga, setCount] = useState(0);

uwandu hwekuwedzera = () => {
setCount(nhamba + 1);
}

dzoka (

);
}

kutumira kunze kweiyo HelloWorld;
``

Mamiriro ekuti `count` anotangwa ne 0, uye pese painodzvanywa bhatani, basa rekuti `incrementCount` richawedzera kukosha uku.

Danho rechinomwe: Kuwedzera Maitiro

Kuti tiwedzere magadzirirwo, tinogona kushandisa CSS mufaira re `App.css` kana kuti tinogona kushandisa raibhurari yeCSS-in-JS yakaita se styled-components. Ngatirambei tichishandisa CSS yakajairwa parizvino.

Vhura `App.css` wobva wawedzera mamwe maitiro:

"css"
.App {
zvinyorwa-zvinongedzera: pakati;
}

Musoro weapp {
ruvara rwekumashure: 282c34;
kukwirira kweminiti: 100vh;
kuratidza: flex;
flex-direction: column;
align-zvinhu: pakati;
justify-content: centre;
saizi yefonti: calc(10px + 2vmin);
ruvara: chena;
}

bhatani {
padding: 10px 20px;
margin-kumusoro: 20px;
font-saizi: 16px;
}
``

Nhanho 8: Kuwedzera Routing neReact Router

Kuti tiwedzere kufamba pakati pemapeji akasiyana muapplication yedu, tinogona kushandisa React Router. Isa React Router nekumhanyisa murairo unotevera:

"`bash
npm isa react-router-dom
``

Wobva wagadzira zvikamu zviviri zvitsva: `Home.js` uye `About.js` muforodha re`components`.

`Home.js`:
"`jsx
import React kubva 'react';

basa reKumba() {
dzoka (

);
}

tumira kunze kwepakutanga Musha;
``

`Nezve.js`:
"`jsx
import React kubva 'react';

basa Nezve() {
dzoka (

);
}

kutumira kunze kwemutemo Nezve;
``

Tevere, vhura `App.js` wobva waisa nzira yekufambisa:

"`jsx
import React kubva 'react';
import { BrowserRouter seRouter, Route, Link, Switch } kubva ku 'react-router-dom';
pinza './App.css';
pinza HelloWorld kubva ku './components/HelloWorld';
pinza Home kubva ku './components/Home';
pinza Nezve kubva ku './components/About';

basa reApp() {
dzoka (

);
}

kutumira kunze App yakajairika;
``

Neizvi, tawedzera nzira yekufambisa mapeji akasiyana muapplication yedu.

Penutup

Ndiyo dzidziso huru yekugadzira web application uchishandisa React.js. Takurukura nezvekugadzirisa mapurojekiti, kugadzira zvikamu, manejimendi yenyika, magadzirirwo, uye routing. React.js ine ecosystem yakapfuma ine maraibhurari akawanda nematurusi anogona kukubatsira kuvaka web application dzakaoma kunzwisisa.

Rombo rakanaka, uye ndinovimba kuti chidzidzo ichi chinokubatsira kutanga rwendo rwako neReact.js!