Cheatsheet - React

General

Create a React App with TypeScript template

npx create-react-app uv-app --template typescript

Functional Component

Event Handling

<button onClick={activateLasers}>
  Activate Lasers
</button>

Render List

Option 1

{
  students.map((obj: any, index: any) => (
    <div key={index}> {obj.title} </div>
  ))
}

Option 2

{
  […Array(15)].map((obj: any, index: number) => (
    <p>React is best</p>
  ))
}

Conditional rendering

Type 1: If statement style

{props.hasImage &&
  <MyImage />
}

Type 2: If else statement style

{props.hasImage ?
  <MyImage /> :
  <OtherElement/>
}

Hooks

useState

useEffect

useSelector

Others

Memoization

A. Component

B. Function

API Call using Axios

Higher Order Components (HOC)

Context API

Routing with React-Router

Interface for React Component Props

Interface for React Native Component Props

Interface for React Component Props