A Complete Introduction to ReactJs

ReactJS is a popular JavaScript library used for building UIs. It was developed by Facebook and it has gained immense popularity in recent years due to its efficiency and simplicity.

One of the core concepts in ReactJS is the use of reusable component-based architecture. A component is a self-contained, independent modular unit that can be used as building blocks for creating more complex user interfaces. These components can be reused throughout an application, which greatly enhances the development process and makes code maintenance easier.

ReactJS uses a virtual DOM (Document Object Model) instead of directly manipulating the actual DOM. This means that when changes are made to the UI, ReactJS calculates the minimal number of updates needed and only applies those changes to the real DOM. This approach results in better performance compared to traditional manipulation methods as it minimizes costly manipulations on the actual browser DOM.

The prerequisite 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 completely 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 ReactJS is very popular is due to the quick great hold in virtual DOM (Document Object Model). Changing DOM elements requires a great effort. This is exactly where ReactJS comes to help and is very popular among developers. In fact, virtual DOM is much faster than regular DOM. The main reason is that React creates its own 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.

Getting Started with ReactJS

1. Setup: Install Node.js (Node Package Manager) on your machine if you haven’t already. You can then use npm to install create-react-app globally by running the command `npm install -g create-react-app`.

2. Project Creation: Create a new ReactJS project using `create-react-app my-project-name` in your terminal or command prompt.

3. Code Editing: Open your project in an IDE or code editor of your choice.

4. Component Creation: Inside the “src” folder of your newly created project, you’ll find an “App.js” file. This is where you can define components using JSX syntax.

5. Rendering Components: In the “src/index.js” file, import your App component and modify the ReactDOM.render method to render App instead of the default placeholder content.

6. Starting Development Server: In your terminal or command prompt, navigate inside your project folder and run `npm start`. This will start a development server and open your application in a web browser at http://localhost:3000/.

7. Building Your Application: As you develop your application, make use of reusable components, manage state effectively, and apply best practices for organizing code structure.

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 the 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 the 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')); 

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 discuss it later. Stay tuned with Digital Gyan for further articles.