JSX و React: تعلم كيفية كتابة كود قابل للصيانة – بطاقة مرجعية

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

import { useState } from "React";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

function ButtonClick() {
  function handleClick() {
    console.log("Button clicked!");
  }
  return <button onClick={handleClick}>Click me</button>;
}

const element = <h1>Hello, world!</h1>;

const name = "John";
const element = <h1>Hello, {name}!</h1>;

const image = <img src="scenery.jpg" alt="A beautiful scenery" />;

const element = (
  <div>
    <h1>Welcome</h1>
    <p>This is JSX</p>
  </div>
);

const img = <img src="pic.jpg" alt="scenery" />;

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

import React from "React";
import ReactDOM from "React-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}
<Welcome name="Jane" />;

import { useState } from "React";

function Clock() {
  const [date, setDate] = useState(new Date());
  return <div>{date.toLocaleTimeString()}</div>;
}

import { useEffect, useState } from "React";

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(timer); // cleanup
  }, []);

  return <div>{date.toLocaleTimeString()}</div>;
}

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
}