Nkuzi gbasara imepụta ngwa weebụ site na iji React.js

React.js bụ ọbá akwụkwọ mmepe a ma ama nke e ji arụ ọrụ iji wulite interfaces ndị ọrụ mmekọrịta (UI). Facebook mepụtara React.js, ọtụtụ ụlọ ọrụ ukwu, gụnyere Instagram, Airbnb, na WhatsApp, ejirila ya. Ọ bụrụ na ịchọrọ ịmepụta ngwa weebụ dị irè, ngwa ngwa, na nzaghachi, React.js nwere ike ịbụ nhọrọ ziri ezi maka gị.

Pendahuluan

Tupu anyị amalite, gbaa mbọ hụ na etinyere Node.js na npm (Node Package Manager) na kọmputa gị. Node.js na npm dị oke mkpa n'ihi na ha na-enye gburugburu ebe obibi na ngwaọrụ dị mkpa iji mepụta ngwa weebụ site na iji React.js.

Nzọụkwụ 1: Ịmalite Ọrụ Mmeghachi Omume

Iji mepụta ngwa React.js ọhụrụ, anyị nwere ike iji Create React App, ngwa ọrụ imepụta ngwa nke na-ebelata nhazi mbụ. Gbaa iwu ndị a na terminal ma ọ bụ iwu gị:

"'bash
ngwa m nke npx create-react-app
cd m-app
npm mmalite
““

Iwu a ga-emepụta ndekọ ọhụrụ aha ya bụ `my-app`, budata ma wụnye ihe niile dị mkpa, wee malite sava mmepe. Ị nwere ike imepe ihe nchọgharị ugbu a wee banye `http://localhost:3000` iji hụ ngwa React.js nke ndabara.

Nzọụkwụ nke 2: Nhazi folda

Ka anyị leba anya n'otú e si hazie folda nke Create React App mepụtara:

““
ngwa m/
├── modulu_node/
├── ọha/
│ └── index.html
└── src/
├── App.css
├── Ngwa.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
““

– `node_modules/`: Nwere ihe niile ị ga-adabere na ọrụ gị.
– `public/`: Nwere faịlụ ndị na-anaghị agbanwe agbanwe, gụnyere `index.html` nke bụ ebe ntinye ngwa ahụ.
– `src/`: Ebe ị ga-eji oge gị niile. Nwere ihe ndị mejupụtara React, faịlụ CSS, na ihe ndị ọzọ.

Nzọụkwụ nke 3: Ihichapụ faịlụ ndị na-adịghị mkpa

Iji malite na slate dị ọcha, ka anyị hichapụ ụfọdụ faịlụ na-adịghị mkpa. Hichapụ `logo.svg` na `App.test.js` n'ime folda `src/`. Mgbe ahụ, mepee `App.css` na `index.css`, hichapụ koodu CSS niile dị n'ime ha iji malite na mpempe akwụkwọ nhazi dị ọcha.

Nzọụkwụ nke 4: Ịmepụta Akụkụ Mbụ Gị

React.js dabere na ihe mejupụtara ya. Ihe mejupụtara ya bụ ihe owuwu nke ngwa weebụ gị. Ka anyị gbanwee `App.js` iji mepụta ihe mbụ anyị.

Mepee `src/App.js` wee jiri koodu a dochie ya:

"jsx
mbubata React si 'meghachi omume';
bubata './App.css';

Ngwa ọrụ() {
laghachi (

);
}

mbupụ ngwa ndabara;
““

Malite koodu React n'ime `App.js` site na iji JSX (JavaScript XML), nke na-enye anyị ohere ide usoro HTML dị ka n'ime JavaScript. Chekwaa mgbanwe gị ma lee nsonaazụ ya na ihe nchọgharị gị.

Nzọụkwụ nke 5: Ịgbakwunye Ihe Ndị Ọhụrụ

Ugbua, ka anyị tinye ihe ọhụrụ. Mepụta folda ọhụrụ a na-akpọ `components` n'ime folda `src`. Wee mepụta faịlụ ọhụrụ `HelloWorld.js` na folda `components`.

"jsx
mbubata React si 'meghachi omume';

ọrụ HelloWorld() {
laghachi (

);
}

mbupụ ndabara HelloWorld;
““

Mepee `App.js` wee bubata ihe mejupụtara `HelloWorld` anyị mepụtara ugbu a:

"jsx
mbubata React si 'meghachi omume';
bubata './App.css';
bubata HelloWorld site na './components/HelloWorld';

Ngwa ọrụ() {
laghachi (

);
}

mbupụ ngwa ndabara;
““

Ugbua, `App.js` na-egosi akụkụ `HelloWorld` na isi peeji.

Nzọụkwụ nke 6: Ịgbakwunye Njikwa Steeti na useState

React nwere njikọ dị ike maka ijikwa ọnọdụ. Ka anyị tinye steeti na ngwa anyị. Dịka ọmụmaatụ, ka anyị tinye ihe na-abawanye oge ọ bụla a pịrị bọtịnụ.

Mepee `HelloWorld.js` wee tinye njikọ steeti na `useState`:

"jsx
bubata React, { useState } site na 'react';

ọrụ HelloWorld() {
const [ọnụọgụ, setCount] = Ọnọdụ ojiji(0);

ọnụọgụ mmụba = () => {
setCount(ọnụọgụgụ + 1);
}

laghachi (

);
}

mbupụ ndabara HelloWorld;
““

A na-amalite ọnọdụ `count` site na iji uru nke 0, oge ọ bụla a pịrị bọtịnụ ahụ, ọrụ `incrementCount` ga-eme ka uru a dịkwuo elu.

Nzọụkwụ nke 7: Ịgbakwunye Nhazi

Iji tinye nhazi, anyị nwere ike iji CSS na faịlụ `App.css` ma ọ bụ anyị nwere ike iji ọbá akwụkwọ CSS-in-JS dị ka styled-components. Ka anyị nọgide na CSS ọkọlọtọ ugbu a.

Mepee `App.css` wee tinye ụfọdụ ụdị ejiji:

"css
.App {
ederede-nhazi: etiti;
}

.Nkọwa-ngwa {
agba ndabere: 282c34;
ogologo nkeji: 100vh;
ngosi: flex;
mgbanwe-ntụziaka: kọlụm;
mezie ihe: etiti;
ziri ezi-ọdịnaya: etiti;
nha mkpụrụedemede: calc (10px + 2vmin);
agba: ọcha;
}

bọtịnụ {
Ntughari: 10px 20px;
oke-oke: 20px;
font-nha: 16px;
}
““

Nzọụkwụ nke 8: Ịgbakwunye Route na React Router

Iji tinye igodo n'etiti ibe dị iche iche na ngwa anyị, anyị nwere ike iji React Router. Wụnye React Router site na ịgba ọsọ iwu a:

"'bash
npm tinye react-router-dom
““

Mgbe ahụ, mepụta ihe abụọ ọhụrụ: `Home.js` na `About.js` na folda `components`.

`Home.js`:
"jsx
mbubata React si 'meghachi omume';

ọrụ Ebe obibi() {
laghachi (

);
}

mbupụ ndabara Ebe obibi;
““

`Gbasara.js`:
"jsx
mbubata React si 'meghachi omume';

ọrụ Banyere() {
laghachi (

);
}

mbupụ ndabara Banyere;
““

Na-esote, mepee `App.js` wee hazie ụzọ nhazi:

"jsx
mbubata React si 'meghachi omume';
bubata { BrowserRouter dị ka onye na-ahụ maka rawụta, ụzọ, njikọ, mgba ọkụ } site na 'react-router-dom';
bubata './App.css';
bubata HelloWorld site na './components/HelloWorld';
bubata Home site na './components/Home';
bubata Banyere site na './components/About';

Ngwa ọrụ() {
laghachi (

);
}

mbupụ ngwa ndabara;
““

Site na nke a, anyị etinyela igodo dị mkpa n'etiti ibe dị iche iche na ngwa anyị.

Penutup

Nke ahụ bụ nkuzi dị mkpa maka ịmepụta ngwa weebụ site na iji React.js. Anyị ekpuchila nhazi ọrụ, imepụta akụkụ, njikwa steeti, nhazi, na nhazi ụzọ. React.js nwere gburugburu ebe obibi bara ụba nke nwere ọtụtụ ọbá akwụkwọ na ngwaọrụ ndị nwere ike inyere gị aka ịmepụta ngwa weebụ dị mgbagwoju anya karị.

Jisie ike, enwere m olileanya na nkuzi a ga-enyere gị aka ịmalite njem gị na React.js!