React.js erabiliz web aplikazio bat sortzeari buruzko tutoriala

React.js erabiltzaile-interfaze (UI) interaktiboak eraikitzeko erabiltzen den frontend garapen liburutegi ezaguna da. Facebookek garatua, React.js enpresa garrantzitsu askok erabili dute, besteak beste, Instagram, Airbnb eta WhatsApp. Web aplikazio eraginkorrak, azkarrak eta erantzunkorrak eraiki nahi badituzu, React.js izan daiteke aukera egokia zuretzat.

Pendahuluan

Hasi aurretik, ziurtatu Node.js eta npm (Node Package Manager) instalatuta dituzula zure ordenagailuan. Node.js eta npm ezinbestekoak dira, React.js erabiliz web aplikazioak garatzeko beharrezkoak diren ingurunea eta tresnak eskaintzen baitituzte.

1. urratsa: React proiektua hasieratzea

React.js aplikazio berri bat sortzeko, Create React App erabil dezakegu, hasierako konfigurazioa minimizatzen duen aplikazioak sortzeko tresna bat. Exekutatu komando hau zure terminalean edo komando-gonbitan:

"`bash"
npx create-react-app nire-aplikazioa
cd nire aplikazioa
npm hasiera
"`

Komando honek `my-app` izeneko direktorio berri bat sortuko du, beharrezko menpekotasun guztiak deskargatu eta instalatuko ditu, eta garapen zerbitzaria abiaraziko du. Orain arakatzaile bat ireki eta `http://localhost:3000` helbidera sar zaitezke React.js aplikazio lehenetsia ikusteko.

2. urratsa: Karpeta-egitura

Ikus dezagun Create React App-ek sortu duen karpeta-egitura:

"`
nire-aplikazioa/
├── nodo_moduluak/
publikoa/
│ └── index.html
└── src/
├── Aplikazioa.css
├── App.js
├── Aplikazioa.test.js
├── index.css
├── index.js
└── logotipoa.svg
"`

– `node_modules/`: Zure proiektuaren menpekotasun guztiak ditu.
– `public/`: Fitxategi estatikoak ditu, aplikazioaren sarrera-puntua den `index.html` barne.
– `src/`: Denbora gehiena non pasatuko duzun. React osagaiak, CSS fitxategiak eta bestelako baliabideak ditu.

3. urratsa: Beharrezkoak ez diren fitxategiak ezabatzea

Estilo-orri garbi batekin hasteko, ezaba ditzagun beharrezkoak ez diren fitxategi batzuk. Ezabatu `logo.svg` eta `App.test.js` `src/` karpetan. Ondoren, ireki `App.css` eta `index.css`, barruko CSS kode guztia ezabatuz estilo-orri garbi batekin hasteko.

4. urratsa: Zure lehen osagaia sortzea

React.js osagaietan oinarrituta dago. Osagaiak zure web aplikazioaren eraikuntza-blokeak dira. Alda dezagun `App.js` gure lehen osagaia sortzeko.

Ireki `src/App.js` eta ordezkatu hurrengo kodearekin:

“`jsx
inportatu React 'erreakzionatu'-tik;
inportatu './Aplikazioa.css';

funtzioa Aplikazioa() {
itzuli (

);
}

esportatu aplikazio lehenetsia;
"`

Hasieratu `App.js` barruan dagoen React kodea JSX (JavaScript XML) erabiliz, eta horrek HTML antzeko sintaxia JavaScript-en barruan idazteko aukera ematen digu. Gorde aldaketak eta ikusi emaitzak zure arakatzailean.

5. urratsa: Osagai berriak gehitzea

Orain osagai berri batzuk gehi ditzagun. Sortu `components` izeneko karpeta berri bat `src` karpetaren barruan. Ondoren, sortu `HelloWorld.js` fitxategi berri bat `components` karpetan.

“`jsx
inportatu React 'erreakzionatu'-tik;

funtzioa KaixoMundua() {
itzuli (

);
}

esportatu lehenetsitako HelloWorld;
"`

Ireki `App.js` eta inportatu sortu berri dugun `HelloWorld` osagaia:

“`jsx
inportatu React 'erreakzionatu'-tik;
inportatu './Aplikazioa.css';
inportatu HelloWorld './components/HelloWorld'-etik;

funtzioa Aplikazioa() {
itzuli (

);
}

esportatu aplikazio lehenetsia;
"`

Orain, `App.js`-k `HelloWorld` osagaia bistaratzen du orrialde nagusian.

6. urratsa: Egoera Kudeaketa gehitzea useState-rekin

React-ek egoera kudeatzeko kako oso indartsuak ditu. Gehitu diezaiogun egoera batzuk gure aplikazioari. Adibidez, gehitu diezaiogun kontagailu bat, botoi bat klikatzen den bakoitzean handitzen dena.

Ireki `HelloWorld.js` eta gehitu state eta `useState` hook-a:

“`jsx
inportatu React, { useState } 'react'-etik;

funtzioa KaixoMundua() {
const [kopurua, setKopurua] = erabiliEgoera(0);

const gehikuntzaKopurua = () => {
ezarriKopurua(kopurua + 1);
}

itzuli (

);
}

esportatu lehenetsitako HelloWorld;
"`

`count` egoera 0 balioarekin hasten da, eta botoia sakatzen den bakoitzean, `incrementCount` funtzioak balio hori handituko du.

7. urratsa: Estiloa gehitzea

Estiloa gehitzeko, CSS erabil dezakegu `App.css` fitxategian edo CSS-in-JS liburutegi bat erabil dezakegu, styled-components adibidez. Oraingoz CSS estandarrarekin jarraituko dugu.

Ireki `App.css` eta gehitu estilo batzuk:

“`css
.Aplikazioa {
testu-lerrokatzea: erdigunea;
}

.Aplikazio-burua {
atzeko planoaren kolorea: 282c34;
gutxieneko altuera: 100vh;
bistaratu: flexioa;
flex-direction: zutabe;
lerrokatu-elementuak: zentroa;
justifikatu-edukia: erdigunea;
letra-tipoaren tamaina: calc(10px + 2vmin);
kolorea: zuria;
}

botoia {
betegarria: 10px 20px;
margin-top: 20px;
font-size: 16px;
}
"`

8. urratsa: Bideratzea gehitzea React Router-ekin

Gure aplikazioan orrialde ezberdinen arteko nabigazioa gehitzeko, React Router erabil dezakegu. Instalatu React Router komando hau exekutatuz:

"`bash"
npm instalatu react-router-dom
"`

Ondoren, sortu bi osagai berri: `Home.js` eta `About.js` `components` karpetan.

`Home.js`:
“`jsx
inportatu React 'erreakzionatu'-tik;

funtzioa Hasiera() {
itzuli (

);
}

esportatu lehenetsitako Hasiera;
"`

`About.js`:
“`jsx
inportatu React 'erreakzionatu'-tik;

funtzioa Honi buruz() {
itzuli (

);
}

esportazio lehenetsia Honi buruz;
"`

Ondoren, ireki `App.js` eta konfiguratu bideratzea:

“`jsx
inportatu React 'erreakzionatu'-tik;
inportatu { BrowserRouter bideratzaile, ibilbide, esteka, etengailu gisa } 'react-router-dom'-etik;
inportatu './Aplikazioa.css';
inportatu HelloWorld './components/HelloWorld'-etik;
inportatu Hasiera './components/Home'-tik;
inportatu './components/About'-etik;

funtzioa Aplikazioa() {
itzuli (

);
}

esportatu aplikazio lehenetsia;
"`

Honekin, gure aplikazioan orrialde desberdinen arteko oinarrizko nabigazioa gehitu dugu.

Itxiera

React.js erabiliz web aplikazio bat sortzeko oinarrizko tutorial bat da hau. Proiektuaren konfigurazioa, osagaien sorrera, egoera kudeaketa, estiloa eta bideratzea landu ditugu. React.js-k ekosistema aberatsa du, liburutegi eta tresna ugari dituena, web aplikazio konplexuagoak eraikitzen lagun zaitzaketenak.

Zorte on, eta espero dut tutorial honek React.js-rekin zure bidaian hasteko lagungarria izatea!