top of page

React Fundamentals: Understanding of JSX, components, props, state, lifecycle methods, hooks (useState, useEffect, etc.).

JSX (JavaScript XML)

JSX is a syntax extension for JavaScript, allowing you to write HTML directly within JavaScript. It makes writing React components more intuitive by combining the logic and markup in the same file.


Components are the building blocks of a React application. They are reusable and can be either functional or class-based.

Functional Component:

Class Component:

Props (Properties)

Props are used to pass data from one component to another. They are read-only and help in making components dynamic.


State is a built-in object that stores property values that belong to the component. When the state object changes, the component re-renders.

Using State in Class Component:

Lifecycle Methods

Lifecycle methods are special methods in class components that are invoked at different stages of a component's lifecycle (mounting, updating, unmounting).

Common Lifecycle Methods:

  • componentDidMount(): Invoked after the component is mounted (inserted into the tree).

  • componentDidUpdate(prevProps, prevState): Invoked after the component's updates are flushed to the DOM.

  • componentWillUnmount(): Invoked immediately before a component is unmounted and destroyed.


Hooks are functions that let you use state and other React features in functional components.


0 views0 comments


  • Instagram
  • Facebook
  • Twitter
  • LinkedIn
  • YouTube
bottom of page