Tutorial fir eng Webapplikatioun mat React.js ze erstellen

React.js ass eng populär Frontend-Entwécklungsbibliothéik, déi benotzt gëtt fir interaktiv Benotzerinterfaces (UIs) ze bauen. React.js gouf vu Facebook entwéckelt a gouf vu ville grousse Firmen benotzt, dorënner Instagram, Airbnb a WhatsApp. Wann Dir no effektiven, schnelle a reaktiounsfäege Webapplikatioune sicht , kéint React.js déi richteg Wiel fir Iech sinn.

Aféierung

Ier mer ufänken, gitt sécher datt Dir Node.js an npm (Node Package Manager) op Ärem Computer installéiert hutt. Node.js an npm si wesentlech, well se d'Ëmfeld an d'Tools ubidden, déi néideg sinn, fir Webapplikatiounen mat React.js z'entwéckelen.

Schrëtt 1: Initialiséierung vum React Projet

Fir eng nei React.js Applikatioun ze kreéieren, kënne mir Create React App benotzen, en Tool fir d'Kreatioun vun Applikatiounen, dat d'initial Konfiguratioun miniméiert. Féiert de folgende Kommando an Ärem Terminal oder Kommandozeil aus:

"` bas
npx erstellen-reagéieren-App meng-App
cd meng-app
npm ufänken
""

Dëse Kommando erstellt en neien Dossier mam Numm `my-app`, luet all néideg Ofhängegkeeten erof an installéiert se, an den Entwécklungsserver start. Dir kënnt elo e Browser opmaachen an op `http://localhost:3000` zougräifen, fir déi standardméisseg React.js Applikatioun ze gesinn.

Schrëtt 2: Dossierstruktur

Kucke mer eis emol d'Ordnerstruktur un, déi d'Create React App erstallt huet:

""
meng-App/
├── Node_Moduler/
├── ëffentlech/
│ └── index.html
└── Quell/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
""

– `node_modules/`: Enthält all Är Projetofhängegkeeten.
– `public/`: Enthält statesch Dateien, dorënner `index.html`, deen den Entréepunkt vun der Applikatioun ass.
– `src/`: Wou Dir déi meescht Zäit verbréngt. Enthält React Komponenten, CSS Dateien an aner Ressourcen.

Schrëtt 3: Onnéideg Dateien läschen

Fir mat engem propperen Tafel unzefänken, loosst eis e puer onnéideg Dateien läschen. Läscht `logo.svg` an `App.test.js` am `src/` Dossier. Dann maacht `App.css` an `index.css` op, läscht all den CSS Code dran, fir mat engem propperen Stylesheet unzefänken.

Schrëtt 4: Är éischt Komponent erstellen

React.js baséiert op Komponenten. Komponenten sinn d'Bausteng vun Ärer Webapplikatioun. Loosst eis `App.js` änneren fir eis éischt Komponent ze kreéieren.

Öffnen Sie `src/App.js` a ersetzen et mat dem folgende Code:

"jsx
importéieren Reaktioun vun 'reagéieren';
importéieren './App.css';

Funktioun App() {
zréck (

);
}

Standard-App exportéieren;
""

Initialiséiert de React Code an `App.js` mat JSX (JavaScript XML), wat eis erlaabt HTML-ähnlech Syntax a JavaScript ze schreiwen. Späichert Är Ännerungen a kuckt d'Resultater an Ärem Browser.

Schrëtt 5: Nei Komponenten derbäisetzen

Elo loosse mer e puer nei Komponenten derbäisetzen. Erstellt en neien Dossier mam Numm `components` am Dossier `src`. Dann erstellt eng nei Datei `HelloWorld.js` am Dossier `components`.

"jsx
importéieren Reaktioun vun 'reagéieren';

Funktioun HalloWelt() {
zréck (

);
}

exportéieren Standard HelloWorld;
""

Öffnen Sie `App.js` an importéieren d'Komponent `HelloWorld`, déi mir grad erstallt hunn:

"jsx
importéieren Reaktioun vun 'reagéieren';
importéieren './App.css';
importéiert HelloWorld vun './components/HelloWorld';

Funktioun App() {
zréck (

);
}

Standard-App exportéieren;
""

Elo rendert `App.js` d'Komponent `HelloWorld` op der Haaptsäit.

Schrëtt 6: Zoustandsverwaltung mat useState derbäisetzen

React huet ganz mächteg Hooks fir den Zoustand ze verwalten. Loosst eis e puer Zoustandszuelen an eis Applikatioun bäifügen. Zum Beispill, loosst eis en Zähler bäifügen, deen all Kéier eropgeet, wann op e Knäppchen geklickt gëtt.

Maacht `HelloWorld.js` op a füügt `state` an `useState` Hook derbäi:

"jsx
Importéiert React, { useState } vun 'react';

Funktioun HalloWelt() {
const [Zuel, Zuel setzen] = useState(0);

const ZouhueleCount = () => {
setCount(Zuel + 1);
}

zréck (

);
}

exportéieren Standard HelloWorld;
""

Den Zoustand vun `count` gëtt mat engem Wäert vun 0 initialiséiert, an all Kéier wann op de Knäppchen geklickt gëtt, erhéicht d'Funktioun `incrementCount` dëse Wäert.

Schrëtt 7: Styling derbäisetzen

Fir Styling derbäizesetzen, kënne mir CSS an der `App.css` Datei benotzen oder mir kënnen eng CSS-in-JS Bibliothéik wéi styled-components benotzen. Loosst eis fir de Moment beim Standard-CSS bleiwen.

Öffnen Sie `App.css` a füügt e bësse Styling derbäi:

"css
.App {
Text-alignéieren: Zentrum;
}

.App-Header {
Hannergrondfaarf: 282c34;
Min-Héicht: 100vh;
Display: Flex;
flex-Richtung: Kolonn;
ausriichten-Elementer: Zentrum;
justifiéieren-Inhalt: Zentrum;
Schrëftgréisst: calc(10px + 2vmin);
Faarf: wäiss;
}

Knäppchen {
Padding: 10px 20px;
Margin-Top: 20px;
Schrëftgréisst: 16px;
}
""

Schrëtt 8: Routing mam React Router derbäisetzen

Fir Navigatioun tëscht verschiddene Säiten an eiser Applikatioun ze addéieren, kënne mir de React Router benotzen. Installéiert de React Router andeems Dir de folgende Kommando ausféiert:

"` bas
npm installéieren react-router-dom
""

Dann erstellt zwou nei Komponenten: `Home.js` an `About.js` am Dossier `components`.

`Home.js`:
"jsx
importéieren Reaktioun vun 'reagéieren';

Funktioun Home() {
zréck (

);
}

exportéieren Standard Home;
""

`About.js`:
"jsx
importéieren Reaktioun vun 'reagéieren';

Funktioun Iwwer() {
zréck (

);
}

exportéieren Standard Iwwer;
""

Als nächst, maacht `App.js` op a setzt de Routing op:

"jsx
importéieren Reaktioun vun 'reagéieren';
import { BrowserRouter als Router, Route, Link, Switch } vun 'react-router-dom';
importéieren './App.css';
importéiert HelloWorld vun './components/HelloWorld';
importéiert Home vun './components/Home';
Importéiert Iwwer vun './components/About';

Funktioun App() {
zréck (

);
}

Standard-App exportéieren;
""

Domat hu mir eng einfach Navigatioun tëscht verschiddene Säiten an eiser Applikatioun bäigefüügt.

Ofschloss

Dat ass en einfachen Tutorial fir eng Webapplikatioun mat React.js ze kreéieren. Mir hunn d'Projet-Opstellung, d'Komponenten-Erstellung, d'Status-Verwaltung, d'Styling an d'Routing behandelt. React.js huet e räicht Ökosystem mat ville Bibliothéiken an Tools, déi Iech hëllefe kënnen, méi komplex Webapplikatiounen ze bauen.

Vill Gléck, an ech hoffen, dësen Tutorial hëlleft Iech op Ärer Rees mat React.js unzefänken!