szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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:

<code>
$ 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
</code>


<code>
$ 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 ↗

</code>




<code>
$ 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

</code>

===== Port beállítása =====

<code javascript 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,
  },
})
</code>

===== 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:

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

Teszteljük:

<code javascript src/App.jsx>
import React from 'react'

const App = () => {
  return (
    <>
        <div className='text-6xl'>App</div>
    </>
  )
}

export default App
</code>


===== Kötés =====

Teszteljük:

<code javascript 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
</code>

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

<code javascript 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
</code>


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

<code javascript 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
</code>

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

<code javascript 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
</code>


Másik példa:

<code javascript 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
</code>


<code javascript 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
</code>


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

<code javascript 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

</code>


<code javascript 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
</code>


===== Komponensek =====

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

<code javascript src/components/Navbar.jsx>

</code>

Írjuk be:
  rafce

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

Felhasználás:

<code javascript src/App.jsx>
import Navbar from "./components/Navbar";

{/* ... */}

<Navbar />
</code>


<note tip>
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**.
</note>


Kép beillesztése

<code javascript src/components/Navbar.jsx>
import logo from '../assets/images/logo.png';

const Navbar = () => {
  return (
    <>
        <img src={logo} alt="Logo" />
    </>
  )
}

export default Navbar
</code>

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

<code javascript src/components/Header.jsx>

</code>

Írjuk be:
  rafce


<code javascript src/components/Header.jsx>
const Header = (props) => {
  return (
    <div>
        <h1>{props.title}</h1>
        <p>{props.subtitle}</p>
    </div>
  )
}

export default Header
</code>


Használata:

<code javascript 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
</code>


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

<code javascript 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
</code>

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

<code javascript 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
</code>

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

<code javascript 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
</code>


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

<code javascript 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
</code>

Használat:

<code javascript 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
</code>


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

===== Dolgozók táblázatba =====

<code>
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
</code>


Az EmployeeList komponens:

<code javascript 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
</code>


Használata:

<code javascript src/App.jsx>
import EmployeeList from "./components/EmployeeList";

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

export default App
</code>

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

Nem csak stílus, de egyedik kulcs is:

<code javascript 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
</code>
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
