React Introduction - Learn Step by Step

React is a library for building fast and beautiful web applications. Jordan Walke was the author of React. He was a software engineer at Facebook. Today we will learn and understand React Introduction step by step.

Let's start with React Introduction.

React Introduction

React is a JavaScript library. It was created and maintained by Facebook. Also used for building User Interfaces. React was initially released on May 29, 2013. It was written in JavaScript.

Prerequisite for React

Before starting with React, you should know the following areas:

1. HTML
2. CSS
3. JavaScript

It is good to have additional knowledge:

1. How does the browser render the DOM? 
2. Basic SCSS / CSS materials such as box model, position, etc. 
3. JavaScript core concepts. Ex- Hosting, Call, Apply, Bind, Higher-Order Function, Closure, and Object-Oriented JavaScript. 
4. The basic concept of web apps. Ex - Ajax, SPA (single page Application), responsive web pages, etc.

Longer Definition for React

React is only responsible for the view layer of an application. It means that it is only responsible for rendering UI (User Interface). Such as text, list, buttons, links, etc. React supports live reloading browser, as well as updating whenever the UI changes.

For example, you are creating an e-commerce website. You want to maintain the number of selected items in the shopping bag. Users will add and remove items from the bags.

You can simplify it in React. The number of selected items show in a shopping bag like {selectedItems.length}. React will display it and update it whenever it changes.

React will allow you to reuse the same login in another part of the website UI. For example, you can reuse the same logic without rewriting it on the checkout page.

React is NOT a Framework

React is a library, not a framework.

The difference between a library and a framework is: 

1. The library helps you on only one side 
2. The framework helps you on many sides

Angular is a framework. It handles many things more than UI (dependency injection, CSS encapsulation, interface, etc.). React is a library, so it only takes care of UI parts.

Read Also: https://codeshipguru.blogspot.com/2021/08/top-angular-interview-questions-and.html

For the design system, you must select the design library. Otherwise, use CSS / SCSS to make it beautiful and user-friendly.

What about Web Components?

Web components allow you to create a custom piece of reusable code. We can use it on different web pages/apps. 

All web components are runs in modern browsers.

For example, we can create our new web component named <web-component></web-component>. 

Also, we can add unique styling and functionality to the components. JavaScript or any library framework can use web components.

Revision

1. React is a JavaScript library for building UI(User Interfaces). 
2. React is only responsible for the View layer. 
3. React is not a framework.