React Components

react Aug 08, 2019


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

Programmatically, React components follow in the foot tracks of nested HTML
tags. They have parent 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 feedlike 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.


Neeraj Dana

Experienced Software Engineer with a demonstrated history of working in the information technology and services industry. Skilled in Angular, React, React-Native, Vue js, Machine Learning