ReactJs: A Complete Introduction about it

ReactJs

ReactJs has been one of the most popular JavaScript frameworks for building user interfaces since Facebook engineers introduced it in 2013.

React is also a powerhouse for building SEO-friendly, fast interfaces that are great for high-traffic sites. It’s based on the idea that the UI should be a function of its state, and can be rendered as often as needed. React is an open-source project, so it’s free to use without restriction in both commercial or personal projects.

ReactJs It provides the building blocks for creating interactive UIs, or User Interfaces. React has become one of the most popular technologies for building User Interfaces on the web, and is used by many high profile websites such as Facebook, Instagram, Airbnb, and more. It speeds up the production process of new features by providing declarative language that can be interpreted at runtime.

The reason behind ReactJS popularity is due to the JavaScript library which is flexible, declarative, and efficient and it’s also very easy to learn and use. It was built by the Facebook and Instagram developer teams and is used for creating reusable interactive UI components. However, it is not a mega framework, neither it is a full-stack solution that is going to handle everything from the database to real-time updates over WebSocket connections. It is generally a view layer in the application.

The prerequisites for learning ReactJS is that one should have basic knowledge of HTML5, JavaScript & CSS. Today we will discuss what ReactJS is and how we can learn and work with it. Note that we will talk about React native later.

What is ReactJS and why is it Useful?

Well, talking about React, it’s simply a view layer whereas AngularJS is a complete totally different framework. Therefore, you cannot create a dynamic web application using only ReactJS. In simple words, while Angular is totally a complete JavaScript framework for various application development but React is just simply meant for interface development. Also, remember that AngularJS doesn’t support the Node.js platform, so you don’t use Node.js in the front-end when working with React.

The important feature for which the ReactJS is very popular is due to quickly great hold in virtual DOM (Document Object Model). Changing DOM elements requires a great effort. This is exactly where ReactJS comes to help and very popular among developers. In fact, virtual DOM is much faster than regular DOM. The main reason is that React creates its own and unique Virtual DOM environment where the components remain.

Get ReactJS open-source project from GitHub, for more info click here: https://github.com/facebook/react

Features of ReactJS

Some of the most awesome features of ReactJS are:

• Open Source — ReactJS is an open-source framework that you can use for free
• Support for Asynchrony — ReactJS is another reason for which it’s becoming more popular these days.
• Improved performance — ReactJS focuses on virtual DOM which results in faster loading of web pages. In React, the component logic is written on JavaScript with some templates. This means that you can keep the state outside of the DOM.
• Easy learning curve — While AngularJS has a steep learning curve, it is quite easy to get started learning and using ReactJS thanks to its straightforward API
• Support for components —  You can declaratively build custom UI components and easily render those components in UI. Components in React will enable you to split the UI into independent, reusable pieces. They are usually made of custom HTML elements that exhibit business-specific behaviour.
• Support for JSX — A JSX expression is similar to those of XML and facilitates easily writing components in own language. ReactJS provides wider support for JSX which enables you to use both JavaScript and HTML together. This improves readability and maintainability. Note that you should not constrain to just using JSX when working with React —  you can write code in plain JavaScript also. Both are supported.

Creating a Simple React App

To create a react app follow the approach given below:

Open Command Prompt or Terminal in Visual Studio Code.

Use command CD (Change Directory), to navigate to a particular path on your computer, where you want to create the project.

Write these codes below:

npm install -g create-react-app

where -g stands for Global, that is, available and accessible by anyone on the system.

After this type:

npx create-react-app sampleapp

It will download some files, make sure you are connected to the Internet and wait for a few minutes. After that you can run your project by typing:

cd sampleapp

npm start

You have successfully created React project and it will open on your localhost, browser.

Getting started by building a Simple Program Using ReactJs

Before you start building using ReactJs, you can use npm (nodejs) or Facebook CDN to install React in your system. In this section, we will build a simple program that uses ReactJS.

After installing necessary JavaScript files for React, the below code can be used to create a React component.

import React from 'react';
import ReactDOM from 'react-dom';

class Test extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

The render function is used to create a view that can take HTML tags also.

ReactDOM.render(<Test />, document.getElementById('root')); 

Difference between ReactJs and AngularJs

ReactJs	AngularJs
It is a JavaScript Library. It updates Virtual DOM and updates only Virtual DOM. It flows only in a single direction.	It is a framework. It updates Real DOM and data flows in both directions.
React is more of a simpler form of MVC architecture, which is also easier to create and understand	Angular is somewhat a little complex and it follows MVVM (Model View View Model)
The JSX expression can contain your HTML and other syntax codes. It follows the JavaScript property. This doesn’t mean that React is a subset of HTML.	Angular too can contain HTML and other syntax codes but it is a subset of the HTML part.
It is written in JavaScript	It is written in TypeScript.
It is used where dynamic content is needed such as Facebook, Instagram and Twitter.	It is preferred where the platform is independent like YouTube.

Advantages of ReactJs

• It facilitates the overall process of writing components
• It boosts productivity and facilitates further maintenance
• It ensures faster rendering
• There is React Native for mobile app development
• It is SEO friendly

Summary

As we already have discussed, React is only the view — which is not a complete Web application development framework. It also requires AngularJS. React doesn’t have support for promises, Ajax, event system (sans the vanilla DOM events), data layer, etc.

We have discussed the ReactJS capabilities, a major comparison between ReactJS and AngularJS frameworks and how we can get started using ReactJS. We will more discuss it in later. Stay tuned with Digital Gyan for further articles.