Kev Qhia Txog Kev Tsim Ib Daim Ntawv Thov Web Siv React.js

React.js yog ib lub tsev qiv ntawv tsim kho pem hauv ntej nrov uas siv los tsim cov neeg siv sib tham (UIs). Tsim los ntawm Facebook, React.js tau siv los ntawm ntau lub tuam txhab loj, suav nrog Instagram, Airbnb, thiab WhatsApp. Yog tias koj tab tom nrhiav kev tsim cov ntawv thov web zoo, ceev, thiab teb tau sai, React.js yuav yog qhov kev xaiv zoo rau koj.

Pendahuluuan

Ua ntej peb pib, xyuas kom tseeb tias koj muaj Node.js thiab npm (Node Package Manager) ntsia rau hauv koj lub computer. Node.js thiab npm yog qhov tseem ceeb vim tias lawv muab ib puag ncig thiab cov cuab yeej xav tau los tsim cov ntawv thov web siv React.js.

Kauj Ruam 1: Pib Qhov Project React

Txhawm rau tsim ib daim ntawv thov React.js tshiab, peb tuaj yeem siv Create React App, ib lub cuab yeej tsim daim ntawv thov uas txo qis qhov kev teeb tsa thawj zaug. Khiav cov lus txib hauv qab no hauv koj lub davhlau ya nyob twg lossis cov lus txib:

"`bash
npx tsim-react-app kuv-app
cd kuv-app
npm pib
“

Cov lus txib no yuav tsim ib daim nplaub tshev tshiab hu ua `my-app`, rub tawm thiab nruab txhua qhov kev vam khom tsim nyog, thiab pib lub server tsim kho. Tam sim no koj tuaj yeem qhib lub browser thiab nkag mus rau `http://localhost:3000` kom pom daim ntawv thov React.js uas twb muaj lawm.

Kauj Ruam 2: Cov Qauv Ntawv tais ceev tseg

Cia peb saib cov qauv nplaub tshev uas Create React App tau tsim:

“
kuv-app/
├── node_modules/
├── pej xeem/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
“

– `node_modules/`: Muaj tag nrho koj cov kev vam khom rau qhov project.
– `public/`: Muaj cov ntaub ntawv static, suav nrog `index.html` uas yog qhov nkag mus rau daim ntawv thov.
– `src/`: Qhov chaw uas koj yuav siv sijhawm feem ntau. Muaj cov khoom React, cov ntaub ntawv CSS, thiab lwm yam khoom muaj nqis.

Kauj Ruam 3: Rho Tawm Cov Ntaub Ntawv Tsis Tsim Nyog

Yuav pib nrog daim ntawv huv si, cia peb rho tawm qee cov ntaub ntawv tsis tsim nyog. Rho tawm `logo.svg` thiab `App.test.js` hauv daim nplaub tshev `src/`. Tom qab ntawd, qhib `App.css` thiab `index.css`, rho tawm tag nrho cov CSS code hauv lawv kom pib nrog daim ntawv stylesheet huv si.

Kauj Ruam 4: Tsim Koj Thawj Cheebtsam

React.js yog raws li cov khoom sib xyaw. Cov khoom sib xyaw yog cov khoom siv tseem ceeb ntawm koj daim ntawv thov web. Cia peb hloov kho `App.js` los tsim peb thawj cov khoom sib xyaw.

Qhib `src/App.js` thiab hloov nws nrog cov lej hauv qab no:

"`jsx
import React los ntawm 'react';
import './App.css';

muaj nuj nqi App() {
rov qab los (

);
}

export default App;
“

Pib siv JSX (JavaScript XML) los pib cov React code hauv `App.js`, uas tso cai rau peb sau HTML-zoo li syntax hauv JavaScript. Txuag koj cov kev hloov pauv thiab saib cov txiaj ntsig hauv koj tus browser.

Kauj Ruam 5: Ntxiv Cov Cheebtsam Tshiab

Tam sim no cia peb ntxiv qee cov khoom tshiab. Tsim ib daim nplaub tshev tshiab hu ua `components` hauv daim nplaub tshev `src`. Tom qab ntawd tsim ib daim ntawv tshiab `HelloWorld.js` hauv daim nplaub tshev `components`.

"`jsx
import React los ntawm 'react';

muaj nuj nqi Nyob ZooWorld() {
rov qab los (

);
}

export default HelloWorld;
“

Qhib `App.js` thiab import cov `HelloWorld` Cheebtsam uas peb nyuam qhuav tsim:

"`jsx
import React los ntawm 'react';
import './App.css';
import HelloWorld los ntawm './components/HelloWorld';

muaj nuj nqi App() {
rov qab los (

);
}

export default App;
“

Tam sim no, `App.js` ua rau `HelloWorld` Cheebtsam ntawm nplooj ntawv tseem ceeb.

Kauj Ruam 6: Ntxiv Kev Tswj Xyuas Lub Xeev nrog useState

React muaj cov hooks muaj zog heev rau kev tswj hwm lub xeev. Cia peb ntxiv qee lub xeev rau peb daim ntawv thov. Piv txwv li, cia peb ntxiv lub counter uas nce txhua zaus nias lub pob.

Qhib `HelloWorld.js` thiab ntxiv lub xeev thiab `useState` hook:

"`jsx
import React, { useState } los ntawm 'react';

muaj nuj nqi Nyob ZooWorld() {
const [suav, setCount] = useState(0);

const incrementCount = () => {
teemCount(suav + 1);
}

rov qab los (

);
}

export default HelloWorld;
“

Lub xeev 'suav' yog pib nrog tus nqi ntawm 0, thiab txhua zaus lub pob raug nyem, lub luag haujlwm 'incrementCount' yuav ua rau tus nqi no nce ntxiv.

Kauj Ruam 7: Ntxiv Styling

Yuav ntxiv cov qauv, peb siv tau CSS hauv cov ntaub ntawv `App.css` lossis peb siv tau lub tsev qiv ntawv CSS-in-JS zoo li styled-components. Cia peb siv CSS tus qauv tam sim no.

Qhib `App.css` thiab ntxiv qee qhov styling:

"`css
.App {
text-align: chaw;
}

.App-header {
xim keeb kwm yav dhau: 282c34;
qhov siab tsawg kawg nkaus: 100vh;
zaub: flex;
flex-kev taw qhia: kem;
align-khoom: center;
justify-cov ntsiab lus: center;
font-size: calc(10px + 2vmin);
xim: dawb;
}

khawm {
padding: 10px 20px;
paj tau paj-saum: 20px;
font-loj: 16px;
}
“

Kauj Ruam 8: Ntxiv Kev Taw Qhia nrog React Router

Yuav ntxiv kev taw qhia ntawm cov nplooj ntawv sib txawv hauv peb daim ntawv thov, peb tuaj yeem siv React Router. Nruab React Router los ntawm kev khiav cov lus txib hauv qab no:

"`bash
npm nruab react-router-dom
“

Tom qab ntawd, tsim ob lub Cheebtsam tshiab: `Home.js` thiab `About.js` hauv daim nplaub tshev `components`.

`Tsev.js`:
"`jsx
import React los ntawm 'react';

muaj nuj nqi Tsev() {
rov qab los (

);
}

export default Home;
“

`Txog.js`:
"`jsx
import React los ntawm 'react';

muaj nuj nqi Txog() {
rov qab los (

);
}

export default Hais txog;
“

Tom ntej no, qhib `App.js` thiab teeb tsa kev taw qhia:

"`jsx
import React los ntawm 'react';
import {BrowserRouter li Router, Route, Link, Switch} los ntawm 'react-router-dom';
import './App.css';
import HelloWorld los ntawm './components/HelloWorld';
import Tsev los ntawm './components/Home';
import Txog los ntawm './components/Txog';

muaj nuj nqi App() {
rov qab los (

);
}

export default App;
“

Nrog rau qhov no, peb tau ntxiv cov kev taw qhia yooj yim ntawm cov nplooj ntawv sib txawv hauv peb daim ntawv thov.

Kev kaw

Qhov ntawd yog ib qho kev qhia yooj yim rau kev tsim ib daim ntawv thov web siv React.js. Peb tau tham txog kev teeb tsa project, kev tsim cov khoom, kev tswj hwm lub xeev, kev tsim qauv, thiab kev taw qhia. React.js muaj ib lub ecosystem nplua nuj nrog ntau lub tsev qiv ntawv thiab cov cuab yeej uas tuaj yeem pab koj tsim cov ntawv thov web nyuaj dua.

Thov kom koj muaj hmoo, thiab kuv vam tias cov lus qhia no yuav pab koj pib koj txoj kev taug kev nrog React.js!