Cheatsheet — React

General

Create a React App with TypeScript template

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

Functional Component

Frequently Used

Event Handling

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

Render List

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

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

Memotization

A. Component

B. Function

API Call using Axios

Higher Order Components (HOC)

Context API

Routing with React-Router

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yuvraj Patil

Yuvraj Patil

Loves coding and enjoys learning new technologies. Website: https://.yuvrajpatil.com