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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Setting Up the Angular CLI in Visual Studio for Mac

How to Import SVGs into your Next.js Project?

Day #12 with Cloud Workflows: loops and iterations

Listening to incoming SMS on Flutter with Telephony package

Typescript: Tips and Tricks for Improving Your Coding Skills [Part 1]

Software Automation Frameworks Part I: CasperJS and PhantomJS

This.JavaScript: State of Frameworks- Polymer/Web Components Update

YouTube Video | Modern ES6 — Chapter 7 — Array & Object Destructuring

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

More from Medium

4 practical tasks you must know how to solve before going on your first Junior FE (React) interview…

Some Changes in React Router v6

UseState and UseEffect with React