Introduction to ReactJS

React JS is today's most popular JavaScript Library for building User Interfaces, which has created by Facebook. We can build modern, fast Single Page Applications or websites with React.

Is React JS a Library or a Framework?

This is one of the most unclear subjects of React. Let’s make this clear from the beginning. React is a Library, not a Framework.

What is a Library?

A library in programming can be explained as a collection of codes. We use a library to write code in a much simpler way or to import a feature from it into our project. JQuery is a library for example.

We can write JavaScript much simpler by using JQuery, or we can import written JQuery features to our project. The project itself is not dependent on a library.

What is a Framework?

A Framework, on the other hand, is a complete package of code with its functionalities & libraries. A Framework has its own rules, you don’t have much flexibility and the project is dependent on the Framework you use. Angular is an example of a framework.

So React is for building User Interfaces, and how you program the rest of the project is up to you. Like JQuery, you can include React in your project partially, or completely. So React JS is a library.

Now let’s move on to how React works…

React Virtual DOM

To understand the importance of React Virtual DOM, first, you need to know what DOM (Document Object Model) is.

DOM is the representation of the HTML code in a webpage. The document is the webpage itself, the objects are the HTML tags. And finally, the model of DOM is a tree structure:

What is the benefit of Virtual DOM?

Each time you make a change in the code, DOM will be completely updated and rewritten. This is an expensive operation and consumes lots of time. In this point, React provides a solution: The Virtual DOM.

So when something changes:

• React first creates an exact copy of the DOM

• Then React figures out which part is new and only updates that specific part in the Virtual DOM

• Finally, React copies only the new parts of the Virtual DOM to the actual DOM, rather than completely rewriting it.

In classic Frontend programming, we have separated HTML, CSS and JS file structures. React is a bit different. We don’t have separated HTML files in React.

In JSX syntax, we write HTML tags inside JavaScript.

In React, for example, a simple JavaScript variable can be like this:

const element = <h1>Hello!</h1>;

Normally, we can’t assign an HTML tag to a JavaScript variable. But with JSX, we can. The code above you see is neither HTML nor JavaScript. It’s an example of JSX.

So what is this JSX?

JSX (JavaScript XML) is a syntax extension to JavaScript used by React. JSX is basically used to write HTML tags inside JavaScript. Later, the JSX code will be translated into normal JavaScript, by Babel.

In summary, React doesn’t have HTML files, HTML tags are rendered directly inside JavaScript. This approach makes React faster.

Do I have to work with JSX?

You don’t have to use JSX with React, but it is strongly recommended. JSX simplifies React and makes it easier to read. Let me give an example of React code with and without JSX.

React with JSX:

React without JSX:

Some important rules about JSX:

• We can’t return more than one HTML element at once, but we can wrap the elements inside a parent HTML tag:

class Test extends React.Component {
  render() {
    return (
      <div>
        <p>Hello</p>
        <p>World</p>
      </div>
    );
  }
}

• We can use JSX inside for loops, if-else cases:

render() {
    if(condition==true) {
        return <p>This text</p>;
    } else {
        return <p>Another text</p>;
    }
}

• HTML attribute names like “class” becomes “className”, “tabindex” becomes “tabIndex” as camelCase.

<div className="myClass"></div>

• HTML tags must always be closed

Installation

Finally, we follow the instructions below to install React:

• React requires Nodejs. If you don’t have Nodejs on your computer, you can download it from here.

• After installing Nodejs, open your Terminal or Command Prompt and type the following command to create your React app:

npx create-react-app sirius my-app

• Finally, type npm start and the application should start on your localhost.

For step by step installation-

If you reached here , Thank you, see you guys soon!