Tutoriaal oor die skep van 'n webtoepassing met behulp van React.js

React.js is 'n gewilde front-end ontwikkelingsbiblioteek wat gebruik word om interaktiewe gebruikerskoppelvlakke (UI's) te bou. React.js, wat deur Facebook ontwikkel is, is deur baie groot maatskappye gebruik, insluitend Instagram, Airbnb en WhatsApp. As jy op soek is na effektiewe, vinnige en responsiewe webtoepassings om te bou , is React.js dalk die regte keuse vir jou.

Inleiding

Voordat ons begin, maak seker dat jy Node.js en npm (Node Package Manager) op jou rekenaar geïnstalleer het. Node.js en npm is noodsaaklik omdat hulle die omgewing en gereedskap bied wat nodig is om webtoepassings met React.js te ontwikkel.

Stap 1: Inisialisering van die React-projek

Om 'n nuwe React.js-toepassing te skep, kan ons Create React App gebruik, 'n toepassingskeppingsinstrument wat die aanvanklike konfigurasie tot die minimum beperk. Voer die volgende opdrag in jou terminaal of opdragprompt uit:

"` bash
npx skep-reageer-app my-app
cd my-app
npm begin
''

Hierdie opdrag sal 'n nuwe gids met die naam `my-app` skep, alle nodige afhanklikhede aflaai en installeer, en die ontwikkelingsbediener begin. Jy kan nou 'n blaaier oopmaak en toegang tot `http://localhost:3000` kry om die standaard React.js-toepassing te sien.

Stap 2: Lêerstruktuur

Kom ons kyk na die vouerstruktuur wat Create React App geskep het:

''
my-app/
├── node_modules/
├── publiek/
│ └── indeks.html
└── bron/
├── App.css
├── App.js
├── App.toets.js
├── indeks.css
├── indeks.js
└── logo.svg
''

– `node_modules/`: Bevat al jou projekafhanklikhede.
– `public/`: Bevat statiese lêers, insluitend `index.html` wat die toepassing se toegangspunt is.
– `src/`: Waar jy die meeste van jou tyd sal spandeer. Bevat React-komponente, CSS-lêers en ander bates.

Stap 3: Verwydering van onnodige lêers

Om met 'n skoon bladsy te begin, laat ons 'n paar onnodige lêers verwyder. Verwyder `logo.svg` en `App.test.js` binne die `src/`-lêergids. Maak dan `App.css` en `index.css` oop en verwyder al die CSS-kode daarin om met 'n skoon stylblad te begin.

Stap 4: Skep jou eerste komponent

React.js is komponentgebaseerd. Komponente is die boustene van jou webtoepassing. Kom ons wysig `App.js` om ons eerste komponent te skep.

Maak `src/App.js` oop en vervang dit met die volgende kode:

"`jsx
invoer Reageer vanaf 'reageer';
invoer './App.css';

funksie App() {
terugkeer (

);
}

uitvoer standaardtoepassing;
''

Initialiseer die React-kode binne `App.js` met behulp van JSX (JavaScript XML), wat ons toelaat om HTML-agtige sintaksis binne JavaScript te skryf. Stoor jou veranderinge en bekyk die resultate in jou blaaier.

Stap 5: Nuwe komponente byvoeg

Kom ons voeg nou 'n paar nuwe komponente by. Skep 'n nuwe lêergids genaamd `components` binne die `src`-lêergids. Skep dan 'n nuwe lêer genaamd `HelloWorld.js` in die `components`-lêergids.

"`jsx
invoer Reageer vanaf 'reageer';

funksie HalloWêreld() {
terugkeer (

);
}

uitvoer standaard HelloWorld;
''

Maak `App.js` oop en voer die `HelloWorld`-komponent in wat ons so pas geskep het:

"`jsx
invoer Reageer vanaf 'reageer';
invoer './App.css';
voer HelloWorld in vanaf './components/HelloWorld';

funksie App() {
terugkeer (

);
}

uitvoer standaardtoepassing;
''

Nou lewer `App.js` die `HelloWorld`-komponent op die hoofbladsy.

Stap 6: Voeg Toestandbestuur by met useState

React het baie kragtige hake vir die bestuur van toestand. Kom ons voeg 'n bietjie toestand by ons toepassing. Byvoorbeeld, kom ons voeg 'n teller by wat elke keer toeneem as 'n knoppie geklik word.

Maak `HelloWorld.js` oop en voeg die `state` en `useState` haak by:

"`jsx
voer React in, { useState } vanaf 'react';

funksie HalloWêreld() {
const [telling, stelTel] = gebruikStaat(0);

konstante inkrementAantal = () => {
stelAantal(aantal + 1);
}

terugkeer (

);
}

uitvoer standaard HelloWorld;
''

Die `count`-toestand word geïnisialiseer met 'n waarde van 0, en elke keer as die knoppie geklik word, sal die `incrementCount`-funksie hierdie waarde verhoog.

Stap 7: Voeg stilering by

Om stilering by te voeg, kan ons CSS in die `App.css`-lêer gebruik of ons kan 'n CSS-in-JS-biblioteek soos styled-components gebruik. Kom ons bly vir eers by standaard CSS.

Maak `App.css` oop en voeg stilering by:

"`css
.App {
teksbelyning: middel;
}

.App-koptekst {
agtergrondkleur: 282c34;
min-hoogte: 100vh;
vertoon: buig;
buig-rigting: kolom;
belyn-items: centreer;
regverdig-inhoud: sentreer;
lettergrootte: bereken(10px + 2vmin);
kleur: wit;
}

knoppie {
vulling: 10px 20px;
marge-top: 20px;
lettergrootte: 16px;
}
''

Stap 8: Roetering byvoeg met React Router

Om navigasie tussen verskillende bladsye in ons toepassing by te voeg, kan ons React Router gebruik. Installeer React Router deur die volgende opdrag uit te voer:

"` bash
npm installeer react-router-dom
''

Skep dan twee nuwe komponente: `Home.js` en `About.js` in die `components`-lêergids.

`Home.js`:
"`jsx
invoer Reageer vanaf 'reageer';

funksie Tuisblad() {
terugkeer (

);
}

uitvoer standaard Tuisblad;
''

`About.js`:
"`jsx
invoer Reageer vanaf 'reageer';

funksie Oor() {
terugkeer (

);
}

uitvoer standaard Oor;
''

Maak vervolgens `App.js` oop en stel roetering op:

"`jsx
invoer Reageer vanaf 'reageer';
invoer { BrowserRouter as Router, Roete, Skakel, Skakelaar } vanaf 'react-router-dom';
invoer './App.css';
voer HelloWorld in vanaf './components/HelloWorld';
voer Tuisblad in vanaf './komponente/Tuisblad';
invoer Oor vanaf './komponente/Oor';

funksie App() {
terugkeer (

);
}

uitvoer standaardtoepassing;
''

Hiermee het ons basiese navigasie tussen verskillende bladsye in ons toepassing bygevoeg.

Sluiting

Dit is 'n basiese tutoriaal vir die skep van 'n webtoepassing met behulp van React.js. Ons het projekopstelling, komponentskepping, toestandsbestuur, stilering en roetering gedek. React.js het 'n ryk ekosisteem met talle biblioteke en gereedskap wat jou kan help om meer komplekse webtoepassings te bou.

Sterkte, en ek hoop hierdie tutoriaal help jou om jou reis met React.js te begin!