A Brief Introduction to React

React is a popular JavaScript library created and maintained by Facebook. React is focused on providing a comprehensive set of functions and tools to build the view layer in web applications. React offers a view abstraction focused on the concept of a component. A component can be a button, a form input, a simple container such as an HTML div, or any other element in our user interface. The idea is that we should be able to construct the user interface of our application by just defining and composing highly reusable components with specific responsibilities.

What makes React different from other view libraries for the web is that it’s not bound to the DOMDocument Object Mode by design. In fact, it provides a high-level abstraction called the virtual DOM that fits very well with the web but can also be used in other contexts, for example, for building mobile apps, modeling 3D environments, or even defining the interaction between hardware components. In simple terms, the virtual DOM can be seen as an efficient way to rerender data organized in a tree-like structure.

“Learn it once, use it everywhere.” This is the motto used by Facebook to introduce React. It draws a comparison to the famous Java motto “Write it once, run it everywhere” with the clear intention to underline a fundamental shift from the Java philosophy. The original design goal of Java was to allow developers to write applications once and run them on as many platforms as possible without changes. Conversely, the React philosophy acknowledges that every platform is inherently different and therefore encourages developers to write different applications that are optimized for the related target platform. React, as a library, shifts its focus to providing convenient design and architecture principles and tools that, once mastered, can be easily used to write platform-specific code.

The main reason why React is so interesting in the context of Universal JavaScript development is because it allows us to render React components both on the client and on the server using almost the same code. To put it another way, with React, we’re able to render the HTML code that’s required to display the page directly from Node.js. Then, when the page is loaded on the browser, React will perform a process called hydration, which will add all the frontend-side specific effects like click handlers, animations, additional asynchronous data fetching, dynamic routing, and so on. Hydration converts a static markup into a fully interactive experience.

This approach allows us to build single-page applications (SPAs), where the first render happens mostly on the server, but then, once the page is loaded on the browser and the user starts to click around, only the parts of the page that need to be changed are refreshed dynamically, without requiring a full page reload.

This design offers two main advantages:

• Better search engine optimization (SEO): Since the page markup is prerendered by the server, various search engines can make sense of the content of the page by just looking at the HTML returned by the server. They won’t need to simulate a browser environment and wait for the page to be fully loaded to see what a given page is about.

• Better performance: Since we’re prerendering the markup, this will be already available and visible on the browser, even while the browser is still downloading, parsing, and executing the JavaScript code included with the page. This approach can lead to a better user experience as the content is perceived to load faster and there are fewer browser “flashes” during rendering.

Note: It’s worth mentioning that the React virtual DOM is capable of optimizing the way changes are rendered. This means that the DOM is not rendered in full after every change, but instead, React uses a smart in-memory diffing algorithm that’s able to pre-calculate the minimum number of changes to apply to the DOM in order to update the view. This results in a very efficient mechanism for fast browser rendering.

Now that we know what React is, in the next section, we’ll write our first React component!

Hello React

Let’s start to use React and implement a concrete example. This will be a “Hello World” type of example but it’ll help us illustrate the main ideas behind React before we move on to more realistic examples.

Let’s start by creating a new webpack project in a new folder with the following commands: