npx create-react-app my-app
cd my-app
npm start  # Start the development server

import React from 'react';
const MyComponent = () => {
  return <div>Hello, React!</div>;
};
export default MyComponent;

import React, { Component } from 'react';
class MyComponent extends Component {
  render() {
    return <div>Hello, React!</div>;
  }
}
export default MyComponent;

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

const name = 'React';
const element = <h1>Hello, {name}!</h1>;

const MyComponent = ({ title }) => <h1>{title}</h1>;
<MyComponent title="Welcome to React!" />

import React, { useState } from 'react';
const MyComponent = () => {
  const [count, setCount] = useState(0);
   return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

import React, { useEffect } from 'react';
const MyComponent = () => {
  useEffect(() => {
    document.title = 'Hello, React!';
  }, []); // Empty array for componentDidMount
  return <div>Hello, React!</div>;
};
Handling 

const handleClick = () => {
  alert('Button clicked!');
};
<button onClick={handleClick}>Click me</button>

const MyComponent = ({ isLoggedIn }) => (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
  </div>
);

const items = ['Apple', 'Banana', 'Cherry'];
const List = () => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

const MyForm = () => {
  const [value, setValue] = useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

const MyContext = React.createContext();
const MyProvider = ({ children }) => {
  const [value, setValue] = useState('default');
  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
};

npm install react-router-dom

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

npm start                   # Start the development server
npm run build               # Build for production
npm test                    # Run tests