Cheatsheet - React
Mar 15, 2021
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