Első React weboldalunk

Hozzuk létre első React alkalmazásunkat! Ha telepítettük a Node.js-t, és a Visual Studio Code-ot, akkor hozzá is kezdhetünk!

Nyissuk meg a kívánt mappát a Visual Studioban, majd egy új terminált! Adjuk ki a következő parancsot: npm create vite@latest

Utána meg fogja kérdezni, mi legyen az app neve, csomag neve, milyen keretrendszert szeretnénnk használni (nyilakkal lehet választani) React-et, és milyen JS variánst, maradjunk a sima javascript-nél. Ezután az npm le fogja generálni első react app-unk fájljait. Ezután ki is írja milyen parancsokat kell még kiadni: cd mappa neve, npm instal, és fejlesztői mód indítása: npm run dev

A weboldal a megadott linken lesz elérhető: http://localhost:5173/

Nézzük, mit kaptunk. Az új app nálam az asztalon, a React/alap mappában található.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

// https://vite.dev/config/

export default defineConfig({

plugins: [react()],

})

vite.config.js Ez egy konfigurációs fájl, a Vite számára, ebből fogja tudni, hogy ez egy React alkalmazás.

package.json Az alkalmazásunk információit tartalmazza, milyen csomagat használunk, és milyen verziójukat.

index.html Ez egy sima html fájl, ebben fog megjelenni az oldal tartalma.

Az oldal tartalma tulajdonképpen az src mappában található.

Main.jsx Ez a fájl az index.html-ben található div-be fogja beletenni (renderelni) az App.jsx fájl tartalmát.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

import { StrictMode } from 'react'

import { createRoot } from 'react-dom/client'

import './index.css'

import App from './App.jsx'

createRoot(document.getElementById('root')).render(

<App />

</StrictMode>,

)

App.jsx Ez a weboldalunk aktuális tartalma, ami megjeleníti a React és a Vite logót. A képeket egyéb összetevőket általában az assets mappába szoktuk elhelyezni, a komponenseket pedig majd egy components mappába, ami még nincs létrehozva. A képeket, css-t importálni kell! A komponenseket (függvényeket) szintén importáljuk abban a fájlban, ahol szeretnénk felhasználni. Jelen példában az App nevű komponenst a Main.jsx-ben importáljuk, és futtatjuk le. A komponenseket ugyanúgy < komponens/> használhatjuk, mint a html tageket! Az App függvényben a return() tartalmát nyugodtan le lehet cserélni saját tartalomra, és kipróbálni mit fog megjeleníteni.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

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

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

import { useState } from 'react'

import reactLogo from './assets/react.svg'

import viteLogo from '/vite.svg'

import './App.css'

function App() {

const [count, setCount] = useState(0)

return (

<div>

</a>

</a>

</div>

<h1>Vite + React</h1>

<button onClick={() => setCount((count) => count + 1)}>

count is {count}

</button>

<p>

Edit <code>src/App.jsx</code> and save to test HMR

</p>

</div>

Click on the Vite and React logos to learn more

</p>

</>

)

}

export default App

Kategóriák

Friss bejegyzések

Playwright teszt

Python Lista, szótár és halmaz értelmezés (list comprehension, dict/set comprehension)