ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library responsible only for the view layer of the application. It was created by Jordan Walke, who was a software engineer at Facebook. It was initially developed and maintained by Facebook and was later used in its products like WhatsApp & Instagram. Facebook developed ReactJS in 2011 in its newsfeed section, but it was released to the public in the month of May 2013.
A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier. Each component exists in the same space, but they work independently from one another and merge all in a parent component, which will be the final UI of your application.
Every React component have their own structure, methods as well as APIs. They can be reusable as per your need. For better understanding, consider the entire UI as a tree. Here, the root is the starting component, and each of the other pieces becomes branches, which are further divided into sub-branches.
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component API reference here.
- Reusability: can be reused in different situations.
- Replaceable: components can be easily removed or replaced.
- Not context specific: works in different environments or contexts.
- Extensible: components can be extended to change the behaviour.
- Encapsulated: do not expose details of the internal processes or any internal variables or state.
- Independent: components have minimal dependence on other components.
- Ease of deployment: easier to replace existing versions with no impact on the other components.
- Reduced cost: The use of third-party components allows you to spread the cost of development and maintenance.
- Ease of development.
- Reusable: the use of reusable components means that they can be used to spread the development and maintenance cost across several applications or systems.
- Modification of technical complexity: A component modifies the complexity through the use of a component container and its services.
- Reliability: The reliability of each individual component enhances the reliability of the whole system via reuse.
- System maintenance and evolution: Easy to change and update the implementation without affecting the rest of the system.
- Independent: Independency and flexible connectivity of components.
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another, props data is read-only, which means that data coming from the parent should not be changed by child components.
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. (one way from parent to child) Furthermore, props data is read-only, which means that data coming from the parent should not be changed by child components.
To know how to use Props see this example