Élet a React után

Svelte és társai

HTML + CSS + JavaScript

Felépítés

            
<!DOCTYPE html>
<html lang="en">
  <head>
    
    Stopper
    
  </head>
  <body>
    
  </body>
  
</html>

HTML

CSS

              
<style>
  #stopwatch {
    background-color: midnightblue;
  }

  #clock-face {
    color: mintcream;
    font-size: 4rem;
  }

  button {
    background-color: transparent;
    color: mintcream;
    padding: 0.8rem;
  }
</style>

React

Felépítés

            
import React, { useState } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

// CSS (styled-components)

function App() {
  // HTML és JavaScript
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

"HTML" (JSX)

              
function App() {

  // ...

  return (
    
      {secondsPassed}
      
        <button id="start-stop" onClick={onStartStopClicked}>
          {isRunning ? "Stop" : "Start"}
        </button>
        <button id="reset" onClick={onResetClicked} disabled={isRunning}>
          Reset
        </button>
      
    
  );
}

CSS (styled-components)

              
const Stopwatch = styled.div`
  background-color: midnightblue;
`;

const ClockFace = styled.div`
  color: mintcream;
  font-size: 4rem;
`;

const Button = styled.button`
  background-color: transparent;
  color: mintcream;
  padding: 0.8rem;
`;

JavaScript (JSX)

              
function App() {
  const [secondsPassed, setSecondsPassed] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [timerInterval, setTimerInterval] = useState(0);

  function onStartStopClicked() {
    if (isRunning) {
      clearInterval(timerInterval);
    } else {
      setTimerInterval(
        setInterval(() => setSecondsPassed((t) => t + 1), 1000)
      );
    }
    setIsRunning(!isRunning);
  }

  function onResetClicked() {
    setSecondsPassed(0);
  }

  return (
    // ...
  );
}

Svelte

Felépítés

HTML

              

  {secondsPassed}
  
    <button id="start-stop" on:click={onStartStopClicked}>
      {isRunning ? "Stop" : "Start"}
    </button>
    <button id="reset" disabled={isRunning} on:click={onResetClicked}>
      Reset
    </button>

CSS (scoped)

JavaScript

Khaby Lame sem érti, miért ilyen bonyolult a React

React vs. Svelte

...és társai

Endrey Marcell (Wise.com)

HWSW free! Modern webfejlesztés

2022. november 29.

Diák: endreymarcell.hu/presents/hwsw-2022-11