const element = <div className="container">
  <label htmlFor="name">Enter name:</label>
  <input id="name" />
&lt;/div&gt;</code></pre>
You can also nest child elements inside a parent JSX element:
<pre><code class="language-javascript">const element = (
  &lt;div&gt;
    &lt;h1&gt;I am the title&lt;/h1&gt;
    &lt;p&gt;This is a paragraph&lt;/p&gt;
  &lt;/div&gt;
)

function Button(props) {
  return <button>{props.text}</button>;
}

const root = document.getElementById('root');
ReactDOM.render(
  <Button text="Click me"/>,
  root
);

function App() {
  return (
    <div>
      <Button text="Save" />
      <Button text="Cancel" />
    </div>
  )
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
  }
}

function Button(props) {
  function handleClick() {
    console.log('Clicked!');
  }
  return <button onClick={handleClick}>Click Me</button>
}

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {

    // event handler logic

  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

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

import { useState, useEffect } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = You clicked ${count} times;
  });
  return ( 
    //...
  )
}

const ThemeContext = React.createContext('light');
function Button() {
  const theme = useContext(ThemeContext);
  return (
    <button className={theme}>OK</button>
  );
}

class Form extends React.Component {
  state = {name: ''};
  handleChange = (e) => {
    this.setState({name: e.target.value})
  }
  render() {
    return (
      <>
        <input 
          value={this.state.name}
          onChange={this.handleChange} 
        />
        <p>{this.state.name}</p>
      </>
    )
  }
}

state = {
  name: '',
  email: '' 
};
handleNameChange = (e) => {
  this.setState({name: e.target.value});
}
handleEmailChange = (e) => {
  this.setState({email: e.target.value});  

}


render() {
  return (
    <>
      <input 
        value={this.state.name}
        onChange={this.handleNameChange}
      /> 
      <input
        value={this.state.email}
        onChange={this.handleEmailChange}
      />
    </>
  )
}

state = {

  formData: {

    name: '',

    email: ''

  }

};


handleChange = (e) => {

  this.setState({

    formData: {

      ...this.state.formData,

      [e.target.name]: e.target.value

    } 

  });

}


render() {

  return (

    <>

     <input 

       name="name"

       value={this.state.formData.name}

       onChange={this.handleChange}

     />

     // ...

    </>

  )

}

handleSubmit = (e) => {
  e.preventDefault();
  this.processForm();
}
processForm() {

  // send data to server  

}
render() {
  return (
    <form onSubmit={this.handleSubmit}>
      // inputs 
      <button>Submit</button>
    </form>
  )
}

handleSubmit = (e) => {

  e.preventDefault();

  // validate form 

  if(valid) { 

    this.processForm();

  }

}

function MyComponent() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/some-api')
      .then(res => res.json())
      .then(setData);
  }, []); // empty deps = only on mount
  //...
}

useEffect(() => {
  // refetch data
}, [someStateVar]);

const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
  setLoading(true);
  fetchData().then(data => {
    setData(data);
    setLoading(false);
  })
}, [])

return (
  {loading && <p>Loading...</p>}
  {data && <DisplayData data={data} />}
)

useEffect(() => {
  setLoading(true);
  fetchData()
    .then(setData)
    .catch(error => {
      // handle error  
    })
    .finally(() => setLoading(false))
}, [])

useEffect(() => {
  const fetchData = async () => {
    try {
      setLoading(true);
      const data = await fetchData();
      setData(data);
    } catch (error) {
      // handle error
    } finally {
      setLoading(false); 
    }
  }
  fetchData();
}, [])

<Route path="/user/:id" component={User} />

// User component

const { id } = this.props.match.params;</code></pre>
Query strings:
<pre><code class="language-javascript">&lt;Link to="/posts?sortBy=newest" /&gt;

// Get search string

const { search } = this.props.location;

// ?sortBy=newest


// Parse with query-string pkg 

import queryString from 'query-string';

const { sortBy } = queryString.parse(search); 

// newest

<Route path="/users" component={Users}>
  <Route path=":id" component={User} />
</Route>

<Route 
  path="/dashboard"
  render={() => (
    loggedIn ? (
      <Dashboard />  
    ) : (
      <Redirect to="/login" />
    )
  )}
/>

<Switch>
  <Route exact path="/" />
  <Route component={NotFound} /> 
</Switch>

const history = useHistory();
history.push('/login');