ReactJS Cheat Sheet (Latest Version)

Introduction

ReactJS is a popular JavaScript library for building user interfaces, particularly single-page applications. It allows developers to create large web applications that can update and render efficiently in response to data changes. The main concepts of React include components, JSX, state, and props.

Basic Concepts

JSX Syntax

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

Components

Function Component

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

Props

function App() {
  return <Welcome name="Sara" />;
}

State (Functional Component)

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>
  );
}

Handling Events

function Toggle() {
  const [isOn, setIsOn] = useState(true);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

Conditional Rendering

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

Lists and Keys

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

Forms

function NameForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + value);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Hooks

useState

  const [state, setState] = useState(initialState);

- **useEffect**

  ```jsx
  import { useEffect } from 'react';

  function Example() {
    useEffect(() => {
      // Code to run after component mounts
      return () => {
        // Cleanup code (optional)
      };
    }, [/* dependencies */]);

    return <div>Example</div>;
  }
  ```

- **useContext**

  ```jsx
  import { useContext } from 'react';

  const MyContext = React.createContext();

  function MyComponent() {
    const contextValue = useContext(MyContext);
    return <div>{contextValue}</div>;
  }
  ```

Context API

const MyContext = React.createContext();

function MyProvider({ children }) {
  const [value, setValue] = useState("default value");

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

function MyComponent() {
  const { value, setValue } = useContext(MyContext);
  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue("new value")}>Change Value</button>
    </div>
  );
}

Custom Hooks

import { useState, useEffect } from 'react';

function useCustomHook() {
  const [state, setState] = useState(initialState);

  useEffect(() => {
    // Effect logic

    return () => {
      // Cleanup logic
    };
  }, [/* dependencies */]);

  return state;
}

Fragments

import React from 'react';

function List() {
  return (
    <React.Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </React.Fragment>
  );
}