This content originally appeared on DEV Community and was authored by Ramesh
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.
This content originally appeared on DEV Community and was authored by Ramesh
Ramesh | Sciencx (2025-02-23T06:24:06+00:00) REACT-JS Cheatsheet. Retrieved from https://www.scien.cx/2025/02/23/react-js-cheatsheet/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.