Traditionally, React has been used to build single-page web apps. However, if you insisted on building a React app with multiple pages or routes, the following process had to be done:

• Tell React to render the page according to the route that the user has navigated to.
• To make this possible, React had to go out and fetch the page from a server.

Implementing these steps in code used to be a bit tedious. This is where React Router starts to shine.

Introduction to React Router

What is React Router?

According to this Medium article, the React Router library allows the user to implement dynamic routing in their app. Furthermore, it utilizes a component-based approach by rendering React components depending on the route. In other words, it tells React to render specific components on specific routes of the URL. …

In this article, we’ll be building a Pomodoro Timer in React that uses components from Material-UI. Additionally, we’ll be using the TailwindCSS library to not only make our app look better, but also to make the website design responsive, that is, to make our web app look better on both large and mobile screens.

By the end of this tutorial, our app will look like this on both desktop and mobile devices:

Learning Objectives Of This Article

• Know what third-party authentication is.
• Know when to use third-party authentication.
• To be able to build a notes application with the built-in Google OAuth.

Introduction

The word around town is that you’re an amazing web developer who possesses great enthusiasm for learning new skills and loves catching up with cutting edge frameworks and technologies. For this reason, a client has approached you and asked you to build an app with the following requirements:

• A basic notes app with normal CRUD functionality.
• A login and logout system — there will be multiple users of this web app.

“Sure, no problem”, you tell yourself. “I’ve already built a note-taking application, and I’ve also learned how to build a login system. …

One of the most useful automation projects that a novice programmer can undertake is to build a web scraper app. An important use case of web scraping can be to extract relevant data from a website and store it for later use. For example, we can retrieve the titles of the posts on the Reddit website and display them on our page without printing out the body of the title. Another example can be to extract only the names of the commentators on a Twitter post without seeing the content of their comment.

In this project, we will be building a web scraper for two types of…

Nowadays, writing web applications can get extremely tedious and complex. If you’re building a React app, you will sometimes send data from one component to another component. However, due to the complexity of your project, there might be times where you’ve had to send states and props from component to component, thus further increasing the complexity. This is where React’s Context API can prove to be incredibly useful.

Let’s first discover why we need the Context API.

What Is Context and Why Is It Useful?

As an example, let’s create an example where we build a database of a list of movies and their respective prices.

Let’s first create a file called Movies.js and define states in it. These states contain values about the movies. …

You’re a talented web developer in extremely high demand. Time and time again, you’ve proven yourself capable of building extremely complex apps with big success.

Let’s start with an example. A local school desires its students to view their academic progress and homework right from an app. Due to your glowing recommendations, naturally, the school department hires you. These are their requirements:

• Students first log in to the app using their email and required credentials. If an existing account is not found, they are prompted to create an account.
• If an existing account is found, the student can now view their academic progress and homework. …

Step By Step Tutorial

One of the most interesting projects a beginner can do while learning a framework is to build a random quote generator. In this tutorial, we’ll be building a web app that will send us an inspirational quote of the day when we run the program. Along the way, we will also learn about the fetch method in ReactJS.

In the end, this will be the result of our program:

There might have been times where you, as a programmer, wondered how chat apps work. What’s going on under the hood that makes this technical marvel possible? Socket.IO makes the development of chat apps easier and has been used in many software projects.

In this article, we’ll build a chat app using the Socket.IO library and the Node.js engine. This is how it’ll look like: