REACT-JS Cheatsheet

Ramesh — Sun, 23 Feb 2025 06:24:06 +0000

Components
Functional Component Syntax

Functional Components are the future of React. Despite previously being solely used for stateless UI components, they are now the preferred way of constructing new components

Pure (Functional) Components always generate the same output given the same input (state and props).

Imports/Exports

Default Imports

Named Imports

You can export as many named elements from a file as you wish. To do that you need to use the export keyword without the default keyword.

Importing Named Exports
import { capitalize, fetchUserData, getUserName } from 'path/to/file';

To import the named exports you need to list them explicitly within curly braces with the names they have been exported with.

import { ExampleComponent as AliasedExampleComponent } from 'path/to/file';

import { capitalize as cap } from 'path/to/file';

To create an alias you can use the as keyword followed by the new local name, which will be the name under which the imported component will be used in the current context.
**
Import all
import * as AliasedAllImport from 'path/to/file';**
You can import all of the named exports from a file by using the * as syntax

Props

Using props in Functional Components

With Functional Components, you have to expect props objec_t to be passed from the _parent. You can then access the props on the props object.

A more efficient way to use props in Functional Components is to use destructuring assignment. We can then use the props directly.

What is a redux in reacjts

Ramesh — Sat, 22 Feb 2025 06:24:27 +0000

Why
There are some instances in your application state is needed by multiple components. I will use context if this shared state requires a lot of prop drilling. In the past, Redux was a popular solution to avoid prop drilling. However, I don't believe Redux is needed anymore. React's context api works great for this.

Use Cases - Important!
You should use React context for global state. That being said, there aren't that many pieces of global state. Some good examples of global state are the current user, the current language setting, or a map of feature flags.

You don't need to use context only for global state. Context can be applied to a specific sub-tree of your application.

It's common to have multiple sub-tree specific contexts.

DEV Community: Ramesh

REACT-JS Cheatsheet

What is a redux in reacjts