What is React and React Components?

What is React, Why should we Learn React?

React is a JavaScript Library for building fast and reactive user interfaces, it was developed at Facebook in 2011 and currently it is the most popular javascript library for building user interfaces

React is now an open source library so there are no licensing issue you can use it in any project you want.

You can see on google Trends React is dominating the frameworks and libraries for building user interfaces such as Angular and Vue.

So if you want to expand your job opportunities as front end developer then you should have React on your resume.

What is component in React?

The heart of all react applications are Components, A Components is essentially a piece of the user-interface.

So when building React Application we build independent isolated and re-usable components and then composer to build complex user interfaces

Every React application has at list one component which prefer as the root component of the application, this component represents the entire application and contains other child components.

So every react application is essentially a tree of components, if you have worked with Angular 2 or higher this will sound familiar to you.

In terms of implementation a component is typically implemented as a javascript class that has some state and render method as example showing below:

Component Example:

class Example{
    state = {};

    render() {
        
    }
}

The state here is the data that we want to display when the component is rendered.

And the render method is responsible for describing what the UI should look like.

The output of this render method is React Element which is the plain simple Javascript object that maps to a DOM Element it is not a real DOM Element it is just a plain JavaScript object that represents the DOM element in memory.

So React keeps a light wight representation of the DOM in memory which we refer to as the Virtual DOM unlike the browser of the Real DOM this Virtual DOM is cheep to create.

When we state the state of the component we get a new React Element, React will then compare this element and children with previous one it figures out what is change and then it will update the part of the real DOM to keep it in sync with the Virtual DOM

So that means when building applications with React unlike vanilla JavaScript or jQuery we no longer have to work with the DOM API in browsers in other words we no longer have to write code and query and manipulate the DOM or attach event handlers with DOM elements like showing in example below:

const element = document.querySelector();

element.classList.add();

element.addEventListener(); 

We simply change the state of our components and React will automatically update the DOM to match that state and that’s exactly why this library is called React (React to state changes) because then the state changes React essentially reacts to the state change and update the DOM

To get more about Virtual DOM I would suggest you to also read this post – Create React Hello World Application from Scratch

React or Angular2+?

The big question around the developer option comes into mind is React or Angular.

Both React and Angular are simple to component based architecture however Angular is a Framework or a complete solution while React is library.

React only takes care of rendering the View and making sure that View is in sync with the state that’s all React does nothin less nothing more for this very reason React has very small API to learn.

So when building applications with React we need to use other libraries for things like routing or calling HTTP services and so on but this is not necessary a bad thing because you get to chose the libraries that you prefer and supposed to being fixed what Angular gives you which often breaks for one version to another.

So overall if you want complete solution with already denied libraries you can go ahed and use Angular with your project but if you want to be flexible and chose best from the market then React is best choice.

This is all about React in Next I will guid to setup your development environment for React.

Must Follow – Click here to learn how to setup your development environment for React