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.- Windows PowerShell futtatás rendszergazdaként
- Get-ExecutionPolicy -List
- 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!
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
Á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;
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
ésRoutes
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 azelement
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;
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;
Ú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>
);
Online kurzusok és tananyagok: