Programming

ReactJs: A Complete Introduction about it

ReactJs is a part of the JavaScript library, whose main purpose was to build reusable User Interface components. It was developed by Facebook Group, and their main purpose was to create and easy, lightweight and reusable components.

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.

Loading...

The prerequisites for learning ReactJS is that one should have basic knowledge of HTML5, JavaScript & CSS. Today we wil discuss about 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 code below:

npm install -g create-react-app

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

After this type:

npx create-react-app sampleapp

It will download some files, make sure you are connected to Internet and wait for 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.

react example

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, 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 which can take HTML tags also.

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

Difference between ReactJs and AngularJs

S.NoReactJsAngularJs
1.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 direction.
2. React is more of simpler form of MVC architecture, which is also easier to create and understandAngular is somewhat a little complex and it follows MVVM (Model View View Model)
3. The JSX expression can contain your HTML and other syntax codes. It follows JavaScript property. This doesn’t means that React is a subset of HTML.Angular too can contain HTML and other syntax codes but it is a subset of HTML part.
4.It is written in JavaScriptIt is written in TypeScript.
5.It is used where dynamic content is needed such as Facebook, Instagram and Twitter.It is preferred where 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 DigitalGyan for further articles.

Facebook Comments

Show More

One Comment

Back to top button