DEV Community: Ibas

React Tutorial: A Comprehensive Guide for Beginners (2023)

Ibas — Mon, 08 Feb 2021 12:28:36 +0000

Learn React and build this todos project with this course.

Do you want to learn React and build web applications from zero to deployment? Then, this course is for you!

This React tutorial will help beginners understand React concepts and how to implement them to build a performant React application.

Learning React is an excellent choice for a present-day developer. Many startups and corporate firms embraced the technology directly or indirectly through frameworks like Next.js, Gatsby, etc., for building high-performance, scalable, and maintainable web applications.

Why You Should Take This Course

Below are some of the reasons you should learn React:

You’ll get to build your ideal application within a short period. React has a shorter learning curve compared to many other frameworks/ libraries.
React has a large and incredible community. You’ll hardly get stuck on a problem without finding a mature solution.
You can easily transition to building native apps with React native if you want to develop mobile applications.
React is famous and in demand.

Prerequisites

To follow this course, we expect you to be familiar with the following topics:

HTML and CSS
JavaScript fundamentals like the object, arrays, conditionals, and so on
JavaScript ES6 features like the arrow functions, object destructuring, etc.

In case you are still struggling with JavaScript, do not worry! You can read and code along as we write our React applications. We will use the plainest language possible to explain every code.

At the end of this React tutorial course, we will have the following react projects in our toolbox:

Primary project: a todos application (see demo)
Dropdown menu and Modal (see demo)
React form (see demo)

For this course, we aim to cover React to length. So, we have divided the journey into series, with this lesson being the first part.

Now, we can get started!

What is React?

React (sometimes called React js) is a JavaScript library that originated at Facebook for building interactive user interfaces or UIs. It lets developers create sizeable web apps or complex UIs by integrating a small, isolated code snippet.

React js, in some quarters, is often called a framework because of its behavior and capabilities to build full-fledged applications. However, it is technically a library; it requires more libraries to form complex solutions. For instance, we will need additional libraries to solve standard application requirements like routing, data fetching, etc. On the other hand, JavaScript frameworks like AngularJS, Vue.js, and Ember.js comes bundled with nearly everything to build a complete application.

Declarative Programming and React

Coming from vanilla JavaScript, giving an HTML div container like so:

<body>
  <div id="root"></div>
</body>

We can render a paragraph in the div by writing the following code in a script file:

const root = document.getElementById('root');
const paragraph = document.createElement('p');
const paragraphContent = document.createTextNode("I'm a paragraph!");
paragraph.appendChild(paragraphContent);
root.appendChild(paragraph);

In the code above, we were saying:

Get the div element with root id.
Create a p element.
Create a text node for the p element.
Add the text to the p element
Finally, add the p element in the div.

When we provide step-by-step instructions to the compiler on how to perform a task (in our case, updating the UI), we use the imperative programming style. However, React lets us declaratively describe what we want instead of providing the steps, and it will figure out how to do the task for us.

Since we are only concerned about rendering the p element, all we need to do is to render something like this:

<p>I'm a paragraph!</p>

A declarative approach will help speed up the development process because we’ll not write code instructions telling the compiler how it should perform tasks.

Thinking in React Component

To build applications with React, we think of the user interface as a bunch of encapsulated, isolated, and reusable code snippets called components.

For now, think component as a simple function that we can call with some input and render some output

As we can reuse functions, we can also reuse components, merge them and create a complex user interface. Let’s take a look at the UI of our primary project:

To build this application or any other app with React (even as complex as Twitter), we will start by breaking down the user interface into smaller and encapsulated units, as outlined in the image.

Each of these units is a component tasked to do one thing. In the image, we have labeled the components to correspond to the following component names:

TodoApp: the parent or root component. It holds two direct child components.
Header: display the todos heading text.
TodosLogic: contains the application logic. It includes two direct child components.
InputTodo: will take the user’s input.
TodosList: serves as a container for the todos items.
TodoItem: renders the individual todos item.

As we can see, we have six components that form the user interface. If any components become complex, we can further decompose them into smaller ones. For instance, we may decompose the TodoItem into smaller components: one holding the checkbox, another holding the text of the todo, and the last containing the edit and delete button.

This modularity helps ensure we build an application that is flexible and maintainable.

Later in the course, we will add more components when we start with multipage routing. Till then, we will work with the components mentioned above.

The React Virtual DOM

When we build web applications, we often perform operations that manipulate the browser's DOM. For instance, with the DOM APIs, we can add or remove page elements, modify their appearance, and perform actions on the elements.

These DOM operations are lighter and very fast. However, when the state of the UI changes, it triggers a re-rendering which can be expensive!

The following code simulates a re-rendering page with JavaScript:

const update = () => {
  //   JavaScript
  const element2 = `
    <h3>JavaScript:</h3>
    <form>
      <input type="text"/>
    </form>
    <span>Time: ${new Date().toLocaleTimeString()}</span>
  `;
  document.querySelector('#root2').innerHTML = element2;
};

setInterval(update, 1000);

The setInterval() callback lets us trigger a simulated re-render of the user interface after every second. As we can see below, the DOM elements repaint on every update. The text input field also loses its state due to this re-rendering:

You can see the demo on Codepen.

The re-rendering behavior in the GIF above calls for optimization. Different JavaScript frameworks have their respective solutions and strategies to optimize re-rendering. For React, the team deploys the concept of virtual DOM.

Exploring the React Virtual DOM

As the name implies, virtual DOM is a “virtual” representation of the actual DOM. It is an object that React uses to replicate the real DOM to optimize re-rendering efficiently.

React deploys the concept of virtual DOM because it conforms with its declarative approach that lets us write more predictable code. With virtual DOM, we do not need to bother about state transitions. Once the state of the UI is updated, React ensures only the affected node(s) get updated in the actual DOM.

How React Implements Virtual DOM

When we render the UI of a React application, a virtual DOM tree representing that UI is created and kept in memory. On the next update, React will create a new virtual DOM tree and compare it to the previous snapshot using a diffing algorithm to detect necessary changes. This process is called reconciliation.

After that, React will use a renderer library to update the rendered application. This library will ensure the real DOM only receives and repaints the updated node or nodes.

Adding React to HTML Page

Let’s see how React handles re-rendering compared to the vanilla JavaScript example above. We'll add React to a section of an HTML page.

The HTML code below includes a div container element to hold React content and two scripts pointing to the React CDN.

<body>
  <h1>React in HTML</h1>
  <!--  React container  -->
  <div id="root1"></div>

  <!-- React scripts -->
  <script
    src="https://unpkg.com/react@18/umd/react.development.js"
    crossorigin
  ></script>
  <script
    src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    crossorigin
  ></script>
  <!-- load script file. -->
  <script src="script.js"></script>
</body>

Next, in a script file, we’ll add the following React js code:

const rootElement = document.querySelector('#root1');
const root = ReactDOM.createRoot(rootElement);

const update = () => {
  const element1 = React.createElement(
    'div',
    null,
    React.createElement(
      'form',
      null,
      React.createElement('input', {
        type: 'text',
      })
    ),
    React.createElement(
      'span',
      null,
      'Time: ',
      new Date().toLocaleTimeString()
    )
  );
  root.render(element1);
};

setInterval(update, 1000);

Let’s ignore most parts of the update function; we will discuss it in a moment. In the other parts of the code, we accessed a DOM element that we included in the HTML file and then created a React application with it:

const rootElement = document.querySelector('#root1');
const root = ReactDOM.createRoot(rootElement);

React uses the ReactDOM to ensure the real DOM only receives and repaints what is necessary. We then rendered the content assigned to element1 inside the DOM:

root.render(element1);

The content that we rendered is called React elements. They describe what we see on the screen. If we log the React element in the browser console:

let element1 = React.createElement(
 // ...
);
console.log(element1)

We will get an object representing the virtual DOM:

React creates this object whenever we render the React elements and keep it somewhere in the memory. React will also create a new virtual DOM tree if changes occur in the render and compare it with the previous snapshot to figure out what has changed.

React can do this quickly because the virtual DOM (being an object representing the UI) is very cheap to create and doesn't draw the user interface, unlike the actual DOM. After React finalizes the necessary update, it ensures the real DOM receives and repaints the updated node.

The GIF below demonstrates the behavior:

As we can see, only the rendered time whose state changes gets repainted on every re-render. Likewise, we are not losing the input value when a state change occurs in the UI. See the code and demo on Codepen.

You can read more on Virtual DOM in this article.

React Element and JSX

Earlier, we saw how we rendered React elements to describe the user interface. With that React syntax, we can complete a React application. However, React provides a more straightforward way to describe the user interface.

If we take a look at the HTML DOM structure in the GIF above, we have something like this:

<div>
  <form>
    <input type="text" />
  </form>
  <span>Time: ##:##:## PM</span>
</div>

If we copy and paste the code in a Babel repl editor, we will get the equivalent React elements that we used earlier:

Using Babel, we can transform the code on the editor's left to the one React understands on the right. Since the code on the left looks more straightforward and familiar, React allows us to build the UI using that syntax instead of writing the complex React elements.

If we update the React code example in the previous section with the familiar syntax, we will have the following:

let element1 = (
  <div>
    <form>
      <input type="text" />
    </form>
    <span>Time: {new Date().toLocaleTimeString()}</span>
  </div>
);

And the application would also work.

Now, why are we replacing JavaScript/React code with HTML? You may ask! Well, in React, the code above is not HTML but JSX.

What is JSX?

Writing JavaScript/React code to describe the UI is not simple, as we’ve seen above. This makes the React author create what looks like a JavaScript version of HTML called JSX or JavaScript XML.

JSX is a syntax extension for JavaScript that provides an easier way to describe the user interface. Under the hood, the JSX is translated to a regular JavaScript version at runtime since browsers cannot read it. Throughout the React js tutorial series, we will use JSX to describe the project's UI.

A few notes about the JSX:

We can write a valid JavaScript expression inside the JSX via the curly braces, {}.
Element’s attributes and event handlers are always in camel cases. A few exceptions are aria-* and data-* attributes which must be in lowercase.

Setting up the Working Environment

We’ve covered how to quickly interact with React by writing React code in an HTML file. In this section, we will prepare our development environment for production-worthy applications. We will set up development environments using a toolchain like create-react-app CLI, build tools like Vite, and also cover how to set up projects from scratch.

The `create-react-app` CLI

The create-react-app CLI comes bundled with what an average developer would need to bootstrap a React application. It will include React and other third-party libraries we will need, including Webpack, and Babel, which lets us use JSX and modern JavaScript features.

To install the CLI, we must have Node installed on our machine to access the NPM (Node Package Manager) tool.

Run node -v and npm -v in the terminal to see if you have node and npm installed, respectively. Ensure you have node>=14.0.0 and npm>=5.6

If you don’t have them installed, head to Node to download and install the latest stable version.

Next, cd into a directory to save the project. For instance, cd Desktop and run:

npx create-react-app react-todo-app

This command creates a react-todo-app project folder and includes all the starter files. Let's open the folder with a code editor:

cd react-todo-app
code .

For this project, we are using Visual Studio Code. You can use your favorite code editor.

We will see a file structure that looks like so:

react-todo-app
    ├── node_modules
    ├── public
    │    ├── favicon.ico
    │    ├── index.html
    │    ├── logo192.png
    │    ├── logo512.png
    │    ├── manifest.json
    │    └── robots.txt
    ├── src
    │    ├── App.css
    │    ├── App.js
    │    ├── App.test.js
    │    ├── index.css
    │    ├── index.js
    │    ├── logo.svg
    │    ├── reportWebVitals.js
    │    └── setupTest.js
    ├── .gitignore
    ├── package-lock.json
    ├── package.json
    └── README.md

Inside the Project Folder

The node_modules contains the files of the project’s dependencies. This includes react and other third-party libraries. The public folder contains the public asset of our application; it is where the static files reside. The index.html in the public folder holds a div container element where our application will appear.

The src folder contains the working files. The index.js file in the src directory will serve as the entry point to our application.

Let’s ignore the other files in the src folder; we will write everything from scratch. The .gitignore file lists the directories and files to ignore when we commit to a repository. The ReadME.md file is intended to provide instructions about the project. Lastly, package.json contains meta-information about the project. It also includes a list of project dependencies and helpful script commands.

Running the Development Server

If we open the package.json file and look for the scripts property, we will see a list of script commands:

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

We use the npm run #### command to run any scripts, where #### is the script name. We can ignore the run in the command for start and test scripts.

To start the development server, we will run the following:

npm run start
#or
npm start

The application should launch automatically in the browser window on port 3000. If nothing happens, visit localhost:3000 in the browser address bar to see the default app.

We can stop the development server with Ctrl + c.

Working Environment With Vite

Vite is a build tool that we can use to set up React projects. It provides faster installation and instant server start times compared to the create-react-app CLI. This makes it a go-to solution for most developers when creating a React project. See the npm trends against create-react-app:

Let’s set it up.

From the terminal, let’s run the following command and follow the prompt:

npm create vite@latest

We’ll enter a project name (for instance, react-todo-app) and then select React from the list of frameworks:

We’ll be prompted to select a variant between JavaScript and TypeScript. We’ll choose JavaScript.

Once that is done, let’s cd into the project folder and run npm install to install the necessary dependencies in the local node_modules folder.

cd react-todo-app
npm install

Let’s open the project with a code editor:

code .

Then, open the package.json file to see the following scripts:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
},

As we learned earlier, we can start the development server (in this case) by running npm run dev. The application should start automatically in the browser window on an available port. If nothing happens, check the terminal and visit the URL printed in it:

Create React App vs. Vite: Comparing the Folder Structure

Like the CRA, the src folder inside a Vite project also contains the working files. However, while the CRA uses the index.js file as the entry point, Vite uses main.jsx.

On the file extension, CRA is lenient as it allows both .js and .jsx files to write React JSX code. But Vite requires .jsx files by default for JSX code. In this course, we will use Vite to create our projects. However, you can follow along using your preferred solution.

Setting up React Environment From Scratch

Building React applications without using tools like Vite and CRA requires extra effort. We will install and configure a couple of libraries that the tools installed for us behind the scene.

Though most of the time, we'll start a React project using either a create-react-app CLI, Vite, or some other solutions. However, sometimes our project might require a minimal setup, of which some of the available tools might include things we probably don’t need.

The create-react-app, for instance, adds a lot of abstraction and makes it difficult to add a custom build configuration without ejecting the application. So, for this reason, it is wise to know how to set up a project for flexibility. Let’s do that!

Creating a Folder and Initialise a Project

Create a project folder, cd into it, and open it with the code editor:

mkdir react-project-no-cra
cd react-project-no-cra
code .

After that, run npm init -y to generate a package.json file. This lets us add scripts and keep track of the project dependencies.

Installing Dependencies

We’ll start by installing two fundamental React dependencies: react, which is the actual library, and react-dom, which lets us use React with the DOM.

npm install react react-dom

Next, we need a bundler like Webpack to bundle our codes and their dependencies and a compiler like Babel to transform our code to what all browsers understand. We will install both packages and their related dependencies as dev dependencies.

Starting with Webpack, let’s run this command:

npm install --save-dev webpack webpack-cli webpack-dev-server

Then, let’s add babel also:

npm install --save-dev @babel/core babel-loader @babel/preset-react @babel/preset-env

Next, we will install a plugin to assist with adding Webpack bundles file to HTML file:

npm install --save-dev html-webpack-plugin

Configuring Webpack

Since the goals in development differ from that of production, Webpack lets us create configuration files that target the different environments and another file to maintain a common configuration. That means we will create three files in the project root: webpack.common.js, webpack.dev.js, and webpack.prod.js.

In the webpack.common.js, let’s add the common configuration:

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true,
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [{ loader: 'babel-loader' }],
      },
    ],
  },
};

To include the common configuration in the environment-specific configurations (i.e., development and production), we will install a util called webpack-merge.

npm install --save-dev webpack-merge

Now open the webpack.dev.js file, and add dev-specific configuration:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
    port: 3001,
    open: true,
    hot: true,
    compress: true,
  },
});

Then, add the following in the webpack.prod.js file:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
});

Save all files.

In the module.exports object of the webpack.common.js file, we specified an entry option to tell Webpack where to look to start building the bundle. So let’s create a src/index.js file in our project root; we will add code to the file later. The output object is where we tell Webpack to output the bundled files.

The HTMLWebpackPlugin lets us use a custom HTML template where it will inject all necessary bundled files for us. Let’s create a src/index.html and add the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>React application</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

The focus here is the root div container. Similar to how we write React in HTML earlier, we will access this DOM element to display our application.

The module.rules in the config file let us set rules for modules. There, we tell Webpack to use babel-loader to transpile JavaScript files. In addition, we need to provide further instructions to the Babel loader to perform the task.

Let’s create a babel config file called .babelrc in the project root and add the following code:

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {
      "runtime" : "automatic"
    }]
  ]
}

Now, Webpack is configured to run a React application.

Defining Scripts

Next, we will modify our scripts in the package.json file to use the config files. Let’s update the scripts so we have the following:

"scripts": {
  "start": "webpack serve --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
},

Save the file.

Rendering React Code

Before we run the scripts, let’s open the src/index.js file and add the following code:

import React from 'react';
import ReactDOM from 'react-dom/client';

const rootElement = document.getElementById('root');

const root = ReactDOM.createRoot(rootElement);
root.render(<h1>Hello from React application</h1>);

Similar to how we rendered React elements in the HTML file earlier, the above code renders a simple JSX element in the root container. Here, we imported React and ReactDOM instead of loading them from their respective CDN.

The import statement is an ES6 feature that allows us to bring in React and ReactDOM objects from their respective modules.

If we save all files and run npm start, the project should start automatically in the browser window on the specified port, 3001.

If we try the npm run build command, a production-ready dist folder will be generated in the project root.

Handling Other Files

In our module.rules, we only added rules for JavaScript/JSX files. Let’s tell Webpack how to handle other file types.

Asset files:

If we add an src/images/react.svg file, and then import it to render an image so the src/index.js look like so:

// ...
import reactLogo from './images/react.svg';
root.render(
  <div>
    <h1>Hello from React application</h1>
    <img src={reactLogo} className="logo react" alt="React logo" />
  </div>
);

We will get an error if we start the server.

We need to update the module.rules in the webpack.common.js to include the asset resource type:

module: {
  rules: [
    // ...
    {
      test: /\.(png|svg|jpg|gif)$/i,
      type: 'asset/resource',
    },
  ],
},

And then, update the output object to include assetModuleFilename:

output: {
  // ...
  assetModuleFilename: 'images/\[name\][ext][query]',
},

CSS files:

If we add a src/styles/app.css file and include a CSS rule like so:

body {
  color: #ff2778;
}

After that, import the CSS file in the src/index.js file:

import './styles/app.css';

We will get an error if we run the dev server. Here also, we need to inform Webpack of the type of loaders to use to transform CSS files. So let’s install the following:

npm install --save-dev mini-css-extract-plugin css-loader

In the webpack.common.js file, import MiniCssExtractPlugin at the top like so:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

After that, add the plugin in the plugins array:

plugins: [
  // ...
  new MiniCssExtractPlugin({
    filename: 'styles.css',
  }),
],

Then, update the module.rules to use the loaders like so:

module: {
  rules: [
    // ...
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader'],
    },
  ],
},

If we save all files and test our work, it should work!

Great job!

As we can see, setting up the development environment from scratch can be overwhelming. Though, this should be a one-time setup you can reuse for other React projects. You can find the source code on this GitHub repository.

Again, often, we will use either the create-react-app command or Vite or a React-based framework to kickstart a new React project.

That is it for the first lesson.

We’ve laid the foundations for building a fantastic React application and becoming a React developer. Hopefully, you’ve learned something new about React. It is worth saying that this is only a teaser of what we covered in the React series.

In the next part, you will learn about React components and data models and start implementing them to build React projects.

If you enjoy reading this post, take a moment to follow Ibas on Twitter, so you can catch all web development tips and tricks.

Next part.

5 Simple Tips to Learn JavaScript Effectively and Fast

Ibas — Tue, 01 Dec 2020 10:32:00 +0000

If you have been learning JavaScript or web development in general but still, you feel like you are not good enough on the subject. Or maybe you are finding it hard to retain all of your learnings or even applying them. This article is for you.

You probably have heard about this phrase:

To be a better developer, you must do many projects.

Well, if only it’s that easy. Especially for beginners who do not know how projects work!

This article takes away your fears and uncovers what you should and should not be doing to learn JavaScript in a much faster and effective way.

Before we get to the actual tips, let’s revisit how we learn.

The general approach to learning JavaScript or other programming languages is either you go from the top to bottom or the reverse.

What do I mean?

Some of us learn the fundamentals of a subject before proceeding to the next phase. Likewise, some others learn by creating a complete project (while following a step-by-step video or guide) without knowing the fundamentals.

While each of these methods has its pros and cons, we will not discuss that in this article. It’s fine if either of the methods works for you.

However, here, I will show you the simple tips, if followed rigorously will not only fast track your learnings, but also help you retain what you have learned.

Good. Let’s go to the first tip.

Set a goal and pick what to learn

JavaScript is broad with a lot of branches. For this, it is ideal that you pick one tech and leave out other technologies outside of that.

But if you are just getting started, making this decision would be tough because it is hard to figure out where to start. In this case, you’ll need to follow a well-structured curriculum. More on that later.

The emphasis here is to learn to choose a JavaScript tech and focus on that ALONE.

How? JavaScript, as you may know, is used both in the client-side (i.e frontend) and also as a server-side programming language in the backend. And each of these sides has different technologies associated with them.

In the frontend, for instance, we use Vanilla JavaScript (which is a plain JavaScript without the addition of libraries), JavaScript frontend frameworks like React, Angular, Vue etc. Likewise, In the backend, we use a type of JavaScript called Node.js and its Express.js framework.

As you can see, there are a lot of things to learn.

So in order not to get overwhelmed and bored easily, you should only focus on one thing and leave out all other things outside of that.

Now, here comes the question, where should you start from?

This takes us to the next tip.

Follow a well-structured curriculum

Always avoid learning anything that comes your way. You have to follow a structured syllabus. If you attend a boot camp, you’d most likely follow a standard curriculum while learning. But being a self-taught developer, it’s your duty to find a standard structure to guide you through.

This ensures that you are not leaving out anything you should know on the subject.

One of my favorite methods is to take a look at the freeCodeCamp. They have a well-defined structure you can follow to be on the right path. If you want to take it further, you can also look at some of the online learning platforms like Udemy or Coursera for a structured syllabus. Mind you, the essence of this step is to have something to guide you throughout your learnings. Once you have a structured curriculum, get started and learn.

But… don’t get stuck in the tutorial hell. What do I mean? Let’s find out in the next tip.

Start with the fundamentals but don’t do an endless tutorial (simply get started with projects)

This step is very crucial as it decides your learning curve. You don’t want to be carried away with the lots of tutorials out there because you may get stuck in the tutorial hell if not careful.

This is a strange place where you unconsciously do lots of tutorials especially on a subject and never stop. You discover that no matter what, you always feel you are not good enough to start a real-world project.

Trust me, I’ve been there. So try to avoid it as the pit is so deep.

What is the way out?

Never read more than two materials or course on a subject (a good one is better). The essence is to understand the fundamentals. Once you do, discard it as soon as possible and start learning the rest on the job through projects.

Mind you, at the very beginning – i.e while studying the fundamentals, learn in such a way that you implement every bit of information you read. In other words, you must not proceed unless you put the knowledge into practice.

Now, you have a grasp of the basics. What next?

Start building stuff even if nothing works at first. You’ll discover that you learn more in the process than you would by following tutorials.

Though, it’s kind of scary because you might feel you are not good enough to start a project. Trust me, you are good to go. Just take the bold step and you will never regret it.

You can start by finding an open-source project on GitHub; scrutinize the source code to see how things are connected. This has a whole lot of benefit as you’ll get to see how every topics and sub-topics are connected to form a complete solution/ project.

This way, you get to appreciate what you have been learning. Thus having the urge to learn more. From there, you can start to think of a feature you can code. Start coding by writing what you know and get stuck. That is expected!

Next, you’d need to find your way out.

Knowing how to search for solutions

Trust me, if you spend years upon years following tutorials either by watching videos or reading guides, you will still come across problems if you are working on projects.

knowing how to come up with solutions is one of the great skills you’d need.

As said earlier, it is expected you get stuck while working on projects. So it’s your responsibility to find a solution to any problem you encountered.

Most of the time, Google and Stack Overflow are your friends. But you should always start with Google and see the options you have. You’ll be amazed how much knowledge you easily acquire doing this.

Get used to reading the documentation

Have you ever asked yourself that “why is so and so, so good in what they do”? The secret is that most of them get used to reading the documentation and as such have a grasp of the subject matter.

Just like every product comes with a manual, dev technologies and frameworks comes with their documentation. Though, it might be technical especially for beginners which is very understandable. But trust me, the earlier you are comfortable reading the doc, the better you are getting to the pick of your dev journey.

The advantage here is that you’ll get firsthand information from the creator which increases your knowledge and confidence on the subject.

Conclusion

Sometimes during your journey as a developer, you might have wondered if what you are doing is worth it. This is because it’s taken more time than you think to get things done. It’s completely normal. Don’t give up. Be yourself and learn at your own pace but be consistent.

Always remember, once you understand the basics, jump straight to applying your learnings through projects. Never wait until you accumulate enough knowledge.

In addition, if you can find a code buddy, please do to keep yourself motivated.

I hope you find these simple tips useful? Endeavour to share around the web. And if you have any tips you know that works for you, do share with us through the comment section.

JavaScript Foreach: A Comprehensive Guide for Beginners

Ibas — Fri, 07 Aug 2020 10:32:00 +0000

Straight to the point! What exactly is forEach in JavaScript, where is it coming from and what are the use cases – including how to use it on the "array-like" objects?

At the end of this guide, you’ll find answers to those questions.

If you are familiar with array, let’s take a look at this:

const lists = ['item1', 'item2', 'item3']

And if you console.log(lists) or simply add the line to your console, you’ll get your data. That is pretty straight forward.

The notation above is called array literal and it’s very simple to use.

But internally, the JavaScript engine, instead uses the inbuilt Array() constructor function like so:

const lists = new Array('item1', 'item2', 'item3')

This is the equivalent object notation.

If you replace the literal notation with the above, you’ll see the same structure in the console.

Now, if you go a step further and check this Array constructor, you’ll find a prototype property consisting of several methods. Let’s take a look really quick.

Type Array.prototype. in the console, you’ll find the forEach alongside other methods:

That is where it’s coming from.

Ok. If you know how the prototype property works in OOP, all the methods defined on it including the forEach are inherited and available to the object instance. In this case, the lists array.

That means we can call it directly on the lists array like so:

lists.forEach()

So what exactly is ForEach?

ForEach is one of the means of looping or iterating through arrays. In modern JavaScript, it is commonly used in place of the traditional for loop.

Let’s take a look at its syntax:

forEach(callback(currentElement, index, arr), thisValue)

It receives a callback function as an argument and executes it for each element in the array. This callback function accepts three arguments – the current element (which is required), its index and the Array which the element belongs to – i.e arr.

Also, the thisValue parameter (if specified) will be used as the value of this in the callback.

That is that, let’s see it in practice!

We’ll start with a simple for loop so you have a glimpse of how the loops work. This will also serve as a refresher for us.

So set up your basic .html and link a .js file (or simply use the browser developer tools if you are comfortable with it).

In your .js file, add the following code:

const lists = ['item1', , 'item2', 'item3']
const newList = []

for (let i = 0; i < lists.length; i++) {
  newList.push(lists[i]);
}

console.log(newList);

Here, we are looping through the lists array and then pushing every iterated element into a newList array.

Please notice the infrequence in the lists array. We are intentionally not defining any elements between the first and the third array items.

If you save the file and check the newList in the console, you should see this output:

["item1", undefined, "item2", "item3"]

We are getting an undefined value on the first index, lists[1] i.e the second array item.

Let’s see how the forEach method handles the same iteration.

Replace the for loop with this:

const lists = ['item1', , 'item2', 'item3']
const newList = []

lists.forEach(function (list) {
  newList.push(list);
})

console.log(newList);

The output:

["item1", "item2", "item3"]

What is happening?

By using the forEach method, we are saying that “for each of the iterated element (i.e individual list) in the lists array, let’s perform a certain function.

Again, the function is pushing every iterated element into a newList array. But, on getting to the second array item, forEach skips the empty slot and move on.

Let’s optimize our code further.

We can make it more concise by using the ES6 arrow function. If you rewrite the callback using the arrow function, you should have:

const lists = ['item1', , 'item2', 'item3']
const newList = []

lists.forEach((list) => newList.push(list))
console.log(newList);

Save and revisit the console. It should work perfectly.

Good. That is a great start.

Let’s take a step further by applying the other optional callback parameters.

Simply add the following code in the .js file:

let numbers = [2, 4, 6, 8, 10];

numbers.forEach((number, index, arr) => {
  arr[index] = number * 2; // arr = [2, 4, 6, 8, 10]
})

console.log(numbers);

As usual, the forEach is looping through the numbers array and executing the callback function for each element. In this callback, all we are doing is updating the numbers array by multiplying its current iterated element by 2.

And we are referencing the array and its indexes using the arr[index].

Save the file.

The output:

[4, 8, 12, 16, 20]

Moving on.

Applying the second argument of the forEach method – i.e the `thisValue`

Sometimes, you may be working with this keyword in your forEach loop. And if you are familiar with the keyword, you’ll know it can reference different object.

To bind that keyword to your object of interest, JavaScript forEach provides us with thisValue argument as specified in its syntax.

Let’s see a use case.

Start by adding the following code in your .js file:

function MyNumber() {
  this.data = [];
}

MyNumber.prototype.multiply = function () {
  console.log("test");
}

const num = new MyNumber()

num.multiply();

If you’ve ever written object-oriented style of code, you should be familiar with the above.

We defined a constructor function, MyNumber containing a data property and a multiply method.

In case you are not familiar with the code, I have a step by step guide that explains it to details.

At the moment, the code is not doing anything much. If you save it and check the console, all you’ll see is a “test” message.

Now, let’s update the code so you have:

function MyNumber() {
  this.data = [];
}

MyNumber.prototype.multiply = function (numbers) {
  numbers.forEach(function (number) {
    console.log(this);
    this.data.push(number * 2)
  })
}

const num = new MyNumber()

num.multiply([2, 4, 6]);
console.log(num.data);

The area of focus is the multiply method. Its function is receiving array as an argument which we are looping through using the forEach method.

The logic here is that we want to update the empty data array by pushing new array elements into it. So we need to reference the data property using this keyword within the callback.

But if you save the file and look at the console, you’ll see something like this:

In addition to the console error, we are also seeing the Window object because we console.log(this) inside the forEach.

Meaning that this is referencing the global object which is the Window. Instead, we want this to reference the current object instance.

That is where the second argument of the forEach comes in. So simply add this as the argument and save your file. You should be good.

numbers.forEach(function (number) {
  console.log(this);
  this.data.push(number * 2)
}, this)

If you check the console once again, you’ll see that this is now pointing to the object instance.

Output:

[4, 8, 12]

Using the arrow function as a callback

You can avoid using this as the second parameter of the forEach method if you replace its callback function with an arrow function. Like so:

numbers.forEach((number) => {
  console.log(this);
  this.data.push(number * 2)
})

Save and test your code. It will work because arrow function lexically bind this value – i.e the value of this keyword is determined by its context or surrounding scope.

ForEach() always return undefined

You have to be cautious about this because it’s easy to forget. If you try to return a forEach function, you’ll get an undefined value.

Let’s see. Add the following code in the .js file.

let numbers = [2, 4, 6, 8, 10];

const myNum = numbers.forEach(number => {
  return number * 2
})

console.log(myNum);

As you can see, we are returning the forEach logic and assigning the result in the myNum variable.

If you save the file and open the console, you’ll see an undefined value.

Well, if you’d like to return something, use another method like map(). It has a similar definition to the forEach.

Let’s take the same code and replace forEach with map method like so:

let numbers = [2, 4, 6, 8, 10];

const myNum = numbers.map(number => {
  return number * 2
})

console.log(myNum);

Save your file and revisit the console.

Output:

[4, 8, 12, 16, 20]

Unlike the forEach(), the map() method returns a new array containing the results of calling a function on every array element.

Working with Array-like Objects

If you have ever worked with the HTML DOM, you should be familiar with the DOM methods like getElementsByClassName(), getElementsByTagName() and querySelectorAll().

These methods can be used to gather a bunch of elements in a document. And they either return an HTMLCollection or a NodeList (both of which are array-like objects).

In this section, you’ll learn how to iterate these objects using the forEach.

Let’s see a practical example. Add the following to your .html file:

<ul class="list">
  <li class="list-item">item1</li>
  <li class="list-item">item2</li>
  <li class="list-item">item3</li>
  <li class="list-item">item4</li>
</ul>

If you try to grab all the li elements using the DOM methods, you’ll have:

let itemsByClassName = document.getElementsByClassName('list-item')
console.log(itemsByClassName);

Output:

HTMLCollection(4) [li.list-item, li.list-item, li.list-item, li.list-item]
0: li.list-item
1: li.list-item
2: li.list-item
3: li.list-item
length: 4
__proto__ : HTMLCollection

OR…

let itemsByQuerySelector = document.querySelectorAll('.list-item')
console.log(itemsByQuerySelector);

Output:

NodeList(4) [li.list-item, li.list-item, li.list-item, li.list-item]
0: li.list-item
1: li.list-item
2: li.list-item
3: li.list-item
length: 4
__proto__ : NodeList

From the output, you would think they are arrays because they look like so (since they contain indexes and length property). But they are not!

Both the HTMLCollection and the NodeList are objects that look like an array, hence Array-like objects.

What that means is that most of the Array methods available through the Array.prototype. would not be available on them. Instead, they inherit methods from Object.prototype.

So how can we use the forEach to loop through the li elements?

Fortunately, NodeList inherits a few of these Array methods of which the forEach is one of them. So, we can iterate the NodeList directly using the forEach method like so:

let itemsByQuerySelector = document.querySelectorAll('.list-item')

itemsByQuerySelector.forEach(item => console.log(item.innerText))

In the callback, we are logging the inner text for each of the iterated elements.

Output:

item1
item2
item3
item4

If you do the same thing with the HTMLCollection, you’ll get this error:

Uncaught TypeError: itemsByClassName.forEach is not a function

To loop through this type of Array-like object, we can use a call() method. This allows us to use a method that belongs to another object.

In our case, we want to call the forEach method available on the Array.prototype object and then use it on the HTMLCollection.

Your code should look like so:

let itemsByClassName = document.getElementsByClassName('list-item')

Array.prototype.forEach.call(itemsByClassName, (item) => console.log(item.innerText))

Save and check the console. You should have the same output.

Converting Array-like Objects to Array

An alternative to looping through the array-like objects is to first transform it into an array. We can use a method called Array.from() or use the Spread syntax (…) for that.

Let’s quickly take a look.

let itemsByClassName = document.getElementsByClassName('list-item')
let itemsArray = Array.from(itemsByClassName)
console.log(itemsArray);

It’s pretty straight forward.

Output:

(4) [li.list-item, li.list-item, li.list-item, li.list-item]
0: li.list-item
1: li.list-item
2: li.list-item
3: li.list-item
length: 4
__proto__ : Array(0)

The result is the same if you use the spread operator like so:

let itemsByClassName = document.getElementsByClassName('list-item')
let itemsArray = [...itemsByClassName]
console.log(itemsArray);

The spread syntax (…) “spreads” or expands the array-like object inside the square brackets, [] making it a proper array.

Now, you can use the forEach method directly on the array.

Another example of an array-like object.

Before we roundup, you may come across this structure of Array-like objects:

const arrayLike = {
  0: 'item1',
  1: 'item2',
  2: 'item3',
  length: 3
};

Unlike the earlier once, this type is not iterable and you cannot use the spread syntax to convert it to an array. In this case, you simply use the Array.from() like so:

const newArray = Array.from(arrayLike)
console.log(newArray);

Output:

["item1", "item2", "item3"]

From there, you can call the forEach method on the output to loop through.

Or if you like, simply use the earlier method of calling the forEach indirectly using the call() method like so:

const arrayLike = {
  0: 'item1',
  1: 'item2',
  2: 'item3',
  length: 3
};

Array.prototype.forEach.call(arrayLike, (item) => console.log(item))

If you save the file and check the console, you should see your items.

Conclusion

We have seen almost all the use cases of the forEach method. From iterating through a simple array to working with the array-like objects and almost all that is in-between. Now, you should be able to apply it in your project.

If you have any questions, please let me know through the comment section.

And if you like this tutorial, endeavor to share it around the web and follow me on Twitter for more updates.

Object-Oriented JavaScript: Complete Beginner’s Guide

Ibas — Sat, 25 Jul 2020 10:32:00 +0000

In JavaScript and every other programming language, there are different ways you can write and organize your code. It can be procedural, functional, object-oriented etc.

These are called the programming paradigm.

Knowing these major styles of programming is an essential skill for every developer. You’ll always come in contact with them either you are working on your project or some other existing once.

In the procedural style, for instance, we organize code in terms of procedure or task. This is an easy style of writing and you’ve most likely written one.

Let’s take a look at the following code:

const btn = document.querySelector("button")

function displayButtonText() {
  console.log(`This is the text in the clicked button: ${btn.innerText}`)
}

btn.addEventListener("click", displayButtonText)

Here, we are splitting the code instructions into procedures. Likewise, the data and the function that operates on them are separated from one another – i.e they are decoupled.

To see the code in action, you can create a simple HTML file and add a button element. Add the above code to a linked .js file. Then look up the console of your browser to see the message on click.

Ok.

This is not the approach of the object-oriented JavaScript. It aims at using the object to implement real-life entities (which helps us easily achieve modularity) instead of thinking in terms of individual variables and function.

In this OOP tutorial, we will take a look at this style of programming in JavaScript.We cover the object fundamentals, OOPS concepts, the ES5 constructor function, the prototype concept, inheritance and the ES6 class syntax.

Let’s get started!

What Is Object-Oriented Programming (OOP)?

As the name implies, it is a style of programming that is centered around object instead of function. If we take the code above and re-write it in OOP way, you will have something like this:

class DisplayButtonText {
  constructor() {
    this.btn = document.querySelector("button")
    this.btn.addEventListener("click", this.buttonClick.bind(this))
  }

  buttonClick() {
    console.log(`This is the text in the clicked button: ${this.btn.innerText}`)
  }
}

let myButton = new DisplayButtonText()

"But…. I just read that OOP is centered around an object. Why am I seeing class in the code above? Again, what is this and new that I'm seeing?"

Don’t worry about them for now, we will take it from the ground up.

Keep reading!

A Quick Look at JavaScript Object

An object is a collection of name/value pair called object members. Each of these members can either be a property or method depending on their respective types.

If the value of an object member is a function, it is referred to as the object’s method. Otherwise, it is an object’s property (this hold any value types/primitives or other objects including an array).

The property is the data associated with the object while the method is an action that can be performed on the object.

Let’s see this in practice.

Creating Objects in JavaScript

The simplest way to create an object is through the structure below:

const book = {}

This is called object literal.

From there, you can add a collection of name/value pairs inside like so:

// object literal
const book = {
  title: "book_one",
  genre: "sci-fi",
  author: "Ibas Majid",
  bookDetails: function() {
    return `Name: ${this.author} | Title: ${this.title} | Genre: ${this.genre}.`
  },
}

At this point, we have access to the member’s values. And we can get them using the dot notation or bracket notation.

For the object’s properties, we use either of the dot or bracket notation. But the object’s method can only be accessed using the dot notation.

If you update your code with the following and then check the console, you should see your information.

console.log(book.title) // book_one
console.log(book["genre"]) // sci-fi
console.log(book.bookDetails()) // Name: Ibas Majid | Title: book_one | Genre: sci-fi.

Just as we were able to have access to the member’s value, we can also set values using the dot or bracket notation. You will see that later in this guide.

What Exactly Is “this”?

this is a keyword that simply refers to the object it belongs to. In our book object, this keyword is present in its method. Therefore, it refers to the book object that owns the method.

The keyword could also reference the global object (i.e window) or even undefined depending on where it is being called.

Tips: Always console.log the this keyword anywhere you want to use it if you are not sure what it references.

If we revisit the DisplayButtonText class earlier in our code, we also have this keyword. Let’s take a look at its behavior for more understanding.

Normally, we can create an object instance from a class with the new operator (we will get to this later). Now, this keyword in the class constructor would reference the current instance of the class. In the code, myButton variable.

If you log this in the constructor and also log the myButton variable after the instantiation at the bottom, you’ll see that they point to the same thing.

That is fine.

But an issue arises in the event handler function. This is because this in the handler is bound to the element on which the listener is placed. In this case, the button element.

That is the default behavior.

To override it, we used the ES5 bind() method. This ensures that the value of this point to the class instance just like the other this in the class constructor.

To see a clearer picture,

Let’s log this keyword in the handler method and click on the button.

buttonClick() {
  console.log(this); // DisplayButtonText {btn: button}
  ...
}

If you check the console, you’ll see that this point to the class instance.

But if you temporarily remove the bind(this) method from the event listener and click the button once again, this keyword in the handler method will point to the button element.

class DisplayButtonText {
  constructor() {
    ...
    this.btn.addEventListener("click", this.buttonClick);
  }

  buttonClick() {
    console.log(this); // <button>Click me</button>
    ...
  }
}

Another way you can have this keyword point to the correct object without the bind() method is to modify the handler to use the ES6 arrow function.

class DisplayButtonText {
  constructor() {
    ...
    this.btn.addEventListener("click", this.buttonClick);
  }

  buttonClick = () => { console.log(this); ... };}

This works fine because the this inside the arrow function will reference the object instance of the class.

You can read more about the keyword here.

Moving on.

Now that you have a basic understanding of the object, let’s briefly discuss the OOPS concepts.

Object-Oriented Concepts

A program is said to be object-oriented if it has the following core principles – Encapsulation, polymorphism, inheritance and abstraction.

For easy remembrance, I coined this acronym for you – EnPIA

In this section, we will take a brief look at each of them.

Inheritance – As the name implies, OOP is telling us that you can have a class that inherit the attributes and behaviors of another class, thereby creating a parent-child relationship.

The parent class is also called super or base while the child class is also called sub or derived.

Polymorphism – Simply means the condition of occurring in several different forms. In OOP, it means that you can have a method or function which can be presented in multiple forms. So that when you invoke (call) any of these forms on different object types, they respond appropriately.

You will see their implementations later in this guide.

Abstraction – This is a way of modelling a real-world object with the most essential features. When you think of Abstraction, the focus is on what the object does rather than how it does it.

Let’s take a look at this analogy:

Imagine a system like a Microwave machine. As a user, when you press any button, it executes a sequence of operations behind the scene. But you don’t need to know about the details of operations. What you are concerned about is that if you press “this and this” button, “this and this” happen.

So as a developer, what Abstraction is telling us is that, when modelling a system or object, you should only reveal the most necessary features. And not the internal implementations.

Encapsulation – Literally means enclosing data and information in a unit. In OOP, we can bind data and the methods that operate on them inside a class and restrict the direct access to their state. This allows us to hide the implementation details or state that is not meant to be exposed to the outside world.

I hope it’s clear?

Anyway, just take note of these concepts as you will get to see some of the implementations as you read on.

Back to our book object.

Creating Multiple Objects

Let’s assume we want to create more than one similar book object. We could simply duplicate the object literal for as many books and modify their values accordingly. But that is not practicable.

So, one way we can achieve our aim is by creating a function.

Creating Objects Through Function

Start by adding the following code to your .js file.

// function
function createBook(title, genre, author) {
  const book = {};
  book.title = title,
  book.genre = genre,
  book.author = author,
  book.bookDetails = function () {
    return `Name: ${book.author} | Title: ${book.title} | Genre: ${book.genre}.`;
  };
  return book;
}

Nothing complex is happening in the code. We created a normal function that accepts our book data as argument. Inside this function, we defined the book object and as well returned it.

Earlier, I said we can add object members (i.e properties and methods) to an object literal through the dot or bracket notations. That is what we did in the function.We simply create an empty object and add members to it.

The code above is the same as the following:

function createBook(title, genre, author) {
  const book = {
    title: title,
    genre: genre,
    author: author,
    bookDetails: function() {
      return `Name: ${book.author} | Title: ${book.title} | Genre: ${book.genre}.`
    },
  }
  return book
}

Here, we are adding the members directly.

Note: Since we define an object whose name/value pair is the same, you can use shorthand and simply replace with the name. For instance, title: title becomes title.

At this point, we can create as many objects as we want by calling the function like this:

const book1 = createBook("book_one", "sci-fi", "Ibas Majid")
const book2 = createBook("book_two", "fantasy", "Alice M.")

Then, you can call any members on the object using the dot or bracket notation as the case may be.

console.log(book1)
console.log(book2)
console.log(book1["author"])
console.log(book1.bookDetails())
console.log(book2.bookDetails())

Creating Objects Through the Constructor Function

JavaScript provides a more elegant approach to create objects using the constructor function. it emulates the OOP class behavior.

Later in this guide, you will learn how to use the class syntax which is sort of a “syntactic sugar plus extras”. For now, think of this function as a class.

As you may know, a class is simply a blueprint or template to create objects.

Now, to create several books object via the constructor function, we need to first define a blueprint through this function like so:

// Constructor function
function Book(title, genre, author) {
  this.title = title,
  this.genre = genre,
  this.author = author,
  this.bookDetails = function () {
      return `Name: ${this.author} | Title: ${this.title} | Genre: ${this.genre}.`
  }
}

Note: By convention, always start the constructor function name with a capital letter.

Using this Book template, we can create actual objects like so:

const book1 = new Book("book_one", "sci-fi", "Ibas Majid")
const book2 = new Book("book_two", "fantasy", "Alice M.")

From here, you can call any members on the object using the dot or bracket notation.

What is happening in the code?

Nothing really, the code is similar to that of the object created through the normal function earlier. Well, constructors are also functions as you can see.

But here, we are using this to reference the current object instance. In this scenario, when we create the book1 object, this would point to book1. The same thing applies to book2 and any other object instance you create.

The new Operator

This operator allows us to create a new object instance from our reusable blueprint (in this case, Book).

If you look closely, the way we create an object using the normal function is similar to that of the constructor function. Except that in the constructor function, we are not explicitly creating and returning an object.

The new operator does that for us behind the scene. It creates an empty object; set this to point to that object and return it.

Let’s take a step further.

If you try entering any of the object instances, book1 or book2 into your console, you’ll see something like this:

While it works, we don’t need the bookDetails() function in the actual object as seen in the image above. You’ll also find this function for every new instance of the Book constructor function. This may cause an issue for memory sensitive applications.

So what is the solution?

That brings us to another important sub-topic.

The Concept of Prototype in JavaScript

The idea behind the prototype is very simple. It is the logic behind an object inheriting features from another object.

We have two distinct prototypes – the object’s prototype and the prototype property.

These are kind of confusing. So you have to read carefully.

You can think of the object’s prototype as a template from which features are inherited. Take for instance, if you type book1. – from our last code above – in the console, you’ll see something like this:

We understand where the title, genre, author and the bookDetails are coming. They are members we defined on the Book() constructor which are then available to every object instance created from it.

In this case, the Book() is the template for book1 object – in other words, the Book() is the book1 prototype object.

In the same line, the Book() constructor function also looks up to a template (which becomes its prototype object) where it inherited members from. That object is the global Object. And it holds all the other members you see in the image.

The image below will do justice to the explanation.

This explains that book1 object inherits members from its constructor, Book(). And because the Book’s template/prototype is the global Object(), book1 can also inherit members from the Object().

Now, we know that these inherited members are coming from the constructor function – either the global Object or our Book.

But where exactly can we find them?

They are defined on the prototype property on the constructor functions.

If you type Book.prototype. or Object.prototype. in the console, you’ll see the methods.

With this prototype property, we can add new members to the list of methods to be inherited by object instances.

Now, we don’t need to define methods directly in the constructor function.

Let see the implementation.

If you modify the Book constructor function to use this prototype property, you should have:

function Book(title, genre, author) {
  this.title = title
  this.genre = genre
  this.author = author
}

Book.prototype.bookDetails = function () {
  return `Name: ${this.author} | Title: ${this.title} | Genre: ${this.genre}.`
}

const book1 = new Book("book_one", "sci-fi", "Ibas Majid")
const book2 = new Book("book_two", "fantasy", "Alice M.")

As you can see, the bookDetails() method is defined on the prototype property on the Book constructor function.

Save the file and type book1 in the console.

As seen below, the bookDetails() method is now being added to the object’s prototype (__proto__ property) rather than the actual object. Remember, all instances of the Book constructor will have access to that method.

Inheritance

Now that we have a blueprint – i.e our Book constructor. You may want to reuse some of its features in another template. So instead of creating a new template from scratch, you can build on the already existing one.

Let’s see a practical example.

We will create a Journal constructor that will accept not only the title, genre, author but also the year.

Since our Book already has most of these data, the Journal can inherit the common features for use alongside its unique feature – i.e the year. In this case, the Book is the parent constructor while the Journal is the child constructor.

Let’s update our code so we have:

// Constructor function
function Book(title, genre, author) {
  // ...
}

Book.prototype.bookDetails = function() {
  // ...
}

function Journal(title, genre, author, year) {
  Book.call(this, title, genre, author)
  this.year = year
}

const journal1 = new Journal("Journal_one", "technology", "John Marcus", "2020")

The area of focus is the Journal constructor. Here, we are creating the child constructor just like any other constructor. In addition to that, we are calling the properties defined in the parent constructor, Book() using the call() method.

Mind you, the value of this in the call() will point to the current object instance created from the Journal constructor.

At the end of the day, all we are doing in the child constructor is this:

function Journal(title, genre, author, year) {
  this.title = title
  this.genre = genre 
  this.author = author
  this.year = year
}

If you save your file and type journal1 in the console, you should see your data:

And if you try to access methods on the parent constructor’s prototype, you’ll get an error as seen in the image.

Most of the time, you’d want to define a new method that will accommodate your new additions (in our case, we added a year to the property). We'll come to that in a moment.

For now, let’s see how to inherit the parent methods.

Simply add this code below the Journal constructor function but above the constructor call.

// inherit Book prototype
Journal.prototype = Object.create(Book.prototype)

By using Object.create() method, you can create a new object based on any existing object. So in the code above, we simply get the methods on the Book.prototype and assigned them to the prototype property on the Journal constructor.

This way, all instances of the Journal constructor can have access.

Now, save your file and check if journal1 can now access the bookDetails() method.

It works!

But….

If you type journal1 and expand it to see it’s constructor, you’ll see that it points to its parent constructor, Book instead of Journal. This is happening because the Journal is inheriting the methods defined in the prototype property (which includes the constructor function) of the Book.

You can simply correct that by adding the following line at the bottom:

// Use Journal constructor
Journal.prototype.constructor = Journal

Save your file. Go back to the console and check the constructor once again, it should point to the expected function.

Next, let’s define a new bookDetails() method on the Journal() constructor to capture its new addition – i.e the year property.

That should be a piece of cake!

All we have to do is to add the following code at the bottom:

// Journal Book details
Journal.prototype.bookDetails = function() {
  return `Name: ${this.author} | Title: ${this.title} | Genre: ${this.genre} | Year: ${this.year}.`
}

We’ve done something like this earlier.

Now, whenever we invoke or call the bookDetails() on the child object – i.e journal1, this method overrides that of the parent.

Let’s call this method on the book1 and journal1 objects and see what we get.

In the image, the bookDetails() method is presented in two different forms. Of which, each of the object instances implements its version of the method. That is Polymorphism in action.

The ES6 Classes

We’ve seen how to create objects by calling a constructor function. Now, you’ll learn a modern way of doing the same thing using the class syntax – which provides a much easier way.

Besides, we cover how to implement inheritance using this syntax.

Let’s start with a simple class definition:

class Book {
  constructor(...) {
    // properties assigned here
  }

  // other methods here...
}

Here, we are using the ES6 class keyword to generate a template from which we can create our object. This class will hold your methods alongside the constructor – where you can assign properties.

If we reconstruct our Book function from the prototype-based constructor, you will have:

class Book {
  constructor(title, genre, author) {
    this.title = title
    this.genre = genre
    this.author = author
  }
  bookDetails() {
    return `Name: ${this.author} | Title: ${this.title} | Genre: ${this.genre}.`
  }
}

const book1 = new Book("book_one", "sci-fi", "Ibas Majid")

As you can see, the code is neat and easier to write. But behind the scene, this class create a function called Book just as we’ve seen earlier with the constructor function. Then, it takes the properties from the class constructor and also stores the bookDetails() method in the prototype.

If you save the file and type book1 in the console, you’ll have:

As you can see, using the class syntax is much easier. You don’t have to call a method on the prototype property to have them stored in it.

Creating Class Inheritance (Subclass or Child Class or Derived Class)

To create a subclass from our existing Book, we will use the extends keyword. This tells JavaScript where the child class should inherit from.

If you’ve worked with React class component, you’d often see this keyword.

Let’s reconstruct our Journal constructor function (in the prototype-based) to use the class syntax.

Simply add the following code after the Book class:

// Book sub class
class Journal extends Book {
  constructor(title, genre, author, year) {
    super(title, genre, author)
    this.year = year
  }
}
// instantiate Journal
const journal1 = new Journal("Journal_one", "technology", "John Marcus", "2020")

In addition to how we construct classes, we are calling the super/parent constructor (together with its properties) by using the super() operator.

If you save your file and type journal1 in the console, you’ll see your data. And you’ll be able to call the members defined on its class as well as its parent.

Just like we did in the prototype-based, we can also define a new bookDetails() method on the Journal class to capture the year.

So add this in the Journal class:

bookDetails() {
  return `Name: ${this.author} | Title: ${this.title} | Genre: ${this.genre} | Year: ${this.year}.`;
}

Save your file and test your work.

You should be good!

Conclusion

Having come this far, you have learned a lot on the subject.

Alongside the object fundamentals, we covered the OOP concepts, the ES5 constructor function, prototype and inheritance. Besides, we also treated how to use the ES6 class syntax to ease your work.

I hope this guide helps?

If you have any questions, contributions or difficulties, please let me know through the comment section.

And if you like this guide, you can follow me on Twitter for more updates.

Follow on Twitter.

Handling Form Inputs in React – A Simple Step-by-Step Guide

Ibas — Sun, 07 Jun 2020 09:26:34 +0000

The way we handle the React form input is a bit different compared to that of regular HTML.

In HTML, the form inputs keep their internal state (i.e the input value) and are maintained by the DOM. But in React, you will be in charge of handling these inputs.

If this sounds complex, it is not.

I will show you how you can easily handle these input fields. We will cover the common input types such as the checkbox, text, select input, radio, range and also the textarea.

Here is the final project.

And you can find all the project source code here.

As you can see, we are getting the input values in real-time (and on every keystroke for the text input). This is one of the beauty of React. You can take advantage of this and build a Meme generator app.

Just so you can follow along with me, let’s create a simple React project. So, run the following command from your terminal:

C:\Users\Your Name> npx create-react-app react-form-handling

You need to have Nodejs installed on your computer to run the command. You should know that if you have worked with React. Else you need to start from here.

The command will create a project folder called react-form-handling in your choosing directory.

I won’t dive in the file structure here. You should be familiar with it if you follow my React tutorial.

Open the folder with your favourite code editor and start the development server:

C:\Users\Your Name\react-form-handling > npm start

Your project should be up and running on port 3000

Ok, Let’s start by displaying a simple text input in the frontend. So go inside the src/App.js file and replace the code with this:

import React from "react"
import "./App.css"

function App() {
  return (
    <div>
      <h1>React Form Handling</h1>
      <form>
        <label>
          First Name: <input type="text" />
        </label>
      </form>
    </div>
  )
}

export default App

Save the file and check the frontend.

Here, we are rendering a simple form element displaying a text input field. Nothing special. It is just like our regular HTML input.

But to handle this input in React, we will need to understand the concept of a controlled input.

Uncontrolled and Controlled Input

At the moment, just like pure HTML form, this input element maintains its internal state. That is why we can write something in it by default. In this case, we call this type of input an uncontrolled input.

In React, it is the responsibility of the component rendering the form to control the input state. This way, the input would no longer listen to its internal state but the state declared in its component. By so doing, we are making the component state a single source of truth.

When you have this type of input, then you have a controlled input.

How does it work?

Depending on your component type, you will store your input data in the component state. Here, we will be using the React Hook to manage our form data. However, the approach is the same if you are using a class-based component. All you have to do is to declare a state object where your data would live.

From there, you will set up logic to listen to changes in the input and control it (i.e update the state) using the onChange event.

This way, you will always get up-to-date value as you will see in a moment.

Let’s apply what you just read!

The first step is to have the state manage the user’s input. So go ahead and update the src/App.js file to include the state.

import React, { useState } from "react"
import "./App.css"

function App() {
  const [fname, setFname] = useState("")

  return (
    <div>
      <h1>React Form Handling</h1>
      <form>
        <label>
          First Name: <input type="text" value={fname} />
        </label>
      </form>
      <h5>First name: {fname}</h5>
    </div>
  )
}

export default App

In the code, we added a state using the useState Hook and assigned a default empty string to the state variable, fname. This is similar to declaring a state object in a class-based component.

The second item return by the useState Hook (I called it setFname, but you can name it anything you like) is a function that will allow us to update the state value.

If you are scratching your head understanding the Hook, head over to my React Hooks tutorial and come back.

Now, for us to make the input field a controlled input, we assigned the state variable (which contains a default empty string) to the value prop.

Please take note also that we added this variable within the h5 element in the JSX to make the changes more visible as you will see in a moment.

Now, if you try to write anything in the text input field, nothing will happen. This is because the value prop is assigned a state variable whose value is set to empty string. And this is being forced on the input.

This is good because we now have total control over the input state. Let’s go ahead and update it.

Update the code to include an onChange event handler.

import React, { useState } from "react"
import "./App.css"

function App() {
  const [fname, setFname] = useState("")

  const handleChange = e => {
    setFname(e.target.value)
  }

  return (
    <div>
      <h1>React Form Handling</h1>
      <form>
        <label>
          First Name:{" "}
          <input type="text" value={fname} onChange={handleChange} />
        </label>
      </form>
      <h5>First name: {fname}</h5>
    </div>
  )
}

export default App

Save the file.

Now you should be able to write something in the input field.

As you can see below (in the React tools and the frontend view), we are getting the most updated value on every keystroke.

What is happening?

React needs an onChange handler to keep track of any changes in the field. Anytime you write something in the input field, this onChange event will trigger and then call its handleChange function that will re-render the state using setFname function.

In this function, we are updating the state variable, fname on every keystroke by passing to it the current value of the input field using e.target.value.

Remember we can retrieve the value of whatever input from the predefined parameter, e. It’s an object that holds information about the input action or event.

At this point, we have a controlled input field where its state is being managed by its component. This is the simplest React form example.

Adding Multiple Input Fields

In reality, you’ll be working with multiple input fields in your React application. In this scenario, we will make a simple adjustment not only to the handler function but also to the input element.

Let’s see this in action by adding another input field that collects the user’s last name.

We could decide to set up another useState Hook for the last name input. Then go ahead and assign its state variable to the value prop. But this approach will require us to define another handler function to update the input state.

We don’t want that. We want to manage all the state with a single handler function.

So, instead of passing a simple string in the useState Hook as we have it at the moment, we will be passing an object containing all the related state data.

In the src/App.js file, let’s update the React form component so you have:

import React, { useState } from "react"
import "./App.css"

function App() {
  const [state, setState] = useState({
    fname: "",
    lname: "",
  })

  const handleChange = e => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    })
  }

  return (
    <div>
      <h1>React Form Handling</h1>
      <form>
        <label>
          First Name:{" "}
          <input
            type="text"
            name="fname"
            value={state.fname}
            onChange={handleChange}
          />
        </label>{" "}
        <label>
          Last Name:{" "}
          <input
            type="text"
            name="lname"
            value={state.lname}
            onChange={handleChange}
          />
        </label>
      </form>
      <h5>
        Name: {state.fname} {state.lname}
      </h5>
    </div>
  )
}

export default App

Save the file and test your input fields.

What is happening?

First, you will notice a significant change in the code. We started by modifying the useState Hook to include an additional input data. From there, we have access to the first and last name through state.fname and state.lname as used in the value prop of their respective input element.

In these input elements, we’ve added a name prop that holds also their respective state name (i.e fname and lname). This is very important.

Now, let’s focus on the handleChange function. Here, we are using the setState function to update the inputs state.

const handleChange = e => {
  setState({
    ...state,
    [e.target.name]: e.target.value,
  })
}

In this function, we are simply assigning to the element that is being targeted (through [e.target.name]) their corresponding values.

For instance, if the field for the first name changes, the fname assigned to the name prop replaces [e.target.name] like so:

setState({
  fname: e.target.value,
})

The same thing applies to every other input element.

Still on the handleChange function,

Anytime we group related data as we have it in the state variable, the state returned by the useState Hook is not merged with that of the update passed to it. In other words, the useState Hook doesn’t merge the old and new state. Instead, it overrides the entire state with that of the current.

To get a clearer picture,

For the meantime, comment-out the …state from the function so you have:

const handleChange = e => {
  setState({
    // ...state,
    [e.target.name]: e.target.value,
  })
}

Save your file once again and try to write something in both input fields. You’ll see that they are overriding each other.

So to avoid this scenario, we merge them by spreading the entire state object using the three dots before the state and overriding the part of it.

Please remember to uncomment the …state in the function.

Now that you know how the control field works in React, adding the other input fields will be a piece of cake.

Adding the TextArea field

Unlike regular HTML where we define the text in between the textarea element. In React, the textarea is defined as a self-closing element just like the input element.

React is trying to maintain consistency with these inputs. This is good because we can as well use the value prop to get its up-to-date state value.

This is straightforward.

As expected, we will have the state manage the user’s input (i.e textarea message). So, update the state to include a message property like so:

const [state, setState] = useState({
  fname: "",
  lname: "",
  message: "",
})

Next, add a textarea element in the return statement like so:

return (
  ...
    <form>
      ...
      <br />
      <label>
        Your Message:{" "}
        <textarea
          name="message"
          value={state.message}
          onChange={handleChange}
        />
      </label>
    </form>
    <h5>
      Name: {state.fname} {state.lname}
    </h5>
    <p>Message: {state.message}</p>
  </div>
);

Take note of the value and name prop in the textarea element. Just like the input field, the string assigned to the name prop must be the same to what you declared in the state object.

Notice we didn’t do anything in the handleChange function. This is because we are still targeting the name and the value in this textarea element.

Save your file and test your form fields. It should work as expected.

Moving on…

The Select Input Field

This is not different from the other input fields. As usual, we can make it a controlled input by first have the state manage the input data. Then add a value prop to the element and finally update it through the onChange handler function (but in our case, we don’t have to do anything here because we have the logic set already).

And don’t forget to add a name prop (to the element) that matches the name in the state.

So let’s create a dropdown list with options to select car brands.

As expected, add a new property in the state. In my case, I will call it carBrand.

const [state, setState] = useState({
  ...
  carBrand: "",
});

Then, add the select element just before the closing </form> tag:

return (
  ...
    <form>
      ...
      <br /><br />
      <label>
        Pick your favorite car brand:
        <select
          name="carBrand"
          value={state.carBrand}
          onChange={handleChange}
        >
          <option value="mercedes">Mercedes</option>
          <option value="bmw">BMW</option>
          <option value="maserati">Maserati</option>
          <option value="infinity">Infinity</option>
          <option value="audi">Audi</option>
        </select>
      </label>
    </form>
    <h5>
      Name: {state.fname} {state.lname}
    </h5>
    <h5>My favorite car brand: {state.carBrand}</h5>
    <p>Message: {state.message}</p>
  </div>
);

Save the file and test your select input field.

We are still doing the same thing. The value prop on the select element makes it a controlled input. Through this prop, we have access to the selected option at every point.
If you want to display a default item (for instance, infinity) from the select option, your state should include the item like so:

carBrand: "infinity",

The checkbox Input

Unlike the other input fields, the checkbox uses a checked prop (which is a Boolean attribute) instead of the value prop. The idea is that a checkbox is either checked or not.

Now, if you take a look at the handleChange function, we only make provision for the inputs that have value prop through e.target.value.

We will need to adjust the handler function to accommodate the checkbox type of input.

Ok, let’s start by adding a new property to the state. In my case, I will call it isChecked.

const [state, setState] = useState({
  ...
  isChecked: false,
});

Here, we assign a Boolean value of false so that the input field is unchecked by default.

Next, add input checkbox just before the closing </form> tag.

return (
  ...
    <form>
      ...
      <br /><br />
      <label>
        <input
          type="checkbox"
          name="isChecked"
          checked={state.isChecked}
          onChange={handleChange}
        />{" "}
        Is Checked?
      </label>
    </form>
    <h5>
      Name: {state.fname} {state.lname}
    </h5>
    <h5>My favorite car brand: {state.carBrand}</h5>
    <p>Message: {state.message}</p>
    <h5>Is it checked? : {state.isChecked ? "Yes" : "No"}</h5>
  </div>
);

Finally, update the handleChange function so you have:

const handleChange = e => {
  const value = e.target.type === "checkbox" ? e.target.checked : e.target.value
  setState({
    ...state,
    [e.target.name]: value,
  })
}

If you save your file and test the checkbox field, it should work.

What just happened?

As I mentioned earlier, the checked prop replaces the value prop (as used in the other input types). The same logic and explanation still apply.

For now, let’s focus on the handleChange function.

In this function, we cannot use the earlier logic to manage the checkbox because it doesn’t have the value but checked attribute. So you’d need to adjust it if you want the same handleChange to manage the checkbox.

Before now, we are only targeting the name and the value of the inputs from the predefined parameter, e (remember, this parameter holds information about the input action or event).

We need to target more.

As seen in the handler, we now target the type and the checked attribute from this event parameter, e. From there, we are using the ternary operator, which is an inline if-statement to check the input types and then assign their corresponding value (either Boolean e.target.checked for the checkbox or e.target.value for every other input types).

Radio Inputs

The radio input types combine the input text and the checkbox type. In other words, they use both the value and the checked prop.

Let’s see how it works.

We will create radio inputs that allow users to select gender.

As expected, let’s add that to the state.

const [state, setState] = useState({
  ...
  gender: "",
});

Then, add the radio inputs just before the closing </form> tag:

return (
 ...
    <form>
      ...
      <br /><br />
      <label>
        <input
          type="radio"
          name="gender"
          value="male"
          checked={state.gender === "male"}
          onChange={handleChange}
        />{" "}
        Male
      </label>
      <label>
        <input
          type="radio"
          name="gender"
          value="female"
          checked={state.gender === "female"}
          onChange={handleChange}
        />{" "}
        Female
      </label>
    </form>
    <h5>
      Name: {state.fname} {state.lname}
    </h5>
    <h5>My favorite car brand: {state.carBrand}</h5>
    <p>Message: {state.message}</p>
    <h5>Is it checked? : {state.isChecked ? "Yes" : "No"}</h5>
    <h5>Gender Selected : {state.gender}</h5>
  </div>
);

Save the file and test the radio buttons.

What’s happening?

As you know already, once you have the state manage your input, you immediately assign the state property to the name prop of the input. You should know from HTML that radio group share the same name. This allows us to select only one button at a time.

Notice that the value prop in these inputs are static unlike that of text inputs where its value comes from the state.

And finally, with the checked prop, we are saying that if the condition assigned is true, that radio button should be checked.

Simple as that!

Range Input Type

You can use this type of input to filter a list of items based on numeric values (on a larger application). But here, we will set up an input of this type to display dynamic prices on a range of 0 - \$50.

This is going to be a quick one because they all follow the same approach. Start by adding another property in the state. I call it price.

const [state, setState] = useState({
  ...
  price: 0,
});

Then, add this input field just before the closing </form> tag:

return (
  ...
    <form>
      ...
      <br /><br />
      <label>
        Price (between 0 and 50):
        <input
          type="range"
          name="price"
          min="0"
          max="50"
          value={state.price}
          onChange={handleChange}
        />
      </label>
    </form>
    ...
    <h5>Price : ${state.price}</h5>
  </div>
);

Save your file and test your input.

The code should be self-explanatory if you have followed along.

To reiterate,

The first step to handle form inputs in React is to make it a controlled input. And you can do that by having the component state manage the input. Then, you assign the state to the value or checked prop depending on the input type. From there, you have an onChange handler that listens to changes in the input and control its state.

And finally, if you have more than one input fields, you’d want to assign to the name prop of the input its corresponding state name. This allows you to manage your fields with a single handler function.

Conclusion

Understanding how the form input work is very crucial as you will be working with it a lot as a React developer. This tutorial has shown you how you can get started with these input elements. And I hope you now understand how you can apply them.

Should in case you have any difficulties, questions or contributions, do let me know through the comment section. And if you like this tutorial guide, do share around the web.

You can find the project source code here

For more updates, follow me on Twitter @ibaslogic

React Context API Made Simple – The practical guide (Updated)

Ibas — Mon, 18 May 2020 23:18:08 +0000

Managing your app data using the React Context API is fun and simple to implement!

However, it can also become a nightmare if not handled with care especially as your app grows in size.

As a React developer, you cannot do without passing around data in your React app. And if you are just getting started with React, you will most likely be doing what is called "prop drilling".

This has to do with manually getting data from component A down to component C and D through the props. Where component A is the common parent of C and D.

This is fine if you are dealing with a simple app.

But as your app grows in size, you’ll discover that passing this data several components down (from a parent to a deeply nested child component) is not fun anymore. And you may witness several components that only serves as a route for passing this data. In this case, the data is/are irrelevant to the component per se.

To get around this, React provides us with the Context API.

What is React context API

The context API in React allows every component in the component tree to have access to consume data without having to manually pass props down to it.

The advantage here is that you will get to cut out "middleman" components. Meaning only the component that needs the data would know about it.

This is how it works.

You will have a place (like a store) where your global data will live. Then, you will set up logic to expose this data so that any component can easily access and retrieve it.

Let’s see how we can achieve this practically.

We will be working with a project (in this case, a simple Todos app) where we have the global data (in the parent component) being accessed by its children component through the props.

In this React context tutorial, you will learn how to manage this data using the context API. You will also get to see the pitfalls of using the React context and why you shouldn’t go for it too soon.

Getting the Project Files Ready

We will start by pulling our starting project files from this GitHub repo. Go ahead and clone the project by running this command from your terminal:

git clone https://github.com/Ibaslogic/simple-todo-app

This will create a directory in the name of the project folder.

Once you have the project files and folders bootstrapped, open it with your text editor and run:

npm install

Make sure you are inside the project directory before you run the above command.

The command will install all the necessary dependencies in the local node_modules folder. After that, start your development server by running:

npm start

You should see the app in your browser address bar at localhost:3000

You can learn how to build this app from scratch, by following this React tutorial guide. There, we used "props drilling" for the data flow.

The image above shows a clear picture of the components hierarchy. As expected, you should know that the component files for the app live in the src/components folder.

The TodoContainer is the parent component which holds all the other children component. Its file holds the todos data that is being accessed by the children component through the props.

Likewise, it has a couple of class methods that also need access to the todos state data.

If you follow this tutorial or conversant with React, you should know why we are lifting the state all the way to the parent component. To reiterate, for every component accessing the state data, the state object is declared in the file of their closest common parent.

We were doing what is called State lifting! Nothing special, that is basic React.

Now, from the component tree, you can deduce that we have just two layers of which we are passing down data. From TodosContainer component to TodosList and then to TodosItem.

In this case, manually passing down data through the props is desirable/recommended.

But if you discover that prop drilling is becoming an issue – i.e you are passing down data through the props into many nested components, making some components only serve as a route. Then using the Context API is better.

To see the context API in action, we will still be working with this Todos app.

But keep in mind that context is desirable if props drilling is becoming an issue (that is not the case with this app).

Again, you shouldn’t go for context too soon.

You will get to know why later in this guide. Keep reading!

Setting up the Context

As I mentioned earlier, we will create a central store where our global data will live. So let’s create a new file called context.js in the src folder. In this file, add the following starting code:

import React, { Component } from "react"

const TodosContext = React.createContext()

const TodosProvider = TodosContext.Provider
// const TodosConsumer = TodosContext.Consumer

class MyContext extends Component {
  render() {
    return (
      <TodosProvider value={"todos data"}>{this.props.children}</TodosProvider>
    )
  }
}

export { TodosContext, MyContext }

Next, go inside the src/index.js file and wrap the parent component, TodoContainer with the context component, MyContext. Make sure you import the context file.

...
import { MyContext } from "./context";

ReactDOM.render(
  <MyContext>
    <TodoContainer />
  </MyContext>,
  document.getElementById("root")
);

Save the files.

What is happening?

In the context file, we started by creating a context object which we assigned to the TodosContext variable. Here, you can pass a default context value or simply pass an empty value as seen above.

Now, you might be wondering: "Why class component? This is the year 20XX, why not use Hook in a function component".

Irrespective of the component type (class or function), the approach to creating the context object is the same.

Moreover, the focus is on the Context API and not the component type. Also, remember that there are people who still use the class component.

You still don’t want to use any class component?

I have covered how you can write this same Todos app only with function component using the React Hook. You can quickly go through it and come back to continue this context tutorial.

It’s up to you!

Moving on.

Once you have this context object, you have access to two components – the Provider and the Consumer. The React Context Provider allows all the component in the tree to have access to consume the context data.

But not until you wrap the components that need access to this data or their common parent (In our case, the TodoContainer) with it.

This tells you that you can also wrap the Provider around the components in the TodoContainer.js file.

As a React developer, you should know why we are using the children prop in the context.js file.

As a refresher, the this.props.children as used in the MyContext component is the JSX/component passed in-between the <MyContext></MyContext> tags in the index.js file – i.e the <TodoContainer />.

The Provider as seen in the context file accepts a value prop where we will place all of our data. For the meantime, we are passing a simple string. Later, we will pass a whole object.

At this point, nothing has changed in our application!

Let’s see how we can access/consume the context value from any of the children components.

Accessing the Context data

Depending on the type of component, there are different ways you can access your context data. We will start by accessing this data in a class component. Later you will learn how to achieve the same in a function component and also through a React Hook.

Don't forget, just like the Provider, we also have access to the Consumer. But at the moment, we commented that out as seen in the context.js file. We will come to that when we need to access our data in a function component.

Accessing the Context Data (using the contextType) in a Class Component

Open the src/components/TodosList.js file and import the context object, TodosContext like so:

import { TodosContext } from "../context"

Add this above the render() method:

static contextType = TodosContext;

And this inside the render() method but above the return statement.

const value = this.context
console.log(value)

Save your file and check the console of your DevTools.

As you can see, we are receiving the data assigned to the value prop (in the context file) here in this TodosList component.

What just happened?

In the code, we started by initializing the contextType using the static class. We then assigned to it the context object we created earlier. From there, we have access to our value through this.context.

At the moment, we are passing a simple string to the value prop. Instead of that, we will pass the entire todos data we have in the state object of our application.

So for now, copy the state object from the TodoContainer component and paste it above the render() method in the context.js file.

Note: Please copy to avoid page break for now. We will delete it later.

So you have:

...
import { v4 as uuidv4 } from "uuid";
...

class MyContext extends Component {
  state = {
    todos: [
      {
        id: uuidv4(),
        title: "Setup development environment",
        completed: true,
      },
      {
        id: uuidv4(),
        title: "Develop website and add content",
        completed: false,
      },
      {
        id: uuidv4(),
        title: "Deploy to live server",
        completed: false,
      },
    ],
  };

  render() {
    return (
      <TodosProvider value={{...this.state}}>
        {this.props.children}
      </TodosProvider>
    );
  }
}
...

Remember to update the value prop in the <TodosProvider>.

If you save your file and check the console once again, you will see the todos data.

In the value prop, we are now passing the entire todos state data that we are getting using the spread operator, …this.state.

Now that the value prop has this data, it can be consumed from any of the children components in the tree.

Next, let’s move all the class methods from the TodoContainer.js file also to the context.js to make them globally accessible. Cut and paste them above the render() method.

Now, we can expose these methods (just like we did for the state object) so that other components in the tree can have access.

So, update the value prop in the Provider component to include these methods like so:

...
render() {
  return (
    <TodosProvider
      value={{
        ...this.state,
        handleChange: this.handleChange,
        delTodo: this.delTodo,
        addTodoItem: this.addTodoItem,
      }}
    >
      {this.props.children}
    </TodosProvider>
  );
}
...

Now you can delete the state object in the TodoContainer.js file (remember we moved it to the context.js file) and remove all the props associated with all the components tags.

Your TodoContainer.js file should now look like this:

import React from "react"
import TodosList from "./TodosList"
import Header from "./Header"
import InputTodo from "./InputTodo"

class TodoContainer extends React.Component {
  render() {
    return (
      <div className="container">
        <Header />
        <InputTodo />
        <TodosList />
      </div>
    )
  }
}
export default TodoContainer

As you can see, we no longer have props been passed around to get data down sub-component. All the components now have access to consume the data which is available in the context.js file.

Now, we have cleaner code.

If you save your files and check the frontend, you will see a page break. This is because the TodoList component is still referencing its parent component to get the todos data.

Fixing this is simple.

As you know, the data is available in this component through the context. All you have to do is to point to where it’s saved and grab it.

So modify the TodosList.js file so you have:

import React from "react"
import TodoItem from "./TodoItem"
import { TodosContext } from "../context"

class TodosList extends React.Component {
  static contextType = TodosContext
  render() {
    const value = this.context
    return (
      <div>
        {value.todos.map(todo => (
          <TodoItem key={todo.id} todo={todo} />
        ))}
      </div>
    )
  }
}

export default TodosList

Since the todos data is saved in the value variable, we accessed it and looped through as expected. Notice, the <TodoItem /> instance in this file no longer serves as a path to pass data around.

Save the file and check the frontend. You should see your app rendered.

Simple as that.

Now you know how to access the context data in a class component. A lot still needs to be fixed in this app. But we are heading somewhere.

Accessing the Context Data in a Function Component

With the introduction of React Hooks, you can now have your entire app component only with the function component. In this regard, knowing how to access this data in this component type is very crucial.

As you know, this app is built only with the class components. Though I’ve covered how you can build this with the function component. You can take a look quickly if you need a refresher.

What this tells you is that we need to convert one of the components into a function type to see how we can access the context data.

This should be straight forward.

Open the src/components/TodoItem.js file and replace the class component with this function component.

import React from "react"

const TodoItem = props => {
  const completedStyle = {
    fontStyle: "italic",
    color: "#d35e0f",
    opacity: 0.4,
    textDecoration: "line-through",
  }

  const { completed, id, title } = props.todo

  return (
    <li className="todo-item">
      <input
        type="checkbox"
        checked={completed}
        onChange={() => props.handleChangeProps(id)}
      />
      <button onClick={() => props.deleteTodoProps(id)}>Delete</button>
      <span style={completed ? completedStyle : null}>{title}</span>
    </li>
  )
}

export default TodoItem

That’s it for the conversion. If you are scratching your head, please quickly go through the last link and learn how to do this conversion.

Now let’s see how to access the context data in this component.

If you take a look at the onChange and the onClick event handler in this file, we are accessing the handleChange and the delTodo methods from the parent component through the props. Now, we have these methods available in the context.js file.

Let’s access them.

Since we are dealing with a function component, the earlier method used in the class component is not applicable. Instead, we will make use of the Consumer component. This component allows us to access the Context data within a function component.

Remember, this Consumer component is present in the context file.

So go inside the file and uncomment this line.

// const TodosConsumer = TodosContext.Consumer

Then, update the export to include it like so:

export { TodosContext, MyContext, TodosConsumer }

Save the file.

Back to the TodoItem.js file, import the TodosConsumer from the context file.

import { TodosConsumer } from "../context"

Then, update the return statement so you have:

...
return (
  <TodosConsumer>
    {(value) => {
      console.log(value);
      return (
        <li className="todo-item">
          <input
            type="checkbox"
            checked={completed}
            onChange={() => props.handleChangeProps(id)}
          />
          <button onClick={() => props.deleteTodoProps(id)}>Delete</button>
          <span style={completed ? completedStyle : null}>{title}</span>
        </li>
      );
    }}
  </TodosConsumer>
);
...

This method of accessing the context data uses what is called a render prop. You don't have to learn it to use it.

It's very simple and straight forward.

The TodosConsumer requires a function as a child which accepts a value argument. This value holds all the context object assigned to the value prop of the Provider.

Let’s save the file and check the console to see what the value holds (since we are logging the value in the code).

Now that we are getting the data, let’s update the return statement to use them.

return (
  <TodosConsumer>
    {value => {
      const { handleChange, delTodo } = value
      return (
        <li className="todo-item">
          <input
            type="checkbox"
            checked={completed}
            onChange={() => handleChange(id)}
          />
          <button onClick={() => delTodo(id)}>Delete</button>
          <span style={completed ? completedStyle : null}>{title}</span>
        </li>
      )
    }}
  </TodosConsumer>
)

With JavaScript object destructuring, we are extracting the handleChange and the delTodo methods from the value argument.

We then replaced props.handleChangeProps and props.deleteTodoProps with handleChange and delTodo respectively.

Save the file.

Now, you know how to access context data in a function component.

You should be able to toggle the checkboxes and delete todos items. But you can’t submit todos yet. We will get to that.

Moving on.

Accessing the React Context with Hook

Here also, we will be working with a function component. But this time, in a much simpler way. The Hook method.

This is my preferred method. Very simple and concise.

We will take a look at the component that controls the input field and submission. So open the InputTodo.js file. Unfortunately, this component is class-based. Meaning, we will need to convert it to function to use the Hook.

If you follow my React Hook tutorial, this conversion should be a piece of cake.

Here you have it:

import React, { useState } from "react"

const InputTodo = props => {
  const [inputText, setInputText] = useState({
    title: "",
  })

  const onChange = e => {
    setInputText({
      ...inputText,
      [e.target.name]: e.target.value,
    })
  }

  const handleSubmit = e => {
    e.preventDefault()
    props.addTodoProps(inputText.title)
    setInputText({
      title: "",
    })
  }

  return (
    <form onSubmit={handleSubmit} className="form-container">
      <input
        type="text"
        className="input-text"
        placeholder="Add todo..."
        value={inputText.title}
        name="title"
        onChange={onChange}
      />
      <input type="submit" className="input-submit" value="Submit" />
    </form>
  )
}

export default InputTodo

Good.

Now, let’s update the InputTodo.js file to use the context.

You should have:

import React, { useState, useContext } from "react"
import { TodosContext } from "../context";

const InputTodo = props => {

  const value = useContext(TodosContext);
  const { addTodoItem } = value;
  ...

  const handleSubmit = e => {
    e.preventDefault()
    addTodoItem(inputText.title)
    setInputText({
      title: "",
    })
  }

  return (
    ...
  )
}

export default InputTodo

Notice how we modified the handleSubmit function. Instead of passing down the addTodoItem method through the props as specified earlier, we are consuming this method directly from the context.

React provides us with the useContext Hook to read the context data within a function component. All you have to do is to pass along your context object as an argument.

This is straight forward. As you can see, with a single line of code, we have the context data ready to be used. From there, we are getting the addTodoItem (needed in the handleSubmit function) by destructuring the value.

Tip: Use a function component if you want to access the context outside of the class render() method.

You can save your file and test your application.

It should work as expected.

Performance Issue with React Context API

React context is known for re-rendering components that consume the context data every time the value prop changes in the context.

What do I mean?

Whenever the value of the context changes, the consumer component that triggers the changes re-render to get the updated value. That is fine.

But the re-rendering will not be restricted to that consumer component alone but all components that are accessing the context.

While this might cause little to no performance issue in a small app, it cannot be overlooked especially if your app is becoming complex.

Let’s take a look at these issues in our app.

We will be logging some text in all the component files.

Starting with the src/components/TodoContainer.js file. Add this above the return statement:

console.log("TodoContainer is running")

Head over to src/components/Header.js file and add above the return statement:

console.log("Header is running")

In the src/components/InputTodo.js file, add this also:

console.log("InputTodo is running", addTodoItem)

In the src/components/TodosList.js, add this:

console.log("TodosList is running", value)

And finally, in the TodoItem.js file, add the log.

...
  return (
    <TodosConsumer>
      {(value) => {
        const { handleChange, delTodo } = value;

        console.log("TodoItem is running", handleChange, delTodo);
        return (
          ...
        );
      }}
    </TodosConsumer>
  );
...

Save all your files and take a look at the console of your browser DevTools.

As seen above,

On page load, all the components are rendering and as such displaying their respective log messages in the console (as highlighted in the red border in the image above).

If you click any of the checkboxes, delete or submit button, all the components consuming the context data will re-render (as highlighted in the black border). Even as these individual elements are accessing part of the data.

This is the danger of passing objects to the context value as against a simple string or number. A simple update that affects only part of the object would cause countless components re-renders.

From the image above, you can see the TodoContainer and the Header components are not re-rendering after the initial page load. This is because they are not consuming context data.

Now, let’s try to write something in the text input field while the console is opened.

On every keystroke, only the InputTodo.js is being rendered.

This is happening because the onChange function (which is responsible for these changes through the local state variable) in this component is not part of the context.

Imagine, you take this onChange function and the local state to the context value prop. What do you think would happen?

On every keystroke, all the components consuming the context data would re-render. This is not ideal as it may cause performance issue.

A point to note here:

Not all of the state data in your app needs to be globally accessible (i.e placed in the context). Keep local state to where it’s needed.

From what we’ve seen so far,

The context may not be practically suitable for an app with frequent state changes if you want to seamlessly avoid the issue of unnecessary components re-rendering.

Though, we can manage this issue by splitting the context into multiples. But in this case, the different part of the context data should be able to update independently.

Conclusion

While you have learned how to use the context API in your React application irrespective of the component types, you have also seen the common pitfalls that come with this API.

Though, many developers agree that it is safe to use even in our complex app if we are not seeing performance issues. But we cannot overlook the countless re-renders in our components.

Having said that, I will suggest you only go for context API if your state data requires lower-frequency updates and when you discover that prop drilling is becoming a problem - i.e when you are passing down props into many deeply nested component.

Don’t just use it simply because you want to avoid prop drilling (if this is very feasible).

Now your turn!

Do you have questions, difficulties or contributions as regards this topic? Please let me know through the comment section.

If you like this React context tutorial, endeavour to share this post around the web and make sure you follow me on twitter to receive more updates.

Twitter: @ibaslogic.

Project Source Code on GitHub.

Free Copies of React Tutorial Book for Beginners

Ibas — Tue, 28 Apr 2020 16:23:42 +0000

Have you started building awesome applications with React?

Well, I covered the fundamentals here and I have received a lot of positive feedback.

Here is the link on dev.to:

https://dev.to/ibaslogic/react-tutorial-a-comprehensive-guide-to-learning-react-js-in-2020-1jdi

Now, I'm giving out a thorough guide (my newly published React tutorial Book) for as many aspiring developers as possible for FREE.

This book covers the core React fundamentals and Hooks. You will also get to build React Apps from Scratch.

To get one:

Follow me on Twitter
Drop/Inbox your Email on Twitter

Learn React Hooks by Converting a Class-based Meme Generator App to Functional based

Ibas — Sat, 04 Apr 2020 22:48:40 +0000

This tutorial is a follow up to the practical guide to learning the React hooks. It is aimed at helping the beginners to solidify their React Hooks foundation.

If you haven’t get started with React and its Hooks, please follow this step by step guide to React and its React Hooks version.

After that, you can follow this simple meme generator project.

Ok. If you are ready, let’s dive in.

What is our goal?

We will be working with a simple meme generator app that is built on the class logic (state and lifecycle method). You will, however, learn how to manage this logic using the React Hooks in a function component.

Here is the starter project for you to clone. So go ahead and clone it using this command.

git clone https://github.com/Ibaslogic/memegenerator

Once the download is done, change directory (cd) inside the project folder and run npm install. This creates a node_module folder consisting of the necessary dependencies.

Finally, start your server with npm start.

You should see this app at http://localhost:3000/

What this app does is simple.

The user inputs the top and bottom text through the input fields and then generate random images by clicking on the Generate button.

As expected, you should know that the files that make up this UI live in the src folder. If you take a look inside the src/components folder, we have three files.

Both the Header.js and MemeApp.js are already a function component. The MemeGenerator.js manages the state and a lifecycle method, hence constructed using a class component.

Let’s optimize the component to use the React Hooks. So, open the src/components/MemeGenerator.js file.

Presently, it has a state object (consisting of four different properties with default values) and class methods including a lifecycle (componentDidMount) at the top level of the component.

You can start by commenting out all the code.

Then add this starting code at the top to avoid page break:

import React from "react"

const MemeGenerator = () => {
  return <div></div>
}

export default MemeGenerator

This is our first conversion. As seen, we are now using a function to construct our component instead of class.

Next, let’s manage the state in this function component.

So, import the useState Hook from the react module like so:

import React, { useState } from "react"

const MemeGenerator = () => {
  console.log(useState("hello"))
  return <div></div>
}

export default MemeGenerator

Save the file.

You should know that the useState Hook will return an array containing two items. The current state and a function to update the state.

Recall from the React Hooks for beginners’ guide, we can destructure the returned value of this Hook to have access to its initial state (i.e default value) as well as a callback to modify it.

Something like this.

const [topText, setTopText] = useState("hello")

Where topText holds the initial state i.e hello and the setTopText is a function to update the state.

If you apply this in the MemeGenerator component, you should have:

import React, { useState } from "react"

const MemeGenerator = () => {
  const [inputText, setInputText] = useState({
    topText: "",
    bottomText: "",
  })
  const [randomImage, setRandomImage] = useState(
    "https://i.imgflip.com/26am.jpg"
  )
  const [allMemeImgs, setAllMemeImgs] = useState([])

  const handleChange = e => {
    setInputText({
      ...inputText,
      [e.target.name]: e.target.value,
    })
  }

  const handleSubmit = e => {
    e.preventDefault()
    console.log("submitted")
  }

  return (
    <div className="meme-container">
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="topText"
          placeholder="Add Top Text"
          value={inputText.topText}
          onChange={handleChange}
        />
        <input
          type="text"
          name="bottomText"
          placeholder="Add Bottom Text"
          value={inputText.bottomText}
          onChange={handleChange}
        />
        <button>Generate</button>
      </form>
      <div className="meme">
        <img src={randomImage} alt="" />
        <h2 className="top">{inputText.topText}</h2>
        <h2 className="bottom">{inputText.bottomText}</h2>
      </div>
    </div>
  )
}

export default MemeGenerator

Save the file. You should see your app rendered in the frontend.

For now, if you click to generate new images, you’ll get a "submitted" text in the console of your browser DevTools.

What’s happening in the code?

Remember, in the class version, we declared a state object where we assigned default values to the object properties. But now, we are doing this using the useState React Hook.

Here, instead of defining all the properties in the state object, we have options to split them into multiple state Hook.

But take note, we are keeping related data (the topText and bottomText) together.

Now, we don’t have to use this.state to access the current state value. Instead, we are using their respective variables. Likewise, we are now updating the state using the second element returned by the useState Hook.

Also, take note of what’s happening in the handleChange. This function is called whenever the input text field changes.

You should know that anytime you are grouping related data in an object, the useState Hook doesn’t merge the old and new state. Instead, it overrides the entire state with that of the current.

To get a clearer picture,

For the meantime, comment-out the …inputText from the function so you have:

const handleChange = e => {
  setInputText({
    // ...inputText,
    [e.target.name]: e.target.value,
  })
}

Save your file and try to input the top and bottom text in your application.

You’ll notice that they are overriding each other.

So we merged them by passing the entire state using the spread operator (the three dots before inputText) and override the part of it.

Please remember to uncomment the …inputText in the function.

Sometimes, manually merging the state might be cumbersome.

So an alternative is to split the topText and bottomText into different useState Hook. But in this case, you will need separate functions to manage the changes in these inputs.

This is not going to scale especially if you want to manage many input fields in your application.

Ok. Let’s move on.

The useEffect React Hook

At the moment, if we click the Generate button in our app to display a random image, nothing will happen except that we are logging a simple text in the console.

If you take a look at the class version of the code, we are fetching these images using the fetch API in the componentDidMount lifecycle method.

And as you know, this method is not available in a function component.

So we will use another Hook called useEffect.

We have covered much of this in the React Hooks guide, but to reemphasise, you can think of this Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Let’s see how to apply it in our application.

Back in your src/components/MemeGenerator.js file, import useEffect Hook from the react module.

import React, { useState, useEffect } from "react"

Then add this Hook above the return statement and save your file:

useEffect(() => {
  console.log("test run")
  fetch("https://api.imgflip.com/get_memes")
    .then(response => response.json())
    .then(response => setAllMemeImgs(response.data.memes))
})

If you save the file and visit the console. You’ll see that this Hook is running infinitely.

What’s happening?

As you can see, this Hook accepts a function that defines the side effect to run. In our case, making HTTP request.

By default, it runs not only after the first render but also after every update – i.e when there is a prop or state changes.

In our code, a change occur. The setAllMemeImgs function updates its state variable when the data is fetched from the endpoint. Thereby causing the Hook to run continuously.

So, we have the responsibility to control it to the logic we want. Remember, we want to replicate the logic of the componentDidMount which should only run once it fetches data for the first time.

To do that, we will add an optional array of dependencies to the Hook so it looks like this:

useEffect(() => {
  console.log("test run")
  fetch("https://api.imgflip.com/get_memes")
    .then(response => response.json())
    .then(response => setAllMemeImgs(response.data.memes))
}, [])

With this simple addition, the Hook now depends on the array of dependencies to re-run.

But in case there are no dependencies in the array as seen above, React will only execute the Hook once because no data is changing.

With this, you are safe to say that you have the equivalent of componentDidMount when you have an empty array as the second parameter.

Now, we can update the handleSubmit function.

const handleSubmit = e => {
  e.preventDefault()
  const randNum = Math.floor(Math.random() * allMemeImgs.length)
  const randMemeImgUrl = allMemeImgs[randNum].url
  setRandomImage(randMemeImgUrl)
}

Save the file.

Comparing this code to that of the class version, you’ll notice that we’ve removed all the occurrence of this.state since it doesn’t apply in the function component. Likewise, the setRandomImage function which update its state value replaces this.setState.

Now check your app and test it.

It should work as expected.

Good job!

This is a quick one. I hope you are having fun learning these Hooks. All you need now is to practice as much as possible.

If you like this quick tutorial, feel free to share around the web and subscribe for more updates.

You can find the source code here.

Follow me on Twitter @ibaslogic

React Hooks Tutorial: The Practical Guide to Learning Hooks for Beginners

Ibas — Thu, 26 Mar 2020 20:26:49 +0000

Have you ever found yourself switching your React component from a function to a class-based simply because you want to manage a state and/or lifecycle logic?

A lot of times I hear!

Well, you are not alone. Now, the functional component is more than just being a presentational component.

With the introduction of React Hooks, you’ll get to use a state and manage the class-based lifecycle logic inside of the function components.

The benefit here is that you’ll be able to write a more readable, concise and clear code. You will also have one way of creating a component.

In this tutorial, you will learn how to get started with these React Hooks practically. We will be working with a simple project where the stateful logic and lifecycle methods are being managed by the class component.

Our task now is to switch from managing this logic from the class component into a function-based component. This way, you'll not only learn the fundamentals, but you'll also learn how it applies in a real project.

Before we dive in, make sure you are familiar with React. If not, you can start here.

What are React Hooks?

React Hooks (introduced in React since version 16.8) are JavaScript functions that allow us to build our React component ONLY with a function component.

React comes bundled with a few Hooks that allow us to manage most of the use cases of the class logic. It also allows us to create custom Hooks whenever we want to reuse component logic.

Here, we will explore the common use cases of built-in Hooks.

To get started, let's get our project files ready.

Pulling project files from GitHub

I’ve provided a starter project. So go ahead and clone it by running this command from your terminal:

git clone https://github.com/Ibaslogic/react-hooks-starter-project

This will create a directory in the name of the project folder. In this case, react-hooks-starter-project.

Once you have the project files and folders bootstrapped, open it with your text editor. Here, I will be using VsCode.

Next, switch inside the directory (cd react-hooks-starter-project) and run:

npm install

This will install all the necessary dependencies in the local node_modules folder.

Finally, start your development server by running:

npm start

You should see this app in your browser address bar at http://localhost:3000/

(To build this todos app from scratch, check out this post, React tutorial for beginners.)

What this app does is simple and clear. You simply add, checked and delete todos items. On top of that, you get alerted when the checkbox or delete button is clicked.

As expected of you, you should know that the files that make up this UI live in the src folder.

If you take a look inside the src/components folder, we have five component files. Of which all of them are class-based.

Now, let’s optimize our code by using React Hooks.

We will start with the component where only the state logic (and not lifecycle logic) is being managed.

So let’s take a look at src/components/InputTodo.js file.

Presently, it has a state object (where we assign a default empty string to the title property) and class methods at the top level of the component.

Let’s start by commenting out all the code.

Then add this starting code at the top to avoid page break:

import React from "react"

const InputTodo = () => {
  return <div></div>
}

export default InputTodo

This is the first conversion. Notice we are now using a function instead of class.

Using the React Hooks useState

To add state in a function component, React provides us with a Hook called useState.

If you revisit the class component, the data defined in the state object is accessed using this.state. It is as well updated using this.setState method.

Now, let’s replicate that in a function component.

First, import the useState Hook from the react module like so:

import React, { useState } from "react"

const InputTodo = () => {
  console.log(useState("hello"))
  return <div></div>
}

export default InputTodo

Notice we are logging the Hook to see what we have in return.

Save the file and open the console of your browser DevTools.

As seen above, the useState Hook returns an array which ALWAYS contains two items. The first item is the current value passed-in (in our case, hello), and the second is a function that will allow us to update the value.

We can get these items from the array using the JavaScript array destructuring.

For instance,

const [title, setTitle] = useState("hello")

Here, we declared a state variable called title (which holds the current state i.e hello) and a function called setTitle to update the state.

This is similar to this.state.title and this.setState in our class component.

Unlike the class component, the state doesn’t have to be an object. It can hold an array, number and string (as seen above).

Also, note that you are not limited to one state property as in the case of class component. Here, you can define multiple states.

You’ll see how this works later in this guide.

But keep in mind, it’s good to keep related data together.

Now that you have some basic understanding, let’s take a look at the rules to use these Hooks.

All you have to keep in mind is that you ONLY call Hooks at the top level of your function component or from custom Hooks. Not inside a loop, condition or regular function.

This ensures that all your component logic is visible to React.

Back to our code, let’s update the component so you have:

import React, { useState } from "react"

const InputTodo = props => {
  const [title, setTitle] = useState("")

  const onChange = e => {
    setTitle(e.target.value)
  }

  const handleSubmit = e => {
    e.preventDefault()
    props.addTodoProps(title)
    setTitle("")
  }

  return (
    <form onSubmit={handleSubmit} className="form-container">
      <input
        type="text"
        className="input-text"
        placeholder="Add todo..."
        value={title}
        name="title"
        onChange={onChange}
      />
      <input type="submit" className="input-submit" value="Submit" />
    </form>
  )
}

export default InputTodo

Save the file. You should see the input fields back in the frontend.

Test it and it should work perfectly.

What’s happening in the code?

If you revisit the class version, we declared a state object where we assigned a key-value pair. But now, we are doing this using the useState React Hook.

Here, instead of using this.state to access the current state value, we simply use the variable, title. Likewise, we are now updating the state using the second element returned by the useState.

As seen in the onChange and handleSubmit function, we are using the setTitle instead of this.setState used in the class component.

Note: this keyword in a class component does not exist in a function component.

This also applies to the methods in the class component (onChange and handleSubmit). Remember we cannot use class methods in a function but we can define functions in a function.

So all we did here was to convert the class methods to function by adding the const keyword to them. With this simple change, you can call the function within the JSX without using this keyword.

Another area of concern is the onChange method. This method is called whenever the input text field changes.

If you are vigilant, you’d ask yourself why we are not using the e.target.name in the onChange method as we have it in the class version. And if you follow this React tutorial from scratch, you’d know that this target allows us to manage many input fields with a single method/function as the case may be.

Now read carefully.

In our code, we are assigning a string to the query variable through the useState. This is the simplest use case of the Hook.

With this setup, you can only manage an input field in a function call. If you add more fields, you’ll need to define a separate useState Hook and a function to manage it.

While this is fine, it is better to group related data.

Just like the class version of the code, we will write our code in a way that we can manage as many input fields with a function.

Let’s update the InputTodo component so you have:

import React, { useState } from "react"

const InputTodo = props => {
  const [inputText, setInputText] = useState({
    title: "",
  })

  const onChange = e => {
    setInputText({
      ...inputText,
      [e.target.name]: e.target.value,
    })
  }

  const handleSubmit = e => {
    e.preventDefault()
    props.addTodoProps(inputText.title)
    setInputText({
      title: "",
    })
  }

  return (
    <form onSubmit={handleSubmit} className="form-container">
      <input
        type="text"
        className="input-text"
        placeholder="Add todo..."
        value={inputText.title}
        name="title"
        onChange={onChange}
      />
      <input type="submit" className="input-submit" value="Submit" />
    </form>
  )
}

export default InputTodo

Save your file and test your work.

Now, you can manage as many input fields in your app with a single function (In our case, the onChange function). All you have to do is to add another property alongside the title in the useState and then assign the property name to the name prop in the input element.

So what changes?

First, anytime you are grouping related data in an object as in the case of the inputText state variable, the state returned by the useState Hook is not merged with that of the update passed to it.

Meaning it doesn’t merge the old and new state. Instead, it overrides the entire state with that of the current.

The way out is to manually merge them by passing the entire state using the spread operator (the three dots before inputText) and override the part of it.

If you don’t feel comfortable grouping related data like this, then you can split them into different useState. But don’t forget, you'd need separate functions to manage them.

Hope it’s clear?

Now that you’ve learned about managing the state in a function component using the React built-in useState Hook, let’s see how we can replicate the lifecycle logic in a function component.

Using the React Hooks useEffect

Our focus for now will be on the src/components/TodoContainer.js file. This file manages a lifecycle method called the componentDidmount().

Let’s replicate its logic in a functional component. I believe you can convert the state logic in this component to use the useState Hook.

Well, let’s start with that.

As expected, comment-out all the code in this file and add the following at the top.

import React, { useState } from "react"
import TodosList from "./TodosList"
import Header from "./Header"
import InputTodo from "./InputTodo"

import axios from "axios"
import uuid from "uuid"

const TodoContainer = props => {
  const [todos, setTodos] = useState([])
  const [show, setShow] = useState(false)

  const handleChange = id => {
    setTodos(
      todos.map(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed
        }
        return todo
      })
    )
    setShow(!show)
  }

  const delTodo = id => {
    setTodos([
      ...todos.filter(todo => {
        return todo.id !== id
      }),
    ])
  }

  const addTodoItem = title => {
    const newTodo = {
      id: uuid.v4(),
      title: title,
      completed: false,
    }
    setTodos([...todos, newTodo])
  }

  return (
    <div className="container">
      <Header headerSpan={show} />
      <InputTodo addTodoProps={addTodoItem} />
      <TodosList
        todos={todos}
        handleChangeProps={handleChange}
        deleteTodoProps={delTodo}
      />
    </div>
  )
}

export default TodoContainer

Save your file and test your application.

Notice we are not including the lifecycle logic yet, hence no data is being fetched. We will take care of that in a moment.

So what is happening?

In the code, we started by defining a separate useState Hook for the state variables and assigning a default value to them.

Now, comparing the entire code to that of the class version, you’ll notice that we removed all occurrence of this.state since it doesn’t apply in the function component.

Likewise, the setTodos and setShow function which are used to update the state value replaces their respective this.setState.

That out of the way,

If you take a look at the class version of our code, we are fetching the default todos data using the HTTP GET method in the componentDidMount lifecycle method.

But in a function component, we cannot use this method. Instead, we will make use of another Hook called useEffect.

As the name implies, it is used to perform side effects. An example is the data we fetch via an HTTP request.

React allows us to combine different lifecycle logic using this single Hook. So you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

Though, just like the useState Hook, you can also have multiple useEffect to separate unrelated logic.

Let’s see how to apply this Hook.

In the src/components/TodoContainer.js file, import the useEffect Hook from the react module. So your import should look like this:

import React, { useState, useEffect } from "react"

Then add this Hook above the return statement and save your file:

useEffect(() => {
  console.log("test run")
})

With this simple addition, if you reload the frontend, you should see the log message displayed in the browser console.

This Hook takes in a function as an argument and an optional array (I omitted that for now). The function defines the side effect to run (in our case, making an HTTP request) and the optional array will define when to re-run the effect.

Now, let’s update this Hook to include our HTTP request.

useEffect(() => {
  console.log("test run")
  axios
    .get("https://jsonplaceholder.typicode.com/todos?_limit=10")
    .then(response => setTodos(response.data))
})

If you save the file and take a look at the console once again, you will see that your log keeps incrementing. This shows the Hook is running infinitely.

What’s happening?

Unlike componentDidMount lifecycle that only runs once it fetches data for the first time, the useEffect Hook by default runs not only after the first render but also after every update – i.e when there is a prop or state changes.

In our code, the todos state variable is being updated when the data is fetched from the endpoint. Thereby causing an infinite loop.

This is happening because the Hook combines different lifecycle logic. It is our responsibility to control it to the logic we want.

How can we control it?

That’s where the optional array of dependencies comes in.

useEffect(() => {
  ...
}, []);

This allows us to skip applying an effect if the specified values (passed-in) haven’t changed between re-renders.

If you pass an empty array instead, React will only execute the Hook once because no data is changing.

Taking a closer look at this, we have the equivalent of componentDidMount when the array is empty and componentDidUpdate when it includes variable(s) that will trigger re-rendering.

Update the Hook to include the optional array:

useEffect(() => {
  console.log("test run")
  axios
    .get("https://jsonplaceholder.typicode.com/todos?_limit=10")
    .then(response => setTodos(response.data))
}, [])

Save the file and test your application.

It should work as expected.

Next, let’s see how the useEffect handles the logic of the componentDidUpdate and componentWillUnmount.

Starting with the componentDidUpdate,

Remember that component gets updated when there is/are state or prop changes, thereby trigger re-rendering.

If you take a look at the src/components/Header.js file, we are using this lifecycle method to update the DOM when there is prop change. This happens every time the checkbox is clicked.

To apply this logic using the Hook,

Let’s start by converting the component to a function-based.

import React from "react"

const Header = props => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "2em",
  }
  return (
    <header style={headerStyle}>
      <h1 style={{ fontSize: "25px", marginBottom: "15px" }}>
        Simple Todo App <span id="inH1"></span>
      </h1>
      <p style={{ fontSize: "19px" }}>
        Please add to-dos item(s) through the input field
      </p>
    </header>
  )
}

export default Header

At this point, we don’t have the lifecycle logic in place.

Let’s do that now.

Import the useEffect from the react module like so:

import React, { useEffect } from "react"

Then add this Hook in your Header component (at the top level):

useEffect(() => {
  var x = Math.floor(Math.random() * 256)
  var y = Math.floor(Math.random() * 256)
  var z = Math.floor(Math.random() * 256)
  var bgColor = "rgb(" + x + "," + y + "," + z + ")"

  document.getElementById("inH1").innerHTML = "clicked"
  document.getElementById("inH1").style.backgroundColor = bgColor
}, [props.headerSpan])

Save your file and check your application.

Oops! The heading text, “clicked” is displaying on initial render – without the checkbox being clicked.

What’s happening?

As mentioned earlier, the Hook is designed to run not only when the component first renders but also on every update. That is why the call to manipulate the DOM as defined in it is being executed on the initial rendering.

Once it renders for the first time, it checks for an update in the dependency to run subsequently.

Remember, this dependency gets updated whenever you click the checkbox.

While this is the common use case of this lifecycle logic using the Hook, sometimes, we want the Hook to run only on updates and right after any user action. In our case, whenever the user clicks on the checkbox.

Running an Effect only on Updates

If you revisit the class version of our code, we are checking for update (i.e if a checkbox is clicked) by comparing the prevProps and the current prop.

With React Hooks, we can get the previous props or state as the case may be using the useRef() Hook.

For instance, add this above the useEffect Hook:

const isInitialMount = useRef(true)

Then, log the isInitialMount variable to the console. Make sure you import useRef from the react module.

import React, { useEffect, useRef } from "react";
const Header = props => {
  const headerStyle = {
    ...
  };
  const isInitialMount = useRef(true);
  console.log(isInitialMount);
  useEffect(() => {
    ...
  }, [props.headerSpan]);
  return (
    ...
  );
};
export default Header;

If you save your file and check the console, you should see this:

The useRef Hook returns an object containing the current property. This property is assigned a value equal to the argument we passed to the Hook.

This is good because we can track whether we are on the first render or subsequent render.

Next, let’s update the useEffect Hook so you have:

import React, { useEffect, useRef } from "react";

const Header = props => {
  const headerStyle = {
    ...
  };

  const isInitialMount = useRef(true);

  console.log(isInitialMount);

  useEffect(() => {
    var x = Math.floor(Math.random() * 256);
    var y = Math.floor(Math.random() * 256);
    var z = Math.floor(Math.random() * 256);
    var bgColor = "rgb(" + x + "," + y + "," + z + ")";

    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      document.getElementById("inH1").innerHTML = "clicked";
      document.getElementById("inH1").style.backgroundColor = bgColor;
    }
  }, [props.headerSpan]);

  return (
    ...
  );
};

export default Header;

Save your file and test your application.

What’s happening in the code?

In the useEffect Hook, we are checking if the current property of the useRef is true.

By default, we set the value to true to track when the component has just mounted. When this happens, we ignore any action and immediately set the value to false.

At this point we know we can do whatever we want. In our case, we can perform DOM manipulation right after a clicked checkbox.

Moving on.

Next, the componentWillUnmount logic.

Here, our focus is on the src/components/TodoItem.js file.

Normally, we do cleanups (for instance, cancelling the network request, removing event listeners) in the componentWillUnmount. This is because it is invoked immediately before a component is unmounted and destroyed.

But in our app, we are using this lifecycle logic to trigger an alert when an item is about to be deleted from the todos list.

Now, how can we replicate the same logic with Hooks?

While you are aware that the useEffect Hook run on every render (except you control it), React allows us to clean up effects from the previous render before running another cycle and also before the component is unmounted.

Well, let’s see this in action.

As expected, we will convert the TodoItem class component to a function-based.

This should be straight forward.

Here you have it:

import React from "react"

const TodoItem = props => {
  const completedStyle = {
    fontStyle: "italic",
    color: "#d35e0f",
    opacity: 0.4,
    textDecoration: "line-through",
  }

  const { completed, id, title } = props.todo

  return (
    <li className="todo-item">
      <input
        type="checkbox"
        checked={completed}
        onChange={() => props.handleChangeProps(id)}
      />
      <button onClick={() => props.deleteTodoProps(id)}>Delete</button>
      <span style={completed ? completedStyle : null}>{title}</span>
    </li>
  )
}

export default TodoItem

Save the file.

Now let’s apply the Unmount logic.

In the TodoItem component, add the following code above the return statement.

useEffect(() => {
  return () => {
    alert("Item about to be deleted!")
  }
}, [])

Save your file and test your application.

The code is pretty simple. Anytime you return a function inside the useEffect Hook, it will execute before the Hook run the next time (in case you are triggering a re-run) and also before the component is unmounted.

In our case, we don’t have any array dependency. So, the effect will run just once and the return function will be called when the component is about to unmount.

At this point, you have total control over the type of component to create.

Now, the logic of our todos app is managed in the functional component using the React Hooks. Though, we still have a component constructed with class in the src/components/TodosList.js file.

Mind you, this component has no state or lifecycle logic. This makes the conversion easy and direct.

Can you give it a try?

Good!

Here is the conversion.

import React from "react"
import TodoItem from "./TodoItem"

const TodosList = props => {
  return (
    <div>
      {props.todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          handleChangeProps={props.handleChangeProps}
          deleteTodoProps={props.deleteTodoProps}
        />
      ))}
    </div>
  )
}

export default TodosList

Now, we have a complete React app written only with a function component.

Thanks to the Hooks.

While you have learned a lot and covered most of the use cases of the React Hooks, there are more to learn like creating a custom Hook for logic reusability.

But this is a great start! You can start using these Hooks in your new and existing project.

Please note, you don’t have to rewrite your existing logic, but you can start applying these Hooks to new updates.

That’s it.

If you like this tutorial, feel free to share around the web. Also, if you have any questions, I will be happy answering them through the comment section.

Follow me on Twitter @ibaslogic

Want a Free Gatsby Theme for your Blog? Use and Modify My Personal Theme

Ibas — Sat, 21 Mar 2020 15:03:32 +0000

Hi Everyone,

I will like to motivate my fellow beginner developers by sharing my personal Gatsby theme for use and modification.

While I have gained a lot here, I'm glad to contribute a token.

This Gatsby site is based on React library and GraphQL. Though the blog post content comes from Markdown filesystem, I have a couple of resources that will help you source content from CMS like contentful.

I believe this theme is not too complex for a basic Blog site.

If you like the fluidity but don't know where to start, I have you covered.

Start here:

Learn to write React code from scratch.

Gatsby tutorial from scratch.

Once you are comfortable with that, modifying this theme will be a piece of cake.

Theme source code on GitHub

View site here

For senior developers that beginners like myself look up to, please I will like to hear your feedback.

Thanks.

If you have any question, I will be happy answering them.

PS: I will be sharing my awesome project to motivate beginners. Be sure you follow me on Twitter so you don't miss out.

Want a Gatsby Theme for your blog? Use and Modification My Personal Theme

Ibas — Fri, 20 Mar 2020 16:59:06 +0000

Hi Everyone,

I will like to motivate my fellow beginner developers by sharing my personal Gatsby theme for use and modification.

While I have gained a lot here, I'm glad to contribute a token.

I believe this theme is not too complex for a basic Blog site.

If you like the fluidity but don't know where to start, I have you covered.

Start here:

Learn to write React code from scratch.

Gatsby tutorial from scratch.

Once you are comfortable with that, modifying this theme will be a piece of cake.

Theme source code on GitHub

View site here

For senior developers that beginners like myself look up to, please I will like to hear your feedback.

Thanks.

If you have any question, I will be happy answering them.

PS: I will be sharing my awesome project to motivate beginners. Be sure you follow me on Twitter so you don't miss out.

How to Handle Routing in a React Application using the React Router library

Ibas — Fri, 20 Mar 2020 10:32:00 +0000

Note: This comprehensive guide is part of a React series. You can read from the beginning to have a full grasp of the subject. You can continue if you have a knowledge of React.

See a demo app

React as we know is a single-page app (SPA). And we’ve seen earlier in the series how we are using one index.html file (in the public folder) to render the view.

But sometimes we would want to have the feelings of a multipage app and have the options to navigate to different pages. This is where Routing comes in.

In this section, you will learn how to manage a route in our todos app. You can then apply the same logic to any React project you work with.

React Router

In React, we use React router to keep track of the current URL and renders different views as it changes. It is a third party library that allows us to seamlessly perform routing in React app.

This routing can either be a client-side (in our case) or server-side rendering.

React router, just like React has different but close implementations in the web environment and the native environment.

Here, our focus is on the web app and not native. Let’s see how we can achieve our aim.

Installation

We will start by installing the react-router-dom in our project. If you are just joining the series, make sure you are familiar with React and quickly create a starter app using the Create React App CLI to follow along. We recommend you go back and brush your knowledge by following the Series from the beginning.

Let’s continue.

Head over to the terminal and install React router in your project (in our case, todos project).

npm install react-router-dom

This library gives us all the tools and components we need to implement routing in our React app. For React native (mobile) app, you would install the react-router-native instead.

Let's pause for a moment and think of what to do.

We want to create different views (or “pages”) which we want the router to handle for us. The index or the home, the about and the error page.

The first thing you’d want to do when creating routing with the React router is to wrap the top-level app, in our case <TodoContainer> element in a router.

Here, we introduced our first router component, BrowserRouter.

So in the index.js file, import the component from the react-router-dommodule.

import { BrowserRouter } from "react-router-dom"

Then wrap the container app like so:

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <TodoContainer />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
)

Remember, we already have the StrictMode wrapping this container. Whether or not you are using the strict mode, make sure you wrap the parent app with the Router component.

You may also wish to use an alias to represent it like so:

import { BrowserRouter as Router } from "react-router-dom"

Then use the alias in the render like so:

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <TodoContainer />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
)

Save the file.

What is BrowserRouter exactly?

It is a type of router that uses the HTML5 history API to keep the URL in sync with the view. With this router, you are sure of having a clean URL in the browser address bar.

Something like this:

http://yourapp.com/about

Like this type, we also have the HashRouter. But here, it stores the current location in the hash portion of the URL. The URL you get here is not so clean. Something like this:

http://yourapp.com/#/about

Most of the time, you will use BrowserRouter. Though in this part of the series you’ll learn how to implement both of them.

Presently, we have the current view been rendered in the TodoContainer component. In the same component, we can dynamically render a different view based on the path passed to them.

To do this, we make use of other important components from the react-router-dom. The Switch and the Route components.

Go inside the TodoContainer.js file and import them like so:

import { Route, Switch } from "react-router-dom"

Then, wrap the JSX elements in the return statement with the Route component. And then pass a path prop pointing to the index page, “/”.

return (
  <Route path="/">
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={addTodoItem} />
        <TodosList
          todos={todos}
          handleChangeProps={handleChange}
          deleteTodoProps={delTodo}
          setUpdate={setUpdate}
        />
      </div>
    </div>
  </Route>
)

Save the file, you should still have access to the view from the home page.

The Route

The Route component is responsible to render the UI when its path matches the current URL. As you can see in the code, the path points to the home page. So it renders the JSX elements.

This path prop is used to identify the portion of the URL that the router should match. If the view changes, it may no longer match the path. In that case, it renders a NULL.

Please note: Match here is referring to the beginning of the URL. In this case, the Route path, “/” in the code above will always match any URL. That is why if you go to http://localhost:3000/about, your app will still render the UI. You can solve this by adding exact to the route like so:

<Route exact path="/">

Using the exact prop in the Route makes the path exclusive to that <Route>.

You can also use the Switch component to solve this.

Normally, you shouldn’t use the Route component outside of the Switch. At the moment, you don’t know what that is. So let’s discuss it briefly.

The Switch

I mentioned earlier that we will create multiple views i.e pages. We already have the index page route as seen in the return statement in our TodoContainer.js file.

Let’s create the other two pages. The About and the Error page.

Go inside your project directory and create a pages folder. Based on the structure of our project, we will navigate in the src/functionBased and create the folder. In your case, maybe in the src/ folder.

In the pages folder, create two component files. About.js and NotMatch.js.

Let’s render a simple function component in the two files. For the About.js, add this:

import React from "react"

const About = () => {
  return <div>hello from about page</div>
}
export default About

And the NotMatch.js looks like this:

import React from "react"

const NotMatch = () => {
  return (
    <div>
      <h3>No match for this page</h3>
    </div>
  )
}
export default NotMatch

Save your files and import them in the TodoContainer.js file.

import About from "../pages/About"
import NotMatch from "../pages/NotMatch"

Then update the return statement to include these new components. Notice we are wrapping everything with the React fragment. You should know why. You cannot render multiple JSX unless you wrap them in a single element or use the React fragment.

return (
  <>
    <Route exact path="/">
      ...
    </Route>
    <Route path="/about">
      <About />
    </Route>
    <Route path="*">
      <NotMatch />
    </Route>
  </>
)

If you save your file and navigate to /about or non-existing page. The error component always renders on those pages. To be clear, you can temporarily remove the exact prop from the index route and save your file.

Now check your app and navigate around once again.

Something is common in the current settings. We now see the index UI and that of the error page on every view.

We understand from the earlier discussion that the Route path for the index, “/”, will always match the URL. So it renders on every page.

What about the NotMatch page?

Same thing. A <Route path="*”> always matches. So it renders as well.

We solved the index path by adding an exact prop to its Route. Now to solve the NotMatch path, we will add a Switch.

A Switch is another component from the react-router-dom that helps us render a UI. It wraps all your <Route> elements, looks through them and then renders the first child whose path matches the current URL.

Let’s see how it works.

Wrap all the <Route>s with the <Switch> component.

return (
  <Switch>
    <Route exact path="/">
      ...
    </Route>
    <Route path="/about">
      <About />
    </Route>
    <Route path="*">
      <NotMatch />
    </Route>
  </Switch>
)

Notice we have returned the exact prop to the index <Route>.

Now save your file and test your app by navigating from the index page to the about page and then to a non-existing page. It should work as intended.

Once a match is found among the <Route>’s elements, the <Switch> stops looking for matches and render its JSX element. Else, it renders nothing (i.e null).

Remember that the path="*" matches every instance. It serves as a fallback if none of the previous routes renders anything.

For this, with Switch, you declare a more specific path before the least specific.

For instance, if you have this path="/about/:slug" and this path="/about" in the <Route>s element. The Route with the earlier path should come first within the Switch.

Don’t worry about the :slug as used above, we will get to that when we start discussing dynamic routing.

Moving on…

At the moment, we can only navigate to the /about or error page by manually typing the page’s URL in the browser address bar.

Up next, you will learn how to add the navigation links.

Remember from the design, we have a component called Navbar that handles these links. We’ve created the file, Navbar.js in the /components folder.

Please create it if you haven’t. Then add a simple function component:

import React from "react"

const Navbar = () => {
  return <div>Hello from Navbar</div>
}
export default Navbar

Save the file and import it in the TodoContainer.js file:

import Navbar from "./Navbar"

Then, render its instance above the <Switch> element:

return (
  <>
    <Navbar />
    <Switch>
      <Route exact path="/">
        ...
      </Route>
      <Route path="/about">
        <About />
      </Route>
      <Route path="*">
        <NotMatch />
      </Route>
    </Switch>
  </>
)

In the code, we re-introduced the React fragment to wrap all the JSX elements. Save and see the Navbar text in the frontend.

Good. Let’s add the navigation links.

In the Navbar component, start by adding an array of objects (containing all your links items) above the return statement.

const links = [
  {
    id: 1,
    path: "/",
    text: "Home",
  },
  {
    id: 2,
    path: "/about",
    text: "About",
  },
]

This is pretty easy as you can easily add more links in there if you want.

Next, update the return statement so you have:

return (
  <nav className="navBar">
    <ul>
      {links.map(link => {
        return <li key={link.id}>{link.text}</li>
      })}
    </ul>
  </nav>
)

As you can see, we are simply looping through the links array to get the individual items. We do this using the map method. Remember to include the key prop in the li item.

Save your file and see your items display in the frontend.

At the moment, the displayed items are not linked to their respective pages. We will do that now.

The Link and the NavLink Component

Usually, we often navigate different pages of a website using the <a href> tag. But this results in a page refresh. And in a single page application, we don’t want that.

So React router provides for us the route changers components that we can use to have a smooth navigation. The <Link> and <NavLink> components.

While we can use either of them to navigate a different route, the NavLink adds style attributes to the active routes. And we can use that to style the route so that users know what page they are in.

Let’s apply them. Starting with the Link component.

In the Navbar component, import the Link from the react-router-dom.

import { Link } from "react-router-dom"

Then, update the return statement so you have:

return (
  <nav className="navBar">
    <ul>
      {links.map(link => {
        return (
          <li key={link.id}>
            <Link to={link.path}>{link.text}</Link>
          </li>
        )
      })}
    </ul>
  </nav>
)

Save the file and test your application. You will be able to navigate around without a page reload.

The Link component takes a to prop where we assign the path name. This is equivalent to the href attribute in the <a> tag.

But here, we are not able to tell what page we are by looking at the links or inspect the element in the DevTools. So let’s replace the <Link>s with the <NavLink>s. Your code should look like this:

import React from 'react'

import { NavLink } from "react-router-dom"

const Navbar = () => {

  const links = [
    ...
  ]

  return (
    <nav className="navBar">
      <ul>
        ...
            <li key={link.id}>
              <NavLink to={link.path}>{link.text}</NavLink>
            </li>
        ...
      </ul>
    </nav>
  )
}
export default Navbar

If you save the file and take a look at the frontend. You will not see any changes in the browser view. But if you inspect the list items in the console, you’ll see an active class name being applied to both links.

To correct that, we will do the same thing we did earlier for the <Route>. We will add an exact prop to the NavLink. You can also go ahead and use the default class name and then style it. But I will show you how to change the name if you want to. You simply add an activeClassName to the NavLink.

So update it so you have:

return (
  <li key={link.id}>
    <NavLink to={link.path} activeClassName="active-link" exact>
      {link.text}
    </NavLink>
  </li>
)

Save your file. Head over to the styles file (in our case, App.css) and add this:

.active-link {
  color: orangered;
  text-decoration: underline;
}

Save the file and test your work. It should work as expected.

Nested and Dynamic Routing

At the moment, if you navigate to the /about page, the About component gets rendered. Now, let’s say you want to render sub-routes like /about/about-app, /about/about-author etc. Then, you’ll need to understand Nested Routing.

Also, in the path, the relative segment (for instance, /about/relative-path) is dynamic. So we can represent it like this: /about/:slug. Where :slug corresponds to relative-path in the URL. The :slug (though can be named anything), is called the params. We will use it for our dynamic routing.

Let see all of these in action.

From our about page, we want to display and access a list of other two pages. One for the author, and the other, about the app.

That means our nested route will happen in the About component.

Let’s do a quick check inside this component.

Update it to check what the props return.

import React from 'react'

const About = (props) => { console.log(props) return (
    ...
  )
}
export default About

Save the file. Go to your app and navigate to /about page while the Console is opened. You’ll see that the props return an empty object.

Ok fine.

Let’s go inside the TodoContainer.js file and temporarily modify the About Route element from this:

<Route path="/about">
  <About />
</Route>

To this:

<Route path="/about" component={About} />

Save the file, reload the /about page and check the console.

This time, the props is returning some useful information containing the history, location and match objects.

For now, the focus is on the match object.

In there, we have access to the url, path, params etc.

We will need the url to build nested links; the path for nested routes while the params needed for dynamic routes.

But why are we not getting them with the earlier settings?

Before the Hooks are introduced in React router, the component prop in the Route element is one of the methods used to render the components. But we now render them as a child element.

And through one of the hooks, we can have access to the match object. This hook is called useRouteMatch. It is also available in the react-router-dom module.

Let’s use it.

First, revert the Route element in the TodoContainer.js file so you have:

<Route path="/about">
  <About />
</Route>

Save the file.

Head over to the About.js file and import the hook like so:

import { useRouteMatch } from "react-router-dom"

If you log this hook and check the browser Console, you should have access to the same properties we saw earlier for the match object.

const About = () => {
  console.log(useRouteMatch())
  return (
    ...
  )
}
export default About

Don’t forget to navigate to /about to see them.

Now, let’s use the returned data to create the nested links and nested routes.

This is simple.

Remember, I mentioned earlier that the url and path are used to create these links respectively.

So let’s get them from the hooks (we know they are there as we’ve seen from the last image).

Add this above the return statement in the About component.

const { url, path } = useRouteMatch()
Then, update the return statement so you have:
return (
  <div>
    <ul>
      <li>
        <Link to={`${url}/about-app`}>About App</Link>
      </li>
      <li>
        <Link to={`${url}/about-author`}>About Author</Link>
      </li>
    </ul>
    <Route path={`${path}/:slug`}>
      <SinglePage />
    </Route>
  </div>
)

Before you save. Notice we have introduced a couple of things. We are using the <Links> and <Route> component. So update the import so you have:

import { Link, useRouteMatch, Route } from "react-router-dom"

Notice also, we are using <SinglePage /> component in the Route element.

So import it like so:

import SinglePage from "./SinglePage"

Then create it (SinglePage.js) inside the Pages folder. You can keep it simple by adding this function component.

import React from "react"

const SinglePage = () => {
  return <div>Hello from single page</div>
}
export default SinglePage

Save your files and navigate around different pages in your app. Notice how the URL is dynamically changing based on the current view.

What is happening?

The code is self-explanatory up to this point:

<Route path={`${path}/:slug`}>
  <SinglePage />
</Route>

The path in the ${path} is /about. We have already seen that in the last screenshot.

One more thing to note here is that the :slug matches anything after /about/. That means, the :slug corresponds to about-app in /about/about-app page.

We will have access to the :slug from the child element, SinglePage. Then, we can use it to dynamically display the right content on the page.

Please note, you don’t have to call it slug. You can name it anything you like.

Once the path matches and the child element is rendered, we can use a hook called useParams to have access to the params of the current <Route>. In our case, we will have access to the :slug in the rendered component.

Let’s prove it.

In the SinglePage.js file, import the useParams hook and log it in the console.

import React from "react"
import { useParams } from "react-router-dom"

const SinglePage = () => {
  console.log(useParams())
  return <div>Hello from single page</div>
}
export default SinglePage

Save your file. Navigate to the single page while the console is opened. You should see the page slug right there.

Good. Almost there.

Now, let’s see how to display dynamic content based on the page URL path.

In the SinglePage.js file, add this data above the return statement:

const aboutData = [
  {
    slug: "about-app",
    title: "About the App",
    description:
      "In this app, you can add, delete, submit and edit items. To edit items, simply double click on it. Once you are done, press the enter key to resubmit. This app will persist your data in the browser local storage. So whether you reload, close your app or reopened it, you still have access to your to-dos items.",
  },
  {
    slug: "about-author",
    title: "About the Author",
    description:
      "This app was developed by Ibas Majid, a self-taught web developer and a technical writer. He is opened to freelance Gig. So go ahead and connect with ibas on Twitter @ibaslogic.",
  },
]

Then, add the following below the data (but above the return statement).

const { slug } = useParams()
const aboutContent = aboutData.find(item => item.slug === slug)
const { title, description } = aboutContent

As mentioned earlier, we are receiving the current page slug via the useParams hook.

Then, with the help of the find() method, we will be returning the first object in the array whose slug matches current page slug. The returned object is then stored in the aboutContent variable. From there, we are destructuring the title and description.

Now, you can update the return statement so you have:

return (
  <div>
    <h1>{title}</h1>
    <p>{description}</p>
  </div>
)

Save your file and visit the single about pages. You should see your content displayed dynamically in the pages.

Good. This brings us to the end of this part.

To learn ReactJS in a practical way, go ahead and follow this React series.

If you have any questions or contributions, I am in the comment section.

Happy coding.

DEV Community: Ibas

React Tutorial: A Comprehensive Guide for Beginners (2023)

Why You Should Take This Course

Prerequisites

What is React?

Declarative Programming and React

Thinking in React Component

The React Virtual DOM

Exploring the React Virtual DOM

How React Implements Virtual DOM

Adding React to HTML Page

React Element and JSX

What is JSX?

Setting up the Working Environment

The create-react-app CLI

Inside the Project Folder

Running the Development Server

Working Environment With Vite

Create React App vs. Vite: Comparing the Folder Structure

Setting up React Environment From Scratch

Next part.

5 Simple Tips to Learn JavaScript Effectively and Fast

Set a goal and pick what to learn

Follow a well-structured curriculum

Start with the fundamentals but don’t do an endless tutorial (simply get started with projects)

Knowing how to search for solutions

Get used to reading the documentation

Conclusion

JavaScript Foreach: A Comprehensive Guide for Beginners

So what exactly is ForEach?

Applying the second argument of the forEach method – i.e the thisValue

Using the arrow function as a callback

ForEach() always return undefined

Working with Array-like Objects

Converting Array-like Objects to Array

Another example of an array-like object.

Conclusion

Object-Oriented JavaScript: Complete Beginner’s Guide

What Is Object-Oriented Programming (OOP)?

A Quick Look at JavaScript Object

Creating Objects in JavaScript

What Exactly Is “this”?

Object-Oriented Concepts

Creating Multiple Objects

Creating Objects Through Function

Creating Objects Through the Constructor Function

The new Operator

The Concept of Prototype in JavaScript

Inheritance

The ES6 Classes

Creating Class Inheritance (Subclass or Child Class or Derived Class)

Conclusion

Handling Form Inputs in React – A Simple Step-by-Step Guide

Uncontrolled and Controlled Input

Adding Multiple Input Fields

Adding the TextArea field

The Select Input Field

The checkbox Input

Radio Inputs

Range Input Type

Conclusion

React Context API Made Simple – The practical guide (Updated)

What is React context API

Getting the Project Files Ready

Setting up the Context

Accessing the Context data

Accessing the Context Data (using the contextType) in a Class Component

Accessing the Context Data in a Function Component

Accessing the React Context with Hook

Performance Issue with React Context API

Conclusion

Project Source Code on GitHub.

Free Copies of React Tutorial Book for Beginners

Learn React Hooks by Converting a Class-based Meme Generator App to Functional based

What is our goal?

The useEffect React Hook

Follow me on Twitter @ibaslogic

React Hooks Tutorial: The Practical Guide to Learning Hooks for Beginners

What are React Hooks?

Pulling project files from GitHub

The `create-react-app` CLI

Applying the second argument of the forEach method – i.e the `thisValue`