Scribd Logo
Upload

Welcome to Scribd!

  • 197 views

    React - Js Cheat Sheet

    Uploaded by

    ansarisufiyan6789
    This document provides a cheatsheet on React concepts including JSX, components, props, state, functional and class components, hooks like useState and useEffect, conditional rendering, lists and keys, fragments, higher-order components, forwarding refs, and concurrent features in React 18. It covers foundational React concepts and common hooks in a beginner friendly way.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    React - Js Cheat Sheet

    Uploaded by

    ansarisufiyan6789
    197 views14 pages
    This document provides a cheatsheet on React concepts including JSX, components, props, state, functional and class components, hooks like useState and useEffect, conditional rendering, lists and keys, fragments, higher-order components, forwarding refs, and concurrent features in React 18. It covers foundational React concepts and common hooks in a beginner friendly way.

    Original Description:

    React JS Cheat Sheet from beginner to advanced.

    Original Title

    react.js cheat sheet

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides a cheatsheet on React concepts including JSX, components, props, state, functional and class components, hooks like useState and useEffect, conditional rendering, lists and keys, fragments, higher-order components, forwarding refs, and concurrent features in React 18. It covers foundational React concepts and common hooks in a beginner friendly way.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    197 views14 pages

    React - Js Cheat Sheet

    Uploaded by

    ansarisufiyan6789
    This document provides a cheatsheet on React concepts including JSX, components, props, state, functional and class components, hooks like useState and useEffect, conditional rendering, lists and keys, fragments, higher-order components, forwarding refs, and concurrent features in React 18. It covers foundational React concepts and common hooks in a beginner friendly way.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 14

    React.

    js
    Cheat Sheet
    SWIPE
    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, there 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.

    KEEP SWIPING
    Components
    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.

    KEEP SWIPING
    Components
    Functional components: Initially used for
    stateless 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.

    While class components provide all React


    features via an object-oriented syntax,
    functional components with Hooks are now
    favored for their simplicity and expressiveness.

    KEEP SWIPING
    Creating Components
    Functional components with State:

    KEEP SWIPING
    Class Component with State and Lifecycle
    Methods :

    KEEP SWIPING
    Hooks
    useState

    useEffect

    KEEP SWIPING
    Hooks
    useReducer

    useCallback

    KEEP SWIPING
    Hooks
    useMemo

    useRef

    useTransition

    KEEP SWIPING
    Conditional rendering
    Inline if with Logical && Operator:

    Inline If-Else with Conditional Operator:

    KEEP SWIPING
    Lists and Keys
    Rendering Multiple Components

    Handling Events

    KEEP SWIPING
    Fragments
    Used to group a list of children without adding
    extra nodes to the DOM.

    Higher-order Components (HOC)


    A function that takes a component and returns
    a new component, used for reusing component
    logic.

    KEEP SWIPING
    Forwarding Refs
    Used to pass reft down to child components.

    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.

    KEEP SWIPING
    This cheatsheet covers foundational concepts and
    common hooks in React development, and its beginner
    friendly.
    Remember, React and its ecosystem are vast, and
    continuous learning and practice are key to mastering it.

    Don`t forget to
    leave a .
    Happy coding!

    COMMENT BELOW

    You might also like