Syntax example scan sheet for JSX.

jsx_up_to_speed.jsx

// JSX up to speed

// imports
import React, { useState } from "react";

// functional component with props
const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

// class component with state and event handling
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  render() {
    return (
      <div>
        <h2>Counter: {this.state.count}</h2>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

// using state and effects in functional components
const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((seconds) => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h2>Timer: {seconds} Seconds</h2>;
};

// app component that renders everything
const App = () => {
  return (
    <div>
      <Greeting name="React User" />
      <Counter />
      <Timer />
    </div>
  );
};

export default App;