Sharing Is Caring:

React JS 100 Key Concepts Part 1 – Concepts 1 to 15 Part 1

  • First Part of React JS 15 Key Concepts – Video number 1 / 10
  • Rating: 4.2 out of 54.2 (5 ratings)
  • 459 students
  • 1hr 48min of on-demand video
  • Created by Sampurna Atmaramani
  • English

What you’ll learn

  • Understanding of React JS Single Page application concepts
  • Understanding the important and sensitive topics such as React Props State Lifecycle Methods Virtual DOM React Router
  • Understanding Hooks Context API Redux Higher-Order Components (HOCs) ,Render
  • Reconciliation, Unidirectional Data Flow, Synthetic Events, Event Handling


  • Good if you have Javascript and HTML Knowledge


In this first part , you will be able to learn following topics

I am in the process of preparing a video series on other 8 topics also as provided after the below list of topics – please feel free to subscribe my other videos as well

  1. React:
    • Understand the fundamentals of React.js and its key concepts.
    • Learn how to set up a development environment for React projects.
    • Build a solid foundation in React syntax, components, and JSX.
  2. Props:
    • Understand the concept of props and how to pass data from a parent component to a child component.
    • Learn how to use props to customize and configure reusable components.
    • Explore different ways of passing props, including default values and destructuring.
  3. State:
    • Understand the concept of state and its role in managing dynamic data in React components.
    • Learn how to initialize and update state using setState.
    • Explore the use of state to build interactive and dynamic user interfaces.
  4. Lifecycle Methods:
    • Gain a comprehensive understanding of React’s component lifecycle and the different phases it goes through.
    • Learn how to leverage lifecycle methods to perform specific actions at various stages of a component’s lifecycle.
    • Understand the deprecation of certain lifecycle methods in newer versions of React.
  5. Virtual DOM:
    • Understand the concept of the Virtual DOM and its role in optimizing React’s rendering process.
    • Learn how React’s reconciliation algorithm works to efficiently update the DOM.
    • Explore the benefits of using the Virtual DOM in terms of performance and user experience.
  6. React Router:
    • Learn how to set up routing in a React application using React Router.
    • Understand how to define routes, handle navigation, and create nested routes.
    • Explore advanced features of React Router, such as route parameters and route guards.
  7. Hooks:
    • Understand the motivation behind React Hooks and their benefits.
    • Learn how to use built-in hooks like useStateuseEffect, and useContext.
    • Explore custom hook creation and how to leverage hooks to write more concise and reusable code.
  8. Context API:
    • Understand the Context API and how it enables global state management in React applications.
    • Learn how to create and consume context using the createContext and useContext hooks.
    • Explore advanced usage patterns of the Context API, such as nested contexts and context composition.
  9. Redux:
    • Gain a thorough understanding of Redux and its core principles.
    • Learn how to set up Redux in a React application and manage global state.
    • Explore concepts such as actions, reducers, and the Redux store, and understand how they work together.
  10. Higher-Order Components (HOCs):
    • Understand the concept of Higher-Order Components and their role in code reuse and composition.
    • Learn how to create and use HOCs to add additional functionality to React components.
    • Explore common use cases for HOCs, such as authentication and authorization.
  11. Render:
    • Understand the rendering process in React and how components are rendered to the DOM.
    • Learn about conditional rendering techniques based on state and props.
    • Explore performance optimizations related to rendering, such as shouldComponentUpdate and React.memo.
  12. Reconciliation:
    • Gain a deep understanding of React’s reconciliation process and how it determines what needs to be updated in the DOM.
    • Learn about the diffing algorithm and how React efficiently updates the UI by comparing the previous and current Virtual DOM trees.
    • Understand strategies for optimizing reconciliation, such as using unique keys and minimizing component updates.
  13. Unidirectional Data Flow:
    • Understand the concept of unidirectional data flow in React and its advantages.
    • Learn how to design React applications using a single source of truth for data.
    • Explore patterns such as state lifting and data sharing between components.
  14. Synthetic Events:
    • Understand the concept of synthetic events in React and how they differ from native browser events.
    • Learn how to handle and respond to events in React components.
    • Explore common event handling patterns and techniques.
  15. Event Handling:
    • Learn how to handle different types of events in React components, such as onClick, onChange, and onSubmit.
    • Understand how to write event handlers and update state or trigger actions based on user interactions.
    • Explore advanced event handling techniques, such as event delegation and event bubbling.
Read Also -->   Programming Fundamentals for Beginner (C#,javascript,php)

Dear Friends – Below is the list from other Video series – in the transit now – will release them shortly

1. Conditional Rendering

2. List Rendering

3. Fragments

4. Error Boundaries

5. Refs

6. Portal

7. Key

8. PropTypes

9. CSS-in-JS

10. Inline Styling

11. CSS Modules

12. Styled Components

13. CSS Preprocessors (e.g., Sass, Less)

14. CSS Frameworks (e.g., Bootstrap, Material-UI)

15. React Testing Library

16. Jest

17. Enzyme

18. Code Splitting

19. Lazy Loading

20. Suspense

21. Higher-Order Functions

22. Functional Components

23. Class Components

24. PureComponent

25. Memo

26. Render Props

27. Context Consumer

28. Context Provider

29. React.memo

30. useEffect Hook

31. useState Hook

32. useContext Hook

33. useReducer Hook

34. useMemo Hook

35. useCallback Hook

36. useRef Hook

37. Custom Hooks

38. Controlled Components

39. Uncontrolled Components

40. Higher-Order Reducers

41. Actions

42. Reducers

43. Store

44. Middleware

45. Thunks

46. Redux DevTools

47. Selectors

48. Flux Architecture

49. Animation Libraries (e.g., React Spring, Framer Motion)

50. Form Libraries (e.g., Formik, react-hook-form)

51. Internationalization (i18n)

52. React Intl

53. Stateful Components

54. Stateless Components

55. JSX (JavaScript XML)

56. JSX Expression

57. JSX Attributes

58. JSX Fragments

59. JSX Spread Attributes

60. JSX Children

61. JSX Self-Closing Tags

62. JSX Loops

63. JSX Inline Styling

64. JSX Composition

65. JSX Transformation

66. React DOM


68. Router Components (BrowserRouter, HashRouter, MemoryRouter)

69. Route Component

70. Switch Component

71. Link Component

72. NavLink Component

73. Redirect Component

74. History API

75. Router Props (history, location, match)

Read Also -->   Knowledge Exchange: Data Analytics in a Nutshell

76. Router Configuration

77. Router Guards

78. Provider Component

79. Consumer Component

80. Redux Saga

81. Component Testing

82. Unit Testing

83. Mocking

84. Data Fetching Libraries (e.g., Axios, SWR)

Who this course is for:

  • This series is for React JS All Levels Aspirants

Show less

Course content

15 sections • 15 lectures • 1h 47m total lengthCollapse all sections

What is React JS1 lecture • 8min

  • What is React JS08:04
  • does React Reloads the page?1 question
  • What does SPA stand for?1 question

What is React JS Props1 lecture • 7min

  • React JS Props06:49
  • What are props in React.js?1 question
  • What is the purpose of PropTypes in React.js?1 question

React JS State Management1 lecture • 8min

  • React JS State Management07:57
  • How can you update the state of a component?1 question

React JS LifeCycle methods1 lecture • 5min

  • React JS LifeCycle methods05:10
  • Which lifecycle method is called right before a component is added to the DOM?1 question
  • True or False: The render method is considered a lifecycle method in React.1 question

React JS Virtual DOM1 lecture • 6min

  • React JS Virtual DOM06:23
  • Which algorithm is used for virtual DOM1 question

What is React Router1 lecture • 7min

  • What is React Router06:53
  • React Router Help in redirection – true or false1 question
  • What is the purpose of React Router in a React.js SPA?1 question

What is React Hooks1 lecture • 3min

  • What is React Hooks02:33
  • React Hooks are userful in Class based component approach -true or false ?1 question
  • What is the purpose of React Hooks?2 questions

What is Context API1 lecture • 6min

  • What is Context API05:38
  • Context API is useful for page redirection from one page to other, true or false1 question
Read Also -->   Crack Business Analysis!

What is React Redux1 lecture • 20min

  • What is Redux19:33
  • What is React Redux?2 questions

Higher Order Components1 lecture • 4min

  • Higher Order Components04:27
  • What is a Higher-Order Component (HOC) in React?2 questions

React Rendering1 lecture • 5min

  • React Rendering04:52
  • Which of the following is an advantage of SPAs?1 question

React JS Reconciliation and Virtual DOM Diffing algorithm techniques1 lecture • 9min

  • React JS Reconciliation and Virtual DOM Diffing algorithm techniques08:41
  • What is React JS Reconciliation?2 questions

React JS Unidirectional Data Flow1 lecture • 8min

  • React JS Unidirectional Data Flow08:17
  • What is Unidirectional Data Flow in React.js?1 question
  • True or False: In React.js, data should only be modified through state updates a1 question

Synthetic Events1 lecture • 6min

  • Synthetic Events06:10
  • What are Synthetic Events in React?1 question
  • How does React handle Synthetic Events?1 question

Event Handling1 lecture • 6min

  • Event Handling06:08
  • True or False: SPAs rely on JavaScript frameworks to perform rendering and data1 question

👇👇👇👇 Click Below to Enroll in Free Udemy Course 👇👇👇👇

Go to Course

👇👇 See Also 👇👇

Join Us Join Us Join Us
Sharing Is Caring:

Leave a Comment

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock