React + Vite

Hivatalos oktató lap ◆ CodeSandbox ◆ StackBlitz ◆ React Playground ◆ Create React App Online

Fontosabb fogalmak a használathoz

Komponens: A React építőeleme. Létrehozás után teszőleges helyen felhasználhatjuk.
Props: A komponensek közötti adatátvitel eszköze.
State: Az egyes komponensek belső állapotának, állapotváltozásainak a kezelése.
JSX : A JSX egy szintaktikus kiterjesztés, amely lehetővé teszi, hogy HTML-szerű kódot írjunk JavaScript-ben. Ez megkönnyíti a komponensek írását és olvasását.

A Vite project a React-en kívül az ES6 alap szabványra épülő további keretrendszereket is támogatja (Vanilla, Vue, Preact, Lit, Svelte, Solid, Qwik, ...).

A TypeScript kiküszöböli a ES6 dinamikus típusosságából adódó hátrányokat, így biztonságosabbá és átláthatóbbá téve a fejlesztéseket. A típusosságon kívül sok olyan funkciót is tartalmaz, amely segít optimálisabbá tenni a futtatható kódot. A Microsoft fejlesztette ki 2012-ben.

React project létrehozása

Ellenőrízzük le, hogy rendelkezünk-e Node.js-el és a hivatalos oldaláról frissítsük a legújabbra
```
    node --version
    npm install -g npm@latest
    npm install -g create-vite
```
Lépjünk be abba a mappába, amelyben létre akarjuk hozni.

Hozzuk létre a projektünket 'my-react-app' néven

    npm create vite@latest my-react-app --template react
    cd my-react-app
    npm install

Ellenőrzésként jelenítsük meg a létrehozott oldalt az alapértelmezett böngészőben
```
    npm run dev
```
SecurityError

A VSC terminálban előfordulhat ez a hibaüzenet, amely arra utal, hogy a Windows PowerShell biztonsági beállításai miatt nem futtathatók szkriptek, beleértve az npm.ps1-t. A probléma megoldásához módosítani kell a PowerShell végrehajtási házirendjét.
1. Windows PowerShell futtatás rendszergazdaként
2. Get-ExecutionPolicy -List
3. Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

A létrejött könyvtárszerkezetben az src mappában lévő main.js-ben kezdhetjük a módosítást


    my-react-app/
    ├── node_modules/
    ├── public/
    │   ├── favicon.ico
    │   └── vite.svg
    ├── src/
    │   ├── assets/
    │   │   └── react.svg
    │   ├── App.css
    │   ├── App.jsx
    │   ├── index.css
    │   └── main.jsx
    ├── .gitignore
    ├── index.html
    ├── package.json
    ├── README.md
    └── vite.config.js

A main.jsx tartalmát cseréljük erre a kódsorra:

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from './App';
    import './index.css';

    ReactDOM.createRoot(document.getElementById('root')).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );

Az App.jsx tartalmát cseréljük erre a kódsorra:

    import React from 'react';
    import './App.css';

    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <h1>Hello Vite!</h1>
          </header>
        </div>
      );
    }

    export default App;

Kész az első frontend alkalmazásod!

GitHub repository

Komponensek létrehozása és használata

A Vite használata esetén a React komponensek ugyanúgy működnek, mint bármely más React projektnél.

Új projekt létrehozása Vite segítségével.

    npm create vite@latest my-react-app --template react
    cd my-react-app
    npm install

Új komponensek létrehozása és hozzáadása a src/components könyvtárhoz.


                    import React from 'react';

    const Hello = ({ name }) => {
      return (
        <div>
          <h2>Hello, {name}!</h2>
        </div>
      );
    };

    export default Hello;

Az új komponensek importálása és használata az App.jsx fájlban.


                    //import React from 'react';
    import './App.css';
    import Hello from './components/Hello';

    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <h1>Welcome to Vite + React</h1>
            <Hello name="Vite User" />
          </header>
        </div>
      );
    }

    export default App;

Fejlesztési szerver futtatása és a változtatások azonnali megtekintése. npm run dev

GitHub repository

Állapotkezelés (State)


            import React, { useState } from 'react';

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

      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }

    export default App;

GitHub repository

Router használata

Fontosabb elemei:

Router Setup: A BrowserRouter
Navigáció: A Link komponensek határozzák meg, melyik komponenst kell megjeleníteni az adott útvonalon
Route Definition: A Route és Routes komponens teszi lehetővé az oldalak közötti váltást az oldal újratöltése nélkül
Element Prop: A Route komponensekben az element propot használjuk az adott komponens megadására.


        npm install react-router-dom

App.js


        import React from 'react';
    import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
    import Home from './Home';
    import About from './About';
    import Contact from './Contact';

    function App() {
      return (
        <Router>
          <div>
            <nav>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/contact">Contact</Link>
                </li>
              </ul>
            </nav>

            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
            </Switch>
          </div>
        </Router>
      );
    }

    export default App;

Home.js


        import React from 'react';

    function Home() {
      return (
        <div>
          <h2>Home Page</h2>
          <p>Welcome to the Home Page!</p>
        </div>
      );
    }

    export default Home;

About.jsx


        import React from 'react';

    function About() {
      return (
        <div>
          <h2>About Page</h2>
          <p>Learn more about us on this page.</p>
        </div>
      );
    }

    export default About;

Contact.jsx


        import React from 'react';

    function Contact() {
      return (
        <div>
          <h2>Contact Page</h2>
          <p>Get in touch with us!</p>
        </div>
      );
    }

    export default Contact;

GitHub repository

API hívás - Axios

Axios egy HTTP kliens könyvtár, amely megkönnyíti az HTTP kérések küldését böngészőben és Node.js környezetben.

Jellemzői:

HTTP kérések: GET, POST, PUT, DELETE stb. kérések küldése.
Interceptors: Lehetővé teszi a kérések és válaszok elő- és utófeldolgozását.
Könnyű használat: Kódja rövid és jól áttekinthető.
Promise alapú: Támogatja az aszinkron műveleteket async/await szintaxissal.


        npm install axios


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

    const App = () => {
    const [jokes, setJokes] = useState([]);

    useEffect(() => {
      const fetchJokes = async () => {
        try {
          const response = await axios.get('https://merlinvizsga.hu/api/vicc/');
          setJokes(response.data);
        } catch (error) {
          console.error('Error fetching the jokes:', error);
        }
      };

      fetchJokes();
    }, []);

    return (
      <div className="App">
        <h1>Jokes</h1>
        <div className="joke-list">
          {jokes.map((joke, index) => (
            <div key={index} className="joke-card">
               <p dangerouslySetInnerHTML={{ __html: joke.viccszovege }} />
            </div>
          ))}
        </div>
      </div>
    );
  };

  export default App;

GitHub repository

Új rekord rögzítése


            npm install axios

src/App.jsx


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

    function App() {
      const [vnev, setVnev] = useState('');
      const [vcim, setVcim] = useState('');

      const handleSubmit = async (event) => {
        event.preventDefault();
        try {
          const response = await axios.post('http://merlinvizsga.hu/api/pizza/vevo', { vnev, vcim });
          alert('Sikeresen rögzítve!');
          // Reset form
          setVnev('');
          setVcim('');
        } catch (error) {
          console.error('Hiba történt a vevő rögzítésekor:', error);
          alert('Hiba történt a vevő rögzítésekor.');
        }
      };

      return (
        <div className="container mt-5">
          <h2>Új vevő rögzítése</h2>
          <form onSubmit={handleSubmit}>
            <div className="mb-3">
              <label htmlFor="vnev" className="form-label">Vevő neve</label>
              <input
                type="text"
                className="form-control"
                id="vnev"
                value={vnev}
                onChange={(e) => setVnev(e.target.value)}
                required
              />
            </div>
            <div className="mb-3">
              <label htmlFor="vcim" className="form-label">Vevő címe</label>
              <input
                type="text"
                className="form-control"
                id="vcim"
                value={vcim}
                onChange={(e) => setVcim(e.target.value)}
                required
              />
            </div>
            <button type="submit" className="btn btn-primary">Rögzít</button>
          </form>
        </div>
      );
    }

    export default App;

src/main.jsx


            import 'bootstrap/dist/css/bootstrap.min.css';
    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import App from './App';
    import './index.css';

    ReactDOM.createRoot(document.getElementById('root')).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );

GitHub repository

Online kurzusok és tananyagok: