Introduction to JavaScript

JavaScript is one of the most popular languages for web development, and it is essential to learn this language in order to create applications that run on web browsers. Apart from web applications, JavaScript can also be used to create desktop, mobile, as well as server-side applications using various frameworks like Meteor, React Native, and Node.js. However, we will focus on web applications for the scope of this chapter.

JavaScript was created by Brendan Eich in the year 1995 and was standardized by ECMA (European Computer Manufacturers Association) in 1997. As a result, JavaScript is also known as ECMAScript (ES) . As the web browsers developed over time, so did JavaScript with the release of ES3 in 1999, ES5 in 2009, and ES6 in 2015. After ES6, there have been minor updates to JavaScript every year, but ES6 is by far the latest major release.

Let us now set up our development environment so that we can begin with practical examples on JavaScript programming.

Setting Up the Environment

In order to start programming with JavaScript, I’ll be using the Visual Studio Code editor which can be downloaded from https://code.visualstudio.com/download. However, you can use any editor of your choice.

Once the editor is up and running, we will create our starter workspace with index.html file. This file will contain our page template and a reference to our JavaScript file (index.js) which will reside in scripts folder. We will use <script> tag to link our JavaScript file with our HTML template. If you want to add styling to your page template, you can also add a css file (style.css) under the css folder and add a reference to it in index.html file using <Link> tag. Your folder structure should look similar to that shown in Figure 1-1.

Note that we have used JavaScript’s getElementById() method to fetch a section from the template and then altered its text by setting the innerHTML property. You can also use getElementsByClassName() method and getElementsByTagName() method in order to access elements by class name and tag name. Since we already set the ID property of the <div> element in our HTML template, we used getElementById() method to fetch the section. We initially stored a reference to this section in a variable and then accessed its property using the variable. This is particularly useful when we have multiple properties to alter. You might not want to go and search for the section every time you want to modify a property. Hence, it is always a good programming practice to store references in variables if you are going to need it multiple times.

The preceding process is shown graphically in Figure 1-2. Note that the figure shows the code that is generated by default. We will need to change it to the abovementioned code to configure the launch setting for our application.

To test the configuration, open index.html file and press Ctrl+Shift+B. The file should open in Chrome, and you should see the output similar to that shown in Figure 1-3.

Now that our development environment is up and running, let’s explore some basic JavaScript concepts.

Constants and Variable Declaration

If you try to execute the preceding piece of code, you might get an error in the console stating that “letVariable is not defined”. This is because you are trying to access letVariable outside its scope. Change the code to the following and you should see the output similar to Figure 1-4:

...

if(true){

 var varVariable = "Variable using var";

}

ResultContainer.innerHTML =  varVariable;

Another difference between let and var is that if you try to access a “let” variable before its declaration, the system will throw an undefined error, but in case of a “var” variable, the system will not throw any error. For example, consider the piece of code in Figure 1-5. The last two lines might give you error for accessing a variable that’s never declared. However, the first two lines will give you no errors. We would always want the system to throw us an error when we are trying to access a variable before its declaration. Thus, it is always a good practice to use the “let” keyword instead of “var” keyword to declare variables.

Rest Parameter

Rest parameter is a feature of JavaScript that was introduced in ES6. It lets us handle multiple function input parameters as an array. It is particularly helpful in scenarios where the number of input parameters to a function is indefinite.

The preceding piece of code will also give you an output of “25” on your HTML template. The only difference here is that only the last two input parameters will be considered as rest parameters, whereas the first two are regular parameters. One of the major benefits of rest parameter is that array operations such as filter, sort, pop, push, reverse, and so on can easily be performed on input parameters.

Destructuring and Spread Syntax

The preceding piece of code will give you “Watermelon” as output. This is because when we use destructuring syntax (variables in square brackets separated by commas on left and an array or object on right), JavaScript automatically extracts values from the array on the right-hand side and starts assigning them to the variables on the left-hand side. Note that the values are assigned from left to right. So, for instance, if there are two variables on the left-hand side and four array elements on the right-hand side, then the first two values from the array will be assigned to the variables and the last two values will be left out. On the contrary, if there are four variables on the left-hand side and just two array elements on the right-hand side, the values will be assigned to the first two variables and the last two variables will be undefined.

The preceding piece of code will give you “Watermelon, Grapes, Guava” as output because the rest parameter syntax will assign all the remaining array elements to the “OtherFruits” variable.

The output of the preceding code should be “20”. What we are doing here is exactly opposite of rest parameter. We are creating a single array of input elements and passing it directly into a function that takes in three different parameters. The function declaration will be similar to that of a regular function. However, notice the syntax that we are using while calling the function (the three dots before the parameter name). This is known as spread syntax and this will do all the work for us. It is identical to the syntax of rest parameter. However, if you use it while calling the function, it will work in an opposite manner. So, instead of collecting input parameters and clubbing it into an array, it will destructure the array of input parameters and assign the values to the variables mentioned in the function declaration. You can also use the rest parameter and spread syntax at the same time. The manner in which it will behave will depend on the context. Let us now look at control loops.

Control Loops

JavaScript provides multiple ways to iterate through loops. Let us look at each one of them with examples.

for

The for loop takes in three parameters: the first parameter is for the initialization of the control variable, the second one is the condition that provides entry to the loop if true, and the last one is increment or decrement parameter that will modify the value of control variable in each loop. These three parameters are followed by the body of the loop:

...

for(let i=0;i<8;i++){

    if(i==1){

        continue;

    }

    console.log("i: " + i);

    if(i==4){

        break;

    }

}

We can use break and continue operators with all kinds of JavaScript loops. The continue operator is used to skip the remaining statements from the body of the loop and skip to the next iteration, whereas the break operator is used to terminate all the remaining iterations of the loop.

Notice the preceding piece of code and its output in Figure 1-6. The loop is conditioned to run for eight iterations and print the number of iteration in each execution. However, for the second iteration, the if condition before the print statement in the body of the loop will evaluate to true and the execution of continue operator will make the loop jump to the next iteration. Hence, we do not see the value “1” in the output. Similarly, for the fifth iteration, the if condition after the print statement will evaluate to true and the execution of break operator will terminate the remaining iterations of the loop. Thus, we do not see remaining values after “4” printed in the output.

do...while

do...while loop is a variation of the while loop which is exit-controlled, which means that the condition that validates the entry to the loop is checked after the completion of an iteration. If true, the loop will execute the next iteration:

...

let fruits = ['Apple', 'Grapes', 'Watermelon'];

let i = 0;

do{

    console.log(i + ': ' + fruits[i]);

    i++;

}while (i < fruits.length);

The output for the forEach, while, and do...while control loop examples should be similar to that shown in Figure 1-7.

There are some more variations of the forEach loop such as for…in and for…of. However, the ones listed earlier are major ones and will suffice for the scope of this chapter. Let us now look at type conversion in JavaScript.

Type Conversion

Firstly, we use toString() method which converts an object into a string. Type of a data member can be determined by passing it to the typeof() method as demonstrated in the preceding example. Then, we use the Number() method for converting string and boolean data types to numeric values. We can also convert values to boolean using the Boolean() method, which is further demonstrated in the example. Note that while doing so, values such as 0, NaN, Undefined, and so on that are empty will be converted to false, whereas all other values will be converted to true. Observe that an empty string will be converted to false, whereas a string with value “0” will be converted to true. The output of the preceding code should be similar to that shown in Figure 1-8.

That is it on type conversion. Let us now look at operators and functions in JavaScript.

Operators

Operators are used to modify the values in a program. The values we modify using operators are known as operands. JavaScript provides multiple categories of operators. Let us discuss each one of them in detail.

Ternary Operator

Ternary operator is made up of three parts: condition, body 1, and body 2. Condition and body 1 are separated by “?” operator, whereas both the bodies are separated by “:” operator. Body 1 will be executed if the condition is true, whereas body 2 will be executed if the condition is false.

Refer to the following piece of code that demonstrates all the operators in JavaScript. On executing, it should give the output similar to that shown in Figure 1-9:

...

var a=16, b=17;

console.log('Arithmetic Operators');

console.log('16+2 = ' + (16+2));

console.log('16-2 = ' + (16-2));

console.log('16∗2 = ' + (16∗2));

console.log('16/2 = ' + (16/2));

console.log('17%2 = ' + (17%2));

console.log('Comparison Operators');

console.log('1 == "1" ' + ('1' == 1));

console.log('1 === "1" ' + ('1' === 1));

console.log('1 != 2 ' + (1 != 2));

console.log('1 < 2 ' + (1 < 2));

console.log('1 > 2 ' + (1 > 2));

console.log('3 <= 3 ' + (3 <= 3));

console.log('3 >= 3 ' + (3 >= 3));

console.log('Assignment Operators');

console.log('16+=2 ' + (a+=2));

console.log('16–=2 ' + (a–=2));

console.log('16∗=2 ' + (a∗=2));

console.log('16/=2 ' + (a/=2));

console.log('17%=2 ' + (b%=2));

console.log('Logical Operators');

console.log('true && false: ' + (true && false));

console.log('true || false: ' + (true || false));

console.log('!true: ' + (!true));

console.log('Ternary Operator');

console.log('true?T:F --- ' + (true?'T':'F'));

Functions

The output in the browser console for the preceding piece of code should be similar to that shown in Figure 1-10.

Closures

The result of the preceding code should be similar to that shown in Figure 1-11.

Now, let us understand what is happening here. When we assign the value of the function to the “increment” variable, the function is executed once and the entire body of the inner function is assigned to the variable because that is what the function returns. Now, when you call the function using the variable name, just the inner function will be executed. This way, the variable will remain private to the function and will be initialized just once during the assignment of function to the variable, thus fulfilling our purpose of having a private counter variable which can only be modified by invoking a designated function.

That is all about closures; let us now look at arrays in JavaScript.

Arrays

The output of the preceding code should be similar to Figure 1-12.

The output of the preceding piece of code should be similar to Figure 1-13.

That is all about arrays; let us now look at arrays in classes and modules in JavaScript.

Classes and Modules

We use “extends” keyword to inherit the properties and methods of the base class in the child class. We can use “super” keyword to access members of the base class inside the child class. Outside the class, we can access members of both base class and child class using the object of the child class. The preceding piece of code should give you “dog” as output in the browser console. When we create an object of “Dog” class, its constructor gets invoked which, in turn, invokes the constructor of “Animal” class and sets the “type” property value to “dog”. Then, when we try to invoke method “getType()”, it searches both parent and child class for this method and invokes it if found. Note that if you do not define any constructor in the child class, the parent constructor gets invoked automatically, but if you define a constructor in the child class, you need to call the parent class constructor manually by using the “super” keyword. That is all about classes. Let us now talk about modules.

You can export multiple objects from a file and import multiple objects from different files in a similar manner as shown in the preceding example. Note that in order to use modules in your project, you will also have to register the index.js script in your html file as “module” type instead of “text/JavaScript”. The preceding code should ideally print “dog” in your browser console. However, if you are using chrome browser, you are bound to get an error due to CORS policy. This means that you cannot import modules from other cross-origin files without a CORS header, which is not possible if you are running your app from local file system. The solution to this problem is to run your app from a server. To do so, we will create a local server using node.js.

Creating a Local Server

After updating the “package.json” file, run the “npm install” command from the terminal to install dependency that we just added to the json file. A folder will be created in your project directory by the name “node_modules”. This folder will contain files for all the project dependencies. Now that we have added a development server to our project dependency and installed it, we can launch our application using “npm start” command in the terminal. Notice that the CORS policy error that we were facing earlier during the modules example is now gone and we see “dog” as output in the browser console, as expected. This is because our application is now running on the local server and not on the file system. Notice that the URL in the browser has been changed to “localhost” from file path. Also note that the server is now listening for changes in your project files. This means that as soon as you make any changes in the project files and save it, it will automatically be reflected in the browser and you do not need to manually refresh the browser every time you change a file.

DOM Modification

The output of the preceding piece of code should be similar to Figure 1-14.

After DOM modification, your web page should look similar to Figure 1-15.

Note that an attribute by the name “isheader” is added to the element and its value is set to “true”. This is done with the help of setAttribute() method. Also, a border is added to the header section because of the use of style.border property in JavaScript code. There are several other properties of DOM elements that can be modified. More information can be found at https://developer.mozilla.org.

Error Handling

The preceding piece of code tries to instantiate “Fruit”, but no such class is defined in the program. Hence, the system will run into a reference error as shown in Figure 1-16 and terminate the execution of the program. As a result, the rest of the code will not get executed.

The output of this code should be similar to Figure 1-17.

The preceding piece of code should print “ERROR: Custom Developer Error!” in the browser console. That is all about error handling in JavaScript. Let us now look at HTTP requests and promises.

HTTP Requests

The output of the preceding example should be similar to Figure 1-18. Here, we use GitHub’s API to get user data by specifying user’s login name. We constantly monitor the request for state change using the anonymous function that is bound to the onReadyStateChange event of the request. readyState of 4 and status code of 200 means that we have successfully received response from the request. Hence, in that case we log the response object to the console. The major problem with XMLHttpRequest() is that in order to process the response, you need to be aware of the status codes of the result for both readyState and status code. Because of this drawback, XMLHttpRequest() is rarely used directly. HTTP requests are much easier to deal with if we use a library such as JQuery.

“$” symbol is a constant in JQuery and is defined as static. We use this symbol to access the get method. The first parameter to this method is a string containing the URL to which the request is being sent. The second parameter is a function that will be executed if the request succeeds. The third parameter is optional and might contain data that needs to be sent along with the request. In the preceding example, we have used an arrow function that will log the response data to the browser console. The output of the preceding code should be similar to Figure 1-18. Even though this seems like a good way to deal with HTTP requests, it is not the ideal way. The get() method returns a promise which helps us work with the request in a much better way.

Promises

Promise constructor takes in a function with two arguments. These two arguments are again functions that are called for success and failure, respectively. In the preceding example, we create promise with an anonymous function. This function has two arguments: resolve and reject. In the body of the anonymous function, we are calling “resolve” function with a timeout of 100 milliseconds and passing “Resolved” as a value to the promise. Thus, the promise will be in success state and will store the message that we passed as a response. If we call “reject” function instead of resolve, the promise will be in error state.

That is all about creating a promise. Now, consider the scenario where you want to perform some operation based on success or failure of a promise. In that case, you will have to settle a promise using then() function. then() is a function in the promise object that takes in two arguments. The first argument is a function with one parameter which gets executed when the promise is in success state. The second argument is a function with one parameter which gets executed when the promise is in failure state. The parameter of these functions will contain the value that was returned during the resolution of the promise.

In the preceding piece of code, if you resolved the promise, the output on your browser console should be “Success: Resolved”, and if you rejected the promise, it should be “Error: Rejected”. Note that you might have to wait for a while before the promise is settled because you will be dealing with asynchronous operations here.

That is all about promises. With the end of this topic, we also come to the end of this chapter. In the next chapter, we will use the JavaScript concepts that we learned so far in order to learn about React.js, a JavaScript-based library.

Summary

Setting Up the Environment

In order to start programming with React, I’ll be using the Visual Studio Code editor which can be downloaded from https://code.visualstudio.com/download. However, you can use any editor of your choice.

Installing React

In order to use react, you must first install it to your project. There are multiple ways of doing this. One way is to simply add the js files to your HTML template using <script> tag as follows:

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

Note that the preceding files are the development versions and you will have to use minified, production versions for enhanced performance in a production environment. The following are the minified versions:

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

Another way is to manually create a folder for your project and add a “package.json” file with a list of all the dependencies. You can then use the “npm-install” command to install all the dependencies into the “node_modules” folder in your project folder. Once the dependencies are installed, you can start referencing the dependencies in your JavaScript and HTML files.

However, there is a much better way to get started with a React project. We will use “create-react-app”, an existing react node module for beginners. Within the terminal, you can navigate to the directory you want to create your application in and execute the following command:

npx create-react-app my-app

Note that we have used npx instead of npm. npx is Node Package Runner that comes with npm version 5.2 and higher. While npm is used to install packages, npx is used to execute packages. In this case, we are not actually installing the “create-react-app” package on our system, but we are executing that package, which, in turn, will install a react application on our system. If you use npm, you will have to first install the “create-react-app” package to your system using the following command:

npm install create-react-app

And then, use that package to create a react application using the following command:

create-react-app my-app

Thus, we will simply use npx instead of npm. On successful execution of the command, you should see output similar to the following:

C:\Users\Mohit.Thakkar\...\Chapter_02> npx create-react-app my-app

npx: installed 91 in 35.563s

Creating a new React app in C:\Users\Mohit.Thakkar\...\Chapter_02\my-app.

Installing packages. This might take a couple of minutes.

Installing react, react-dom, and react-scripts...

> core-js@2.6.10 postinstall C:\Users\Mohit.Thakkar\...\Chapter_02\my-app\node_modules\babel-runtime\node_modules\core-js

> node postinstall || echo "ignore"

> core-js@3.2.1 postinstall C:\Users\Mohit.Thakkar\...\my-app\node_modules\core-js

> node scripts/postinstall || echo "ignore"

+ react-dom@16.12.0

+ react-scripts@3.2.0

+ react@16.12.0

added 1475 packages from 693 contributors and audited 904933 packages in 264.267s

found 0 vulnerabilities

Success! Created my-app at C:\Users\Mohit.Thakkar\...\Chapter_02\my-app

Inside that directory, you can run several commands:

  npm start

    Starts the development server.

  npm run build

    Bundles the app into static files for production.

  npm test

    Starts the test runner.

  npm run eject

    Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app

  npm start

Happy hacking!

If you navigate to the my-app folder and open the package.json file, you will notice that your project has dependencies on react, react-dom, and react-scripts. You can add more dependencies to this list as and when required. Let us now launch this application using the “npm start” command in the terminal. Make sure to change your directory in the terminal to the “my-app” folder. You will notice that the app will run on a local development server on port 3000. You will see an output similar to Figure 2-1.

If you look at the file explorer, you will see an “index.html” file in the “public” folder and lots of .js files in the “src” folder. These JavaScript files are the true essence of react. They create components and render them on the browser. Since we are going to learn about react components one by one, we can delete all the files in the “src” folder for now. Note that as soon as you delete the files, you will start getting a not-found error for the “index.js” file. This is because “create-react-app” has a dependency on react-scripts which uses a webpack configuration file to specify an entry point for the application as “index.js”. So when we delete the files, it will no longer be able to find an entry point into the application and will throw an error. To resolve this error, we will add an empty “index.js” file for now. If you look at the browser screen after adding the file, you will notice that the output will be a blank window but there will be no errors.

Basic Concepts of React

Components are a major backbone of React. They are similar to functions, take in props (input), output UI elements, and can be reused as and when required in other files. Even though they are similar to functions, you need not invoke them. They can be used like HTML elements (<ComponentName/>).

Its reactive nature is another important concept in React. This relates to data binding. Data in a react component comes from props, which are component input. When this data changes, the UI changes as well. This is handled automatically by React.

Another great concept of React is that HTML is generated using JavaScript. And this is justified because when your application receives data from the server, you need to process that data before presenting it. You can either use HTML to do this or you can use JavaScript, which is a way better option. Now that you are using JavaScript to process the data, you might as well present it using JavaScript. That’s exactly what React does.

This brings us to the next concept of React: the virtual DOM. Since HTML is generated using JavaScript, React would not have access to the DOM before it is generated; hence, it keeps a virtual representation of the views and then uses it to compare the changes in UI.

Let us now look at some more concepts of React which are necessary to understand in order to build a React application.

Creating Your First React Component

When we installed React to our project using the “create-react-app” command at the beginning of this chapter, it created multiple JavaScript files under the “src” folder for our project, most of which we deleted. We also cleaned up the index.js file which was the starting point of our application. We will create a new JavaScript file for our component in the “src” folder. We will then import this component in index.js file and render the newly created component. We will create a component with an input box, a button, and a label. On the press of a button, the component should override the label text with the text in the input box.

To do this, we will have to render these elements to the browser. As discussed earlier, React renders HTML to the browser using JavaScript. We will see two different approaches to do this – one using JavaScript and the other using JSX.

Creating Elements Using JavaScript

While using JavaScript, we use two major methods to create and render a component – createElement() and render().

createElement() is a method provided by React which takes in three arguments. The following is the method signature:

React.createElement(

  type, [props], [...children]

)

• The “type” argument can either be a tag name such as “div” or “p” or it can be a React component.

• The “props” argument can be used to specify any property values such as “id” or “name” for the element in the form of a JavaScript object.

• The “…children” argument specifies the child elements of the element that we are creating. It can be in the form of a number, text, or another React element.

Consider the following piece of code that will create a paragraph element:

React.createElement(

                       'p',

                       {id: 'para1'},

                       'Hello from React'

                   );

React will compile the preceding code and create the following HTML equivalent:

<p id="para1">Hello from React</p>

Now that we have created the element, we would want to render it on the browser. To do so, we will use the render() method provided by “react-dom” library. The following is the method signature:

ReactDOM.render(element, container)

• The “element” argument is the element that you created using the React.createElement() method. You can store the output of the createElement() method in a variable and pass it as the “element” argument.

• The “container” argument is the parent element within which you wish to render the current element. You can use JavaScript’s document.getElementById(), document.getElementsByClassName(), or document.getElementsByTagName() to fetch the parent element and pass it as “container” argument.

Add the following piece of code to your index.js file in order to create and render an element using the JavaScript approach:

import React from 'react';

import ReactDOM from 'react-dom';

var reactElement = React.createElement(

    'p',

    {id: 'para1'},

    'Hello from React'

);

ReactDOM.render(reactElement, document.getElementBy('root'));

We first import the React and ReactDOM modules from the libraries (something we came across during the “Classes and Modules” section in the previous chapter). Then we create a paragraph element using the createElement() method and, finally, render it using the render() method. Note that we already have a “div” element in our index.html file with “root” as id. Thus, we are using the same as a parent element to render the paragraph that we created. If you run the code in the browser, you should see an output similar to Figure 2-2.

If you inspect the browser window and check the source, you shall find the following HTML code:

<div id="root">

 <p id="para1">Hello from React</p>

</div>

Now that you are familiar with the JavaScript approach of creating and rendering elements, let us look at a better approach.

Function vs. Class Component

There are two ways you can create a component in React – one using functions and another using class. A major difference between the two is the syntax. Function components are created using plain JavaScript functions that take in props as an input parameter and return a react component. On the other hand, class components are created using JavaScript class syntax and need to extend from React.Component class. A major benefit of using class components is that you can use React’s state object which is provided by React.Component class. Since function components are plain JavaScript functions, you cannot use the state object in function components. We will learn about the concept of state later in the chapter.

Let us get back to our initial plan of creating a component with an input box, a button, and a label. Create a file “MyComponent.js” under the “src” folder. Add the following code to the file:

import React from 'react';

function MyComponent(){

    return(

        <div>

            <input id="inputTextbox"></input>

            <button type="submit"

                onClick={UpdateText}>

                Update

            </button>

            <br/>

            <label id="output"></label>

        </div>

    );

}

function UpdateText(){

    document.getElementById('output').innerText = document.getElementById('inputTextbox').value;

}

export default MyComponent;

The preceding code is the function approach of creating the component that we needed. It is created as a separate module by the name “MyComponent” and is exported. We have also created a function “UpdateText()” which contains the logic to update the label value on button click. We have passed this function as props to the button element using JSX syntax. React automatically binds it to the onClick event of the button. Now let us look at the class approach of creating the same component. Consider the following code that will go in your “MyComponent.js” file:

import React from 'react';

class MyComponent extends React.Component{

    UpdateText(){

        document.getElementById('output').innerText = document.getElementById('inputTextbox').value;

    }

    render(){

        return(

        <div>

            <input id="inputTextbox"></input>

            <button type="button"

                onClick={this.UpdateText}>

                Update

            </button>

            <br/>

            <label id="output"></label>

        </div>

        );

    }

}

export default MyComponent;

The preceding code represents the class approach of creating a component. It will give us the same output as the function approach we saw earlier. In this approach, we define functions as a member of the class and we use “this” keyword to access those functions within the class. The same is observed when we pass the “UpdateText()” function as props for the “onClick” event of the button. React.Component class provides the “render()” method which we override in order to write our JSX code that the component will return. Let us now import this module in index.js file and render this component to the browser. Add the following code to your index.js file:

import React from 'react';

import ReactDOM from 'react-dom';

import MyComponent from './MyComponent';

ReactDOM.render(<MyComponent/>, document.getElementById('root'));

That is it. We have just created our first react component. If you execute the preceding code in the browser, you would see a textbox and a button similar to Figure 2-3. On button click, the value of the textbox will be copied to the label below.

Stateless and Stateful React Components

So far, we have learned how to create react components using JSX and render it to the browser. This is enough to create static web sites. However, React is well known for the creation of user interactive interfaces, one that reacts to user events. To build such interfaces, it is necessary to understand how React manages state. Now, you might wonder that we already built a react application that reacts to the user’s button click event in order to update a label. We did this using JavaScript’s built-in event handler. React, on the other hand, has a better way of managing this, which is by using state.

State is an object that contains a set of properties that controls the behavior of the component. The values of these properties might change over the lifetime of the component. Instead of re-rendering the entire view every time some value changes, we can store this value inside the state object, and whenever the state object gets updated, React will partially update the view. The components that use the state object are Stateful components and the ones that do not are Stateless components. As discussed earlier, since state object is available by extending from React.Component class, it can only be used in class components and not in function components.

Working with the State Object

The output of the preceding code should be similar to Figure 2-3. We are doing the same thing that we did in our first React application. We have a textbox, a label, and a button. On the click of the button, the text entered in the textbox should reflect on the label. However, the major difference here is that we are using React’s built-in state object to store the initial label value, and instead of directly updating the label, we will update the state object while React will handle the changes in the view.

We have initialized the state object in our class constructor. Note that we have extended the React.Component class to our class. This is where the state object comes from. Before initializing the state object in the constructor, it is necessary to call the super() method that will allow us to access members of the React.Component class in our class. The JSX code that the component returns is the same as the one that we wrote earlier while creating our first React app. The only difference is that the value of the label is now bound to the state object property using the curly braces. Doing this helps React in understanding that it needs to change the value of the label when the state object changes.

The other difference that you will notice is in the UpdateText() method which executes on the click event of the button. Instead of directly updating the label, unlike last time, we now use the setState() method to update the property value of the state object. The setState() method is provided by the React.Component class to modify the state object and can be accessed using “this” keyword. When the state changes, React will automatically update the label value in the view. This is the benefit of using the state object.

One of the major benefits of using state is that it enables the creation of interactive components. For instance, if a user is interacting with one particular component on a screen with multiple components, react will only make changes to that particular component and the other components will completely be isolated to those changes.

Another thing to know about the state object is that it is immutable. So, when you modify the value of the state object using the setState() method, a new copy of the object is created. This allows a comparison between the previous state and the new state. That is how React keeps track of changes and updates the UI.

Even though the state object is similar to the props object, a significant difference between the two is that unlike props object, the state object is private to a component and is completely controlled by the component. When you pass down props to a component, it cannot modify them because they are read-only. But in the case of the state object, the component has the complete liberty to make any kind of changes.

Despite all these benefits, one might opt against using the state object. It is up to you to decide whether you want to build a stateful component or a presentational component. That is it about the state object. Let us now look at the lifecycle of a React component.

React Lifecycle

Every component in React goes through certain lifecycle methods. You can override these methods in your code in order to implement certain functionalities in your application. But before doing so, it is necessary to understand the lifecycle of a React component. Figure 2-4 shows the lifecycle diagram of a React component.

The three major phases of the React component lifecycle are mounting, updating, and unmounting.

Hooks

We have discussed earlier in this chapter that there are certain functionalities, such as state object and lifecycle methods, provided by React.Component class which can only be used within class components. With the introduction of Hooks in React 16.8, this is no longer the case.

React provides a few built-in hooks to start with. However, developers can write their own custom hooks and use them in their applications. In the following section, we will learn about the two of the most used React hooks – State Hook and Effect Hook, both of which comes built in to React.

Custom Hooks

Custom hooks in React are normal JavaScript functions whose names are prefixed with the word “use”. These functions or Hooks can be used to share stateful logic across components. Now let us consider a scenario where we want to display an alert box every time something changes in the view. We might want to do this in several components, but it is not a good practice to repeat this logic in each component we write. Hence, we can write this logic in a custom hook and share it across components. Let us understand it with the help of an example. Let us first review the code that displays an alert using the useEffect() Hook when a component is rendered:

import React, {useState, useEffect} from 'react';

function MyComponent(props){

 const [outputValue, setOutputValue] =

 useState('Placeholder');

 function UpdateText(){

   setOutputValue(

     document.getElementById('inputTextbox').value

   );

 }

 useEffect(

   () => {

     alert('Component Updated');

    }

 );

 return(

   <div>

     <input id="inputTextbox"></input>

     <button type="button"

         onClick={UpdateText}>

         Update

     </button>

     <br/>

     <label>{outputValue}</label>

   </div>

 );

}

export default MyComponent;

What we are doing here is that we are invoking the useEffect() Hook that displays an alert whenever a component is updated. We know that a Hook can call another Hook. So, we will now create a custom Hook that will take an input argument and will display the alert for us whenever the calling component is updated. I have created a new folder “Hooks” under the “src” folder that will contain all my custom Hooks. You can follow the structure of your choice. Let us create a new file “useChangeAlert.js” for our Hook. It will contain the following code:

useChangeAlert.js

import {useEffect} from 'react';

export const useChangeAlert = (text) => {

  useEffect(

     () => {

       alert(text);

      }

   );

}

We have created a simple JavaScript function that will display an alert with the input parameter as a message whenever the calling component is updated. This will act as our custom Hook. Note that we have used React’s built-in useEffect() hook to know when the calling component is re-rendered. Let us now consume this custom Hook in our component. Look at the following piece of code that goes in your MyComponent.js file:

MyComponent.js

import React, {useState} from 'react';

import {useChangeAlert} from './Hooks/useChangeAlert'

function MyComponent(props){

 const [outputValue, setOutputValue] =

 useState('Placeholder');

 function UpdateText(){

   setOutputValue(

     document.getElementById('inputTextbox').value

   );

 }

 useChangeAlert(`New Label Value: ${outputValue}`);

 return(

   <div>

     <input id="inputTextbox"></input>

     <button type="button"

         onClick={UpdateText}>

         Update

     </button>

     <br/>

     <label>{outputValue}</label>

   </div>

 );

}

export default MyComponent;

We have imported the useChangeAlert() Hook from our Hooks folder, and instead of directly invoking the useEffect() hook, we have invoked the custom Hook with the new label value as an input parameter. Also note that since we are not using the useEffect() hook in our component, we do not need to import it from the React library. If you run the code, you will notice that whenever you change the value in the input box and click the button, the label is updated and an alert is displayed with the new label value. This is done by our custom hook. You can use this custom Hook in multiple components. Let us create another component to demonstrate this. I have created an exactly similar component to our existing component. I’ve just changed some IDs and input that we pass to our custom Hook. Please feel free to create a component of your choice. Look at the following code for the new component that will go in a new file “MyComponent2.js”:

import React, {useState} from 'react';

import {useChangeAlert} from './Hooks/useChangeAlert'

function MyComponent2(props){

 const [outputValue, setOutputValue] =

 useState('Placeholder');

 function UpdateText(){

   setOutputValue(

     document.getElementById('inputTextbox2').value

   );

 }

 useChangeAlert(`New Label2 Value: ${outputValue}`);

return(

   <div>

     <input id="inputTextbox2"></input>

     <button type="button"

         onClick={UpdateText}>

         Update

     </button>

     <br/>

     <label>{outputValue}</label>

   </div>

 );

}

export default MyComponent2;

We have imported the custom Hook and used it in a similar manner as our previous component. On click of the update button, the label should be updated and an alert box should be displayed with the new label value, just like it did for our previous component. Now the next step is to render both our components together on the same page and see how our custom hook reacts to the update operation. Consider the following piece of code that will go into our index.JS file:

import React from 'react';

import ReactDOM from 'react-dom';

import MyComponent from './MyComponent';

import MyComponent2 from './MyComponent2';

ReactDOM.render(

  <React.Fragment>

    <MyComponent/>

    <MyComponent2/>

  </React.Fragment>,

  document.getElementById('root')

);

Note that we use <React.Fragment> whenever we want to render an array of elements to the DOM. If you execute the code, you will see a browser output similar to Figure 2-5.

On updating either of the values and clicking their respective buttons, you will see an alert box with their respective alert messages along with the new label values. This is how stateful logic is shared across React components using custom Hooks. Let us now learn how to work with data in React components.

Working with Data

On rendering the preceding component, you should see a browser output similar to Figure 2-6.

I have applied some basic CSS to the elements so do not worry if your output is not exactly similar to mine. You can customize your styling using your own CSS. We are using a combination of JSX and JavaScript in this component. We use JavaScript’s array.map() function to iterate on our data array and execute the JSX code for each element in the data array. This is how we work with data in React components. Now, let us learn about fetching data from a remote server using asynchronous JavaScript calls.

AJAX Calls

We use the React lifecycle method componentDidMount() to write our data fetch logic. We have used the get() method provided by Axios to make a network request to the GitHub API. Note that it is necessary to import the Axios library to our component file in order to use it. You can also use post() method provided by Axios to initiate a POST request.

then() method is an extension to the get() method and will be executed if the promise is fulfilled by the get() method. Hence, in this method, we have written the code that we want to execute if the network request is successful. We have filled the data object with the data that is returned by the get request and set the isLoaded property to true.

catch() method will catch any errors that occurred during the execution of the network request. In this method, we have filled the error object with the details of the error.

Then comes the render() method. Before rendering the data, we might want to check if the data has been correctly loaded or not. We also might want to check if any error has occurred during the network operation. Thus, if an error has occurred, we will simply display the error message on the browser. If the data is still loading, we will display a simple loading message on the browser. Finally, if the data has been loaded into the data object, we will iterate on the data using JavaScript’s array.map() method and display the details of GitHub users on the browser. Figures 2-7, 2-8, and 2-9 show the scenarios of Request in Progress, Error, and Success, respectively.

That’s it, you have successfully created a data-oriented React application. You can play around with other APIs available in the public domain. For instance, you can take input from the user and fetch details for a specific GitHub user by passing username as a parameter to the API call. The more you play around, the better you will understand it.

Let us now look at how to add styling to our React application.

Styling React Components

If you have executed the previous GitHub Users application code, you must have noticed that your output slightly differs from Figure 2-9. That is because I have added some CSS to my application code in order to add styling to the elements, which might be missing from your code.

There are various ways to style your React components. Some of them are discussed in the following section.

Babel and Webpack

Babel is a JavaScript compiler that has solved a very big problem for the entire community of developers – backward compatibility. We all have faced issues with browsers like Internet Explorer and Edge not being able to support the latest JavaScript functionalities. For instance, arrow functions introduced in ES6 are supported by most of the modern browsers but not by IE 11. In such cases, Babel comes to the rescue. It takes code written in one standard, and it compiles it to code written in another standard. However, Babel is not going to compile anything by itself. We will have to install several plugins to support a particular feature in older browsers.

Webpack, on the other hand, is a module bundler that handles bundling and minification of our application files. It goes through our application and creates a list of all the modules that our application is dependent on in order to function correctly. Then it creates a pluggable bundle or package which contains the minimum number of files required for our application. It generally requires a webpack.config.js file where we specify the entry point for our application and other relevant information regarding the application output.

Now let’s create the following script.js file to test whether babel is working correctly or not:

A loader lets us customize the behavior of the webpack when it loads certain files. We can define a loader by setting the module property to an array of rules in the webpack.config file. In this case, we have set the “loader” property of the rule to babel-loader which will tell the webpack to convert the JSX code to JavaScript code. The “test” property allows us to specify what kind of files we want to run the loader on. We specify a pattern for files that end with “.js”. We can use the “exclude” property to exclude a set of files. In our case, we exclude the node_modules folder since we do not want babel to scan those files.

That is it. Webpack is now set to identify JSX code and compile it to JavaScript code using babel. With that, we come to the end of this chapter. Let us summarize what we have learned.

Summary

Introduction to Next.js

All these problems can be solved with the help of server-side rendering. Next.js is a framework that provides us just that. Every time a request is received, it dynamically generates a page at runtime with the help of a server. It is used by leading companies such as Netflix, Docker, GitHub, Uber, Starbucks, and many more. Let us look at the features of the Next.js framework.

Features of Next.js

Let us look at these features in action by getting started with our own Next.js application.

Getting Started

In order to get started with your own Next.js application, it is necessary that you have Node.js installed on your system. You must have installed it while practicing React.js examples during the previous chapter. If you have not, you can download and install it from https://nodejs.org/. Once it is installed, you can open a terminal in your editor and run “node -v” command to check if the node.js has installed correctly. If yes, the terminal will display the installed version number of Node.js. We will be using npm (Node Package Manager) to initialize our application and install dependencies to our project. npm comes bundled along with Node.js and should already be installed in your system if you have installed Node.js. You can execute “npm -v” command in the terminal. If installed correctly, this command will display the version of npm installed in your system.

I’ll be using the Visual Studio Code editor which can be downloaded from https://code.visualstudio.com/download. However, you can use any editor of your choice.

Now that you have specified the start script, you might want to launch the server and start your application. You can do that using the “npm start” command. However, at this point in time, you won’t be able to do so because a Next.js application looks for a startup page in the “pages” folder at the application launch. Since we do not have a “pages” folder yet, we will get a compile-time error when we try to launch our application. Let us create an empty “pages” folder at the root of our application. Once created, you can launch your application using the “npm start” command. You will notice a 404 error when you navigate to the application URL – http://localhost:3000/ – on the server. This is shown in Figure 3-1.

Notice the sleek and user-friendly design of this error page. This is how Next.js handles errors. It can also handle other errors such as 500 – Internal Server Error. The cause of the 404 error is that there are no pages in our application. On application launch, Next.js tries to find the “index.js” file in the pages and renders it by default. In our case, since it is not able to find it, we are greeted with a 404 error. Let us now create our first page. Add “index.js” file to the “pages” folder with the following code:

Now, if you launch the server using the “npm start” command and browse to http://localhost:3000/ or http://localhost:3000/Index, you will be able to see the page that you just created, as shown in Figure 3-2.

Let us now test if the content is really getting rendered on the server-side. If you right-click the page and view the page source, you will notice that the HTML content generated in code is directly getting filled into the root HTML tags. This is because everything is being rendered on the server-side. If you do the same for an application built using plain React.js, you will notice just the root HTML tags in the page source and not the content generated by the code. This is because, in a React.js application, the content is rendered on the client-side after the page gets loaded. Thus, we can be assured the Next.js renders our pages on the server-side.

In the next section, we will create another page for our application and see how to navigate between pages using Next.js routing.

Routing in Next.js

So far, we have had only one page, but an application might have multiple pages and easy navigation between those pages is an important aspect of any application. Let us create an “About” page with the following code:

If you run the application and navigate to http://localhost:3000/About, you shall see the page you just created, similar to Figure 3-3. Not that you do not have to restart the npm process in order to see the changes. As soon as you save any changes, Next.js performs hot reloading and you can see the changes without restarting the server. However, you might have to refresh the browser page.

Now, to establish a link between the two pages, you might think of creating an anchor tag with the page URL passed to the “href” attribute. Let us do that and see what’s happening:

If you run the app, you will see a link to the “About” page. However, if you click the link, you will notice that the entire page gets reloaded. This is because the anchor tag sends a new request to the server and the routing will happen server-side. This might result in performance issues so you might want to keep the routing to the client-side.

Next.js provides <Link> component for creating links for client-side routing. It is a wrapper that works with any component that accepts “onClick” prop. Hence, we will use it with an empty anchor tag. Consider the following change in the code:

In order to use the <Link> component, you will have to first import it from the “next/link” module. On executing the preceding code, you will have the same output as Figure 3-4, but when you click the link, you will notice that no additional server request is generated on the network. You can verify this in the “Network” tab in the Chrome browser’s developer tools window. This is because the client-side routing is at work here. Page specified in the <Link> component will be prefetched, and the navigation will happen without a server request.

Most scenarios of client-side routing break the browser navigation buttons. However, Next.js has full support for the History API so it won’t break your browser navigation buttons.

That is it about routing in Next.js. Let us now look at dynamic pages in Next.js.

Dynamic Pages

Most of the real-time applications have content that is generated dynamically. Hence, we cannot rely on static pages in a practical scenario. Let's see how to generate dynamic content for our application. First of all, we will create a file, DynamicRouter.js, that will create links based on the props. Consider the following code:

If you see the browser window, you will notice three links generated on the index page, as shown in Figure 3-5. However, these are empty links and will not navigate to any page.

Let us now create a page that will dynamically display content based on the parameter it receives. We will then set these three links to navigate to this dynamic page with different parameters. Consider the following code for the new page:

Now if you click the links, you will be redirected to a page that loads the content dynamically, as shown in Figure 3-6.

If you notice the URL that gets generated, you will see that the query parameters are displayed on the address bar. You might want users to see a clean URL that does not display the query parameters. This is possible in Next.js by using the “as” attribute of the “Link” component. Whatever you pass to the “as” attribute will be displayed in the address bar. Let us try this:

Now, if you click the links and navigate to one of the pages, you will see a clean URL without any parameters, as in Figure 3-7.

That is it about dynamic pages in Next.js. Let us now learn how to deal with multimedia content in a Next.js application.

Adding Multimedia Content Using CSS

At times you might want to add multimedia content such as images and videos to your application. Generally, it is preferred to add URLs to such content in the CSS itself so that it is easy to maintain. Let us add images next to the links on the index page. I have downloaded three images and added them to the “static/Images” folder at the root of our application. Next.js provides something called JSS (CSS in JS) which allows us to define styles directly inside JSX code. Let us add the following code to “index.js” file to add images using CSS:

Now that we have defined the styles, we might want to use these styles on our page. To do so, we need to pass the class name from “index.js” file as a prop to the <Link> component and use it in “DynamicRouter.js” file to create a <div> for the image and set the class name for it. Consider the following changes to code:

If you save the changes, you will see a browser output similar to Figure 3-8.

Once installed, you will have to add a config file “next.config.js” to the root of your application with the following code:

If you save the changes and go to the browser window, you will see output similar to Figure 3-8. All other multimedia content including videos can be rendered to your application in a similar manner. Let us now see how to get data from a remote server in a Next.js application.

Getting Data from Remote Server

Once it is installed, we can use its get() method in our page to fetch the data from a remote endpoint. However, things will change a little bit in a Next.js application. Previously, we performed the AJAX call in the component’s componentDidMount() method. But in this case, we will use a special method, getInitialProps(), provided by Next.js which helps us set the props for a component. We will initiate our Axios request in the getInitialProps() method . Consider the following page that uses GitHub’s public API to get a list of GitHub users and display them in our application:

Since Axios requests are asynchronous, we need a way to catch the response when it becomes available. Previously, we did this using the then() extension method of the Axios library’s get() method. This time, we have used the await keyword with the Axios method call and marked the getInitialProps() method as asynchronous. async…await keyword helps us deal with asynchronous requests without having to use callbacks or promises and is convenient for our application. We wrap this request in a try…catch block so that we can know if an error occurs on the network. Once the request is processed, we return an object from the getInitialProps() method containing either data or error. The object returned by this method will be set to the props object. In the render method, we check if the error exists by checking the error property using “this.props.error”. If it does, the user will see an error message on the browser, similar to Figure 3-9.

If there is no error, then we will iterate over “this.props.data” object using JavaScript’s array.map() method and display the details of GitHub users on the browser. The output should look similar to Figure 3-10.

If your output is a bit different than the one in Figure 3-10, do not worry. There is one thing that is still missing from your code. I have added some styles to the “style.css” file that we created earlier and imported it in our page. Do the same, and you are good to go with the styling. You can refer to the following stylesheet code:

That’s it. You can now fetch data from any remote endpoint and use it in your application.

Creating Interactive App Using Next.js

Let’s try to add some user interaction to our application. We will get the GitHub user id as text input from the browser and will display user details for that particular GitHub user. To do so, we will need to get the initial data from props and set it in our state object using constructor, just like we did in the previous chapter for a traditional React application. The only difference here is that the props will come from getInitialProps() method.

When an id is entered from the browser, we will make an API call to fetch user details and modify the data in the state object. As soon as the state object changes, React will re-render the UI. Consider the following code:

If you navigate to the “GithubUsers” page on the browser and search for a valid user, you will see the details for that user, as shown in Figure 3-11.

If you search for a non-existent user, you will see an error message as shown in Figure 3-12. You can customize the error message as per your preference.

That is it. We have just created an interactive application that renders the content on the server-side using Next.js and React.js. Let us now learn how to manage the state of our application using Redux.

Using Redux with Next.js

Most of the large-scale applications in the market use MVC architecture for state management. However, implementing MVC in applications built using client-side libraries is a painful task because unlike a central model in traditional MVC, the State in a client-side application is scattered across pages and is not at the application level. To implement MVC-style state management in client-side libraries, we use Redux. The architecture of Redux is shown in Figure 3-13.

Let us learn about Store, Reducers, and Actions in a bit more detail.

Reducers

Reducers are functions that specify how the State changes depending on the type and payload of the information dispatched by the Actions. These functions take in current State and Actions as input parameters, generate a new State after processing the information, and return this new State as output. Now, even though the State of our entire application is a single Store object, we might want to write multiple Reducers to modify this object. Redux gives you the flexibility to do that. Instead of writing a single Reducer function that deals with all the scenarios, you can write one small Reducer for each scenario. This will help us minimize code complexity.

Note

Since all the Actions are executed sequentially, we will never face a scenario where multiple reducers are trying to modify the State at the same time.

The following is a code snippet for a sample Reducer function that returns the initial state:

function sampleReducer(state, action) {

  return state

}

Let us create a basic example to understand the concept of Redux. Firstly, we will install redux to our application by using the following command:

npm install redux --save

Once this is done, we will create two separate folders – “Actions” and “Reducers”. Let us modify our “index.js” file in the “pages” folder. We will have an input textbox, a button, and a label. On click of the button, the State should be updated with the value in the input textbox and the label should update itself with the State value. Some initial value will be set for the State. Consider the following code:

Pages/index.js

import React from "react";

import '../style.css';

export default class extends React.Component {

  static async getInitialProps() {

    return { text: 'Initial label value.' }

  }

  constructor(props) {

    super(props);

    this.state = { text: props.text };

  }

  render() {

    return(

      <div>

        <h1>Redux Demo</h1>

        <br />

        <div className="center">

          <input id="inputTextbox" type="text">

          </input>

          <button type="button"

              onClick={this.GetUser}>

              Update Label

          </button>

        </div>

        <br />

        <p>{this.state.text}</p>

      </div>

    );

  }

}

If you visit this page in the browser, you will see an output similar to Figure 3-14.

Note that we have just created a page with initial State value that the label consumes. We pass a static string as props using getInitialProps() method . In the constructor, we fetch the value of this prop and set it in the State. Note that we have not written any logic for changing updating the State. We will do that using Redux. But before we can do that, we will have to install some dependencies that will help us along the way. Use the following command to do the same:

npm install redux react-redux next-redux-wrapper redux-thunk redux-devtools-extension --save

We have installed five new dependencies in total. Other dependencies that we already have are react, react-dom, next, axios, and @zeit/next-css. After installing the new dependencies, my “package.json” looks as follows:

package.json

{

  "name": "my-next-app",

  "version": "1.0.0",

  "description": "My Next.js Application",

  "main": "index.js",

  "scripts": {

    "start": "next"

  },

  "author": "Mohit Thakkar",

  "license": "ISC",

  "dependencies": {

    "@zeit/next-css": "^1.0.1",

    "axios": "^0.19.0",

    "next": "^9.1.6",

    "next-redux-wrapper": "^4.0.1",

    "react": "^16.12.0",

    "react-dom": "^16.12.0",

    "react-redux": "^7.1.3",

    "redux": "^4.0.5",

    "redux-devtools-extension": "^2.13.8",

    "redux-thunk": "^2.3.0"

  }

}

If you are creating a new application from scratch, make sure you update your “package.json” as mentioned in the preceding snippet and run “npm install” command from terminal to update the dependencies. It is time to create our first Action. I have created an “Actions” folder in the root directory of our application that will contain our action. Consider the following code:

Actions/actions.js

export const InitialState = {

    text: 'Initial label value.'

}

export const changeState = () => dispatch => {

 return dispatch({

  type:'ChangeLabel',

  text: document.getElementById('inputTextbox').value

 })

}

Here, we are defining an InitialState, which is a plain JavaScript object, and an Action that will update the State value with input text on button click. We will use the InitialState object directly in our Reducer function as well as while creating the Store for the first time. We will see that later. However, to update the State, we will have to dispatch an Action to the Reducer. To do so, we have created a method, changeState(), that will be called on button click. This method dispatches our Action.

For the Action that we are dispatching, we have defined a mandatory “type” property that determines the type of Action being performed and a “text” property which sends the new data to the reducer. It is time to create our Reducer function that will actually update the Store based on the data received from the Action. I have created a “Reducers” folder in the root directory of our application that will contain our reducer. Consider the following code:

Reducers/reducer.js

import { InitialState } from '../Actions/actions'

export const reducer = (state = InitialState, action) => {

  if (action.type == 'ChangeLabel') {

    return Object.assign({}, state, {

      text: action.text

    })

  }

  else {

    return state;

  }

}

As discussed earlier, Reducers take in two input parameters – current State and Action. While defining our Reducer, we assign “InitialState” as the default value for our first input parameter, state. If the reducer is triggered on an empty State, the initial state value defined in our “InitialState” object will be set to the State.

Note

“InitialState” is being imported from our Actions file and is the same object that we created earlier.

If the type of the Action is “ChangeLabel”, the reducer will know that the State value needs to be updated with the data dispatched by the Action. In such a case, the Reducer function creates a new object, assigns the current State value to that object, and replaces the value of “text” property with the new value dispatched by the Action. This new object will be returned by the Reducer and will be considered as the new State of the application. React will automatically update the View as soon as it detects a change in the State. Hence, as soon as the Reducer is executed, the View will reflect the changes in State. We do not have any other Actions defined so we will just return the State object, as it is received, in case the type of the Action is not “ChangeLabel”. It is now time to write the code that will create our Store for the first time. I have created a “Store” folder in the root directory of our application that will contain our Store initialization code. Consider the following code:

Store/store.js

import { createStore, applyMiddleware } from 'redux'

import thunkMiddleware from 'redux-thunk'

import { reducer } from '../Reducers/reducer'

import { InitialState } from '../Actions/actions.js'

export const initStore = (initialState = InitialState) => {

  return createStore(

    reducer,

    initialState,

    applyMiddleware(thunkMiddleware)

  )

}

Here, we have again used the “InitialState” object that we created in our Actions file, this time, to initialize the Store with the initial application State when it is being created for the first time. createStore() is a method provided by the “redux” library in order to create and initialize a Redux Store for the first time.

Note

There should only be a single store in your app.

We pass the following three parameters to the createStore() method:

• reducer (Function) – This is the Reducer function that we created for our Store. It returns the next application State, given the current state and an action.

• initialState (any) – This is the initial State of our application. It is a plain JavaScript object that we created in our Actions file.

• enhancer (Function) – You can optionally specify some functions that use third-party code to enhance your application. In our case, we have used the “thunkMiddleware” provided by the “redux-thunk” library. This middleware helps us write asynchronous logic that interacts with our Store. With a basic Redux Store without this Middleware, we will only be able to perform synchronous updates to the Store by dispatching an action. We will use applyMiddleware() provided by “redux” library to convert “thunkMiddleware” to an enhancer.

Note that the store is not yet created. We have just defined and exported the “initStore” function that can be invoked in order to create the Store.

You must have noticed that we have created everything that is required in order to perform State management using Redux. It is time to inject the Redux functionality in our application lifecycle. To do so, we will have to use “react-redux” library that we installed as one of the dependencies earlier. It is the official React binding for Redux. It helps React components read data from a Redux store and dispatch actions to the store to update the data. Since we need our State object to be available throughout the entire application, we will have to inject it in a component the rest of the components inherit from. This parent component can be referred to as a Higher-Order Component (HOC). In Next.js, we can create a special component “_App.js” which wraps all the pages and can be used to share something that is common throughout the application. We will use this “_App” component to inject Redux to the application lifecycle. Add the "_App.js" file to the “Pages” folder with the following code:

Pages/_App.js

import React from 'react'

import { Provider } from 'react-redux'

import App from 'next/app'

import withRedux from 'next-redux-wrapper'

import { initStore } from '../Store/store'

export default withRedux(initStore)(

  class MyApp extends App {

    static async getInitialProps({ Component, ctx }){

      return {

        pageProps: Component.getInitialProps

          ? await Component.getInitialProps(ctx)

          : {},

      }

    }

    render() {

      const { Component, pageProps, store } = this.props

      return (

        <Provider store={store}>

          <Component {...pageProps} />

        </Provider>

      )

    }

  }

)

Here, we have created a component wrapped in a special withRedux()() wrapper provided by “next-redux-wrapper” library that we installed as one of the dependencies earlier. As the first input to this wrapper, we pass the method that creates the initial store, which in our case is “initStore” from “Store/store.js”. The second input to this wrapper is our Higher-Order Component (HOC).

The component extends from “App” component provided by “Next” library. This is the component that Next.js uses in order to initialize Pages. Since we are overriding the default initialization of our Pages, we will have to write the getInitialProps() method in our Component and make it call the Page’s getInitialProps() method. It takes in two arguments – “Component” and “ctx”. “Component” is the Page Component and “ctx” is the context. If the Page’s getInitialProps() method returns any data, we return that data from our HOC’s getInitialProps() method , else we return an empty object.

Then we write the render() method of our HOC. We already have Component and PageProps in the Props object. Component is the Page Component for the Page that is being rendered, and PageProps is the Props that we have in that Page. Since we are wrapping our HOC in a Redux wrapper, the Store object is also created and passed down to the render() method when getInitialProps() method is executed. We have already specified the method which will create the initial Store. The same will be used to create the Store and pass it down to the HOC props. We will use the destructuring syntax to fetch the values for Component, pageProps, and store from the props object.

We will use the <Provider> component provided by “react-redux” library to wrap our Page Component. We will pass the Store object to this component which will be available to all our container components. Within this component, we will put the Page Component and pass the page props to it. Page Component will dynamically keep changing depending on the Page that is being rendered.

This is how you inject Redux to the Next.js lifecycle using a Higher-Order Component (HOC). Let us now consume our store in our index page and dispatch an Action on button click. You will have to make the following modification to the “index.js” file:

Pages/index.js

import React from "react";

import "../style.css";

import { connect } from 'react-redux'

import { bindActionCreators } from 'redux'

import { changeState } from '../Actions/actions'

class ReduxDemo extends React.Component {

  render() {

    return (

      <div>

        <h1>Redux Demo</h1>

        <br />

        <div className="center">

          <input id="inputTextbox" type="text">

          </input>

          <button type="button"

              onClick={this.props.changeState}>

              Update Label

          </button>

        </div>

        <br />

        <p>{this.props.text}</p>

      </div>

    );

  }

}

const mapDispatchToProps = dispatch => {

  return {

    changeState: bindActionCreators(changeState, dispatch)

  }

}

export default connect((state) => ({ text: state.text }), mapDispatchToProps)(ReduxDemo)

You must have noticed that we have removed the getInitialProps() method from the code. That is because props will now be injected using a special “connect()()” wrapper provided by “react-redux” library. The first parameter contains State-related entities that you want to inject to the Page, and the second parameter is the Page itself. We are injecting the text property that resides in the state object. We are also injecting the method that is used to dispatch an Action to modify the Store object. We pass this method to the click event of the button by accessing it in the Page using “this.props.changeState”. We also bind the label (<p>) to the “text” property of State object using “this.props.text”. If you execute the application and visit the browser, you will see an output similar to Figure 3-14. The following is a sequential list of things happening when you run the application:

• The code written in "_App.js" gets executed when the page is first requested from the browser.

• redux-wrapper creates the Store object with initial values and injects it into the Page. initStore() method is used to create the Store for the first time. We have defined this method in “Store/store.js” and provided a reference to it in the HOC.

• The HOC in "_App.js" renders the Page Component. The control is now transferred to the code written in “Pages/index.js” file.

• “connect()()” wrapper injects the State data into the page via props. A method to update the State value is also passed as props. The page then renders like a normal Next.js Page. You will see the initial State value displayed on the label.

• As soon as you type some text and click the button, the changeState() method which is defined in “Actions/action.js” will be invoked.

• This method will dispatch an Action of type “ChangeLabel” with the text that you entered in the input textbox as data.

• The control will now be transferred to the Reducer method written at “Reducers/reducer.js”. After checking the type of the Action, the Reducer will update the “text” property in State with the data dispatched by the Action.

• As soon as the State object is changed, React will re-render the Views and update all the fields whose data has been modified. Thus, the label on the UI that is bound to the “text” property of the State will be re-rendered and you will see the updated value on the UI.

Note that we are not using React’s built-in State object anywhere directly in the Pages. All the State management here is done by Redux. That is it about working with Redux. Let us now learn about GraphQL and how it is used in a Next.js application.

Using GraphQL with Next.js

GraphQL is the query language for the APIs. It gives the client the power to ask for exactly what it requires. We can send a GraphQL query to the API and communicate to the server the exact fields that we require in the response. Look at Figure 3-15 for a better understanding.

Figure 3-15 perfectly depicts the concept of GraphQL. An API might return multiple parameters, but we might not need all of those parameters for our application. In such cases, we can send the names of the parameters that we need as query variables and the API will return just that many parameters.

Let us start with a basic Next.js application with just the index page. We will create the “Pages/api” folder and add our first API, “TestAPI.js ” file with the following code:

What we are doing here is that we define a static data object and send it in response. We pass this data in the response's end() method. This method signals to the server that the response headers and the response body have been set and the server should consider this response as complete. We can consume this API by visiting the URL “http://localhost:*/api/testapi” in the browser. Alternatively, we can consume this API in our index page. Let us do it using the following code:

We make the request to our API using the Axios library in the getInitialProps() method of our Page. We then send the API response down to the rest of the Page as Props. In the render method, we iterate over the data and render it to the browser. Simple enough. We have created an API and consumed it. You shall see an output similar to Figure 3-16.

We will now have to modify our API a little bit. We will define a schema for our data. This schema will specify the type of data that we will be returning from the API. We will then pass the schema, GraphQL query, and the data object to GraphQL which will filter the data for us as per the query received. Consider the following code for the API:

If after all the changes, you visit the index page of our application, you will see an output similar to Figure 3-17. You will notice that only two fields will be displayed instead of all the fields that were displayed earlier. That is GraphQL at work in our application.

That is it about GraphQL. With the end of this topic, we come to the end of the chapter. Let us summarize what we have learned.

Summary

Importance of Server-Side Rendering

In the previous chapter, we discussed the problems associated with client-side rendering . The major problem is faced during the development of a single-page application (SPA). Although SPAs provide amazing user experience, all of it is browser-based. Instead of navigating from one page to another, the user stays on the same page and the content on the page is dynamically changed based on the user interaction. These changes are made by the browser using the JavaScript code that is written on the client-side.

While this is a great approach for changing the page once the application is up and running, it is not a recommended approach in order to load the application for the first time. Before the SPA is available for the user to interact with, there is a lot of processing required to be done by the browser. Also, multiple interactions are necessary between the web server and the user’s browser. As you can see in Figure 4-1, when the user visits the application for the first time, a request is sent to the web server for the page. The server returns an HTML page which contains an empty root element (<div>) and some JavaScript code. The browser then sends more requests for data, stylesheets, script files, and other resources that it might require. Once all the resources are available to the browser, it processes the JavaScript code in order to make sure that the JSX code is correctly compiled, JSON data is loaded using REST API calls, all the events are bound, and the promises are fulfilled. Only then the page is made available to the user.

Adopting this approach might take a significant amount of time and result in poor user experience due to all the waiting-while-the-page-loads. This is where the server-side rendering steps in. We can prepare the initial page on the server-side and serve it to the user’s browser which can then easily download the page and render it. This way, the initial application loading can be performed with a single web request. We have already learned how to use Next.js for server-side rendering in the previous chapter. Further in this chapter, we will see how to use both client-side rendering and server-side rendering to create a fully functional application. Let us start by creating a simple React application.

Building a Simple React App

On executing the application using “npm-start” command, you should see “Hello from React.” printed on your browser window. Our starter React application is up and running. Let us now do this with the help of a React component.

Creating Functional React Component

Our component file will reside in the “src/Components” folder in the root directory of our application. Let us add the “App.js” file in the “Components” folder with the following code:

We will also need to make some changes to our “index.js” file in order to render the component instead of directly rendering the JSX code. Update the “index.js” file as per the following code:

If you run the application and visit the browser, you should see “Hello from React.” printed on the window. So far, we have not displayed the time on the browser. Let us do that using React props.

Passing Props to Functional React Component

We will simply pass the current time as props to the App component. The component will fetch the value from the props and render it to the browser. It is pretty simple. Let’s do that by modifying our code as per the following:

As you can see, we have passed the time string as props to the component, which is then rendered to the browser. However, the React will not update the DOM yet because we have passed a static time string and React does not know yet when the time changes. To implement this functionality, we will have to write some JavaScript code to update the time stored in the “props” as the actual time passes. But we cannot do that because “props” are read-only. Hence, we will have to use the “state” functionality provided by the React lifecycle.

Converting Functional Component to Class Component

Let us convert our function component to a class component. Once we do that, we will be able to use React’s “state” property in order to track changes to the time. The current directory structure of our application is shown in Figure 4-2.

You will have to make the following changes in the code:

As you can see, we are no longer passing the time string as props to the component. We set the state property to the current time in the constructor of our class component. Then we render it to the browser using the render method. The only difference here is that instead of fetching the value from “props”, we now fetch it from the “state”. Using the “state” property is necessary because as we discussed earlier, “props” are read-only and we cannot modify them directly.

Next, we had to find a way to update the state property with change in time. To do so, we created an interval using JavaScript’s setInterval() method. We did this in the componentDidMount() method of the React lifecycle in order to make sure that the interval is set only once the component is mounted to the DOM.

The interval calls the tick() method every one second which will eventually update the “state” object with the new time. As soon as the State is modified, React re-renders the view. Hence, the user sees a digital clock on the browser that ticks every second. We might want to clear the timer that we created when the component was mounted in the componentWillUnmount() method in order to avoid memory leaks in case the component is removed from the DOM.

That is it. Our application is completely functional. We have achieved this entirely by the approach of client-side rendering using React. Let us see how to add server-side rendering to this application using Next.js framework.

Using Next.js for Server-Side Rendering

If you try to launch the application, you will run into an error stating that the “Pages” directory is not found. We will have to create it and add our “app.js” file to that directory because that is where Next.js loads the pages from. We can delete our “index.js” file (which contains the code for rendering our components) because Next.js will take care of the rendering for us. We can also delete the “src” and “public” folders because they are of no use to us. For simplicity, we can rename “app.js” file in the “Pages” directory to “index.js” because, as we learned in the previous chapter, Next.js follows a page-based routing and it looks for “index.js” page on application startup. Now if you launch the application, you will see an identical timer to the one created using client-side rendering. If you want to verify that the content is being rendered on the server-side, you can right-click the page and view the page source. You will notice the presence of HTML code for the timer instead of an empty <div> tag. This tells us that the timer is not being generated using client-side JavaScript but is being generated on the server-side. However, the page is not being reloaded every second. This means that the update in the state is being handled by React on the client-side. This is exactly as we wanted it to be, initial application rendering on the server-side and other DOM changes on the client-side. Now that our application is up and running, let us add some styling to it.

Adding CSS to Next.js

Once installed, we will have to add a config file “next.config.js” to the root of our application with the following code:

This config file acts as an entry point to the webpack configuration of our application that is, by default, hidden by the Next.js framework. Once configured, we can create a stylesheet for our application and import it to our page along with other imports. Consider the following stylesheet that I have created in the “Resources” folder:

The current directory structure of our application is shown in Figure 4-3.

If you launch the application and visit the browser, you shall see an output similar to Figure 4-4.

We can also add Bootstrap to our application in order to add responsiveness to our application. Let us see how to do that.

Integrating Bootstrap to Your App

On the successful execution of this command, you shall see the bootstrap module added to our “node_modules” folder. Since we have already installed the Zeit CSS loader and configured it in our application, we will directly be able to import the bootstrap CSS file in our page and use the classes provided by the Bootstrap framework. Refer to the following code in order to understand how it is done:

We have completely removed our custom stylesheet “style.css” from our page and replaced it with the bootstrap stylesheet. We have used two classes from bootstrap – “jumbotron”, which allows us to define a header section for our application, and “text-center”, which makes sure that the content is center aligned. The output of the preceding code should be similar to Figure 4-5.

With this, we come to the end of this chapter. You can add some more pages to the application, establish links between them, and play around with the bootstrap classes. The more you explore, the more you will learn. Let us summarize what we have learned in this chapter.

Summary

Setting Up Jest

That’s it. Jest is now successfully installed. Let us write our first test using Jest.

Writing Your First Test Using Jest

Let us first create a simple JavaScript file that contains some basic functions. I have added a file called “functions.js” to the root directory of our application with the following code:

This file contains a simple “add” function that takes in two numbers as input and returns their sum as output. Note that we have used simple JavaScript syntax to export the list of functions as a module. Avoid using ES6 syntax because Jest expects the files to be plain JavaScript while they are imported. Now that we have created a JavaScript function, let us test it using Jest. We will add our test files in the “tests” directory. It is a good practice to name the test file as the same JavaScript file you are testing, with ".test.js" suffix. Consider the following test file that contains the code to test the “add” function:

On successful execution of the command, you will see the summary of test execution in the terminal, as shown in Figure 5-1.

The “Test Suites” denotes the number of test files, whereas the “Tests” denotes the combined number of tests in those files. In the preceding example, if we change the expected value to something else, let us say “4”, the test execution will fail. Let us try that. Consider the following changes to “function.test.js” file:

Now, if you run the “npm test” command, you will see in the terminal that the test execution has failed. As shown in Figure 5-2, you will also see the reason due to which the test execution failed, in this case, received value not being equal to the expected value. You will also see both received and expected values in the test execution summary.

Now that we have learned how to write tests for JavaScript functions using Jest, let us delve a little deeper and learn about different Matchers that we can use for testing our code.

Matchers

Matchers are function used by Jest in order to compare the evaluated value with the expected value. In the previous example, we used the “toBe()” Matcher provided by Jest. Note that we use the “expect()” function in order to evaluate the actual value. This function returns an expectation object on which we call our Matcher function to compare it with the expected value. Let us have a look at all the Matchers that are provided by Jest.

Common Matchers

The following are some of the general-purpose Matchers that are used very commonly:

• toBe(expectedValue) – This is the exact equality matcher. It checks if the value returned by the “expect()” function exactly matches the “expectedValue”.

• toEqual(expectedValue) – This is similar to the “toBe()” matcher, except the fact that it is used to compare the value of an object. It recursively checks every property of an object.

Let us look at an example in order to understand the common Matchers in working. Consider the following changes to “functions.test.js” file:

tests/functions.test.js

functions = require('../functions.js')

test('toBe Demo',()=>{

  expect(functions.add(2,3)).toBe(5)

})

test('toEqual Demo',()=>{

  var data = {name:'Mohit'}

  data['country'] = 'India'

  expect(data).toEqual({

    name:'Mohit',

    country:'India'

  })

})

To demonstrate the utility of the “toBe()” Matcher, we use the same “add()” function that we tested during the previous example. The function returns “5” and the “toBe()” Matcher asserts it to be true since it is the value that we are expecting.

For “toEqual()” Matcher, we define a new test, “toEqual Demo”. We define a “data” object with one property and then add a new property to the object. We now pass the “data” object to the “expect()” function and use the “toEqual()” Matcher in order to compare it with the expected output. Since both values match, Jest will assert the test to be true. The output of the preceding example should be similar to Figure 5-3.

If you want to try more scenarios, you can change the expected value in the preceding example and notice that the test fails.

Note

You can use the “Jest” extension by “Orts” if you are using Visual Studio Code editor. It provides IntelliSense for Jest and is also very helpful in debugging tests that you write.

Truth Matchers

These are the Matchers that let you check if the evaluated value is null, undefined, defined, true, or false. You need not pass any input parameters to these Matchers:

• toBeNull() – Matches null values

• toBeUndefined() – Matches values that are undefined

• toBeDefined() – Matches values that are not undefined

• toBeTruthy() – Matches the values that evaluate to true

• toBeFalsy() – Matches the values that evaluate to false

Let us look at an example in order to understand truth Matchers in working. The following new tests need to be added to the “functions.test.js” file:

tests/functions.test.js

...

test('truth of null', () => {

    const n = null;

    expect(n).toBeNull();

    expect(n).toBeDefined();

    expect(n).not.toBeUndefined();

    expect(n).not.toBeTruthy();

    expect(n).toBeFalsy();

  });

  test('truth of zero', () => {

    const n = 0;

    expect(n).not.toBeNull();

    expect(n).toBeDefined();

    expect(n).not.toBeUndefined();

    expect(n).not.toBeTruthy();

    expect(n).toBeFalsy();

  });

...

We have written two new tests in the preceding example, one to test the truthiness of “null” and the other to check the truthiness of the number zero. The null value should evaluate to null, defined, and not true. On the other hand, the number zero should evaluate to not null, defined, and false. If you use any number other than zero, it should evaluate to true.

Note that we have used “not” keyword to negate certain Matchers. So, if an expression evaluates to “false”, we can use the “not” keyword with “toBeTruthy()” Matcher in order to assert it. The output of the preceding example should be similar to Figure 5-4.

Comparison Matchers

These are the Matchers that allow you to compare the actual value to another value. The value to which you want to compare the actual value is to be passed as an input parameter to the comparison Matcher:

• toBeGreaterThan(value) – Asserts if the actual value is greater than the provided value.

• toBeGreaterThanOrEqual(value) – Asserts if the actual value is greater than or equal to the provided value.

• toBeLessThan(value) – Asserts if the actual value is less than the provided value.

• toBeLessThanOrEqual(value) – Asserts if the actual value is less than or equal to the provided value.

• toBeCloseTo(value) – Asserts if the actual value is close to the provided value. This is specially used while dealing with floating-point values. In such cases, the precision of the expected value and the actual value might differ, so the “toBe()” Matcher (exact equality) would not work.

Let us look at an example in order to understand comparison Matchers in working. The following are the new tests added to the “functions.test.js” file:

tests/functions.test.js

...

test('comparison', () => {

  const value = 4 + 0.2;

  expect(value).toBeGreaterThan(3);

  expect(value).toBeGreaterThanOrEqual(3.5);

  expect(value).toBeLessThan(5);

  expect(value).toBeLessThanOrEqual(4.5);

  expect(value).toBeCloseTo(4.2);

});

...

The actual value in the preceding example will evaluate to “4.2”. This is compared with multiple values using the comparison Matchers. Note that in order to assert the exact value, we have used the “toBeCloseTo()” Matcher instead of “toBe()” matcher due to a likely difference in precision. The output of the preceding example should be similar to Figure 5-5.

String Matcher

This Matcher is used to compare the actual value with a regular expression:

• toMatch(regex) – Asserts if the computed string matches the provided regular expression

Consider the following example:

tests/functions.test.js

...

test('String Matcher', () => {

  expect('Mohit is a Developer').toMatch(/Mohit/);

});

...

The preceding test asserts that the substring “Mohit” exists in the computed string. The output should be similar to Figure 5-6.

Matcher for Iterables

This Matcher is used to check if an item exists in an iterable such as a List or an Array:

• toContain(item) – Asserts if the computed iterable contains the provided item

Consider the following example:

tests/functions.test.js

...

const countries = [

  'India',

  'United Kingdom',

  'United States',

  'Japan',

  'Canada',

];

test('Matcher for Iterables', () => {

  expect(countries).toContain('India');

  expect(new Set(countries)).toContain('Canada');

});

...

In the preceding test, we define a list of countries and use the “toContain()” Matcher to check if “India” is present in the list. We also convert the list to a different iterable, a Set, and check if “Canada” is present in the new Set. Both the Matchers should assert true. The output should be similar to Figure 5-7.

Exception Matcher

This Matcher is used to assert if a particular exception is thrown while evaluating a particular piece of code:

• toThrow(expectedException) – Asserts if the evaluated piece of code throws the given exception

To test this Matcher, we will go back to our “function.js” file and define a function that throws an error. We will then add a test in the “functions.test.js” file which will invoke the function and assert the exception. Consider the following example:

function.js

const functions = {

    add: (n1, n2) => n1 + n2,

    invalidOperation: () => {

      throw new Error('Operation not allowed!')

    }

}

module.exports = functions

tests/functions.test.js

functions = require('../functions.js')

...

test('Exception Matcher', () => {

  expect(functions.invalidOperation)

    .toThrow(Error);

  expect(functions.invalidOperation)

    .toThrow('Operation not allowed!');

  expect(functions.invalidOperation)

    .toThrow(/not allowed/);

});

...

In the preceding example, we have invoked the function that throws an error and matched the computed value to the expected value using the “toThrow()” matcher. Note that we can either compare it to a generic error object, a specific string that the error returns, or a regular expression. The output of the preceding example should be similar to Figure 5-8.

That is it. We have covered most of the commonly used Jest Matchers. Let us now learn how to test our React components using what we have learned so far.

Testing a React Component Using Jest and Enzyme

Once the starter application is created, you can delete all the files that are not necessary. I have deleted all the files from the “src” folder except “index.js” and all the files from the “public” folder except “index.html” and “favicon.ico”. I have also cleaned up the “index.html” file. The following is the code for your reference:

Now that we have cleaned up our starter application, let us add our List component in the “src” folder. Consider the following code:

The preceding code is for a simple function component that fetches the items from the props and displays them as a list. Now that our component is created, we might want to instruct the “index.js” file to render it on the browser. Consider the following code for “index.js” file:

If you launch the application and visit the browser window, you should see an output similar to Figure 5-9.

After installing the Jest framework, you will also have to add the test script in “package.json” file as per the following code:

While testing simple JavaScript functions, we used to simply invoke the functions in our tests and compare the evaluated value to the expected value using Jest Matchers. But you might wonder what to do in case of a react component because we cannot just invoke a component.

Note that we have also installed an adapter along with the Enzyme framework that corresponds to the version of React that we are using. We will have to configure this adapter in Enzyme before we can use the framework. To do so, we will create an “enzyme.js” file in the root directory of our application and add the following configuration code to it:

What we are doing in the preceding code is that we import “Enzyme” and “configure” from the Enzyme framework and the “Adapter” from the Enzyme Adapter. We then use the “configure()” method provided by the Enzyme framework to set the Adapter for the instance of the Enzyme that we will be using. After configuring Enzyme, we simply export it. We also import shallow and mount from the Enzyme framework and export them as they are. These are the methods that we will be using to render our React components for testing. To conclude, all the entities of the Enzyme that we need for our testing will now be imported from the file “enzyme.js” instead of directly being imported from the framework. If you try to import the modules directly from the Enzyme framework installation folder, you might run into an error because they are not configured with the Adapter.

Now that everything is configured, let us write our test for the List component. Let us write the test in “List.test.js” file in the “src” folder. Refer to the following code:

Note that we have used two different methods to render our component – shallow and mount. Let us understand the difference between the two. As the name suggests, the “shallow()” method limits the scope of rendering to the specified component and does not render its children components. On the other hand, the “mount()” method renders the entire tree of components. In this case, we do not have any children components so the rendering would be the same in both cases.

We pass three items to the component for rendering. The rest of the syntax is similar to the one in which we tested the JavaScript functions. The “shallow()” and “mount()” methods return a React wrapper. If you want to see what the wrapper contains, you can invoke the “debug()” method on the wrapper and log the output to the console, just like we did in the preceding code. You can see in the output of the preceding test, shown in Figure 5-10, that the entire HTML rendering of our component is logged on the console. We can use the “find()” method on this wrapper to look for elements in the rendered code. We can pass multiple kinds of selectors to the “find()” method. This should be done in the “expect()” method so that we can use Matchers for the assertion. In the preceding example, we have used the class selector in order to evaluate and assert the existence and length of the list items. The following are some other selectors that you can use:

Also, we need to create a “.babelrc” file in the root directory of our application and provide the following configurations:

If you run the test after installing and configuring the babel transform plugin, the test should successfully run and the output should be similar to Figure 5-10.

That is it. We have successfully tested our React component using Jest and Enzyme. With the end of this topic, we come to the end of this chapter.

Let us summarize what we have learned.

Summary

Deployment Process

Now that we are aware of the deployment process, let us start by setting up the configuration for our application. If you do not follow or are confused about the process that we just discussed, do not worry. You will get a better understanding once we discuss each step in detail.

Setting Up Environment Variables

Environment variables are key-value pairs that can be read by our React application in order to configure the values on the runtime depending on the environment that the application is running in. It facilitates the dynamic behavior of the application. To understand this in working, we will use the GraphQL application that we developed in Chapter 3. The following is the code for your reference:

In this application, we are creating a Next.js API and consuming it on the index page of our application. While consuming the API, we are using “localhost” in the API URL. This will not work in the production environment. So, let us add environment variables and use them in code. Add a “.env” file with the following code that will contain our environment variables:

We have already used the “next.config.js” file to add our custom CSS loader to the webpack. We will use the same file to add the configuration for the “.env” file to the webpack. Add the following code to the “next.config.js” file:

Once the configuration is done, any variable that we add to the “.env” file will be available throughout the application. Let us now modify our “index.js” file to use the API URL dynamically based on the application environment. If you have worked with a Node.js application before, you would be aware that Node provides a static class “Process” that provides us access to the user environment in a property called “env”. We will use this class to determine the application environment. Consider the following changes to the “index.js” file:

When we launch the application using “npm start” command, we shall see an output similar to Figure 6-1. The data is fetched from the Next.js API that is a part of our application. This is because the “npm start” command runs the application on a local server in the development environment. We will also see the environment (development) printed in the header. We will test the same for the production environment once we deploy the application.

That is it about setting the environment variables. Let us now learn about Docker.

Introduction to Docker

Docker is a platform that allows us to package and execute our applications in containers that run directly on the host machine. This allows us to run multiple containerized applications simultaneously on a single host. This is particularly useful when we need to run applications targeted for different operating systems. Particularly in such scenarios, we will have to create virtual machines for each of the operating systems and then deploy our applications to their respective virtual machines. However, using Docker containers, this would not be the case. Since Docker containers directly interact with the host machine’s kernel, they do not need the extra load of a hypervisor (virtual machine). We simply need to create an image of our applications which will be used to create a container for our application. This containerized application will then run, alongside other containerized applications, on the Docker engine on Host OS. That is how you would be able to run applications targeted for different operating systems on a single host machine using Docker. The difference between containerized application and virtual machine implementation can be seen in Figure 6-2.

There are multiple components included in the Docker architecture that can be seen in Figure 6-3. Let us briefly understand each one of them:

• Docker Client – This is how users communicate with Docker. It provides commands that invoke the Docker API, which can be used to communicate with Docker daemon.

• Docker daemon – This is part of the Docker host that listens for API requests and manages objects such as containers and images. It can also communicate with other daemons.

• Images – A Docker Image is a read-only template with a layered set of instructions that are used to create a Docker Container. We can create our own image or use the one created by others and published to the Registry.

• Containers – A Docker Container is an instance of a Docker Image. We can perform operations such as start, stop, move, or delete on the container using the Docker API or CLI.

• Registry – A Docker registry stores Docker images. Docker Hub is a public registry that anyone can use. Docker is configured to look for images on Docker Hub by default. You can run your own private registry as well. When you run the “docker run” or “docker pull” command, the required images are pulled from your configured registry. When you run the “docker push” command, your image is pushed to your configured registry.

There are many more things that one can learn about the Docker platform. However, we will not go into the details since this chapter is about deployment and not about Docker. Let us learn how to containerize our application.

Creating a Docker Container for Your App

Now, let us get back to our project. We will have to add a “Dockerfile” to the root directory of our application with the following set of instructions that will act as the Image template and will be used to create the container for our application:

Let us understand what is happening here. Firstly, we are instructing Docker to start with “alpine”, which is a generic implementation of Linux. Then we create a new source directory and switch to it. We copy the “package.json” file to the new source directory and install all the dependencies to it. Finally, we copy the files from our node application to the new source directory. Then we build the application, expose the port on which the node server runs, and start the server.

However, we will need to modify our “package.json” file. Make sure that you have the following scripts in your file:

Note that we have specified the repository name using the target option (–t) along with the “docker build” command. The name we specified is used as a tag to the Docker Image and can be used to refer to the Image Container. Note that Docker Containers are nothing but live instances of Docker Images. So when we execute the “docker images” command, the list we see is a list of Docker Containers. The terms “Image” and “Containers” are often used interchangeably. However, do not get confused. On executing the command, we shall see a list of Containers similar to Figure 6-4.

That is it. We have successfully created a container for our application. Let us now learn how to host a Docker Container.

Hosting the Container

What we are doing here is that we add a tag name to the existing container and then remove the old tag name. “e65” is the first three characters of our Image ID, which is all that we need in this case.

On successful execution of the preceding command, a public repository will be created on Docker Hub, linked to our profile. We can verify this by visiting https://hub.docker.com/ and logging in with our credentials. On visiting the “Repositories” page, we shall see “myfirstdockerrepo” added to the list. The same is shown in Figure 6-5.

This command will run the production version of our application on our system. We specify two ports in the command using the “–p” option. The first port is for command-line operations, and the second one is for the web application. On successful execution of the command, the application will be up and running on port 3001. You can verify that by visiting the URL “http://localhost:3001/” on your browser. The output should be similar to Figure 6-6.

As you can see, the environment variable that we printed on the header on our index page is now showing “production” instead of “development”. This asserts that our application is successfully running on a production server. Note that the API data is presently not being fetched because we have not yet hosted our application on a public-facing cloud. You can use the services provided by platforms like DigitalOcean (www.digitalocean.com/) in order to host your containerized application to a public-facing cloud. However, if you have created this application for learning purposes and do not want to spend bucks on hosting services, running the production version of your application locally using Docker Desktop should suffice.

With that, we come to the end of this chapter.​ Let us summarize what we have learned.​

Summary