Introduction To React JS (React JS Tutorial)

If you landed here you are interested to learn about React js. Here in this React Js Tutorial post, I will give you comprehensive knowledge about React And how it can useful in web developments. We will also give you a short overview of how React Works and how it monitors and maintains the real-time changes in DOM. Then let’s get started.

Table of Contents

What is React JS?

Let’s start with what is React Js? React Js is not a FrameWork but a javascript library. This what makes it different from Angular. In contrast with angular React Js provide a way to create SPA (Single page application). Maintaining your coding style. Means you can use react js along with your favorite individual javascript library. For example, if you are using some javascript library to make Ajax call in your legacy code that you are migrating to React Js Application, Then react js will still allow you to maintain your old code for Ajax with the new functionality of React Js.

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

React Js can be used as a base in the development of single-page or mobile applications. However, React js is only concerned with rendering data to the DOM, and so creating React js applications usually requires the use of additional libraries for state management and routing. Redux and React Js Route are respective examples of such libraries.

Whole React Js architecture revolves around Component and State which create the backbone of the react Js .

React Js Component

React Js is component-based architecture. Components in the react Js are the backbone and are often used for creating reusable elements. React Js Components are used to rendering HTML elements.

Components are like java script function that returns the element that needed to be rendered on UI. The returned React Js element defines what is to be rendered on the user’s screen. Also component as a function takes props as readonly argument which can be used to read values passed to child component from parent component.

In React Js Components can defined in two ways.

Class Based Component.

Example Class Component :

import React, { Component from react";
class Counter extends Component {
render() {
return World</hl+;
export default Counter;

Functional Component.

Example Function component :

	const App2 = () => {
		return <h2>Hello Function Component </h2>;
	};

Virtual DOM

Virtual DOM is another notable feature of React Js. We can say Virtual DOM as an in-memory clone of actual DOM that is rendered on UI. React Js Virtual DOM makes sure that any changes in the state of React Js element or component are updated to actual UI DOM i.e changes made to virtual DOM are in sync with actual DOM. For this purpose react Js uses libraries like ReactDOM

React Js uses in-memory data structure cache to create a virtual DOM which will be compared with the browser’s actual DOM before rendering its elements to actual DOM. React Js update only changed component in actual DOM after comparing the coming update in virtual DOM with Actual DOM.

This process of keeping React Js Virtual DOM in sync with Actual DOM is called reconciliation. And is taken care by reconciliation engine like React Fiber

JSX

React js heavily uses JSX for rendering its element at UI of the user. JSX or Javascript XML is extended version of the javascript. Its structure is similar to HTML syntax and used to build React Js Component. Check Below example to see how much it is similar to HTML

Example :

render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }

Above code which is similar to having HTML syntax is JSX code.

Adding JAVAScript code to JSX

Java script code can be easily added to JSX code using curly braces {}.

Example:

render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>{1+10}</p>
      </div>
    );
  }

Why use JSX in React Js?

Now, your question would be why to go for JSX if we have HTML. The answer is simple React Js JSX have many advantages over HTML

Advantages of using JSX in React Js.

JSX pattern is familiar to every one as it is similar to HTML and HTML is widely know to every web developer.
JSX can use javascript expression with in curly braces.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

3. JSX can help you mentioning HTML Attribute dynamically.

const element = <img src={user.avatarUrl}></img>;

4. React Js JSX can prevent’s injection and XSS attack.

References: Wikipedia, React org

Conclusion

In this post, we learned what is react and how it is different from other js libraries. We got an overview of core elements of react like React Component, React JSX, and React Virtual DOM. We also learned how virtual is different from actual DOM and how changes from virtual DOM is rendered to Actual DOM. And How react’s Virtual DOM help’s in creating SPA ( Single Page Applications).

Thanks, Note.

Thanks for spending you valuable time on this post hope this post was use full to you and you learned something new today. If you like our post please share our post.