Oideachadh air cruthachadh aplacaid lìn a’ cleachdadh React.js

’S e leabharlann leasachaidh aghaidh-deireadh mòr-chòrdte a th’ ann an React.js a thathas a’ cleachdadh gus eadar-aghaidhean cleachdaiche eadar-ghnìomhach (UIn) a thogail. Air a leasachadh le Facebook, tha React.js air a bhith air a chleachdadh le mòran chompanaidhean mòra, nam measg Instagram, Airbnb, agus WhatsApp. Ma tha thu airson aplacaidean lìn èifeachdach, luath agus freagairteach a thogail, is dòcha gur e React.js an roghainn cheart dhut.

Pendahuuan

Mus tòisich sinn, dèan cinnteach gu bheil Node.js agus npm (Node Package Manager) air an stàladh air a’ choimpiutair agad. Tha Node.js agus npm riatanach oir tha iad a’ toirt seachad an àrainneachd agus na h-innealan a dh’ fheumar gus aplacaidean lìn a leasachadh a’ cleachdadh React.js.

Ceum 1: A’ tòiseachadh air pròiseact React

Gus aplacaid React.js ùr a chruthachadh, is urrainn dhuinn Create React App a chleachdadh, inneal cruthachaidh aplacaidean a lughdaicheas an rèiteachadh tùsail. Ruith an àithne a leanas anns an teirminéal no san àithne-stiùiridh agad:

“`bash
npx cruthaich-ath-fhreagairt-app mo-app
cd mo-aplacaid
tòiseachadh npm
“`

Cruthaichidh an àithne seo pasgan ùr leis an ainm `my-app`, luchdaichidh e sìos is stàlaichidh e na h-eisimeileachdan riatanach uile, agus tòisichidh e am frithealaiche leasachaidh. Faodaidh tu a-nis brabhsair fhosgladh agus faighinn gu `http://localhost:3000` gus an aplacaid React.js bunaiteach fhaicinn.

Ceum 2: Structar nam Pasganan

Seallaidh sinn air structar nam pasganan a chruthaich Create React App:

“`
an aplacaid agam/
├── modalan_nòd/
├── poblach/
│ └── clàr-amais.html
└── src/
├── Aplacaid.css
├── App.js
├── App.test.js
├── clàr-amais.css
├── clàr-amais.js
suaicheantas.svg
“`

– `node_modules/`: Anns a bheil a h-uile eisimeileachd pròiseict agad.
– `public/`: Anns a bheil faidhlichean statach, nam measg `index.html` a tha na phuing inntrigidh don aplacaid.
– `src/`: Far am bi thu a’ caitheamh a’ mhòr-chuid den ùine agad. Anns a bheil co-phàirtean React, faidhlichean CSS, agus so-mhaoin eile.

Ceum 3: A’ cuir às do fhaidhlichean neo-riatanach

Gus tòiseachadh le duilleag ghlan, sguabaidh sinn às cuid de na faidhlichean neo-riatanach. Sguab às `logo.svg` agus `App.test.js` taobh a-staigh am pasgan `src/`. An uairsin, fosgail `App.css` agus `index.css`, a’ sguabadh às a h-uile còd CSS annta gus tòiseachadh le duilleag-stoidhle ghlan.

Ceum 4: A’ cruthachadh a’ chiad phàirt agad

Tha React.js stèidhichte air co-phàirtean. ’S iad na co-phàirtean na blocaichean togail airson an aplacaid lìn agad. Atharraichidh sinn ‘App.js’ gus a’ chiad cho-phàirt againn a chruthachadh.

Fosgail `src/App.js` agus cuir a’ chòd a leanas na àite:

“`jsx
thoir a-steach React bho 'react';
thoir a-steach './App.css';

gnìomh Aplacaid() {
tilleadh (

);
}

às-phortaich an aplacaid bunaiteach;
“`

Tòisich còd React taobh a-staigh `App.js` a’ cleachdadh JSX (JavaScript XML), a leigeas leinn co-chòrdadh coltach ri HTML a sgrìobhadh taobh a-staigh JavaScript. Sàbhail na h-atharrachaidhean agad agus faic na toraidhean sa bhrobhsair agad.

Ceum 5: A’ cur pàirtean ùra ris

A-nis, cuiridh sinn beagan phàirtean ùra ris. Cruthaich pasgan ùr leis an ainm `components` am broinn am pasgan `src`. An uairsin cruthaich faidhle ùr `HelloWorld.js` sa phasgan `components`.

“`jsx
thoir a-steach React bho 'react';

gnìomh HelloSaoghail() {
tilleadh (

);
}

às-phortaich an HelloWorld bunaiteach;
“`

Fosgail `App.js` agus thoir a-steach am pàirt `HelloWorld` a chruthaich sinn an-dràsta:

“`jsx
thoir a-steach React bho 'react';
thoir a-steach './App.css';
thoir a-steach HelloWorld bho './components/HelloWorld';

gnìomh Aplacaid() {
tilleadh (

);
}

às-phortaich an aplacaid bunaiteach;
“`

A-nis, bidh `App.js` a’ lìbhrigeadh a’ cho-phàirt `HelloWorld` air a’ phrìomh dhuilleag.

Ceum 6: A’ cur Riaghladh Stàite ris le useState

Tha dubhain glè chumhachdach aig React airson staid a riaghladh. Cuiridh sinn beagan staid ris an aplacaid againn. Mar eisimpleir, cuiridh sinn cunntair ris a bhios ag àrdachadh gach uair a bhriogar air putan.

Fosgail `HelloWorld.js` agus cuir state agus dubhan `useState` ris:

“`jsx
cuir a-steach React, { useState } bho 'react';

gnìomh HelloSaoghail() {
const [cunntadh, suidhichCunntadh] = cleachdaidhStàite(0);

const àrdachadhCount = () => {
suidhichCunnt(cunnt + 1);
}

tilleadh (

);
}

às-phortaich an HelloWorld bunaiteach;
“`

Tha an staid `count` air a thòiseachadh le luach 0, agus a h-uile uair a bhriogar air a’ phutan, àrdaichidh an gnìomh `incrementCount` an luach seo.

Ceum 7: A’ cur stoidhle ris

Gus stoidhleachadh a chur ris, is urrainn dhuinn CSS a chleachdadh san fhaidhle `App.css` no is urrainn dhuinn leabharlann CSS-in-JS a chleachdadh mar styled-components. Cumaidh sinn ris an CSS àbhaisteach an-dràsta.

Fosgail `App.css` agus cuir beagan stoidhle ris:

“`css
.App {
teacs-align: ionad;
}

Ceann-sgrìobhaidh .App {
dath-cùil: 282c34;
àirde as ìsle: 100vh;
taisbeanadh: sùbailte;
sùbailte-stiùiridh: colbh;
co-thaobhadh-nithean: ionad;
fìreanachadh-susbaint: centre;
meud-clò: calc(10px + 2vmin);
dath: geal;
}

putan {
padadh: 10px 20px;
bàrr na duilleige: 20px;
cruth-clò: 16px;
}
“`

Ceum 8: A’ cur slighe-obrach ris le React Router

Gus seòladh a chur ris eadar diofar dhuilleagan san aplacaid againn, is urrainn dhuinn React Router a chleachdadh. Stàlaich React Router le bhith a’ ruith an àithne a leanas:

“`bash
npm stàlaich react-router-dom
“`

An uair sin, cruthaich dà cho-phàirt ùr: `Home.js` agus `About.js` anns a’ phasgan `components`.

`Home.js`:
“`jsx
thoir a-steach React bho 'react';

gnìomh Dachaigh() {
tilleadh (

);
}

às-phortaich Dachaigh bunaiteach;
“`

`Mu dheidhinn.js`:
“`jsx
thoir a-steach React bho 'react';

gnìomh Mu dheidhinn () {
tilleadh (

);
}

às-phortaich bunaiteach Mu dheidhinn;
“`

An ath rud, fosgail `App.js` agus cuir air dòigh an t-slighe:

“`jsx
thoir a-steach React bho 'react';
import { BrowserRouter mar Router, Slighe, Ceangal, Suidse } bho 'react-router-dom';
thoir a-steach './App.css';
thoir a-steach HelloWorld bho './components/HelloWorld';
thoir a-steach Dachaigh bho './components/Home';
thoir a-steach Mu Ar Deidhinn bho './components/About';

gnìomh Aplacaid() {
tilleadh (

);
}

às-phortaich an aplacaid bunaiteach;
“`

Le seo, tha sinn air seòladh bunaiteach a chur ris eadar diofar dhuilleagan san aplacaid againn.

Penutup

Seo oideachadh bunaiteach airson tagradh lìn a chruthachadh le React.js. Tha sinn air dèiligeadh ri stèidheachadh phròiseactan, cruthachadh phàirtean, riaghladh staidean, stoidhleachadh, agus slighean-stiùiridh. Tha eag-shiostam beairteach aig React.js le iomadh leabharlann agus inneal a chuidicheas tu gus tagraidhean lìn nas iom-fhillte a thogail.

Gur math a thèid leat, agus tha mi an dòchas gun cuidich an oideachadh seo thu gus tòiseachadh air do thuras le React.js!