React is a framework released by Facebook for creating Single Page Applications (SPA). What is a Single Page Application? Most web applications are traditionally server-side applications. The server holds the business logic, stores data, and renders the website to the client. When a client clicks on a link, it sends a request to the server, and the server will handle this request and send back a response with HTML code which the browser will render and be viewed by the user.

The problem here is that with this approach, the server receives a lot of requests. For example, when we go to a website and click on its Home page, we send a request for which the server has to respond. We click on the About page and it sends another request, and the server responds. We click on Blog and it sends another request and again the server responds. Essentially, traditional websites consist of independent HTML pages and when a user navigates these pages, the browser will request and load different HTML documents.

The many requests, response incurs a lot of time and resources spent on these tasks lead to a slow feeling of web pages, whereas the apps on your mobile phone or desktop feel very fast most of the time.

React wants to bring this app like feeling to the browser where we don’t always have to load new pages each time there is an action from the user. A user still clicks on various links in a SPA.

However, this time, the client handles the requests on its own and will re-render the HTML page through Javascript, so the server is left out here if no data from the server is needed. This is much faster as we don’t have to send data over the Internet. The client doesn’t have to wait for the response, and the server doesn’t have to render the response.

Also, in a SPA, the browser loads one HTML document and when users navigate through the site, they stay on the same page as Javascript unloads and loads different views of the app onto the same page itself.

The user gets a feeling that she is navigating through pages but is actually on the same HTML page. Facebook newsfeed is a good example. Other examples are Instagram or Twitter where the content gets dynamically refreshed without requiring you to refresh or navigate to a different page.

Manipulating DOM Elements Efficiently Loading and unloading different views of the same page involve querying and manipulating DOM elements. Such DOM operations involve adding children, removing subtrees, and can be really slow.

This is where React addresses this shortcoming in manipulating DOM elements efficiently. React does this by updating the browser DOM for us. With React, we do not interact with the DOM directly. We instead interact with a virtual DOM which React uses to construct the actual DOM.

The virtual DOM is made up of React elements that look similar to HTML elements but are actually Javascript objects. It is much faster to work with Javascript objects than with the DOM API directly. We make changes to the Javascript Object (the virtual DOM) and React renders those changes for us as efficiently as possible.

Asynchronous Operations In times when we need to get or send data from/to the server, we send a request to the server. But these are mainly restricted to initial loading and necessary server-side operations like database operations. Besides these operations, we will not frequently need to request from the server. And if we do make server requests, we do it asynchronously, which means we still re-render

the page instantly to the user and then wait for the new data to arrive and incorporate it and re-render only the required view when the data arrives; thus providing a fluid experience.

Thinking in Components A React app is made up of components. For example, if we want to build a storefront module like what we see on Amazon, we can divide it into three components. The search bar component, sidebar component, and product component. A React component contains a JSX template that Components can also contain other components. For example, in products component where we display a list of products, we do so using multiple product components. Also, in each product component, we can have a rating component

StackOverflow Developer Survey Results 2020

#reactjs #web-development #react-redux #javascript #javascript-development #javascript-top-story #startups #latest-tech-stories