DEV Community

Cover image for Learn This Concept to be proficient in React Js.
Aurnab Das
Aurnab Das

Posted on

Learn This Concept to be proficient in React Js.

Don't Confuse to learn ReactJs.

๐Ÿ. ๐‚๐จ๐ฆ๐ฉ๐จ๐ง๐ž๐ง๐ญ๐ฌ

  • Functional Components
  • Class Components
  • JSX (JavaScript XML) Syntax

๐Ÿ. ๐๐ซ๐จ๐ฉ๐ฌ (๐๐ซ๐จ๐ฉ๐ž๐ซ๐ญ๐ข๐ž๐ฌ)

  • Passing Props
  • Default Props
  • Prop Types

๐Ÿ‘. ๐’๐ญ๐š๐ญ๐ž

  • useState Hook
  • Class Component State
  • Immutable State

๐Ÿ’. ๐‹๐ข๐Ÿ๐ž๐œ๐ฒ๐œ๐ฅ๐ž ๐Œ๐ž๐ญ๐ก๐จ๐๐ฌ (๐‚๐ฅ๐š๐ฌ๐ฌ ๐‚๐จ๐ฆ๐ฉ๐จ๐ง๐ž๐ง๐ญ๐ฌ)

  • componentDidMount
  • componentDidUpdate
  • componentWillUnmount

๐Ÿ“. ๐‡๐จ๐จ๐ค๐ฌ (๐…๐ฎ๐ง๐œ๐ญ๐ข๐จ๐ง๐š๐ฅ ๐‚๐จ๐ฆ๐ฉ๐จ๐ง๐ž๐ง๐ญ๐ฌ)

  • useState
  • useEffect
  • useContext
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect

๐Ÿ”. ๐„๐ฏ๐ž๐ง๐ญ ๐‡๐š๐ง๐๐ฅ๐ข๐ง๐ 

  • Handling Events in Functional Components
  • Handling Events in Class Components

๐Ÿ•. ๐‚๐จ๐ง๐๐ข๐ญ๐ข๐จ๐ง๐š๐ฅ ๐‘๐ž๐ง๐๐ž๐ซ๐ข๐ง๐ 

  • if Statements
  • Ternary Operators
  • Logical && Operator

๐Ÿ–. ๐‹๐ข๐ฌ๐ญ๐ฌ ๐š๐ง๐ ๐Š๐ž๐ฒ๐ฌ

  • Rendering Lists
  • Keys in React Lists

๐Ÿ—. ๐‚๐จ๐ฆ๐ฉ๐จ๐ง๐ž๐ง๐ญ ๐‚๐จ๐ฆ๐ฉ๐จ๐ฌ๐ข๐ญ๐ข๐จ๐ง

  • Reusing Components
  • Children Props
  • Composition vs Inheritance

๐Ÿ๐ŸŽ. ๐‡๐ข๐ ๐ก๐ž๐ซ-๐Ž๐ซ๐๐ž๐ซ ๐‚๐จ๐ฆ๐ฉ๐จ๐ง๐ž๐ง๐ญ๐ฌ (๐‡๐Ž๐‚)

  • Creating HOCs
  • Using HOCs for Reusability

๐Ÿ๐Ÿ. ๐‘๐ž๐ง๐๐ž๐ซ ๐๐ซ๐จ๐ฉ๐ฌ

  • Using Render Props Pattern

๐Ÿ๐Ÿ. ๐‘๐ž๐š๐œ๐ญ ๐‘๐จ๐ฎ๐ญ๐ž๐ซ

  • Route Parameters

๐Ÿ๐Ÿ‘. ๐๐š๐ฏ๐ข๐ ๐š๐ญ๐ข๐จ๐ง

  • useHistory Hook
  • useLocation Hook

๐’๐ญ๐š๐ญ๐ž ๐Œ๐š๐ง๐š๐ ๐ž๐ฆ๐ž๐ง๐ญ
๐Ÿ๐Ÿ’. ๐‚๐จ๐ง๐ญ๐ž๐ฑ๐ญ ๐€๐๐ˆ

  • Creating Context
  • useContext Hook

๐Ÿ๐Ÿ“. ๐‘๐ž๐๐ฎ๐ฑ

  • Actions
  • Reducers
  • Store
  • connect Function (React-Redux)

๐Ÿ๐Ÿ”. ๐…๐จ๐ซ๐ฆ๐ฌ

  • Handling Form Data
  • Controlled Components
  • Uncontrolled Components ๐Ÿ๐Ÿ•. ๐’๐ข๐๐ž ๐„๐Ÿ๐Ÿ๐ž๐œ๐ญ๐ฌ
  • useEffect for Data Fetching
  • useEffect Cleanup

๐Ÿ๐Ÿ–. ๐€๐‰๐€๐— ๐‘๐ž๐ช๐ฎ๐ž๐ฌ๐ญ๐ฌ

  • Fetch API
  • Axios Library

๐„๐ซ๐ซ๐จ๐ซ ๐‡๐š๐ง๐๐ฅ๐ข๐ง๐ 
๐Ÿ๐Ÿ—. ๐„๐ซ๐ซ๐จ๐ซ ๐๐จ๐ฎ๐ง๐๐š๐ซ๐ข๐ž๐ฌ

  • componentDidCatch (Class Components)
  • ErrorBoundary Component (Functional Components)

๐Ÿ๐ŸŽ. ๐“๐ž๐ฌ๐ญ๐ข๐ง๐ 

  • Jest Testing Framework
  • React Testing Library

๐Ÿ๐Ÿ. ๐Ž๐ฉ๐ญ๐ข๐ฆ๐ข๐ณ๐š๐ญ๐ข๐จ๐ง

  • Memoization
  • Profiling and Performance Monitoring

๐Ÿ๐Ÿ. ๐๐ฎ๐ข๐ฅ๐ ๐š๐ง๐ ๐ƒ๐ž๐ฉ๐ฅ๐จ๐ฒ๐ฆ๐ž๐ง๐ญ

  • Create React App (CRA)
  • Production Builds
  • Deployment Strategies

๐…๐ซ๐š๐ฆ๐ž๐ฐ๐จ๐ซ๐ค๐ฌ ๐š๐ง๐ ๐‹๐ข๐›๐ซ๐š๐ซ๐ข๐ž๐ฌ
๐Ÿ๐Ÿ‘. ๐’๐ญ๐ฒ๐ฅ๐ข๐ง๐  ๐‹๐ข๐›๐ซ๐š๐ซ๐ข๐ž๐ฌ

  • Styled-components
  • CSS Modules ๐Ÿ๐Ÿ’. ๐’๐ญ๐š๐ญ๐ž ๐Œ๐š๐ง๐š๐ ๐ž๐ฆ๐ž๐ง๐ญ ๐‹๐ข๐›๐ซ๐š๐ซ๐ข๐ž๐ฌ
  • Redux
  • MobX ๐Ÿ๐Ÿ“. ๐‘๐จ๐ฎ๐ญ๐ข๐ง๐  ๐‹๐ข๐›๐ซ๐š๐ซ๐ข๐ž๐ฌ
  • React Router
  • Reach Router

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.