[[oktatas:web:react|< React]] ====== React és Vite ====== * **Szerző:** Sallai András * Copyright (c) 2024, Sallai András * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 =====


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:


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

Teszteljük:


import React from 'react'

const App = () => {
  return (
    <>
        App
    
  )
}

export default App

===== Kötés ===== Teszteljük:


import React from 'react'

const App = () => {
  const name = 'János';
  return (
    <>
        App
        Üdv {name}
    
  )
}

export default App

===== Kifejezés kiértékelése =====


import React from 'react'

const App = () => {
  const title = 'Háromszög területszámítás';
  const base = 30;
  const height = 35;
  return (
    <>
    Háromszög
    {title}
    Terület: {base * height / 2}
    
  )
}

export default App

===== Tömb listába =====


import React from 'react'

const App = () => {
  const names = [
    'Erős István',
    'Pancs Elemér',
    'Reputa Gábor'
  ]
  return (
    <>
      Dolgozók
      
        {names.map((name, index) => (
          {name}
        ))}
      
    
  )
}

export default App

===== Feltételes megjelenítés =====


import React from 'react'

const App = () => {
  const isLoggedIn = true;
  return (
    <>
    Választás
    { isLoggedIn ? Üdv!
  : Jelentkezz be }
    
  )
}

export default App

Másik példa:


import React from 'react'

const App = () => {
  const wanted = 5;  
  return (
    <>
    Szavazatok
    { wanted > 5 ? Akarjuk
  : Nem }
    
  )
}

export default App


import React from 'react'

const App = () => {
  const wanted = true;
  return (
    <>
    Szavazatok
    { wanted && Akarjuk }
    
  )
}

export default App

===== Stílus =====


import React from 'react'

const App = () => {
  const wanted = true;
  return (
    <>
    CSS
    Valami
    
  )
}

export default App


import React from 'react'

const App = () => {
  const wanted = true;
  const styles = {
    backgroundColor: 'navy', 
    color: 'white',
    padding: '5px',
  };
  return (
    <>
    CSS
    Valami
    
  )
}

export default App

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

Írjuk be: rafce Ha felkínálja a rövidítés kiegészítését, csak nyomjunk egy Entert. Felhasználás:


import Navbar from "./components/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


import logo from '../assets/images/logo.png';

const Navbar = () => {
  return (
    <>
        
    
  )
}

export default Navbar

===== A props használata =====

Írjuk be: rafce


const Header = (props) => {
  return (
    
        {props.title}
        {props.subtitle}
    
  )
}

export default Header

Használata:


import Navbar from "./components/Navbar";
import Header from "./components/Header";

const App = () => {
  return (
    <>


    
  )
}

export default App

==== Adjunk hozzá stílust ====


const Header = (props) => {
  return (
    
        
            {props.title}
            {props.subtitle}            
        
    
  )
}

export default Header

==== A props kulcsszó nélkül ====


const Header = ( {title, subtitle}) => {
  return (
    
        
            {title}
            {subtitle}            
        
    
  )
}

export default Header

==== Alapértelmezett tartalom ====


const Header = ( {title='Ismeretelen', subtitle}) => {
  return (
    
        
            {title}
            {subtitle}            
        
    
  )
}

export default Header

===== Kártyák =====



const Card = ({ children, bg = 'bg-gray-100' }) => {
  return (
    
        {children}
    
  )
}

export default Card

Használat:


import Navbar from "./components/Navbar";
import Header from "./components/Header";
import Card from "./components/Card";

const App = () => {
  return (
    <>


    
      Ismeret
      JavaScript
    
    
      Ismeret
      JavaScript
    

    
  )
}

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:


import employees from '../employees.json';

const EmployeeList = () => {
    
  return (
    
      {employees.map( (emp) => (
        
      ))}
      
      
        
          Id
          Név
          Település
          Fizetés
        
      
      
          {emp.id}
          {emp.name}
          {emp.city}
          {emp.salary}
        
    
  )
}

export default EmployeeList

Id	Név	Település	Fizetés
{emp.id}	{emp.name}	{emp.city}	{emp.salary}

Használata:


import EmployeeList from "./components/EmployeeList";

const App = () => {
  return (
    <>
      
    
  )
}

export default App

==== A táblázat kevés stílussal ==== Nem csak stílus, de egyedik kulcs is:


import employees from '../employees.json';

const EmployeeList = () => {
    
  return (
    
      {employees.map( (emp, index) => (
        
      ))}
      
      
        
          Id
          Név
          Település
          Fizetés
        
      
      
          {emp.id}
          {emp.name}
          {emp.city}
          {emp.salary}
        
    
  )
}

export default EmployeeList