Akoranga mō te Waihanga i tētahi Taupānga Tukutuku mā te whakamahi i te React.js

He whare pukapuka whanaketanga rongonui a React.js e whakamahia ana hei hanga atanga kaiwhakamahi tauwhitiwhiti (UI). I whakawhanakehia e Facebook, kua whakamahia a React.js e te maha o ngā kamupene nui, tae atu ki a Instagram, Airbnb, me WhatsApp. Mena kei te rapu koe ki te hanga tono tukutuku whai hua, tere, me te arotau , ko React.js pea te whiringa tika māu.

Pendahuluan

I mua i te tīmatanga, kia tino tāutahia a Node.js me te npm (Node Package Manager) ki tō rorohiko. He mea nui a Node.js me npm nā te mea ka whakaratohia e rāua te taiao me ngā taputapu e hiahiatia ana hei whakawhanake i ngā tono tukutuku mā te whakamahi i a React.js.

Hipanga 1: Te Tīmata i te Kaupapa React

Hei waihanga i tētahi taupānga React.js hou, ka taea e tātou te whakamahi i te Create React App, he taputapu waihanga taupānga e whakaiti ana i te whirihoranga tuatahi. Whakahaerehia te whakahau e whai ake nei i roto i tō pūwhakatere, i tō tohu whakahau rānei:

"`pāho
npx hanga-taupānga-tauhohe-taku-taupānga
cd taku-taupānga
npm tiimata
""

Mā tēnei whakahau ka waihangahia he whaiaronga hou ko `my-app` te ingoa, ka tikiakehia, ka tāutahia hoki ngā whakawhirinakitanga katoa e tika ana, ā, ka tīmatahia te tūmau whanaketanga. Ka taea e koe te whakatuwhera i tētahi pūtirotiro me te uru atu ki `http://localhost:3000` hei tiro i te taupānga React.js taunoa.

Hipanga 2: Hanganga Kōpaki

Kia tirohia te hanganga kōpaki kua hangaia e Create React App:

""
taku-taupānga/
├── kōwae_pūnga/
├── tūmatanui/
│ └── taupū.html
└── src/
├── Taupānga.css
├── Taupānga.js
├── Taupānga.whakamātautau.js
├── index.css
├── index.js
└── logo.svg
""

– `node_modules/`: Kei roto ngā mea katoa e whakawhirinaki ana ki tō kaupapa.
– `public/`: Kei roto ngā kōnae tūmau, tae atu ki te `index.html`, koinei te pūwāhi urunga o te taupānga.
– `src/`: Te wāhi e pau ai te nuinga o tō wā. Kei roto ko ngā wāhanga React, ngā kōnae CSS, me ētahi atu rawa.

Hipanga 3: Te Mukua o ngā Kōnae Kāore e Hiahiatia

Hei tīmatanga mā te tuhinga ma, me muku ētahi kōnae kāore e hiahiatia. Mukua te `logo.svg` me te `App.test.js` i roto i te kōpaki `src/`. Kātahi, whakatuwheratia te `App.css` me te `index.css`, me te muku i ngā waehere CSS katoa i roto i a rātou hei tīmatanga mā te pepa momotuhi ma.

Hipanga 4: Te Waihanga i tō Wāhanga Tuatahi

He mea hanga a React.js i runga i ngā wāhanga. Ko ngā wāhanga ngā poraka hanga o tō taupānga tukutuku. Me whakarerekē tātou i te `App.js` hei waihanga i tā tātou wāhanga tuatahi.

Whakatuwheratia te `src/App.js` ka whakakapia ki te waehere e whai ake nei:

"`jsx
kawemai React mai i 'react';
kawemai './Taupānga.css';

mahi Taupānga() {
whakahoki (

);
}

kaweake Taupānga taunoa;
""

Tīmatahia te waehere React ki roto i te `App.js` mā te whakamahi i te JSX (JavaScript XML), e āhei ai tātou ki te tuhi i te wetereo rite ki te HTML i roto i te JavaScript. Tiakina ō huringa ka tirohia ngā hua i roto i tō pūtirotiro.

Hipanga 5: Te Tāpiri i ngā Wāhanga Hou

Nā, me tāpiri ētahi wāhanga hou. Waihangatia he kōpaki hou e kīia ana ko `components` i roto i te kōpaki `src`. Kātahi ka waihangatia he kōnae hou `HelloWorld.js` i roto i te kōpaki `components`.

"`jsx
kawemai React mai i 'react';

mahi HelloWorld() {
whakahoki (

);
}

kaweake taunoa HelloWorld;
""

Whakatuwheratia te `App.js` ka kawemai i te wāhanga `HelloWorld` i hangaia e tātou:

"`jsx
kawemai React mai i 'react';
kawemai './Taupānga.css';
kawemai i te HelloWorld mai i './components/HelloWorld';

mahi Taupānga() {
whakahoki (

);
}

kaweake Taupānga taunoa;
""

Inaianei, ka whakaatuhia e `App.js` te wāhanga `HelloWorld` ki te whārangi matua.

Hipanga 6: Te Tāpiri i te Whakahaere Ā-Wāhanga me te useState

He tino kaha ngā matau a React mō te whakahaere i te āhua. Me tāpiri he āhua ki tā tātou tono. Hei tauira, me tāpiri he kaute e piki ake ana i ia pāwhiritanga o te pātene.

Whakatuwheratia te `HelloWorld.js` ka tāpirihia te state me te `useState` matau:

"`jsx
kawemai i te Tauhohenga, { useState } mai i te 'tauhohenga';

mahi HelloWorld() {
const [tatau, whakatakotoTatau] = whakamahiKāwanatanga(0);

const pikingaTau = () => {
tātaitanga(tātaitanga + 1);
}

whakahoki (

);
}

kaweake taunoa HelloWorld;
""

Ka tīmatahia te āhua `count` ki te uara o te 0, ā, i ia pāwhiritanga o te pātene, ka whakanuia e te mahi `incrementCount` tēnei uara.

Hipanga 7: Te Tāpiri i te Whakairoiro

Hei tāpiri i te momo āhua, ka taea e tātou te whakamahi i te CSS i roto i te kōnae `App.css`, ka taea rānei e tātou te whakamahi i tētahi whare pukapuka CSS-in-JS pērā i te styled-components. Me noho tonu tātou ki te CSS paerewa i nāianei.

Whakatuwheratia te `App.css` ka tāpirihia ētahi momo kāhua:

"`css
.Taupānga {
whakatikatika-kuputuhi: pokapū;
}

.Pane-taupānga {
tae-papamuri: 282c34;
teitei-iti rawa: 100vh;
whakaatu: hangore;
flex-direction: tīwae;
align-tuemi: pokapū;
justify-content: pokapū;
rahi-momotuhi: tātaitai(10px + 2vmin);
tae: ma;
}

pātene
te whakaheke: 10px 20px;
marara-runga: 20px;
momotuhi momotuhi: 16px;
}
""

Hipanga 8: Te Tāpiri i te Ara ki te React Router

Hei tāpiri whakatere i waenga i ngā whārangi rerekē i roto i tā tātou taupānga, ka taea e tātou te whakamahi i te React Router. Tāutahia te React Router mā te whakahaere i te whakahau e whai ake nei:

"`pāho
tāutahia te npm react-router-dom
""

Kātahi, waihangahia kia rua ngā wāhanga hou: `Home.js` me `About.js` i roto i te kōpaki `components`.

`Kāinga.js`:
"`jsx
kawemai React mai i 'react';

mahi Kāinga() {
whakahoki (

);
}

kaweake taunoa Kāinga;
""

`Mō.js`:
"`jsx
kawemai React mai i 'react';

mahi Mō() {
whakahoki (

);
}

kaweake taunoa Mō;
""

Muri iho, whakatuwheratia te `App.js` ka whakarite i te ara:

"`jsx
kawemai React mai i 'react';
kawemai { BrowserRouter hei Pouara, Ara, Hononga, Whakawhiti } mai i 'react-router-dom';
kawemai './Taupānga.css';
kawemai i te HelloWorld mai i './components/HelloWorld';
kawemai i te Kāinga mai i './ngā wāhanga/Kāinga';
kawemai i te Mōhiohio mai i './components/Mōhiohio';

mahi Taupānga() {
whakahoki (

);
}

kaweake Taupānga taunoa;
""

Nā tēnei, kua tāpirihia e mātou he whakatere taketake i waenga i ngā whārangi rerekē i roto i tā mātou taupānga.

Te Katinga

He akoranga taketake tēnā mō te hanga taupānga tukutuku mā te whakamahi i a React.js. Kua hipokina e mātou te tatūnga kaupapa, te hanga wāhanga, te whakahaere āhua, te whakahāngai, me te ara. He pūnaha rauropi whai rawa a React.js me ngā whare pukapuka me ngā taputapu maha hei āwhina i a koe ki te hanga taupānga tukutuku uaua ake.

Kia ora, ā, ko te tumanako ka āwhina tēnei akoranga i a koe ki te tīmata i tō haerenga me React.js!