Ubuntu

React has gained considerable momentum in the last few years and has turned into a mature and stable UI library. It has shown consistent growth since its initial release in March, 2013 by Facebook.

Despite its growth, setting up a React project is a daunting task. To alleviate that Facebook released create-react-app. It can create React apps with no build configuration. However, for a beginner, that may seem like a lot of magic. Also, I personally feel this is not a solution. The problem of understanding the build configurations and various parts of a project is still not resolved. Rather, create-react-app creates another layer, a facade to hide the complexity.

In this article I will set up a functional React project from scratch. This post is best suited for beginners who want to understand the various parts and how they work in synchrony to give us a fluid development experience.

Let’s get exploring.

I am going to use Yarn instead of npm to install the various modules needed during the setup. If you don’t have yarn, you can see the installation instructions here.

Open your terminal and type the following.

The mkdir (make directory) command creates a new react-projectdirectory and cd changes the current working directory to it.

Now run yarn init in the terminal. Yarn will ask a few questions regarding your project and produce a package.json file. The values in the parentheses are default values and you can just press enter to leave them unaltered. This file contains all the information that you entered and lists all the dependencies that are required to develop and run the project.

Installing React and ReactDOM

We have a directory to hold our project. Now we install React and ReactDOM. Type yarn add react react-dom. The add subcommand installs a module in the current project. You can specify more than one module by separating them with a space. Here, we are installing react and react-dom.

Yarn will now fetch the modules including their dependencies and install them. After the installation, you should see that the react-project now contains a directory named node_modules and a file yarn.lock.

node_modules is the actual storehouse of all the modules (and their dependencies) in the current project. In most cases, this directory is managed by yarn, or npm if you used that. You can read more here.

Yarn also generates the yarn.lock file to keep information regarding the module dependencies and their versions. Think of it like this — this file creates a snapshot of all the dependencies that are currently installed. Every time you add or remove a package, this snapshot is updated to reflect the current state. You can delete node_modules and run yarn install (or equivalently just yarn) and node_modules will be recreated.

You may be wondering why we installed react and react-dom. The authors of react made a distinction between the library which defines and creates the view components (i.e React) and the library which renders (i.e ReactDOM) the aforementioned components. The DOM in react-dom is the same as Web DOM. Rendering the DOM means creating and displaying the webpage. This kind of code organisation allows react to be used on different platforms by simply changing the renderer. React Native is an example of this. Instead of React being rendered in the browser, the same components are rendered in iOS and Android. Yet another example is ReactVR.

Webpack Development Server

At this stage, we have a way of creating and rendering React components. However, we don’t have any method of sending these components to the browser before it can show them. That is where a web server comes in. We will be using a development server called webpack-dev-server. Type yarn add -D webpack webpack-dev-server. The keen observers would have noticed that we are installing webpack and webpack-dev-server both. Also, the -D is there doing something.

We are installing webpack because webpack-dev-server depends on it. Also, we will be needing webpack a little later. The -D specifies that the modules will be installed as development dependencies. Generally, a project needs two types of module dependencies. Production and Development. Development modules will not be used in production i.e when the package is complete or when the end-user is using the product. However, a developer hoping to make a change in your package will need the development dependencies as well. To this effect, package.json will have an extra key called devDependencies to list the packages needed during development.

Creating Your First React App

Create two files in the react-project directory: index.html and index.js. You can do this via the terminal by typing touch index.html index.js in Linux and macOS. In Windows, the easier way would be to open an editor and ‘Save As’ the files as appropriate names and types.

Using your favourite editor, enter the following in the index.html file.

This is a simple HTML file.

It has one div which has the ID root.
It also has a script tag which loads the bundle.js.

This file will contain the React library, the renderer and our components to display.

In the index.js file, enter the following.

Lines #1 and #2 import React and ReactDOM. In Line#5, we create an element of type div using createElement and set the inner value to be ‘Hello World’. Line #5 is an equivalent representation of <div>Hello World</div> in React.

Line#6 defines the place where the rendering will take place. In this case, the div tag of our index.html whose ID is root.

Line#4 is a function invocation which takes two arguments: the Component/Element to render, and the place where it will be rendered. Hence, both the values are appropriately passed.

Running the React App

At this stage, your react-project directory should look like this —

Before you can see the marvel of your work, you need to do one more thing: Run the server. If you type webpack-dev-server in the terminal, you will get the error command not found. This happens because we did not install webpack-dev-server globally. We need to use npm scripts or equivalently yarn scripts to run webpack-dev-server. Along with it, we also need to provide webpack-dev-serve an entry file. For now, think of entry file as the file which will be served by the dev server. We pass the filename as command line arguments to the dev server as shown below.

Open package.json in your favourite editor and make changes such that it results in this file —

Focus on lines #6 to #8. We used a key called scripts and its value is an object. In this object, we specify the names of the commands and the actual command that the name will execute as key-value pairs. For example, startexecutes webpack-dev-server index.js. The names are arbitrary and can be anything. More info here.

Now, in your terminal type yarn start to execute the command associated with start. If everything goes well, then you should see something like this —

You can see now that the project is running at http://localhost:8080/.

Navigate to this link and you’ll see ‘Hello World’ printed.

Theoretically, you can build any React applications using only the tools listed above. However, in part 2, we will see how we can greatly simplify the development process by including linters, bundlers, JS transpilers, and other utilities.

JSX and React

In the last article we saw that to write <div>Hello World</div> in React, we wrote React.createElement("div", null, "Hello World"). If we want to render the following simple HTML on a page

We need to write this in React.

This looks scary! Not to mention that it is difficult to read, maintain, or understand what is going on in between all the nulls.

We, as programmers, can do better.

Facebook already realised this problem. Writing components or elements using “pure” React API was not going to work. So they created an easier-to-understand extension of React. They called it JavaScript Syntax eXtension (JSX for short). It resembles HTML syntax with few minor changes. However, JSXs are expressions of JavaScript, unlike HTML. By that I mean that you can do this: const hello = <h1>Hello</h1>. It is perfectly valid code. Under the hood, they become regular React.createElement functions. Hence, they can leverage the full power of JavaScript. You can read the full introduction here.

But now we have a problem. If you change the index.js page to include JSX, like this — you get an error.

Notice how line 5 has been changed to JSX. If we run server again, we will not get our usual output. Instead, we will get an Unexpected Token error.

The problem is that React still does not understand JSX. JSX is for our convenience and visual aid. So before you can start using JSX, you need something that can transform the JSX to a bunch of createElement functions.

Navigating through the Babel Ecosystem

The transformer that we spoke about in the last paragraph is called a transpiler. A transpiler is a program that converts the source-code of one programming language to an equivalent source-code of another programming language. In this case, it is JSX to normal React/JavaScript functions. The transpiler that we are going to use is Babel.

You know the drill by now. You need to install babel using yarn. Type yarn add -D @babel/core @babel/preset-react. We are using the latest versions of these packages. Notice that we have installed two modules: babel/core and babel/preset-react. The reasons are as follows-

Babel Core: This is heart and soul of the Babel compiler. Consider this as the engine that is going to run the transpiler. It contains the transformation logic. But the core doesn’t do anything on its own. You need to specify individual plugins for specific transformations.

Babel Plugins: The Babel core is able to carry out conversions from one language type to another. However, we still have to specify that we need to convert from JSX to normal JavaScript. For that we need to install plugins. Think of a babel plugins as a small unit of transformation. A plugin specifies

What source code to transform
What it should be transformed into
How to do that transformation

Now, React JSX transformations require 6 plugins, namely:

@babel/plugin-syntax-jsx
@babel/plugin-transform-react-display-name
@babel/plugin-transform-react-jsx
@babel/plugin-transform-react-jsx-self
@babel/plugin-transform-react-jsx-source

But developers of Babel thought that we, as programmers, can do better. Since a lot of people are going to use React, why not make pre-existing sets of these plugins and call it presets.

Babel presets: The presets are a collection of plugins. So, instead of installing the 6 individual plugins for React, we just installed babel/preset-react. It will install the 6 plugins for us.

To learn more about Babel, you can try the interactive editor here and see live transpilation.

So now you also have a way of using JSX in your React Apps. If you run web server again, you will still get the same Unexpected Token error. What happened now?

The Webpack Jungle

We have the transformer: Babel. We also have the transform-ee: JSX. What we need now is the program that initiates the transformation. We can do so by installing babel/cli and giving it the JS file to transform. But this would mean that every time we change the source code, we would need to run babel again.

We, as programmers, can do better. We can make this process automatic.

We are going to use webpack to achieve this. Webpack is a module bundler. It is capable of a lot of things which we will discuss in a moment. Remember that we already installed webpack in Part 1. Webpack has 4 core concepts to understand.

Entry: The module(s) from where to begin bundling.
Output: The location where to emit the bundled modules.
Loaders: Loaders are utilities that enable webpack to do some processing per module. Loaders can transform, or pre-process modules before the modules are bundled together.
Plugins: The plugins do not work per module. They extend the capabilities of webpack itself. For example- Let’s say you need to minify or compress the bundle. You can use webpack plugins to do these tasks.

Let’s talk about module bundling now.

Remember how we have installed 6 modules ( 2 dependencies + 4 devDependencies ) till now. They are React, React DOM, webpack, webpack-dev-server, babel/core, and babel/preset-env.

To render react components in the browser, the react and react-dommodules must be present while the HTML page is being evaluated. Now there are two ways to do this:

In the first, we put three <script /> tags. The first two contain the reactand react-dom scripts. The third one will contain our components that needs to be rendered. Like this:

<script type="text/javascript" src="url/of/react.js"></script>
<script type="text/javascript" src="url/of/react-dom.js"></script>
<script type="text/javascript" src="url/of/our/components.js"></script>

But this method is not used.

In the other method, we can bundle react, react-dom and our components into a single file. We can name the resulting file as main.jsand just add that one file into the script tag of our HTML page. Look at line 9 of index.html. We added main.js in src of script tag. This main.js was provided by webpack-dev-server after it did the bundling using webpack.

You may be thinking that adding 3 scripts is not that big of a deal. But imagine if your application has 20 modules or 50 modules. Also, what if those modules depend on each other. You will always need to put your script tags in such an order that the dependent is always after the thing that it is depending on. It is also called topological sorting. Doing this by hand can be very consuming and error prone.

Configuration, configurations, everywhere!

Before you can go around bundling modules, webpack needs a configuration file telling it where to begin(entry module) bundling, and where to put the output.

By default, the configuration file for webpack is called webpack.config.js. It contains an object that lists various configurations. For our purposes, we need this configuration.

A few things to note in the config object are:

The entry is an array that lists the modules from where to begin the bundling. It is index.js of Part 1 in our case.
The module key lists configuration regarding modules. It has a sub-key rules that accepts an array of rules applicable to each module.
The rules array comprises objects that has a few keys such as test, loaders, exclude and many more.
The test key is a regular expression(regex) that checks whether a module is a JS module.
The loaders will apply each loader in the array on the modules that passed the test.
In this case it is babel-loader. It will transform JSX to normal functions.
The exclude fields will exclude certain matching paths since they may not be part of our application such as node_modules.

In short, webpack checks each file and if the file extension is .js, webpack runs babel-loader on it, and then includes it in the bundle.

So create a webpack.config.js and paste the above configuration in it. But before you run the project, you need to install babel-loader. Type yarn add -D babel-loader@8.0.0-beta.0. We are adding an @ after babel-loader because we want a particular version of it. In this case, it is 8.0.0-beta.0.

But the struggle is not over just yet. If you type yarn start hoping to see some result on the webpage, you’ll get an error. Again. Now, what more is missing?

Let’s get things straight once again — We have a transformer: Babel. We have the transform-ee: JSX. We have an initiator and a bundler: webpack. We have configurations of webpack. What we need now are configurations of Babel.Yes! Babel also needs configurations. In Babel, we have the core and react-presets. However, we need to inform the core that we have react-presets and it needs to do transformations using these presets. Hence, a Babel configuration file.

Now, there are many ways to specify Babel configurations. One of the ways is to create a file called .babelrc. The rc is related to run command. This convention is a reminiscent of Unix style nomenclature. You can read more here.

In the .babelrc file, paste the following:

It contains one object that specifies that Babel needs to use react-presets for transformations.

Your folder contents should look like the folder structure in the image.

In index.js , replace line 5 with <h1>Hello World with JSX, Babel, and Webpack</h1>.

The final index.js should now look like

Updated index.js with JSX

Now, we can execute yarn start and if everything is set up correctly, you should see “Hello World with JSX, Babel and Webapck” when you navigate to http://localhost:8080/.

Ubuntu

Tuesday, 22 September 2020

LetsEncrypt On Amazon Linux2 + Apache

Install Certbot

2. Execute certbot

Sunday, 19 July 2020

Run Chrome browser without CORS

Windows

OSX

Linux

Thursday, 16 July 2020

GIT: list all branch creator name and creation date

Thursday, 11 June 2020

Use download attribute in anchor element to prompt the user to download resources

Tuesday, 27 November 2018

Find process running on any port

Monday, 11 June 2018

Beginner’s Guide to setting up a React Project