REACT-JS Cheatsheet

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.