React bevezető útmutató: Építsd meg az első felhasználói felületedet a nulláról

A React egy JavaScript könyvtár felhasználói felületek építéséhez. A Facebook fejlesztette és tartja karban, és a frontend fejlesztés egyik legnépszerűbb eszközévé vált. Ez az útmutató lépésről lépésre bemutatja a React alapfogalmait a nulláról kezdve, és egy egyszerű felhasználói felületet építünk.

Miért válaszd a React-et?

A React a következő előnyökkel rendelkezik:

• Komponens alapú: A React a felhasználói felületet független, újra felhasználható komponensekre bontja. Ezáltal a kód könnyebben karbantartható és érthető.
• Deklaratív: A React deklaratív programozási stílust használ, ami azt jelenti, hogy csak azt kell leírnod, amit meg szeretnél jeleníteni, a React pedig automatikusan kezeli a frissítéseket és a renderelést.
• Hatékony: A React virtuális DOM-ot és intelligens diff algoritmust használ, amely hatékonyan frissíti a felhasználói felületet, csökkentve a felesleges renderelést.
• Hatalmas közösségi támogatás: A React hatalmas közösséggel és gazdag ökoszisztémával rendelkezik, rengeteg oktatóanyagot, könyvtárat és eszközt találhatsz a fejlesztéshez.
• Platformfüggetlen képesség: A React Native lehetővé teszi, hogy a React segítségével natív mobilalkalmazásokat (iOS és Android) fejlessz.

Előkészületek

Mielőtt elkezdenéd, győződj meg arról, hogy a számítógépeden a következő eszközök vannak telepítve:

• Node.js: A Node.js egy JavaScript futtatókörnyezet, amely a React fejlesztőeszközeinek futtatásához szükséges. Letöltheted és telepítheted a https://nodejs.org/ címről.
• npm vagy yarn: Az npm (Node Package Manager) és a yarn JavaScript csomagkezelők, amelyek a React függőségeinek telepítésére és kezelésére szolgálnak. Az npm általában a Node.js telepítésekor települ. A yarn a https://yarnpkg.com/ címről telepíthető.

Az első React alkalmazásod létrehozása

A create-react-app segítségével gyorsan létrehozunk egy React projektet.

1. Létrehozás npm használatával:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Létrehozás yarn használatával:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

A fenti parancsok végrehajtása után a create-react-app automatikusan létrehoz egy my-first-react-app nevű könyvtárat, és inicializál egy React projektet ebben a könyvtárban. Az npm start vagy yarn start parancs elindítja a fejlesztői szervert, és a böngészőben a http://localhost:3000 címen megtekintheted a React alkalmazásodat.

Könyvtárszerkezet

A create-react-app által létrehozott projekt könyvtárszerkezete a következő:``` my-first-react-app/ ├── node_modules/ # Projekt függőségeinek könyvtára ├── public/ # Statikus erőforrások (pl. HTML fájlok) │ ├── index.html # Az alkalmazás belépési pontja HTML fájl │ └── ... ├── src/ # React forráskód │ ├── App.css # Az App komponens CSS stílusa │ ├── App.js # App komponens │ ├── App.test.js # App komponens tesztfájlja │ ├── index.css # Globális CSS stílusok │ ├── index.js # Az alkalmazás belépési pontja JavaScript fájl │ ├── logo.svg # React logo │ └── ... ├── .gitignore # Git figyelmen kívül hagyandó fájlok ├── package.json # A projekt metaadatai és függőségei ├── README.md # A projekt leírása └── yarn.lock # Függőségek verziózáró fájlja (ha yarn-t használsz)

## A React komponensek megértése

A React alkalmazások komponensekből épülnek fel. A komponensek független, újrahasznosítható kódegységek, amelyek a felhasználói felület egy adott részének renderelésére szolgálnak.

A `src/App.js` fájlban láthatod az alapértelmezett `App` komponenst:

```javascript
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Kódmagyarázat:

• import React from 'react'; Importálja a React könyvtárat.
• function App() { ... } Definiál egy App nevű függvénykomponenst.
• return ( ... ) Visszaad egy JSX kifejezést, amely leírja, hogy a komponens mit rendereljen.
• export default App; Exportálja az App komponenst, hogy más fájlokban is használható legyen.

JSX (JavaScript XML)

A JSX egy JavaScript szintaktikai kiterjesztés, amely lehetővé teszi, hogy HTML-hez hasonló kódot írj JavaScript kódban. A fenti példában a ... egy JSX kifejezés. A JSX kódot a Babel szabványos JavaScript kóddá alakítja, hogy a böngésző megértse.

Az App komponens módosítása

Módosítsuk az App komponenst, hogy létrehozzunk egy egyszerű számlálót.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Számláló

      Aktuális számláló: {count}

      +
      -
    
  );
}

export default App;

Módosítások magyarázata:

• import React, { useState } from 'react'; Importálja a useState Hook-ot. A useState egy React Hook, amelyet az állapot hozzáadására használnak a funkcionális komponensekben.
• const [count, setCount] = useState(0); A useState Hook használatával létrehoz egy count nevű állapotváltozót, és inicializálja 0-ra. A setCount egy függvény a count állapot frissítésére.
• const increment = () => { setCount(count + 1); }; Meghatároz egy increment nevű függvényt, amely a count állapotot 1-gyel növeli.
• const decrement = () => { setCount(count - 1); }; Meghatároz egy decrement nevű függvényt, amely a count állapotot 1-gyel csökkenti.
• Aktuális számláló: {count} Megjeleníti a count állapot értékét az oldalon. {count} egy JSX kifejezés, amelyet JavaScript változók beszúrására használnak a JSX kódban.
• + és - Létrehoz két gombot, amelyekhez hozzárendeli az increment és decrement függvényeket. Az onClick egy eseménykezelő, amely a megadott függvényt futtatja a gomb kattintásakor.

A src/App.js fájl mentése után a böngésző automatikusan frissül, és egy egyszerű számlálót fog látni. A "+" gombra kattintva növelheti a számlálót, a "-" gombra kattintva csökkentheti azt.

CSS stílusok használata

CSS használatával szebbé teheti a React alkalmazását. A create-react-app támogatja a CSS Modules-t és a hagyományos CSS fájlokat.

CSS Modules használata:

A CSS Modules lehetővé teszi, hogy minden komponenshez külön CSS stílusokat hozzon létre, elkerülve a stílusütközéseket. Ahhoz, hogy CSS Modules-t használjon egy komponensben, létre kell hoznia egy .module.css végződésű fájlt.

Például hozzon létre egy App.module.css nevű fájlt, és adja hozzá a következő CSS stílusokat:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Ezután importálja a CSS Modules-t a src/App.js fájlba:

import React, { useState } from 'react';
import styles from './App.module.css'; // CSS Modules importálása

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* A styles objektum használata a CSS osztályok hivatkozásához */}
      

# Számláló

      Aktuális számláló: {count}

      +
      -
    
  );
}

export default App;

Normál CSS fájl használata:

Használhatsz normál CSS fájlokat is a globális stílusok definiálásához. A src/index.css fájlban globális stílusokat definiálhatsz.

Például add hozzá a következő CSS stílust:

body {
  font-family: sans-serif;
}

Ez a stílus az alkalmazás teljes body elemére vonatkozik.

Következő lépések

Gratulálok, elkészítetted az első React alkalmazásodat! Ezután többet is megtudhatsz a Reactről, például:

• Komponens kommunikáció: Tanuld meg, hogyan kommunikálhatnak egymással a különböző komponensek.
• Űrlapkezelés: Tanuld meg, hogyan hozhatsz létre és kezelhetsz űrlapokat.
• Útválasztás: Tanuld meg, hogyan hozhatsz létre többoldalas alkalmazást a React Router használatával.
• Redux vagy Context API: Tanuld meg, hogyan kezelheted az alkalmazás állapotát.
• Hooks: Ismerd meg mélyebben a React Hookokat, például az useEffect-et, useContext-et stb.

Ne feledd, a React egy olyan technológia, amely folyamatos gyakorlást és tanulást igényel. Jó tanulást!