Handledning om att skapa en webbapplikation med React.js

React.js är ett populärt bibliotek för front-end-utveckling som används för att bygga interaktiva användargränssnitt (UI). React.js, som utvecklades av Facebook, har använts av många stora företag, inklusive Instagram, Airbnb och WhatsApp. Om du vill bygga effektiva, snabba och responsiva webbapplikationer kan React.js vara rätt val för dig.

Pendahuluan

Innan vi börjar, se till att du har Node.js och npm (Node Package Manager) installerade på din dator. Node.js och npm är viktiga eftersom de tillhandahåller den miljö och de verktyg som behövs för att utveckla webbapplikationer med React.js.

Steg 1: Initiera React-projektet

För att skapa en ny React.js-applikation kan vi använda Create React App, ett verktyg för att skapa applikationer som minimerar den initiala konfigurationen. Kör följande kommando i din terminal eller kommandotolk:

"'bash
npx skapa-reagera-app min-app
cd min-app
npm start
”'

Det här kommandot skapar en ny katalog med namnet `my-app`, laddar ner och installerar alla nödvändiga beroenden och startar utvecklingsservern. Du kan nu öppna en webbläsare och komma åt `http://localhost:3000` för att se standardapplikationen React.js.

Steg 2: Mappstruktur

Låt oss ta en titt på mappstrukturen som Create React App har skapat:

”'
min-app/
├── nodmoduler/
├── offentlig/
│ └── index.html
└── källa/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logotyp.svg
”'

– `node_modules/`: Innehåller alla dina projektberoenden.
– `public/`: Innehåller statiska filer, inklusive `index.html` som är programmets startpunkt.
– `src/`: Där du kommer att tillbringa större delen av din tid. Innehåller React-komponenter, CSS-filer och andra resurser.

Steg 3: Ta bort onödiga filer

För att börja med en ren nystart, låt oss ta bort några onödiga filer. Ta bort `logo.svg` och `App.test.js` i `src/`-mappen. Öppna sedan `App.css` och `index.css` och ta bort all CSS-kod i dem för att börja med ett rent stilark.

Steg 4: Skapa din första komponent

React.js är komponentbaserat. Komponenter är byggstenarna i din webbapplikation. Låt oss modifiera `App.js` för att skapa vår första komponent.

Öppna `src/App.js` och ersätt den med följande kod:

"'jsx
import Reagera från 'reagera';
importera './App.css';

function App() {
lämna tillbaka (

);
}

exportera standardapp;
”'

Initiera React-koden i `App.js` med hjälp av JSX (JavaScript XML), vilket gör att vi kan skriva HTML-liknande syntax i JavaScript. Spara dina ändringar och visa resultaten i din webbläsare.

Steg 5: Lägga till nya komponenter

Nu ska vi lägga till några nya komponenter. Skapa en ny mapp med namnet `components` i `src`-mappen. Skapa sedan en ny fil med namnet `HelloWorld.js` i `components`-mappen.

"'jsx
import Reagera från 'reagera';

function HelloWorld() {
lämna tillbaka (

);
}

exportera standard HelloWorld;
”'

Öppna `App.js` och importera `HelloWorld`-komponenten som vi just skapade:

"'jsx
import Reagera från 'reagera';
importera './App.css';
importera HelloWorld från './components/HelloWorld';

function App() {
lämna tillbaka (

);
}

exportera standardapp;
”'

Nu renderar `App.js` `HelloWorld`-komponenten på huvudsidan.

Steg 6: Lägga till tillståndshantering med useState

React har mycket kraftfulla hookar för att hantera tillstånd. Låt oss lägga till lite tillstånd i vår applikation. Låt oss till exempel lägga till en räknare som ökar varje gång en knapp klickas.

Öppna `HelloWorld.js` och lägg till state och `useState` hook:

"'jsx
importera React, { useState } från 'react';

function HelloWorld() {
const [count, setCount] = useState(0);

const ökningAntal = () => {
setCount(count + 1);
}

lämna tillbaka (

);
}

exportera standard HelloWorld;
”'

Tillståndet `count` initieras med värdet 0, och varje gång knappen klickas ökar funktionen `incrementCount` detta värde.

Steg 7: Lägga till styling

För att lägga till styling kan vi använda CSS i filen `App.css` eller så kan vi använda ett CSS-in-JS-bibliotek som styled-components. Låt oss hålla oss till standard-CSS för tillfället.

Öppna `App.css` och lägg till lite styling:

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

.App-header {
bakgrundsfärg: 282c34;
min-höjd: 100vh;
display: flex;
flex-riktning: kolumn;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
färg vit;
}

knapp {
vaddering: 10px 20px;
marginal-topp: 20px;
typsnittstorlek: 16px;
}
”'

Steg 8: Lägga till routing med React Router

För att lägga till navigering mellan olika sidor i vår applikation kan vi använda React Router. Installera React Router genom att köra följande kommando:

"'bash
npm installera react-router-dom
”'

Skapa sedan två nya komponenter: `Home.js` och `About.js` i mappen `components`.

`Home.js`:
"'jsx
import Reagera från 'reagera';

function Home() {
lämna tillbaka (

);
}

export standard Hem;
”'

`About.js`:
"'jsx
import Reagera från 'reagera';

function About() {
lämna tillbaka (

);
}

export standard Om;
”'

Öppna sedan `App.js` och konfigurera routing:

"'jsx
import Reagera från 'reagera';
import { BrowserRouter som Router, Rutt, Länk, Switch } från 'react-router-dom';
importera './App.css';
importera HelloWorld från './components/HelloWorld';
importera hem från './components/Home';
importera Om från './components/About';

function App() {
lämna tillbaka (

);
}

exportera standardapp;
”'

Med detta har vi lagt till grundläggande navigering mellan olika sidor i vår applikation.

Stängning

Det här är en grundläggande handledning för att skapa en webbapplikation med React.js. Vi har gått igenom projektkonfiguration, komponentskapande, tillståndshantering, styling och routing. React.js har ett rikt ekosystem med många bibliotek och verktyg som kan hjälpa dig att bygga mer komplexa webbapplikationer.

Lycka till, och jag hoppas att den här handledningen hjälper dig att komma igång på din resa med React.js!