Aʻo no ka hana ʻana i kahi polokalamu pūnaewele me ka hoʻohana ʻana iā React.js

He waihona hoʻomohala mua kaulana ʻo React.js i hoʻohana ʻia e kūkulu i nā interface mea hoʻohana interactive (UIs). I hoʻomohala ʻia e Facebook, ua hoʻohana ʻia ʻo React.js e nā ʻoihana nui he nui, me Instagram, Airbnb, a me WhatsApp. Inā ʻoe e ʻimi nei e kūkulu i nā polokalamu pūnaewele kūpono, wikiwiki, a pane koke, ʻo React.js paha ke koho kūpono nāu.

Pendahuluan

Ma mua o ko mākou hoʻomaka ʻana, e hōʻoia i loaʻa iā ʻoe ʻo Node.js a me npm (Node Package Manager) i hoʻokomo ʻia ma kāu kamepiula. He mea nui ʻo Node.js a me npm no ka mea hāʻawi lākou i ke kaiapuni a me nā mea hana e pono ai e hoʻomohala i nā polokalamu pūnaewele me ka hoʻohana ʻana iā React.js.

KaʻAnuʻu Hana 1: Hoʻomaka i ka Papahana React

No ka hana ʻana i kahi polokalamu React.js hou, hiki iā mākou ke hoʻohana iā Create React App, kahi mea hana hana noi e hōʻemi ana i ka hoʻonohonoho mua. E holo i ke kauoha ma lalo nei ma kāu terminal a i ʻole ke kauoha kauoha:

"ʻahaʻaina hoʻokūkū"
npx hana-pane-polokalamu-kaʻu-polokalamu
cd kaʻu polokalamu
npm hoʻomaka
".

E hana kēia kauoha i kahi papa kuhikuhi hou i kapa ʻia ʻo `my-app`, e hoʻoiho a hoʻouka i nā mea hilinaʻi āpau e pono ai, a hoʻomaka i ke kikowaena hoʻomohala. I kēia manawa hiki iā ʻoe ke wehe i kahi polokalamu kele pūnaewele a komo i ka `http://localhost:3000` e ʻike i ka polokalamu React.js paʻamau.

KaʻAnuʻu Hana 2: Ka Hoʻonohonoho ʻana o ka Waihona

E nānā kākou i ke ʻano o ka waihona i hana ʻia e Create React App:

".
kaʻu-polokalamu/
├── node_modules/
├── lehulehu/
│ └── papa kuhikuhi.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
".

– `node_modules/`: Aia nā mea āpau e pili ana i kāu papahana.
– `public/`: Loaʻa nā faila kūpaʻa, me `index.html` ʻo ia ke kikowaena komo o ka polokalamu.
– `src/`: Kahi e hoʻolilo ai ʻoe i ka hapa nui o kou manawa. Loaʻa nā ʻāpana React, nā faila CSS, a me nā waiwai ʻē aʻe.

KaʻAnuʻu Hana 3: Holoi ʻana i nā faila pono ʻole

No ka hoʻomaka ʻana me kahi papa maʻemaʻe, e holoi kākou i kekahi mau faila pono ʻole. Holoi i ka `logo.svg` a me ka `App.test.js` i loko o ka waihona `src/`. A laila, wehe i ka `App.css` a me ka `index.css`, e holoi ana i nā code CSS āpau i loko o lākou e hoʻomaka me kahi stylesheet maʻemaʻe.

KaʻAnuʻu Hana 4: Ke Hana ʻana i kāu ʻĀpana Mua

Hoʻokumu ʻia ʻo React.js i nā ʻāpana. ʻO nā ʻāpana nā poloka kūkulu o kāu polokalamu pūnaewele. E hoʻololi kākou i ka `App.js` e hana i kā mākou ʻāpana mua.

E wehe i ka `src/App.js` a pani iā ​​ia me ke code aʻe:

“`jsx
lawe mai i React mai 'react';
hoʻokomo './App.css';

hana Polokalamu() {
hoʻi (

);
}

hoʻokuʻu aku i ka Polokalamu paʻamau;
".

E hoʻomaka i ke code React i loko o `App.js` me ka hoʻohana ʻana iā JSX (JavaScript XML), kahi e hiki ai iā mākou ke kākau i ka syntax HTML-like i loko o JavaScript. E mālama i kāu mau hoʻololi a nānā i nā hualoaʻa ma kāu polokalamu kele pūnaewele.

KaʻAnuʻu Hana 5: Hoʻohui i nā ʻĀpana Hou

I kēia manawa, e hoʻohui kākou i kekahi mau ʻāpana hou. E hana i kahi waihona hou i kapa ʻia ʻo `components` i loko o ka waihona `src`. A laila e hana i kahi faila hou ʻo `HelloWorld.js` i loko o ka waihona `components`.

“`jsx
lawe mai i React mai 'react';

hana HelloWorld() {
hoʻi (

);
}

hoʻokuʻu aku i ka HelloWorld paʻamau;
".

E wehe i ka `App.js` a lawe mai i ka ʻāpana `HelloWorld` a mākou i hana ai:

“`jsx
lawe mai i React mai 'react';
hoʻokomo './App.css';
e hoʻokomo iā HelloWorld mai './components/HelloWorld';

hana Polokalamu() {
hoʻi (

);
}

hoʻokuʻu aku i ka Polokalamu paʻamau;
".

I kēia manawa, hōʻike ʻo `App.js` i ka ʻāpana `HelloWorld` ma ka ʻaoʻao nui.

KaʻAnuʻu Hana 6: Hoʻohui i ka Hoʻokele Moku'āina me ka useState

He mau lou ikaika loa ko React no ka hoʻokele ʻana i ke kūlana. E hoʻohui kākou i kekahi kūlana i kā mākou noi. No ka laʻana, e hoʻohui kākou i kahi helu e hoʻonui ana i kēlā me kēia manawa e kaomi ʻia ai kahi pihi.

E wehe i ka `HelloWorld.js` a hoʻohui i ka moku'āina a me ka lou `useState`:

“`jsx
hoʻokomo i ka React, { useState } mai 'react';

hana HelloWorld() {
const [helu, hoʻonohonohoHelu] = hoʻohana i ke Aupuni(0);

const incrementHelu = () => {
setHelu(helu + 1);
}

hoʻi (

);
}

hoʻokuʻu aku i ka HelloWorld paʻamau;
".

Hoʻomaka ʻia ke kūlana `count` me ka waiwai o 0, a i kēlā me kēia manawa e kaomi ʻia ai ke pihi, e hoʻonui ka hana `incrementCount` i kēia waiwai.

KaʻAnuʻu Hana 7: Hoʻohui i ke Kaila

No ka hoʻohui ʻana i ke kaila, hiki iā kākou ke hoʻohana i ka CSS ma ka faila `App.css` a i ʻole hiki iā kākou ke hoʻohana i kahi waihona CSS-in-JS e like me styled-components. E hoʻomau kākou me ka CSS maʻamau i kēia manawa.

E wehe i ka `App.css` a hoʻohui i kekahi kaila:

ʻO ka css
.App {
pāʻālua-align: center;
}

.Poʻomanaʻo-polokalamu {
kala-hope: 282c34;
kiʻekiʻe loa: 100vh;
hōʻike: pili;
flex-direction: kolamu;
align-item: waena;
justify-content: kikowaena;
nui-momona: calc(10px + 2vmin);
kala: keʻokeʻo;
}

pihi {
hoʻoponopono: 10px 20px;
'āpana kiʻekiʻe: 20px;
font-nui: 16px;
}
".

KaʻAnuʻu Hana 8: Hoʻohui i ke Alanui me ka React Router

No ka hoʻohui ʻana i ka hoʻokele ma waena o nā ʻaoʻao like ʻole i kā mākou noi, hiki iā mākou ke hoʻohana iā React Router. E hoʻouka iā React Router ma ka holo ʻana i kēia kauoha:

"ʻahaʻaina hoʻokūkū"
npm hoʻokomo i ka react-router-dom
".

A laila, e hana i ʻelua mau ʻāpana hou: `Home.js` a me `About.js` i loko o ka waihona `components`.

`Home.js`:
“`jsx
lawe mai i React mai 'react';

hana Home() {
hoʻi (

);
}

hoʻokuʻu aku i ka paʻamau Home;
".

`E pili ana iā.js`:
“`jsx
lawe mai i React mai 'react';

hana E pili ana iā() {
hoʻi (

);
}

hoʻokuʻu aku i ka paʻamau E pili ana;
".

A laila, wehe i ka `App.js` a hoʻonohonoho i ke ala hele:

“`jsx
lawe mai i React mai 'react';
hoʻokomo { BrowserRouter ma ke ʻano he Router, Route, Link, Switch } mai 'react-router-dom';
hoʻokomo './App.css';
e hoʻokomo iā HelloWorld mai './components/HelloWorld';
e hoʻokomo i ka Home mai './components/Home';
hoʻokomo i ka E pili ana mai './components/About';

hana Polokalamu() {
hoʻi (

);
}

hoʻokuʻu aku i ka Polokalamu paʻamau;
".

Me kēia, ua hoʻohui mākou i ka hoʻokele kumu ma waena o nā ʻaoʻao like ʻole i kā mākou noi.

Pani

He kumu aʻo maʻamau kēlā no ka hana ʻana i kahi polokalamu pūnaewele me ka hoʻohana ʻana iā React.js. Ua uhi mākou i ka hoʻonohonoho papahana, ka hana ʻana i nā ʻāpana, ka hoʻokele mokuʻāina, ke kaila, a me ke ala ʻana. Loaʻa iā React.js kahi ʻōnaehana waiwai me nā hale waihona puke a me nā mea hana he nui e hiki ke kōkua iā ʻoe e kūkulu i nā polokalamu pūnaewele paʻakikī.

Aloha nui, a ke lana nei koʻu manaʻo e kōkua kēia kumu aʻo iā ʻoe e hoʻomaka i kāu huakaʻi me React.js!