Oktatóanyag webes alkalmazás létrehozásáról React.js használatával

A React.js egy népszerű front-end fejlesztői könyvtár, amelyet interaktív felhasználói felületek (UI) létrehozására használnak. A Facebook által fejlesztett React.js-t számos nagyvállalat használta, köztük az Instagram, az Airbnb és a WhatsApp. Ha hatékony, gyors és reszponzív webes alkalmazásokat szeretne készíteni, a React.js lehet a megfelelő választás az Ön számára.

Pendahuluan

Mielőtt elkezdenénk, győződjünk meg róla, hogy telepítve van a Node.js és az npm (Node Package Manager) a számítógépünkön. A Node.js és az npm elengedhetetlenek, mivel biztosítják a React.js használatával történő webes alkalmazások fejlesztéséhez szükséges környezetet és eszközöket.

1. lépés: A React projekt inicializálása

Új React.js alkalmazás létrehozásához használhatjuk a Create React App alkalmazáskészítő eszközt, amely minimalizálja a kezdeti konfigurációt. Futtassa a következő parancsot a terminálban vagy a parancssorban:

„Bash
npx create-react-app my-app
cd my-app
npm kezdés
""

Ez a parancs létrehoz egy új könyvtárat `my-app` néven, letölti és telepíti az összes szükséges függőséget, majd elindítja a fejlesztői szervert. Most megnyithatsz egy böngészőt, és a `http://localhost:3000` címen megtekintheted az alapértelmezett React.js alkalmazást.

2. lépés: Mappaszerkezet

Vessünk egy pillantást a Create React App által létrehozott mappastruktúrára:

""
my-app/
├── csomópont_modulok/
├── nyilvános/
│ └── index.html
└── forrás/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logó.svg
""

– `node_modules/`: Az összes projektfüggőséget tartalmazza.
– `public/`: Statikus fájlokat tartalmaz, beleértve az `index.html` fájlt is, amely az alkalmazás belépési pontja.
– `src/`: Ahol a legtöbb időt fogod tölteni. React komponenseket, CSS fájlokat és egyéb eszközöket tartalmaz.

3. lépés: Felesleges fájlok törlése

Kezdésként töröljünk néhány felesleges fájlt. Töröljük a `logo.svg` és az `App.test.js` fájlokat az `src/` mappában. Ezután nyissuk meg az `App.css` és az `index.css` fájlokat, törölve bennük az összes CSS kódot, hogy tiszta stíluslappal induljunk.

4. lépés: Az első komponens létrehozása

A React.js komponens alapú. A komponensek a webes alkalmazásod építőelemei. Módosítsuk az `App.js` fájlt az első komponensünk létrehozásához.

Nyisd meg az `src/App.js` fájlt, és cseréld ki a következő kóddal:

""jsx
import React a 'react'-ból;
import './App.css';

function App() {
Visszatérés (

);
}

alapértelmezett alkalmazás exportálása;
""

Inicializáld a React kódot az `App.js`-en belül JSX (JavaScript XML) használatával, amely lehetővé teszi számunkra, hogy HTML-szerű szintaxist írjunk JavaScripten belül. Mentsd el a módosításokat, és tekintsd meg az eredményeket a böngésződben.

5. lépés: Új összetevők hozzáadása

Most adjunk hozzá néhány új komponenst. Hozzunk létre egy új mappát `components` néven az `src` mappán belül. Ezután hozzunk létre egy új fájlt `HelloWorld.js` néven a `components` mappában.

""jsx
import React a 'react'-ból;

függvény HelloWorld() {
Visszatérés (

);
}

export alapértelmezett HelloWorld;
""

Nyisd meg az `App.js` fájlt, és importáld az imént létrehozott `HelloWorld` komponenst:

""jsx
import React a 'react'-ból;
import './App.css';
importálja a HelloWorld-öt a './components/HelloWorld' fájlból;

function App() {
Visszatérés (

);
}

alapértelmezett alkalmazás exportálása;
""

Most az `App.js` a `HelloWorld` komponenst a főoldalon jeleníti meg.

6. lépés: Állapotkezelés hozzáadása a useState használatával

A React nagyon hatékony hookokkal rendelkezik az állapotok kezelésére. Adjunk hozzá néhány állapotot az alkalmazásunkhoz. Például adjunk hozzá egy számlálót, amely minden gombnyomáskor növekszik.

Nyisd meg a `HelloWorld.js` fájlt, és add hozzá az state és a `useState` hookokat:

""jsx
import React, { useState } from 'react';

függvény HelloWorld() {
const [count, setCount] = useState(0);

konstans növekedési szám = () => {
setCount(count + 1);
}

Visszatérés (

);
}

export alapértelmezett HelloWorld;
""

A `count` állapot 0 értékkel inicializálódik, és minden alkalommal, amikor a gombra kattintunk, az `incrementCount` függvény növeli ezt az értéket.

7. lépés: Stílus hozzáadása

Stílus hozzáadásához használhatunk CSS-t az `App.css` fájlban, vagy használhatunk egy CSS-in-JS könyvtárat, például a styled-components-t. Egyelőre maradjunk a standard CSS-nél.

Nyisd meg az `App.css` fájlt, és adj hozzá néhány stílust:

css
.App {
text-align: center;
}

.App-header {
háttérszín: 282c34;
min-magasság: 100vh;
kijelző: flex;
hajlítási irány: oszlop;
igazítási elemek: középen;
indokol-tartalom: center;
betűméret: calc(10px + 2vmin);
fehér szín;
}

gomb {
párnázás: 10px 20px;
Margin-top: 20px;
betűméret: 16px;
}
""

8. lépés: Útválasztás hozzáadása a React Routerrel

Az alkalmazásunk különböző oldalai közötti navigáció hozzáadásához használhatjuk a React Routert. A React Router telepítéséhez futtassa a következő parancsot:

„Bash
npm install react-router-dom
""

Ezután hozz létre két új komponenst: a `Home.js`-t és az `About.js`-t a `components` mappában.

`Home.js`:
""jsx
import React a 'react'-ból;

function Home() {
Visszatérés (

);
}

export alapértelmezett Kezdőlap;
""

`About.js`:
""jsx
import React a 'react'-ból;

function About() {
Visszatérés (

);
}

export alapértelmezett Névjegy;
""

Ezután nyisd meg az `App.js` fájlt, és állítsd be az útvonalválasztást:

""jsx
import React a 'react'-ból;
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import './App.css';
importálja a HelloWorld-öt a './components/HelloWorld' fájlból;
Import Home from './components/Home';
import Névjegy innen: './components/About';

function App() {
Visszatérés (

);
}

alapértelmezett alkalmazás exportálása;
""

Ezzel alapvető navigációt adtunk hozzá az alkalmazásunk különböző oldalai között.

Záró

Ez egy alapvető oktatóanyag webes alkalmazások React.js használatával történő létrehozásához. Áttekintettük a projektbeállítást, a komponensek létrehozását, az állapotkezelést, a stíluskezelést és az útvonaltervezést. A React.js gazdag ökoszisztémával rendelkezik számos könyvtárral és eszközzel, amelyek segíthetnek összetettebb webes alkalmazások létrehozásában.

Sok szerencsét, és remélem, ez az oktatóanyag segít elindulni a React.js-sel való utadon!