React JS Component: Components are the building blocks of React applications. Because React is primarily used with the application view (the interactive User Interface dynamics) in mind, React components can be thought of as visual blocks that your web application is composed of. React treats each component as a reusable template.
In React, each component is a bundle of HTML, CSS and JavaScript code which identifies one particular block of your application.
React JS Component Example
For example, here is sample Twitter page @gregsidelnikov looked at from the vantage point of React components.
Programmatically, React components follow in the foot tracks of nested HTML tags. They have parents and children, and the parent can also be a child of another component up the hierarchy chain.
Think of component design as the blueprint of your entire application. Before you start writing the first line of code in your reactive application, it’s a great idea to map it all out on a piece of paper. It’s just an intuitive way of thinking about your page design as a web application with unique elements.
And just like the first time you were learning about regular DOM back in the day and realized that each HTML element (such as P, DIV, TABLE, and others) is actually an object in a long tree-like chain of the Object Model, think of react components as visual areas that are also tied to some sort of software function.
This time, this functionality will be custom-determined by you and the requirements of your application. From these fundamentally basic principles of React, you can now see why Facebook and Instagram love using it.
It’s lightning-fast, it helps break down feed-like elements into software blocks composed of components which are just bundles of CSS, HTML and JavaScript code. This design model is a lot more in touch with app-like behavior rather than just informational websites that use table-like layouts.
Components are hierarchical. They can be children of other components. For the most part, components are tailored for reuse in your application. They contain patterns of code that can be adapted to a wide variety of cases. React code usually follows a pattern of creating chains of these components that work one within another, while retaining fast rendering speed and flexibility.