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

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

Hooks

useState

useEffect

useSelector

Others

Memotization

API Call using Axios

Higher Order Components (HOC)

Context API

Routing with React-Router