home
react cheat sheet
A JavaScript library for building user interfaces.
print

Rendering an Element into the DOM (ReactDom)

Let’s say there is a < div > somewhere in your HTML file:

<div id="root"></div>

We call this a “root” DOM node because everything inside it will be managed by React DOM.

const element = <h1>Hello, world</h1>
const node = document.getElementById('root')
ReactDOM.createRoot(node);

React Element

A Simple Component

React components extends React.Component.

class HelloWorld extends React.Component {
  render() {
    return (
      <div>Hello World</div>
    )
  }
}

const node = document.getElementById('root')
const root = ReactDOM.createRoot(node);
root.render(<HelloWorld />);

A Simple function

A stateless component can be replace by a simple function.

const HelloWorld = () => {
  return (
    <div>Hello World</div>
  );
}

const node = document.getElementById('root')
const root = ReactDOM.createRoot(node);
root.render(<HelloWorld />);

Props

Input data that is passed into the component can be accessed via this.props in a React Component or in the parameters in a simple function.

class HelloMessage extends React.Component {
  render() {
    return (
      <div>Hello {this.props.msg}</div>
    )
  }
}

const node = document.getElementById('root')
const root = ReactDOM.createRoot(node);
root.render(<HelloWorld />);

const HelloMessage = (props) => (
  <div>Hello {props.msg}</div>
)

State

Every component can have an internal state.

Initialize

You have to initialize your state in the constructor. When we override the constructor, you have to pass the props to the parents.

constructor(props) {
    super(props);
    this.state = {firstName: 'John', lastName: 'Doe', age: 20};
  }

Modify

To modify the state you have to use the this.setState function. Only the specific change will affect.

this.setState({firstName: 'Johnny'})

If you have to use precedent state, you should give to setState a function.

this.setState((state) => ({ age: state.age + 1 })
react cheat sheet

Conditional Rendering

Use ternary operator

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton />
        : <LoginButton />
      }
    </div>
  );
}

JSX understand null and doesnt display anything il necessary

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <UserDetails />
        : null
      }
    </div>
  );
}

Context

Create the context once

const defaultValue = { ... }
export const { Provider, Consumer } = React.createContext(defaultValue);

Provider

Wrap your application with the provider

render() {
  return (
    <Provider value={/* some value */}>
      <App />
    </Provider>
  )
}

Consumer

A React component that subscribes to context changes. This lets you subscribe to a context within a function component.

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

Requires a function as a child. The function receives the current context value and returns a React node. The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the value argument will be equal to the defaultValue that was passed to createContext().

Routing

React Router allow you to route your application easily

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'

import Home from './home'
import About from './about'
import Page404 from './404'

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" element={Home} />
        <Route path="/about" element={About} />
        <Route path="/404" element={Page404} />
        <Redirect to="/404" />
      </Switch>
    </Router>
  )
}

const node = document.getElementById('root')
const root = ReactDOM.createRoot(node);
root.render(<Routes />);