A'oa'oga i le Fausiaina o se Upega Tafa'ilagi e Fa'aaoga ai le React.js

O le React.js o se faletusi lauiloa mo atina'e i luma e fa'aaogaina e fausia ai ni fa'aoga feso'ota'iga (UIs). Na atia'e e Facebook, o le React.js ua fa'aaogaina e le tele o kamupani tetele, e aofia ai le Instagram, Airbnb, ma le WhatsApp. Afai o lo'o e sailia se auala e fausia ai ni talosaga uepi aoga, vave, ma tali vave, atonu o le React.js o le filifiliga sa'o lea mo oe.

Pendahuluan

A'o le'i amataina, ia mautinoa ua e fa'apipi'i le Node.js ma le npm (Node Package Manager) i lau komepiuta. E taua tele le Node.js ma le npm aua e maua ai le siosiomaga ma meafaigaluega e mana'omia e atiina ae ai polokalame uepi e fa'aaoga ai le React.js.

Laasaga 1: Fa'auluina o le Galuega Fa'atino a le React

Mo le fatuina o se talosaga fou a le React.js, e mafai ona tatou faʻaaogaina le Create React App, o se meafaigaluega e fatuina ai talosaga e faʻaitiitia ai le faʻatulagaina muamua. Faʻatino le poloaiga lenei i lau terminal poʻo le command prompt:

“`tu'i
npx fatuina-polokalame-tali-atu la'u-polokalame
cd la'u-app
npm amata
""

O lenei poloaiga o le a fausia ai se faila fou e igoa ia `my-app`, sii maia ma fa'apipi'i uma fa'alagolago talafeagai, ma amata le 'au'aunaga atina'e. Ua mafai nei ona e tatalaina se browser ma maua le `http://localhost:3000` e va'ai ai i le talosaga masani a le React.js.

Laasaga 2: Fausaga o le Faila

Se'i o tatou tilotilo i le fausaga o le faila na fatuina e le Create React App:

""
la'u-polokalame/
├── node_modules/
├── lautele/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
""

– `node_modules/`: O lo'o i ai au mea uma e fa'alagolago i ai i lau galuega faatino.
– `public/`: O lo'o i ai faila tumau, e aofia ai le `index.html` o le nofoaga e ulufale ai le polokalama.
– `src/`: O le mea lea o le a e fa'aaluina ai le tele o lou taimi. O lo'o i ai vaega o le React, faila CSS, ma isi aseta.

Laasaga 3: Tapeina o Faila e Le Manaomia

Mo se amataga lelei, se'i o tatou tapeina nisi o faila e le mana'omia. Tape le `logo.svg` ma le `App.test.js` i totonu o le faila `src/`. Ona, tatala lea o le `App.css` ma le `index.css`, tape uma le CSS code o lo'o i totonu e amata ai i se stylesheet mama.

Laasaga 4: Fausiaina o Lau Vaega Muamua

O le React.js e faʻavae i luga o vaega. O vaega o poloka faufale ia o lau talosaga uepi. Seʻi o tatou suia le `App.js` e fatu ai la tatou vaega muamua.

Tatala le `src/App.js` ma sui i le code lea:

"`jsx
fa'aulufalega React mai 'react';
fa'aulufale mai './App.css';

galuega faatino Polokalama() {
toe fo'i (

);
}

auina atu i fafo le Polokalama masani;
""

Fa'aulufale le code React i totonu o le `App.js` e fa'aaoga ai le JSX (JavaScript XML), lea e mafai ai ona tatou tusia le syntax e pei o le HTML i totonu o le JavaScript. Sefe au suiga ma va'ai i taunuuga i lau browser.

Laasaga 5: Fa'aopoopoina o Vaega Fou

Ia, se'i o tatou fa'aopoopoina ni vaega fou. Fausia se faila fou e ta'ua o le `components` i totonu o le faila `src`. Ona fatuina lea o se faila fou `HelloWorld.js` i totonu o le faila `components`.

"`jsx
fa'aulufalega React mai 'react';

galuega tauave o le HelloWorld() {
toe fo'i (

);
}

auina atu i fafo le HelloWorld masani;
""

Tatala le `App.js` ma aumai le vaega `HelloWorld` na tatou faatoa fatuina:

"`jsx
fa'aulufalega React mai 'react';
fa'aulufale mai './App.css';
aumai le HelloWorld mai le './components/HelloWorld';

galuega faatino Polokalama() {
toe fo'i (

);
}

auina atu i fafo le Polokalama masani;
""

O lea la, ua fa'aalia e le `App.js` le vaega `HelloWorld` i luga o le itulau autū.

Laasaga 6: Fa'aopoopoina o le Pulega o le Setete ma le useState

E matuā malolosi lava fa'aoga a le React mo le puleaina o le tulaga. Se'i o tatou fa'aopoopoina nisi o tulaga i la tatou talosaga. Mo se fa'ata'ita'iga, se'i o tatou fa'aopoopoina se fa'atusatusaga e fa'ateleina i taimi uma e kiliki ai se fa'amau.

Tatala le `HelloWorld.js` ma fa'aopoopo le state ma le `useState` hook:

"`jsx
fa'aulufale mai le Tali, { useState } mai le 'tali';

galuega tauave o le HelloWorld() {
const [faitau, setiFaitau] = fa'aaogaSetete(0);

const fa'aopoopogaCount = () => {
setiCount(faitau + 1);
}

toe fo'i (

);
}

auina atu i fafo le HelloWorld masani;
""

O le tulaga `count` e amataina i le tau o le 0, ma o taimi uma e kiliki ai le faamau, o le a faateleina ai e le galuega faatino `incrementCount` lea tau.

Laasaga 7: Fa'aopoopoina o le Styling

Mo le fa'aopoopoina o le mamanu, e mafai ona tatou fa'aogaina le CSS i le faila `App.css` pe mafai fo'i ona tatou fa'aogaina se faletusi CSS-in-JS e pei o le styled-components. Se'i o tatou fa'aogaina le CSS masani mo le taimi nei.

Tatala le `App.css` ma fa'aopoopo sina teuteuga:

"`css"
.Polokalama {
tusiga-fetaui: nofoaga tutotonu;
}

.App-header {
lanu-tua: 282c34;
maualuga maualalo: 100vh;
faʻaali: fulu;
fa'asagaga-fa'atonu: koluma;
fetaui lelei-mea: nofoaga tutotonu;
tauamiotonu-anotusi: ogatotonu;
tele-mataupu: calc(10px + 2vmin);
lanu: paʻepaʻe;
}

faamau
paʻu: 10px 20px;
pito i luga: 20px;
mata'itusi-tele: 16px;
}
""

Laasaga 8: Fa'aopoopoina o le Routing ma le React Router

Mo le fa'aopoopoina o le fa'atautaia i le va o itulau eseese i la tatou polokalama, e mafai ona tatou fa'aogaina le React Router. Fa'apipi'i le React Router e ala i le fa'atinoina o le poloaiga lenei:

“`tu'i
npm faʻapipiʻi react-router-dom
""

Ona, fatu lea o ni vaega fou se lua: `Home.js` ma le `About.js` i le faila `components`.

`Aiga.js`:
"`jsx
fa'aulufalega React mai 'react';

galuega faatino Itulau Autū() {
toe fo'i (

);
}

auina atu i fafo le tulaga muamua o le Home;
""

`E uiga i le.js`:
"`jsx
fa'aulufalega React mai 'react';

galuega faatino E uiga i() {
toe fo'i (

);
}

auina atu i fafo le faaletonu E uiga i;
""

Sosoo ai, tatala le `App.js` ma fa'atulaga le routing:

"`jsx
fa'aulufalega React mai 'react';
fa'aulufale mai { BrowserRouter e pei o le Router, Route, Link, Switch } mai le 'react-router-dom';
fa'aulufale mai './App.css';
aumai le HelloWorld mai le './components/HelloWorld';
aumai le Aiga mai le './components/Aiga';
fa'aulufale mai le E uiga i ai mai le './components/E uiga i ai';

galuega faatino Polokalama() {
toe fo'i (

);
}

auina atu i fafo le Polokalama masani;
""

Faatasi ai ma lenei mea, ua matou faaopoopoina ai le auala faigofie e faatautaia ai itulau eseese i la matou talosaga.

Fa'ato'a

O se a'oa'oga fa'avae lea mo le fatuina o se talosaga uepi e fa'aaoga ai le React.js. Ua matou talanoaina le fa'atulagaina o le poloketi, le fatuina o vaega, le puleaina o tulaga, le fa'atulagaina, ma le fa'aogaina o ala. O le React.js e iai se siosiomaga mauoa ma le tele o faletusi ma meafaigaluega e mafai ona fesoasoani ia te oe e fausia ai ni talosaga uepi e sili atu ona faigata.

Manuia tele, ma ou te faʻamoemoe o lenei aʻoaʻoga e fesoasoani ia te oe e amata ai lau malaga ma React.js!