Scribd
Upload
2 views

React Cheatsheet

Uploaded by

NIKHIL PATANGE
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

React Cheatsheet

Uploaded by

NIKHIL PATANGE
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

ReactJS

Cheatsheet

Pixaflip Technologies
Basic Concepts
React is a JavaScript library for building
user interfaces.

● React uses a virtual DOM to update


the UI, making it fast and scalable.
● React allows you to create reusable
UI components.

//Basic React App

import React from 'react';


import ReactDOM from 'react-dom';
function App() {
return (
<div>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</div>
);
}

ReactDOM.render(<App />, document.getElementById('root'));

JSX
● JSX is a syntax extension for JavaScript
that allows you to write HTML-like
syntax within your code

const element = <h1>Hello, world!</h1>; //JSX

02
Components
Components are the building blocks of
React applications.

● There are two types of components


in React: function components and
class components.
.

//Functional Component

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

//Class Component

class Greeting extends React.Component {


render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

Props
● Props are used to pass data from a
parent component to a child
component

03
function User(props) {
return (
<div>
<p>{props.name}</p> // It will print “John Doe”
</div>
);
}

ReactDOM.render(
<User name="John Doe"/>,
document.getElementById('root')
);

React Hooks
React Hooks are a set of functions that
allow functional components to have
state, lifecycle methods,

1. useState

● Allows you to add state to functional components in React.


● Returns a stateful value and a function to update it.

const [state, setState] = useState(initialState); //declaring state

<button onClick={() => this.setState({ count: this.state.count + 1 })}>


//Updating State

2. useEffect

● Allows you to use lifecycle methods in functional components in React.


● Runs side effects after every render, or only when certain dependencies
change.

useEffect(() => {
// Side effects go here
}, [dependencies]);

04
3. useReducer

● Allows you to manage complex state in functional components in


React.
● Returns a stateful value and a function to update it based on actions.

const [state, dispatch] = useReducer(reducer, initialState);

4. useMemo

● Memoizes a value to prevent unnecessary re-computations in React.


● Returns a memoized value.

const memoizedValue = useMemo(() => {


doExpensiveComputation(a, b);
}, [a, b]);

5. useRef

● Allows you to create a mutable ref object in React.


● Returns a ref object that persists for the lifetime of the component.

const refContainer = useRef(initialValue);

6. useContext

● Allows you to use context in functional components in React.


● Returns the current context value for a given context.

const value = useContext(MyContext);

7. useCallback

● Memoizes a function to prevent unnecessary re-renders in React.


● Returns a memoized version of the function.

const memoizedCallback = useCallback(() => {


doSomething(a, b);
}, [a, b]);

05

You might also like