Scribd
Upload
34 views

Reactjs Cheatsheet

React cheet

Uploaded by

Abhijit Solanki
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
34 views

Reactjs Cheatsheet

React cheet

Uploaded by

Abhijit Solanki
Copyright
© © All Rights Reserved
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 8
React.js CHEAT SHEET ony @ Basic Concepts JSX - JavaScript XML. Allows writing HTML structures in JavaScript files using XML-like syntax. Components - Independent, reusable pieces of UI. Can be functional or class-based. Props - Short for properties, these are read-only inputs to components that define attributes or configuration. State - Holds data that might change over the lifecycle of a component. Used in class components and functional components via the useState hook. Functional components and class components are two ways to build components in React, each with its distinct characteristics: * Class Components: Before the introduction of Hooks in React 16.8, this was the only way to create components with state and access lifecycle methods. They require using the class keyword to extend ‘React.Component’ and offer a more verbose syntax. class Welcome extends React.Component { render() { return Hello, {this.props.name}; i em ene @ ¢ Functional Components: Initially used for stateless components (presentational components), the introduction of Hooks has enabled the use of local state, side effects, and other React features, making functional components almost universally preferred for their concise syntax and ease of maintenance. function Welcome! props) <= return Hello, {props.name}; While class components provide all React features via an object-oriented syntax, functional components with Hooks are now favored for their simplicity and expressiveness. ¢ Functional Component with State: eee import React, { useState |} from ‘react’; function Counter( ) | const |count, setCount| = useState(0); return (

You clicked {count} times

ene @ ¢« Class Component with State and Lifecycle Methods : ie Oe class Counter extends React.Component { constructor(props) { super( props ); this.state = { count: 6 }; i componentDidMount() { // ComponentDidMount: Code toe run after component mounts i componentDidUpdate( ) { // componentDidUpdate: Code to run after updating occurs i componentWiLLUnmount( ) { // componentWiliUnmount: Cleanup before component unmounts a render() { Cathet a PT le

You clicked {this.state.count} times

i } Hooks « useState a Oe) const |state, setState| = useState/ inittalState) ; an a 2 « useEffect ees useEffect(() => { // Side effects here return () => { // Cleanup (optional ) zs }, [dependencies |); * useContext const value = useContext(MyContext ); Cm ery=].¢210[Uferzig ‘const |state, dispatch! = useReducer( reducer , initialArg, init); « useCallback const memoizedCallback = useCallback(() => { // Your callback Tunctton }, [dependencies] ); ene @ * useMemo const memoizedValue = useMemo(| ) => computeExpensiveValue’a. b), |a, b]); « useRef eee const myRef = useRef( initialVaLlue) ; * useTransition const |isPending, startTransition| = useTransition| ); Conditional Rendering Inline If with Logical && Operator: {condition && } Inline If-Else with Conditional Operator: {condition ? : } eon Y @ Lists and Keys Rendering Multiple Components {data.map({item) => item={item} />) } Handling Events Le Oe} Sharing state between components by moving it to their closest common ancestor. Context API Used to pass data through the component tree without having to pass props down manually at every level. Used to group a list of children without adding extra nodes to the DOM. ee Higher-Order Components (HOC) A function that takes a component and returns a new component, used for reusing component logic. Forwarding Refs Used to pass refs down to child components. Coe const FancyButton = React. forwardRef((props, ref) => | Concurrent Features in React 18 and beyond ¢« Automatic batching: React 18 automatically batches more state updates. *« Suspense: Lets your components “wait” for something before they can render, making it easier to split code and manage loading states. ¢« useDeferredValue, useTransition: For managing transitions and prioritizing resource loading. Education @topdev_media An a 2) This cheatsheet covers foundational concepts and common hooks in React development. Remember, React and its ecosystem are vast, and continuous learning and practice are key to mastering it.

You might also like