Explain Components in Reactjs?

Web Development
#1

A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.

We can have multiple components in a React application. These components can define its state using state object. React components can communicate by passing state data to each other. The state data sent from the parent component to child component is accepted by the child component using props object.

Parent Child Component Communication in React.js

  • Step 1: Create a new folder on the drive and open it in in VS Code. Name, the folder as react_reading_all_inputs.

  • Step 2: Open Node.js command prompt and navigate to the folder created in Step 1. Since we need package.json for defining application dependencies, run the following command from the command prompt:
    npm init -y

  • Step 3: Add a new folder of name src in the project folder opened in VSCode. In this folder, add a new folder of name app.

  • Step 4: In the app folder, add a new file of name productcomponent.jsx.

  • Step 5: In the project folder, add a new Javascript file. Name this file as main.js.