Vejledning i oprettelse af en webapplikation ved hjælp af React.js

React.js er et populært front-end-udviklingsbibliotek, der bruges til at bygge interaktive brugergrænseflader (UI'er). React.js, der er udviklet af Facebook, er blevet brugt af mange store virksomheder, herunder Instagram, Airbnb og WhatsApp. Hvis du ønsker at bygge effektive, hurtige og responsive webapplikationer, kan React.js være det rigtige valg for dig.

Pendahuluan

Før vi begynder, skal du sørge for at have Node.js og npm (Node Package Manager) installeret på din computer. Node.js og npm er essentielle, fordi de leverer det miljø og de værktøjer, der er nødvendige for at udvikle webapplikationer ved hjælp af React.js.

Trin 1: Initialisering af React-projektet

For at oprette en ny React.js-applikation kan vi bruge Create React App, et værktøj til oprettelse af applikationer, der minimerer den indledende konfiguration. Kør følgende kommando i din terminal eller kommandoprompt:

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

Denne kommando opretter en ny mappe med navnet `my-app`, downloader og installerer alle nødvendige afhængigheder og starter udviklingsserveren. Du kan nu åbne en browser og tilgå `http://localhost:3000` for at se standard React.js-applikationen.

Trin 2: Mappestruktur

Lad os se på den mappestruktur, som Create React App har oprettet:

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

– `node_modules/`: Indeholder alle dine projektafhængigheder.
– `public/`: Indeholder statiske filer, herunder `index.html`, som er programmets indgangspunkt.
– `src/`: Hvor du vil bruge det meste af din tid. Indeholder React-komponenter, CSS-filer og andre aktiver.

Trin 3: Sletning af unødvendige filer

For at starte med en ren tavle, lad os slette nogle unødvendige filer. Slet `logo.svg` og `App.test.js` i `src/`-mappen. Åbn derefter `App.css` og `index.css`, og slet al CSS-koden i dem for at starte med et rent stylesheet.

Trin 4: Oprettelse af din første komponent

React.js er komponentbaseret. Komponenter er byggestenene i din webapplikation. Lad os ændre `App.js` for at oprette vores første komponent.

Åbn `src/App.js` og erstat den med følgende kode:

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

funktion App() {
Vend tilbage (

);
}

eksport standard app;
”`

Initialiser React-koden i `App.js` ved hjælp af JSX (JavaScript XML), som giver os mulighed for at skrive HTML-lignende syntaks i JavaScript. Gem dine ændringer, og se resultaterne i din browser.

Trin 5: Tilføjelse af nye komponenter

Lad os nu tilføje nogle nye komponenter. Opret en ny mappe kaldet `components` i `src`-mappen. Opret derefter en ny fil `HelloWorld.js` i `components`-mappen.

"'jsx
import Reager fra 'reager';

funktion HejVerden() {
Vend tilbage (

);
}

eksporter standard HelloWorld;
”`

Åbn `App.js` og importer `HelloWorld`-komponenten, som vi lige har oprettet:

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

funktion App() {
Vend tilbage (

);
}

eksport standard app;
”`

Nu gengiver `App.js` `HelloWorld`-komponenten på hovedsiden.

Trin 6: Tilføjelse af tilstandsstyring med useState

React har meget kraftfulde hooks til at styre tilstand. Lad os tilføje noget tilstand til vores applikation. Lad os for eksempel tilføje en tæller, der øges, hver gang der klikkes på en knap.

Åbn `HelloWorld.js` og tilføj state og `useState` hook:

"'jsx
importér React, { useState } fra 'react';

funktion HejVerden() {
const [count, setCount] = useState(0);

const incrementCount = () => {
sætTal(tæller + 1);
}

Vend tilbage (

);
}

eksporter standard HelloWorld;
”`

Tilstanden `count` initialiseres med en værdi på 0, og hver gang der klikkes på knappen, vil `incrementCount`-funktionen øge denne værdi.

Trin 7: Tilføjelse af styling

For at tilføje styling kan vi bruge CSS i `App.css`-filen, eller vi kan bruge et CSS-in-JS-bibliotek som f.eks. styled-components. Lad os holde os til standard CSS for nu.

Åbn `App.css` og tilføj noget styling:

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

.App-header {
baggrundsfarve: 282c34;
min-højde: 100vh;
display: flex;
flex-retning: kolonne;
align-items: center;
retfærdiggøre-indhold: center;
font-size: calc(10px + 2vmin);
farve: hvid;
}

knap {
padding: 10px 20px;
margin-top: 20px;
skriftstørrelse: 16px;
}
”`

Trin 8: Tilføjelse af routing med React Router

For at tilføje navigation mellem forskellige sider i vores applikation kan vi bruge React Router. Installer React Router ved at køre følgende kommando:

"` bash
npm installer react-router-dom
”`

Opret derefter to nye komponenter: `Home.js` og `About.js` i mappen `components`.

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

function Home() {
Vend tilbage (

);
}

eksport standard Hjem;
”`

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

funktion Om() {
Vend tilbage (

);
}

eksport standard Om;
”`

Åbn derefter `App.js` og opsæt routing:

"'jsx
import Reager fra 'reager';
import { BrowserRouter som Router, Rute, Link, Switch } fra 'react-router-dom';
importér './App.css';
importer HelloWorld fra './components/HelloWorld';
importer Home fra './components/Home';
importer Om fra './components/About';

funktion App() {
Vend tilbage (

);
}

eksport standard app;
”`

Med dette har vi tilføjet grundlæggende navigation mellem forskellige sider i vores applikation.

Lukker

Det er en grundlæggende vejledning til oprettelse af en webapplikation ved hjælp af React.js. Vi har dækket projektopsætning, komponentoprettelse, tilstandsstyring, styling og routing. React.js har et rigt økosystem med adskillige biblioteker og værktøjer, der kan hjælpe dig med at bygge mere komplekse webapplikationer.

Held og lykke, og jeg håber, at denne vejledning hjælper dig med at komme i gang på din rejse med React.js!