What And Why React.js

React.js is the most popular front-end JavaScript library for building Web applications. React.js or Reactjs or simply React are different ways to represent React.js. Most fortune 500 companies use Reactjs  In this article, we will learn what React.js (or simply React or Reactjs) is and why we should use Reactjs instead of other JavaScript frameworks like Angular. 

 

 

What is React.js?

 

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. React was first created by Jordan Walke, a software engineer working for Facebook. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012.

 

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. This corresponds to the view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as Angular JS in MVC.

 

React JS is also called simply to React or React.js.  

 

What are the React.js Features?

 

Let us take a closer look at some important features of React.

 

 

React.js properties includes the following

• React.js is declarative
• React.js is simple
• React.js is component based
• React.js supports server side
• React.js is extensive
• React.js is fast 
• React.js is easy to learn 

 

JSX

 

In React, instead of using regular JavaScript for templating, it uses JSX. JSX is a simple JavaScript that allows HTML quoting and uses these HTML tag syntax to render subcomponents. HTML syntax is processed into JavaScript calls of React Framework. We can also write in pure old JavaScript.

  

 

React Native

 

React has native libraries that were announced by Facebook in 2015, which provides the react architecture to native applications like IOS, Android and UPD.

 

React-native is a mobile apps building framework using only Javascript. It uses the same design as React, letting you utilize/include a rich mobile UI library/ declarative components. It uses the same fundamental UI building blocks as regular iOS and Android apps. The best part of using react-native is to allow/adopt components written in Objective-C, Java, or Swift.

 

 

Single-Way data flow

 

In React, a set of immutable values are passed to the components renderer as properties in its HTML tags. The component cannot directly modify any properties but can pass a call back function with the help of which we can do modifications. This complete process is known as “properties flow down; actions flow up”.

 

 

Virtual Document Object Model

 

React creates an in-memory data structure cache which computes the changes made and then updates the browser. This allows a special feature that enables the programmer to code as if the whole page is rendered on each change whereas react library only renders components that actually change.

 

(Source-https://goo.gl/L7NiIT) 

 

Why React?

 

Now, the main question arises in front of us is why one should use React. There are so many open-source platforms for making the front-end web application development easier, like Angular. Let us take a quick look on the benefits of React over other competitive technologies or frameworks. With the front-end world-changing on a daily basis, it’s hard to devote time to learning a new framework – especially when that framework could ultimately become a dead end. So, if you're looking for the next best thing but you're feeling a little bit lost in the framework jungle, I suggest checking out React.

 

1. Simplicity

 

ReactJS is just simpler to grasp right away. The component-based approach, well-defined lifecycle, and use of just plain JavaScript make React very simple to learn, build a professional web (and mobile applications), and support it. React uses a special syntax called JSX which allows you to mix HTML with JavaScript. This is not a requirement; Developer can still write in plain JavaScript but JSX is much easier to use.

 

2. Easy to learn

 

Anyone with a basic previous knowledge in programming can easily understand React while Angular and Ember are referred to as ‘Domain-specific Language’, implying that it is difficult to learn them. To react, you just need basic knowledge of CSS and HTML.

 

3. Native Approach

 

React can be used to create mobile applications (React Native). And React is a diehard fan of reusability, meaning extensive code reusability is supported. So at the same time, we can make IOS, Android and Web applications.

 

4. Data Binding

 

React uses one-way data binding and an application architecture called Flux controls the flow of data to components through one control point – the dispatcher. It's easier to debug self-contained components of large ReactJS apps.

 

5. Performance

 

React does not offer any concept of a built-in container for dependency. You can use Browserify, Require JS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to inject dependencies automatically.

 

6. Testability

 

ReactJS applications are super easy to test. React views can be treated as functions of the state, so we can manipulate with the state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc. 

 

How to create a React app?

 

There are two ways to create React apps. First, you use npm (Node Package Manager) installed on your machine. If you’re using VS Code, you need to make sure you’ve configured your machine to run React code in VS code using npm. You will also need to setup a build environment for React that typically involved use of npm (node package manager), webpack, and Babel.

 

We can also create a React app without npm by directly importing Reactjs library in our HTML code. This is exactly what we will do here. Here are the steps required to create and run a React app without npm.

 

Step 1. Create a simple HTML file

 

Create a simple HTML file with the following HTML and save it as Index.html in any folder you have direct access to. We will open this html file direct in the browser.

<html>
    <head>
        <title>Let's React with npm</title>
    </head>
    <body>
    </body>
</html>

The above HTML file has a head, title, and body, the simplest form of an HTML file.

 

Step 2. Import React library

 

To make React work direct in an HTML document, we need to import the React library in HTML. React library is defined in two .js files. The files differ for development and production as you can see below.

 

The following script imports React library. Copy and paste this code in the <head /> tag of the HTML.

<!-- Load React Libraries -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

The final HTML document now looks like this,

<html>
    <head>
        <title>Let's React with npm</title>
        <!-- Load React Libraries -->
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    </head>
    <body>
    </body>
</html>

Step 3. Placeholder for React Component

 

Once React library is imported, we can use React syntaxes in our code. React uses components to represent UI. Think of a component as a user control that has code to represent visual interfaces and data.

 

To place a component on a page, we need a placeholder where that component will load. We add a <div /> tag inside the <body /> tag of the page and give it an id=“root”.

 

This is the position where our React component will render.

<body>
   <div id="root"></div>
</body>

Step 4. Create a React Component

 

As you may already know, the UI in React is created using components. A component in React is declared as a class. Here is a simple component that displays simple text “react without npm..”.

class HelloClass extends React.Component
{
        render()
        {
        return React.createElement('div', null, 'React without npm');
      }
}

In the above code, React.createElement is react function that creates an element, a <div /> in this case and displays text inside the div.

 

Step 5. Call React Component

 

The final step in the process is to call the React component from JavaScript. The following code React.DOM.render() is responsible for rendering a React component. In this code, the first parameter is the component class name. The render method also takes a root element where the component is rendered. In out case, we render component inside the div id=‘root’.

ReactDOM.render(
    React.createElement(HelloClass, null, null),
    document.getElementById('root')
);

Step 6. Complete code

 

Here is the complete HTML document.

<html>
    <head>
        <title>React's React</title>
        <!-- Load React. -->
        <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
        </head>
        <body>
        <div id="root"></div>
       <!-- This is embedded JavaScript. You can even place this in separate .js file -->
       <script>
            window.onload = function()
            {
                class HelloClass extends React.Component
                {
                    render()
                    {
                        return React.createElement('div', null, 'React without npm..');
                    }
                }
                ReactDOM.render(
                    React.createElement(HelloClass, null, null),
                    document.getElementById('root')
                );
            };
        </script>
    </body>
</html>

Step 7. Run React code

 

To run the above code, create a text file in any text editor such as Notepad or Visual Studio Code, save it as Index.html or other name and open html file in a Web browser.

 

The output will look like this in the browser.

 

 

Summary

 

In this article, we learned what Reactjs is, why to use Reactjs over other JavaScript libraries, and how to create a simple Reactjs app.

 

Learn React 

 

Get started learning React.js free here: React for Beginners.