React is Simple- Introduction
Hi ! Fellas,
Welcome! React is Simple. Yes, you read correctly React is Simple. In this series, we will dive deeper and break each concept into bits and pieces.
So without wasting time, let’s get started.
Before starting I hope you are familiar with:-
- HTML
- Javascript(JS)
What is React?
1.) Javascript library to build User Interface
According to React documentation , React is “A JavaScript library for building user interfaces”.
React is an open-source javascript library for building User Interface created by Facebook.
Let’s understand each term.
According to Wikipedia ,“React js is created by Jordan Walke , a software engineer at Facebook and released in 2013”.
It is managed by Facebook and a community of individual developers. Being open-source, every programmer has access to its source code and they can inspect, enhance and modify.
React is used to build fast dynamic and interactive User Interface for web and mobile application. Yes, React is only responsible for UI. React only controls the view of Model View Controller(MVC) architecture.
In MVC, view defines how the UI will look like. View pass user response to controller and also takes data from it to display in browser.
2.) React is declarative.
If you are coming from a programming background you might be familiar with Programming Paradigms. If not let’s see.
Programming Paradigms is a style or approach to solving a problem using its tools and techniques.
Declarative programming is one of the programming paradigm. In declarative programming we define “WHAT to do” instead of “HOW to do”.
Instead of providing the recipe to bake the cake, we shall give order and baker will make ready the cake for you.
HTML,SQL can be the example for the declarative programming.
In React you have to define what you have to accomplish and DOM will take care of rest.
In React DOM is declarative. You never interact with it. UI will be updated on when the state will change. The React way is “Simply put whatever you want to display at UI in the render block”. The declarative approach makes React code more predictable and easier to debug.
3.) React is Component Based.
Yes, React allow you to break the complete webpage into small chunks of reusable code. This reusable piece of code is called a “component”. We can use this component to display multiple times with different data. This makes it easier for new developers to find things and maintain the code.
In the above image, you can assume the black box as a single component. We are using that single component to render multiple UI. React encapsulate the component to manage their own states. Since each component is written in javascript so you can pass the data through your app.
We can also bind the multiple components into a single container component. In the above image, you will find different colored boxes which are wrapped under one single black box.
