Mission 1: Start and boost your dev with React — Your first 5 minutes

7 min readOct 2, 2021

Introduction

Starting working and achieve the mastering of new technologies requires a little while. You need to gather information on how it helps to fulfill our requirements and what are the limitations. I started to get interested in React, as next-generation technology to build up web-based and multi-platform applications, instead to get bounded into platform-specific UI framework (see WPF, Qt for example).

I start together with you a series of tutorials, along with my learning, on React, following React Native which extends it to mobile devices. The aim is to help you and your collaborators to go from development to production in short term.

Let’s start with the setup of the environment and the basics.

I advise you to read first the article as it is, and then take your laptop/pc to set up and experiment with the “hands-on” task.

React in the Nutshell

React is a smart technology to render part of web pages, just what is required, leading to a reactive application. So you can catch now the point for the reason for the name! But how React is different from the rest? Well, the secret is in the management of the virtual DOM. So let’s dive first into this.

DOM vs VIRTUAL DOM

DOM stands for “Document Object Model”. The DOM represents the UI of your application.

DOM gets updated every time something changed in the state of the application UI, but if the DOM is manipulated too often, this will have an impact on performance and making it slow. The Virtual DOM is a representation of the DOM, much faster. React works by operating on Virtual DOM in the following way:

In React every UI piece is a component, and each component has a state. React follows the observable pattern and listens for state changes. When a change in the state of an element occurs then a new virtual DOM tree is created.
The new virtual DOM tree is compared with the previous one
React-DOM is the library that calculates the differences and the best possible method to make these changes with minimal operations on the real DOM. React updates only those objects, in the real DOM. This process is called “reconciliation”. This makes React stand out as a high-performance JavaScript library.

As important take-away message here, you would not need to know how the attribute manipulation, event handling or the manual DOM updates happen behind the scenes.

1. Setup the environment

Now that we have understood why React is different from the rest, we need to set up our environment for development and put our hands on it!

download and install the latest version of nodeJS from nodeJS.org. NodeJS is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
Update the packager manager independently because it gets updated more often than the nodeJS distribution by using the command “npm install npm@latest -g”
Create a folder as the root of your project and on it execute the command “npx create-react-app mySandBoxApplication”. This executes the configuration of the complete development environment and the starting point for your app here called mySandBoxApplication.
Run “npm start” and magically you get the first sample application up and running on your chrome tab. The version that is running is a development version. It can be slower than the one we want to publish for production. We can talk about this later, but I think it is worth mentioning that with the command “npm run build” you will make a build folder with the entire files ready to be published… but are still far from that.

2. Configure your IDE

I advise using Visual Studio Code as the preferred IDE for working with React and web applications.

It is lightweight
It is cross-platform
Great integration with React Development with dedicated extensions

3. Add your project to VS Code

You can add your project in different ways:

Open VS Code and drag and drop the main folder from file explorer/finder into VS Code application
Open a terminal, switch to the main folder of your project and execute “code .”

Prepare VSCode and development with the right extensions for debugging and code efficiency

Add a Terminal to your workspace from the menu View and executes first “npm install”, to install all dependencies, and you will understand later more, and then “npn start” to start the development environment for React.
[MUST] Install Chrome Debugger Extension VS CODE Extension: enable debuggability of your source code, in the sense you can add a breakpoint and inspect your code. After you have imported your project and installed the VS Code extension, click on the Chrome Debugger icon and choose “Create launch.json” and change the port to 3000 (as default for React development). After that, you can add a breakpoint, Launch Chrome debugger, and start debugging.

Note that if you want to have a full set of information during debugging, install also in Chrome the extension called “React Developers Tool”. Now by pressing F12 on Chrome, you get the tab “Component” and you are able to inspect the entire component hierarchy of your React app.

[NICE TO HAVE] Install Simple React Snippets VS CODE Extension: it is nice to have because it avoids you to write too many times the same line of code and you can use quickly and efficiently some abbreviation like “icr” [try it!!]

Structure of the project

By inspecting the structure of the project you get to find two main folders: <public> and <src>.

1. The <public> folder and bundles

The Public folder contains mainly the index.html which acts as a template where you can customize the title but also where WebPack attaches references to several JS files.

WebPack bundles all javascript contained in the <src> folder and make references on index.html. By running the application and debugging with Chrome React Developers Tool we find three packages:

main.chunk.js -> the application code
vendors-main.chuck.js -> contains all libraries that are listed in packages.json
bundle.js -> contains all necessary for the loading of the application

The reason why there are multiple bundles and files is based on efficiency. There is the assumption that the library code will change less frequently comparing with the src application code so that it leverages a sort of cache mechanism. Every time the deployment/loading of the browser is optimized to update main.chunk.js instead of dependencies that have not been changed.

Note that in production the files name will look a little bit different because a hash code will be appended to the file names to enable cache busting, meaning that when a file name changes the browser will be forced to reload the file instead to take it from the cache.

Also considering that the application grows, also more chucks will be generated. WebPack has a limit in size and it is to preserve the optimization for the download of each.

2. The <src> folder

The entry point: index.js

Index.js is the entry point of our application. From the index, we can import images, CSS, and other stuff, but for now, we look at the import of some modules from react: react for the react engine and react-dom for browsers support.

In the example, we import a module called App, a CSS style file, and reportWebVitals which is used to get some report of some metrics from your application.

The extensions of modules are omitted. The “./” refers to the src folder. If this is omitted WebPack will look for an installed npm package with that specified name. Example for React and ReactDOM.

The first argument of render(..) specifies the top-level component of our app that should be rendered, and this is a component called App, instead, the second argument is the HTML element where the App component should be rendered. In this case, it is in an HTML element with id equal to root.

Checking in the HTML index file, there is a div with an ID root, which will be the point where the component <App> will be rendered.