Opastus web-sovelluksen luomiseen React.js:n avulla

React.js on suosittu käyttöliittymän kehityskirjasto, jota käytetään interaktiivisten käyttöliittymien (UI) rakentamiseen. Facebookin kehittämää React.js:ää ovat käyttäneet monet suuret yritykset, kuten Instagram, Airbnb ja WhatsApp. Jos etsit tehokkaita, nopeita ja responsiivisia verkkosovelluksia, React.js saattaa olla oikea valinta sinulle.

Johdanto

Ennen kuin aloitamme, varmista, että tietokoneellesi on asennettu Node.js ja npm (Node Package Manager). Node.js ja npm ovat välttämättömiä, koska ne tarjoavat ympäristön ja työkalut, joita tarvitaan web-sovellusten kehittämiseen React.js:n avulla.

Vaihe 1: React-projektin alustaminen

Uuden React.js-sovelluksen luomiseen voimme käyttää Create React App -sovellusta, joka on sovelluksen luontityökalu, joka minimoi alkukonfiguroinnin tarpeen. Suorita seuraava komento terminaalissa tai komentokehotteessa:

"'bash
NPX Luo-reagoi-sovellus Oma sovellus
CD-sovellukseni
npm alku
”`

Tämä komento luo uuden hakemiston nimeltä `my-app`, lataa ja asentaa kaikki tarvittavat riippuvuudet ja käynnistää kehityspalvelimen. Voit nyt avata selaimen ja siirtyä osoitteeseen `http://localhost:3000` nähdäksesi oletusarvoisen React.js-sovelluksen.

Vaihe 2: Kansiorakenne

Katsotaanpa Create React App -funktion luomaa kansiorakennetta:

”`
oma-sovellus/
├── solmumoduulit/
├── julkinen/
│ └── index.html
└── lähde/
├── Sovellus.css
├── Sovellus.js
├── Sovellustesti.js
├── index.css
├── index.js
└── logo.svg
”`

– `node_modules/`: Sisältää kaikki projektisi riippuvuudet.
– `public/`: Sisältää staattisia tiedostoja, mukaan lukien `index.html`-tiedoston, joka on sovelluksen aloituspiste.
– `src/`: Missä vietät suurimman osan ajastasi. Sisältää React-komponentteja, CSS-tiedostoja ja muita resursseja.

Vaihe 3: Tarpeettomien tiedostojen poistaminen

Aloitetaan puhtaalta pöydältä poistamalla joitakin tarpeettomia tiedostoja. Poista `logo.svg` ja `App.test.js` `src/`-kansiosta. Avaa sitten `App.css` ja `index.css` ja poista kaikki niiden sisältämä CSS-koodi. Aloitetaan puhtaalla tyylitiedostolla.

Vaihe 4: Ensimmäisen komponentin luominen

React.js on komponenttipohjainen. Komponentit ovat web-sovelluksesi rakennuspalikoita. Muokataan `App.js`-tiedostoa luodaksemme ensimmäisen komponenttimme.

Avaa `src/App.js` ja korvaa se seuraavalla koodilla:

"`jsx
tuonti React from 'react';
tuo './App.css';

function App() {
palata (

);
}

Vie oletussovellus;
”`

Alusta React-koodi `App.js`-tiedostossa JSX:llä (JavaScript XML), jonka avulla voimme kirjoittaa HTML-tyyppistä syntaksia JavaScriptin sisällä. Tallenna muutoksesi ja tarkastele tuloksia selaimessasi.

Vaihe 5: Uusien komponenttien lisääminen

Lisätään nyt uusia komponentteja. Luo uusi kansio nimeltä `components` `src`-kansion sisälle. Luo sitten uusi tiedosto `HelloWorld.js` `components`-kansioon.

"`jsx
tuonti React from 'react';

funktio HeiMaailma() {
palata (

);
}

vienti oletusarvo HelloWorld;
”`

Avaa `App.js` ja tuo juuri luomamme `HelloWorld`-komponentti:

"`jsx
tuonti React from 'react';
tuo './App.css';
tuo HelloWorld tiedostosta './components/HelloWorld';

function App() {
palata (

);
}

Vie oletussovellus;
”`

Nyt `App.js` renderöi `HelloWorld`-komponentin pääsivulle.

Vaihe 6: Tilanhallinnan lisääminen useState-komennolla

Reactissa on erittäin tehokkaita hookkeja tilan hallintaan. Lisätään sovellukseemme tilaa. Lisätään esimerkiksi laskuri, joka kasvaa joka kerta, kun painiketta klikataan.

Avaa `HelloWorld.js` ja lisää siihen state- ja `useState`-koukut:

"`jsx
tuo React, { useState } kentästä 'react';

funktio HeiMaailma() {
const [count, setCount] = useState(0);

vakio lisäysmäärä = () => {
setCount(määrä + 1);
}

palata (

);
}

vienti oletusarvo HelloWorld;
”`

`Count`-tila alustetaan arvolla 0, ja joka kerta, kun painiketta napsautetaan, `incrementCount`-funktio kasvattaa tätä arvoa.

Vaihe 7: Tyylien lisääminen

Tyylien lisäämiseksi voimme käyttää CSS:ää `App.css`-tiedostossa tai voimme käyttää CSS-in-JS-kirjastoa, kuten styled-components. Pysytään nyt tavallisessa CSS:ssä.

Avaa `App.css` ja lisää siihen tyyliä:

"` css
.App {
tekstin tasaus: keskellä;
}

.Sovellusotsikko {
taustaväri: 282c34;
min-korkeus: 100vh;
näyttö: flex;
taipumissuunta: sarake;
kohdista kohteet: keskellä;
perustele-sisältö: keskus;
font-size: calc(10px + 2vmin);
väri valkoinen;
}

painike {
pehmuste: 10px 20px;
margin-top: 20px;
fonttikoko: 16px;
}
”`

Vaihe 8: Reitityksen lisääminen React Routerilla

Sovelluksemme eri sivujen välisen navigoinnin lisäämiseksi voimme käyttää React Routeria. Asenna React Router suorittamalla seuraava komento:

"'bash
npm install react-router-dom
”`

Luo sitten kaksi uutta komponenttia: `Home.js` ja `About.js` `components`-kansioon.

`Home.js`:
"`jsx
tuonti React from 'react';

function Home() {
palata (

);
}

vienti oletuksena Etusivu;
”`

`Tietoja.js`:
"`jsx
tuonti React from 'react';

function Tietoja() {
palata (

);
}

vienti oletus Tietoja;
”`

Avaa seuraavaksi `App.js` ja määritä reititys:

"`jsx
tuonti React from 'react';
tuo { BrowserRouter reitittimenä, reittinä, linkkinä, kytkimenä } 'react-router-dom'-kansiosta;
tuo './App.css';
tuo HelloWorld tiedostosta './components/HelloWorld';
tuo Home from './components/Home';
tuonti Tietoja kohteesta './components/About';

function App() {
palata (

);
}

Vie oletussovellus;
”`

Tämän myötä olemme lisänneet perusnavigoinnin eri sivujen välillä sovellukseemme.

Sulkeminen

Tämä on perusopas web-sovelluksen luomiseen React.js:n avulla. Olemme käsitelleet projektin määrityksen, komponenttien luomisen, tilanhallinnan, tyylin ja reitityksen. React.js:llä on rikas ekosysteemi, jossa on lukuisia kirjastoja ja työkaluja, jotka voivat auttaa sinua rakentamaan monimutkaisempia web-sovelluksia.

Onnea matkaan, ja toivottavasti tämä tutoriaali auttaa sinua alkuun React.js:n kanssa!