Why Do I Even Need an IDE?

You don’t “need” an IDE; you can always write your code with a text editor. However, an IDE helps write people code and increases productivity. This is done by providing common needed functionality for writing code, such as source code editor, build automation tools, and a debugger, as well as many other functionalities.

When it comes to IDEs, there are many to choose from. Some examples are Microsoft Visual Studio, IntelliJ IDEA, WebStorm, NetBeans, Eclipse, and Aptana Studio.

For this book, I selected Visual Studio Code (VS Code) since it’s a lightweight, free, cross-platform (Linux, macOS, Windows) editor that can be extended with plugins. You may be working for a company that will provide you with a specific IDE, or you may decide to invest and buy a top-rated IDE license. Most top IDEs mentioned offer similar functionalities, so it boils down to what you are used to using, licenses, etc.

You can also pick the Microsoft Visual Studio Express version instead of VS Code, which has reduced functionality compared to Microsoft Visual Studio.

How to Install VS Code?

Choose your platform, and once the download is complete, open VS Code. You should see the Welcome page shown in Figure 1-1.

DOM

The Document Object Model is the API for HTML and even XML documents such as SVG images. The API describes the document by including interfaces that define the functionality of the HTML’s elements as well as any interfaces and types they rely on. The HTML document includes support and access to various things such as interacting with users such as event handlers, focus, copy and paste, etc.

The DOM document consists of a hierarchical tree of nodes (https://developer.mozilla.org/en-US/docs/Web/API/Node), and the node interface allows access not just to the document but to each element, as shown in Figure 1-3.

Figure 1-4 shows the result. You can access the document hierarchical tree structure and the elements that make that tree.

DOM manipulation is the core of modern interactive web pages and can dynamically change the content of a web page. Technically speaking, this can be done using JavaScript with methods such as getElementById and getElementsByClassName as well as removeChild and getElementById("myElement").remove();. These APIs are exposed by the HTML DOM and intended to provide the ability to change code during runtime.

React determines what changes to make to the actual DOM based on the React element representation and do the changes in the background inside a virtual DOM. You can think of the React virtual DOM as a simulation.

Then it commits only needed changes to the actual user’s DOM (browser). The reason behind this process is to speed up performance.

It’s crucial that the actual DOM tree-structured manipulation be as quick as possible. For example, say we have a product page, and we want to update the first item of our product’s list. Most JavaScript frameworks would update the entire list just to update one item, which may contain hundreds of items.

Most modern web pages hold large DOM structures, and this behavior taxes the user too much, resulting in slower-loading HTML pages.

React Virtual DOM Under the Hood

The virtual DOM (VDOM) is a programming concept where an ideal, or virtual, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. The React VDOM’s aim is to speed up this process.

React holds a copy of the HTML DOM (that’s the virtual DOM). Once a change is needed, React first makes the change to the virtual DOM, and it then syncs the actual HTML DOM, avoiding the need to update the entire HTML DOM, which speeds up the process.

For example, when we render a JSX element, every single virtual DOM object gets updated. This process of updating the entire virtual DOM instead of the actual HTML DOM is faster. In the reconciliation process, React needs to figure out which objects changed, and this process is called diffing. Then React updates only the objects in the real HTML DOM that need to be changed instead of the entire DOM tree.

In our code, the JSX code is wrapped inside a ReactDOM.render method . To further dig into the process behind the scenes and understand what’s happening under the hood, we also need to understand Babel and ES5/ES6.

Babel and ES5/ES6

The JSX code we write is just a terser way to write the React.createElement() function declaration. Every time a component uses the render function, it outputs a tree of React elements or the virtual representation of the HTML DOM elements that the component outputs.

ECMAScript version 5 (ES5) is plain old “regular JavaScript,” which was finalized in 2009. It is supported by all major browsers. ES6 is the next version; it was released in 2015, and it added syntactical and functional additions. ES6 is almost fully supported by all major browsers at the time of writing. In fact, the React team in version 17 made many changes to be more consistent and compatible with ES6.

We want to take advantage of ES6 functionality; however, at the same time, we want to be backward compatible with the old ES5 so we can be compatible in all versions of browsers. To do that, we use Babel.

Babel is the library that transpiles ES6 to ES5 (needed for browsers that don’t support ES6). The ReactDOM.render() function , as the name suggests, renders the DOM. The render function is expected to return a virtual DOM (representation of browser DOM elements).

Note that starting from Babel 8, React gets a special function called jsx to replace the render function. In Babel 8, it also automatically imports react (or other libraries that support the new API) when needed, so you don’t have to manually include them anymore if you write to Babel directly.

Also starting from Babel 8, jsx will automatically be the default runtime. You can read more about these changes in my article on Medium: http://shorturl.at/bxPZ7.

Now that we have looked at the React “Hello World” code, we understand why we imported these libraries and what’s happening under the hood. These key concepts are crucial to understanding React. Feel free to return to this chapter if you need a refresher.

In this section, we created a minimalistic stand-alone React application called “Hello World” and reviewed how to works. We installed the VS Code IDE and learned about crucial concepts such as JSX, DOM, the React virtual DOM, Babel, and ES5/ES6.