Tartalomjegyzék

React és Vite

React és Vite

Szerző: Sallai András
Copyright © 2024, Sallai András
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Szükséges

VSCode
VSCode bővítmény: ES7+ React/Redux/React-Native snippets

Projekt készítése

npm create vite@latest

Lehetséges kimenet:

Keretrendszer választása:

$ npm create vite@latest
✔ Project name: … app01
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

$ npm create vite@latest
✔ Project name: … app02
✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
    Remix ↗

$ npm create vite@latest
✔ Project name: … app01
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /home/andras/dev/gyak/react/app06/app01...

Done. Now run:

  cd app01
  npm install
  npm run dev

Port beállítása

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
  },
})

Tailwindcss beállítása

VSCode bővítmény:

Tailwind CSS IntelliSense
Tailwind CSS directives

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Ez létrehoz egy tailwind.config.js és egy postcss.config.js fájlt.

Az App.css tartalma törölhető. Az App.jsx tartalmát törölhetjük majd újraírhatjuk a következő React snippets segítségével:

rafce

Konfiguráljuk a TailwindCSS a tailwind.config.js fájlban:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Teszteljük:

src/App.jsx

import React from 'react'
 
const App = () => {
  return (
    <>
        <div className='text-6xl'>App</div>
    </>
  )
}
 
export default App

Kötés

Teszteljük:

src/App.jsx

import React from 'react'
 
const App = () => {
  const name = 'János';
  return (
    <>
        <div className='text-6xl'>App</div>
        <p>Üdv {name}</p>
    </>
  )
}
 
export default App

Kifejezés kiértékelése

App.jsx

import React from 'react'
 
const App = () => {
  const title = 'Háromszög területszámítás';
  const base = 30;
  const height = 35;
  return (
    <>
    <div className='text-6xl'>Háromszög</div>
    <p>{title}</p>
    <p>Terület: {base * height / 2}</p>
    </>
  )
}
 
export default App

Tömb listába

src/App.jsx

import React from 'react'
 
const App = () => {
  const names = [
    'Erős István',
    'Pancs Elemér',
    'Reputa Gábor'
  ]
  return (
    <>
      <div className='text-6xl'>Dolgozók</div>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </>
  )
}
 
export default App

Feltételes megjelenítés

src/App.jsx

import React from 'react'
 
const App = () => {
  const isLoggedIn = true;
  return (
    <>
    <div className='text-6xl'>Választás</div>
    { isLoggedIn ? <p>Üdv!</p>  : <p>Jelentkezz be</p> }
    </>
  )
}
 
export default App

Másik példa:

src/App.jsx

import React from 'react'
 
const App = () => {
  const wanted = 5;  
  return (
    <>
    <div className='text-6xl'>Szavazatok</div>
    { wanted > 5 ? <p>Akarjuk</p>  : <p>Nem</p> }
    </>
  )
}
 
export default App

src/App.jsx

import React from 'react'
 
const App = () => {
  const wanted = true;
  return (
    <>
    <div className='text-6xl'>Szavazatok</div>
    { wanted && <p>Akarjuk</p> }
    </>
  )
}
 
export default App

Stílus

src/App.jsx

import React from 'react'
 
const App = () => {
  const wanted = true;
  return (
    <>
    <div className='text-6xl'>CSS</div>
    <p style={{ 
      backgroundColor: 'navy', 
      color: 'white' 
      }}>Valami</p>
    </>
  )
}
 
export default App

src/App.jsx

import React from 'react'
 
const App = () => {
  const wanted = true;
  const styles = {
    backgroundColor: 'navy', 
    color: 'white',
    padding: '5px',
  };
  return (
    <>
    <div className='text-6xl'>CSS</div>
    <p style={styles}>Valami</p>
    </>
  )
}
 
export default App

Komponensek

A komponenseket tegyük külön fájlba. Például navigációs sáv.

src/components/Navbar.jsx

Írjuk be:

rafce

Ha felkínálja a rövidítés kiegészítését, csak nyomjunk egy Entert.

Felhasználás:

src/App.jsx

import Navbar from "./components/Navbar";
 
{/* ... */}
 
<Navbar />

A komponensek a böngészőben megtekinthetők fejlesztői felületen. Keressünk egy Components fület. Ehhez telepítve kell legyen a böngészőben a React Developoer Tools.

Kép beillesztése

src/components/Navbar.jsx

import logo from '../assets/images/logo.png';
 
const Navbar = () => {
  return (
    <>
        <img src={logo} alt="Logo" />
    </>
  )
}
 
export default Navbar

A props használata

src/components/Header.jsx

Írjuk be:

rafce

src/components/Header.jsx

const Header = (props) => {
  return (
    <div>
        <h1>{props.title}</h1>
        <p>{props.subtitle}</p>
    </div>
  )
}
 
export default Header

Használata:

src/App.jsx

import Navbar from "./components/Navbar";
import Header from "./components/Header";
 
const App = () => {
  return (
    <>
    <Navbar />
    <Header 
      title="Fejlesztők"
      subtitle="Frontend fejlesztők"
    />
    </>
  )
}
 
export default App

Adjunk hozzá stílust

src/components/Header.jsx

const Header = (props) => {
  return (
    <section className="bg-indigo-700">
        <div className="text-center">
            <h1 className="text-4xl text-white">{props.title}</h1>
            <p className="my-4 text-white">{props.subtitle}</p>            
        </div>
    </section>
  )
}
 
export default Header

A props kulcsszó nélkül

src/components/Headers.jsx

const Header = ( {title, subtitle}) => {
  return (
    <section className="bg-indigo-700">
        <div className="text-center">
            <h1 className="text-4xl text-white">{title}</h1>
            <p className="my-4 text-white">{subtitle}</p>            
        </div>
    </section>
  )
}
 
export default Header

Alapértelmezett tartalom

src/components/Header.jsx

const Header = ( {title='Ismeretelen', subtitle}) => {
  return (
    <section className="bg-indigo-700">
        <div className="text-center">
            <h1 className="text-4xl text-white">{title}</h1>
            <p className="my-4 text-white">{subtitle}</p>            
        </div>
    </section>
  )
}
 
export default Header

Kártyák

src/components/Card.jsx

const Card = ({ children, bg = 'bg-gray-100' }) => {
  return (
    <div className={`
        ${bg} 
        p-6 rounder-lg shadow-md
        m-4
        `}>
        {children}
    </div>
  )
}
 
export default Card

Használat:

src/App.jsx

import Navbar from "./components/Navbar";
import Header from "./components/Header";
import Card from "./components/Card";
 
const App = () => {
  return (
    <>
    <Navbar />
    <Header 
      title="Fejlesztők"
      subtitle="Frontend fejlesztők"
    />
    <Card>
      <h2 className="text-2xl">Ismeret</h2>
      <p>JavaScript</p>
    </Card>
    <Card bg='bg-indigo-100'>
      <h2 className="text-2xl">Ismeret</h2>
      <p>JavaScript</p>
    </Card>
 
    </>
  )
}
 
export default App

De a kártyáknak készíthetünk egy külön HomeCards komponenst.

Dolgozók táblázatba

app01/
  |-src/
  |  |-assets/
  |  |-components/
  |  |   |-EmployeeList.jsx
  |  |-App.css
  |  |-App.jsx
  |  |-employee.json
  |  |-index.css
  |  |-main.jsx
  |-eslintrc.cjs
  |-.gitignore
  |-index.html
  |-package.json
  |-postcss.config.js
  |-tailwind.config.js
  `-vite.config.js

Az EmployeeList komponens:

src/components/EmployeeList.jsx

import employees from '../employees.json';
 
const EmployeeList = () => {
 
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Név</th>
          <th>Település</th>
          <th>Fizetés</th>
        </tr>
      </thead>
      <tbody>
      {employees.map( (emp) => (
        <tr>
          <td>{emp.id}</td>
          <td>{emp.name}</td>
          <td>{emp.city}</td>
          <td>{emp.salary}</td>
        </tr>
      ))}
      </tbody>
    </table>
  )
}
 
export default EmployeeList

Használata:

src/App.jsx

import EmployeeList from "./components/EmployeeList";
 
const App = () => {
  return (
    <>
      <EmployeeList />
    </>
  )
}
 
export default App

A táblázat kevés stílussal

Nem csak stílus, de egyedik kulcs is:

src/components/EmployeeList.jsx

import employees from '../employees.json';
 
const EmployeeList = () => {
 
  return (
    <table className='w-full'>
      <thead>
        <tr>
          <th>Id</th>
          <th>Név</th>
          <th>Település</th>
          <th>Fizetés</th>
        </tr>
      </thead>
      <tbody>
      {employees.map( (emp, index) => (
        <tr
        key={index}
        className='
        odd:bg-white odd:dark:bg-gray-900 
        even:bg-gray-50 even:dark:bg-gray-800 
        border-b dark:border-gray-700
        '
        >
          <td className='p-3'>{emp.id}</td>
          <td>{emp.name}</td>
          <td>{emp.city}</td>
          <td>{emp.salary}</td>
        </tr>
      ))}
      </tbody>
    </table>
  )
}
 
export default EmployeeList