Veiledning i å lage en webapplikasjon ved hjelp av React.js

React.js er et populært front-end-utviklingsbibliotek som brukes til å bygge interaktive brukergrensesnitt (UI-er). React.js ble utviklet av Facebook og har blitt brukt av mange store selskaper, inkludert Instagram, Airbnb og WhatsApp. Hvis du ønsker å bygge effektive, raske og responsive webapplikasjoner , kan React.js være det rette valget for deg.

Pendahuluan

Før vi begynner, sørg for at du har Node.js og npm (Node Package Manager) installert på datamaskinen din. Node.js og npm er viktige fordi de gir miljøet og verktøyene som trengs for å utvikle webapplikasjoner ved hjelp av React.js.

Trinn 1: Initialisering av React-prosjektet

For å opprette en ny React.js-applikasjon kan vi bruke Create React App, et verktøy for applikasjonsoppretting som minimerer den første konfigurasjonen. Kjør følgende kommando i terminalen eller ledeteksten:

"` bash
npx create-react-app min-app
cd min-app
npm start
“

Denne kommandoen vil opprette en ny katalog kalt `my-app`, laste ned og installere alle nødvendige avhengigheter, og starte utviklingsserveren. Du kan nå åpne en nettleser og få tilgang til `http://localhost:3000` for å se standard React.js-applikasjonen.

Trinn 2: Mappestruktur

La oss ta en titt på mappestrukturen som Create React App har opprettet:

“
min-app/
├── node_modules/
├── offentlig/
│ └── index.html
└── kilde/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
“

– `node_modules/`: Inneholder alle prosjektavhengighetene dine.
– `public/`: Inneholder statiske filer, inkludert `index.html` som er programmets inngangspunkt.
– `src/`: Der du vil tilbringe mesteparten av tiden din. Inneholder React-komponenter, CSS-filer og andre ressurser.

Trinn 3: Slette unødvendige filer

For å starte med blanke ark, la oss slette noen unødvendige filer. Slett `logo.svg` og `App.test.js` i `src/`-mappen. Åpne deretter `App.css` og `index.css`, og slett all CSS-koden i dem for å starte med et rent stilark.

Trinn 4: Lage din første komponent

React.js er komponentbasert. Komponenter er byggesteinene i webapplikasjonen din. La oss modifisere `App.js` for å lage vår første komponent.

Åpne `src/App.js` og erstatt den med følgende kode:

"'jsx
import Reager fra 'reager';
importer './App.css';

funksjon App() {
komme tilbake (

);
}

eksport standard app;
“

Initialiser React-koden i `App.js` ved hjelp av JSX (JavaScript XML), som lar oss skrive HTML-lignende syntaks i JavaScript. Lagre endringene dine og se resultatene i nettleseren din.

Trinn 5: Legge til nye komponenter

La oss nå legge til noen nye komponenter. Opprett en ny mappe kalt `components` i `src`-mappen. Opprett deretter en ny fil, `HelloWorld.js`, i `components`-mappen.

"'jsx
import Reager fra 'reager';

funksjon HalloVerden() {
komme tilbake (

);
}

eksporter standard HelloWorld;
“

Åpne `App.js` og importer `HelloWorld`-komponenten vi nettopp opprettet:

"'jsx
import Reager fra 'reager';
importer './App.css';
importer HelloWorld fra './components/HelloWorld';

funksjon App() {
komme tilbake (

);
}

eksport standard app;
“

Nå gjengir `App.js` `HelloWorld`-komponenten på hovedsiden.

Trinn 6: Legge til tilstandsadministrasjon med useState

React har svært kraftige hooker for å administrere tilstand. La oss legge til litt tilstand i applikasjonen vår. La oss for eksempel legge til en teller som øker hver gang en knapp klikkes.

Åpne `HelloWorld.js` og legg til state og `useState` hook:

"'jsx
importer React, { useState } fra 'react';

funksjon HalloVerden() {
const [antall, settAntall] = brukStatus(0);

konstant økningAntall = () => {
settAntall(antall + 1);
}

komme tilbake (

);
}

eksporter standard HelloWorld;
“

`count`-tilstanden initialiseres med en verdi på 0, og hver gang knappen klikkes, vil `incrementCount`-funksjonen øke denne verdien.

Trinn 7: Legge til styling

For å legge til styling kan vi bruke CSS i `App.css`-filen, eller vi kan bruke et CSS-in-JS-bibliotek som styled-components. La oss holde oss til standard CSS foreløpig.

Åpne `App.css` og legg til litt styling:

"`css
.App {
tekst-align: center;
}

.App-header {
bakgrunnsfarge: 282c34;
min-høyde: 100vh;
display: flex;
flex-retning: kolonne;
align-items: sentrum;
rettferdiggjøre-innhold: senter;
font-size: calc(10px + 2vmin);
farge: hvit;
}

knapp {
polstring: 10px 20px;
margin-topp: 20px;
font-size: 16px;
}
“

Trinn 8: Legge til ruting med React Router

For å legge til navigasjon mellom forskjellige sider i applikasjonen vår, kan vi bruke React Router. Installer React Router ved å kjøre følgende kommando:

"` bash
npm installer react-router-dom
“

Deretter oppretter du to nye komponenter: `Home.js` og `About.js` i `components`-mappen.

`Home.js`:
"'jsx
import Reager fra 'reager';

funksjon Hjem() {
komme tilbake (

);
}

eksporter standard Hjem;
“

`About.js`:
"'jsx
import Reager fra 'reager';

funksjon Om() {
komme tilbake (

);
}

eksporter standard Om;
“

Deretter åpner du `App.js` og setter opp ruting:

"'jsx
import Reager fra 'reager';
import { BrowserRouter som ruter, rute, lenke, svitsj } fra 'react-router-dom';
importer './App.css';
importer HelloWorld fra './components/HelloWorld';
importer Hjem fra './components/Hjem';
importer Om fra './components/About';

funksjon App() {
komme tilbake (

);
}

eksport standard app;
“

Med dette har vi lagt til grunnleggende navigasjon mellom ulike sider i applikasjonen vår.

Lukking

Det er en grunnleggende veiledning for å lage en webapplikasjon med React.js. Vi har dekket prosjektoppsett, komponentoppretting, tilstandsadministrasjon, styling og ruting. React.js har et rikt økosystem med en rekke biblioteker og verktøy som kan hjelpe deg med å bygge mer komplekse webapplikasjoner.

Lykke til, og jeg håper denne veiledningen hjelper deg i gang med React.js!