Basic Introduction To React.

React JS is a JavaScript library for developing and building fast and interactive user interfaces (UI). It was originally created by a facebook software engineer "JORDAN WALKE" in 2011 and originally become use in the software world in 2013.

Why React?

It helps to break down the complexity of user interfaces by building a bunch of independence and reusable components, which we can combine altogether to build our web application.

The interesting feature of React JS is that you don't have to manually manipulate the DOM in the browser using any of the JavaScript DOM manipulation terminologies, React will automatically figures out the change and then automatically update REAL DOM to keep it in sync with the VIRTUAL DOM whenever it detects any changes in our component.

NOTE: the Real DOM is the Browser DOM while the Virtual DOM is the React Element.

JAVASCRIPT XML (JSX):

JSX is a React syntax used to describe the user interface of our application. The JSX is HTML like syntax but not HTML. This JSX will compiled and convert to plain JavaScript syntax using Babel.

Example:

const welcome = <h1>Hello World</h1>;

The code snippet above is a pure and simple example of JSX and then it will be converted by BABEL to:

var welcome = React.createElement(
    "h1",
    null,
    "Hello World"
);

The createElement method accepts 3 arguments, the first argument is the tag name, the second argument contains the tag attributes and its value while the last argument is the tag value.

Head over to (babeljs.io/repl). it's an online JSX compiler, which will give you more insight on how JSX is being converted.

React Components

Components are pieces of code snippets which we can re-use in all of our application to develop independence user interface (UI). A component can be implemented by the following methods:

Class or Statefull Component:

React component can simply be created using pure JavaScript Class with some state and render method.

import React, {Component} from 'react';

Class Index extends Component {
    state = {};
    render() {
        return <h1> Hello World </h1>;
    }
}

In the above code snippet, the state object will contains all the useful data we need to pass into our component. While the render method present our user interface to the DOM.

Functional or Stateless Component:

React component can also be implemented by pure JavaScript or the latest EcmaScript 6 (ES6) syntax. The Functional component only contains the return keyword, state and render method is not used while declaring user interface with functional component.

// Functional component using pure JavaScript
import React from 'react'

function Index() {
    return <h1> Hello World </h1>;
}

// Functional component using ES6
import React from 'react';

const  Index = () => {
    return <h1> Hello World </h1>;
}

Conclusion: React is a JavaScript library, it's not a complete solution to web application development but it maintains the structure of our user interface so as to make it re-usable with other components.

Thanks for reading.