Introduction to React

Hello Folks !

Let me introduce you to React in this article.

According to the official documentation , React is

A JavaScript library for building user interfaces

Yup, its just a one-liner, but a powerful one !!

React is a declarative, component-based, open-source, JavaScript library developed by Facebook.

Declarative means, only the user interface is updated whenever there are changes in the state, we never interact with DOM (Document Object Model) each time the state changes.

Component-based means, we can build small, independent, reusable piece of code and pass relevant diverse data to them when we render it to the user interface.

For more clear understanding, let us relate React Components to one of our daily apps we use, [ yes you guessed it right ! ] Instagram.

I'm sure you can recognize this panel, and observe a common pattern.

The common pattern here is the design of each button or icon used. Think of it in this way ,

Each button serves 2 purposes,

Icon to be displayed
Page to be rendered on tap of the icon

Now, while designing the bottom navigation you pass these information as props to the component ( props are nothing but properties or information that you want to display )

First you need to build a BottomNavTab component which can be used as a template.

<BottomNav>

       <BottomNavTab  icon = {HomeIcon}    link = {homePage} />
       <BottomNavTab  icon = {SearchIcon}  link = {explorePage} />
       <BottomNavTab  icon = {NewPostIcon} link = {newPostPage} />
       <BottomNavTab  icon = {HeartIcon}   link = {notificationsPage} />
       <BottomNavTab  icon = {ProfilePicture} link = {profilePage} />

</BottomNav>                   // don't forget the closing tags

Here, icon and link are props which are passed to the BottomNavTab Component.

To deduce, BottomNavTab Component is a reusable component which avoids the need to write the same code multiple times just to display different information (declarative).

So, why use React ? why not other JavaScript libraries ? 🤔

These are some pro's you need to check out :