Tutorial sa Paghimo og Web Application Gamit ang React.js

Ang React.js usa ka sikat nga front-end development library nga gigamit sa paghimo og interactive user interfaces (UIs). Gipalambo sa Facebook, ang React.js gigamit na sa daghang dagkong kompanya, lakip ang Instagram, Airbnb, ug WhatsApp. Kung nangita ka og epektibo, paspas, ug responsive nga mga web application , ang React.js mahimong angay para nimo.

Pendahuluan

Sa dili pa kita magsugod, siguroha nga na-install na nimo ang Node.js ug npm (Node Package Manager) sa imong kompyuter. Importante ang Node.js ug npm tungod kay kini ang naghatag sa palibot ug mga himan nga gikinahanglan sa paghimo og mga web application gamit ang React.js.

Lakang 1: Pag-initialize sa React Project

Para makahimo og bag-ong React.js application, magamit nato ang Create React App, usa ka application creation tool nga makapakunhod sa inisyal nga configuration. Padagana ang mosunod nga command sa imong terminal o command prompt:

"`bash
npx paghimo-og-reaksyon-nga-app akong-app
cd akong-app
pagsugod
".

Kini nga sugo maghimo og bag-ong direktoryo nga ginganlan og `my-app`, mag-download ug mag-install sa tanang gikinahanglan nga mga dependency, ug magsugod sa development server. Mahimo ka na karon magbukas og browser ug maka-access sa `http://localhost:3000` aron makita ang default nga React.js application.

Lakang 2: Istruktura sa Folder

Atong tan-awon ang istruktura sa folder nga gihimo sa Create React App:

".
akong-app/
├── node_modules/
├── publiko/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
".

– `node_modules/`: Naglangkob sa tanan nimong mga dependency sa proyekto.
– `public/`: Naglangkob og mga static nga file, lakip ang `index.html` nga mao ang entry point sa aplikasyon.
– `src/`: Diin nimo igugol ang kadaghanan sa imong oras. Naglangkob sa mga sangkap sa React, mga file sa CSS, ug uban pang mga asset.

Lakang 3: Pagtangtang sa Dili Kinahanglan nga mga File

Para makasugod ta og limpyo, atong papason ang pipila ka dili kinahanglan nga mga file. Papason ang `logo.svg` ug `App.test.js` sulod sa folder nga `src/`. Dayon, ablihi ang `App.css` ug `index.css`, papason ang tanang CSS code sa sulod niini aron makasugod ta og limpyo nga stylesheet.

Lakang 4: Paghimo sa Imong Unang Bahin

Ang React.js kay component-based. Ang mga component mao ang mga building block sa imong web application. Atong usbon ang `App.js` aron mahimo ang atong unang component.

Ablihi ang `src/App.js` ug ilisi kini sa mosunod nga code:

"`jsx"
import React gikan sa 'react';
import './App.css';

function nga App() {
pagbalik (

);
}

i-export ang default nga App;
".

I-initialize ang React code sulod sa `App.js` gamit ang JSX (JavaScript XML), nga nagtugot kanato sa pagsulat og HTML-like syntax sulod sa JavaScript. I-save ang imong mga pagbag-o ug tan-awa ang mga resulta sa imong browser.

Lakang 5: Pagdugang og Bag-ong mga Komponente

Karon, atong idugang ang pipila ka bag-ong mga component. Paghimo og bag-ong folder nga gitawag og `components` sulod sa `src` folder. Dayon paghimo og bag-ong file nga `HelloWorld.js` sa `components` folder.

"`jsx"
import React gikan sa 'react';

function nga HelloWorld() {
pagbalik (

);
}

i-eksport ang default nga HelloWorld;
".

Ablihi ang `App.js` ug i-import ang `HelloWorld` nga component nga atong gihimo:

"`jsx"
import React gikan sa 'react';
import './App.css';
i-import ang HelloWorld gikan sa './components/HelloWorld';

function nga App() {
pagbalik (

);
}

i-export ang default nga App;
".

Karon, ang `App.js` nag-render sa `HelloWorld` nga component sa main page.

Lakang 6: Pagdugang sa State Management gamit ang useState

Ang React adunay gamhanang mga hook para sa pagdumala sa state. Magdugang ta og state sa atong aplikasyon. Pananglitan, magdugang ta og counter nga motaas matag higayon nga i-klik ang usa ka button.

Ablihi ang `HelloWorld.js` ug idugang ang state ug `useState` hook:

"`jsx"
i-import ang React, { useState } gikan sa 'react';

function nga HelloWorld() {
const [ihap, itakdaIhap] = gamitaState(0);

const incrementCount = () => {
setCount(ihap + 1);
}

pagbalik (

);
}

i-eksport ang default nga HelloWorld;
".

Ang estado nga `count` gi-initialize nga adunay kantidad nga 0, ug matag higayon nga i-klik ang buton, ang function nga `incrementCount` mopataas niini nga kantidad.

Lakang 7: Pagdugang og Estilo

Para makadugang og styling, pwede nato gamiton ang CSS sa `App.css` file o pwede pud nato gamiton ang CSS-in-JS library sama sa styled-components. Sa pagkakaron, standard CSS lang una nato gamiton.

Ablihi ang `App.css` ug butangi og gamay nga estilo:

"`css"
.App {
text-align: sentro;
}

.App-header {
kolor sa background: 282c34;
minimum nga gitas-on: 100vh;
pagpakita: pagbalhin;
flex-direction: kolum;
align-item: sentro;
justify-content: sentro;
gidak-on-sa-font: calc(10px + 2vmin);
kolor: puti;
}

butones
padding: 10px 20px;
tumoy sa tumoy: 20px;
font-size: 16px;
}
".

Lakang 8: Pagdugang sa Routing gamit ang React Router

Para makadugang og nabigasyon tali sa lain-laing mga panid sa atong aplikasyon, magamit nato ang React Router. I-install ang React Router pinaagi sa pagpadagan sa mosunod nga sugo:

"`bash
npm install react-router-dom
".

Dayon, paghimo og duha ka bag-ong components: `Home.js` ug `About.js` sa folder nga `components`.

`Balay.js`:
"`jsx"
import React gikan sa 'react';

gimbuhaton Panimalay() {
pagbalik (

);
}

i-export ang default nga Panimalay;
".

`Mahitungod sa.js`:
"`jsx"
import React gikan sa 'react';

gimbuhaton Mahitungod() {
pagbalik (

);
}

i-export ang default Mahitungod;
".

Sunod, ablihi ang `App.js` ug i-set up ang routing:

"`jsx"
import React gikan sa 'react';
import { BrowserRouter isip Router, Route, Link, Switch } gikan sa 'react-router-dom';
import './App.css';
i-import ang HelloWorld gikan sa './components/HelloWorld';
i-import ang Panimalay gikan sa './components/Panimalay';
i-import ang Mahitungod niini gikan sa './components/Mahitungod niini';

function nga App() {
pagbalik (

);
}

i-export ang default nga App;
".

Uban niini, among gidugang ang batakang nabigasyon taliwala sa lainlaing mga panid sa among aplikasyon.

Pagsira

Mao kana ang usa ka batakang tutorial sa paghimo og web application gamit ang React.js. Nahisgotan na nato ang project setup, component creation, state management, styling, ug routing. Ang React.js adunay dato nga ecosystem nga adunay daghang mga library ug mga himan nga makatabang kanimo sa paghimo og mas komplikado nga mga web application.

Maayong swerte, ug nanghinaut ko nga kini nga tutorial makatabang kanimo sa pagsugod sa imong panaw gamit ang React.js!