ReactJS Tutorial# 1 – An Introduction

Pavan

6 years ago

ReactÂ orÂ ReactJS is rapidly taking center stage as one of the leading choices for Application Development. In this tutorial series, we are going to understand and go through some concepts and try to understand how you can take up the development with this fascinating technology.

Tutorial Index

What is ReactJS?

A JavaScript library for building user interfaces.

This is the definition written on their official website.

It is a front-end library developed by Facebook and maintained by a community of individual developers and corporations. Its main purpose is for handling the view layer for web and mobile apps by creating reusable UI components. Right now, it is one of the most popular JavaScript libraries with a strong foundation and large community behind it.

Are you confused?

Imagine you are scrolling through your Facebook news feed ( not that hard to imagine, right? ). You are noticing that your friend posted that crazy photograph from last night. Of course, you are going to like it and go through comments to understand what happen last night because you have an alcoholic blackout. Now while you are reading the comments you see that the number of likes increased by 20 since you liked the picture. And there was no reload of the page. Somehow magically the count of likes changed. This magic is called ReactJS.

Features

React is all about components. You should represent everything as a component. Do you remember the post with the crazy picture from your friend? Well, that is one component which consists of multiple small parts like comments, image, likes and etc, which are also components. And yes, with react your page can and should be broken down into components. This will be of great help during code maintenance when working on larger scale projects.

You already know that the entire web is based on HTML. It all started with a simple HTML code and people went mad back in the 90xs. After that JavaScript appeared with ways to interact with the HTML DOM (Document Object Model). JQuery made it easier to change the content of the HTML DOM. Along the road, there were several JavaScript libraries and frameworks that were released. All these work on HTML code, in other words, you change HTML on basis of JavaScript. But JavaScript is much more powerful than HTML, and because of this, the developers behind React decided to create the HTML itself from JavaScript. Long story short x ReactJS creates the HTML from JavaScript.

Just to be clear, itxs not vanilla JavaScript. Itxs called JSX (JavaScript XML). Wait, wait x What is JSX?

const title = xh1xHello, world!x/h1x;

The tag syntax above is neither a string nor HTML.

This is called JSX, and it is a syntax extension to JavaScript. React developers recommend using it with React to describe what the UI should look like.

But the browsers donxt understand JSX, how do we get the JavaScript out of JSX. For this we use Babel x it is a toolchain that converts JSX to JavaScript that the browsers can understand.

Advantages x what makes ReactJS fast

The main concept behind React is Virtual DOM. Itxs a programming concept where an ideal, or xvirtualx, representation of a UI is kept in memory and synced with the xrealx DOM by a library such as ReactDOM.

A virtual DOM object has the same properties as a real DOM object, only it lacks the real thingxs power to directly change whatxs on the screen. Itxs like a lightweight copy. Manipulating the virtual DOM is much faster than manipulating the real DOM, because nothing gets drawn on-screen.

Virtual, real, faster?

Ok, I know. Letxs explain the whole process.

When you render a JSX element, the virtual DOM object gets updated. Maybe this sounds incredibly inefficient, but the cost for this is insignificant because the virtual DOM can update so quickly for the reason that we mentioned above. Once the virtual DOM has updated, then React compares the current virtual DOM with a virtual DOM snapshot that was taken right before the update. By comparing the new virtual DOM with a pre-update version, React can easily figure out which virtual DOM objects have changed. This process is called xdiffingx. When React knows which virtual DOM objects have changed, it updates those objects, and only those objects, on the real DOM.

In our example from earlier, React would be smart enough to rebuild only the number of your likes and leave the rest of your post alone. This makes a big difference! React will update only the necessary parts of the DOM. This innovation is the main culprit for Reactxs good performance reputation.

Limitations

When you have the first look on React, JSX would, and probably will look really strange to you. I have found this to be a problem with beginners. After all, using HTML as JavaScript is a newer concept, but once you get used to it you will love it.

As we already mentioned React is a library, not a framework. It covers only UI part of the application. As such when building something with React you will need to include extra libraries to handle other parts of an application, such as application state.

There is no predefined way to structure your app (such as Services, Controllers, and Views in Angular). This means that it is the responsibility of the developer to find her/his own ways to effectively manage several parts of the application without a predefined structure.

Environment Configuration

Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application in React.

It sets up your development environment so that without any concern you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You will need to have Node x= 6 and npm x= 5.2 on your machine. Now, you are ready to create your brand new React app:

npx create-react-app my-app
cd my-app
npm start

Conclusion

Todayxs users expect sleek and performant web applications that behave more and more like native apps. Different techniques have been devised to decrease the waiting time for a website to load on a userâs first visit.However, in web applications that expose a lot of interactivity, the time elapsing between a user action taking place and the appâs response is also important.

Native apps feel snappy, and web apps are expected to behave the same, even on a not so good internet connection. These days a lot of modern JavaScript frameworks have sprung up that can be very effective at tackling this problem. React can be safely considered among the most popular and robust JavaScript libraries you can use to create fast, interactive and event-driven user interfaces for web apps.