DEV Community

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

Posted on • Edited 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

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

  • BrowserRouter
  • Route
  • Link
  • Switch
  • 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.