We will learn the following in this article:
GraphQL’s popularity has caused many developers to jump ship from REST to using GraphQL in their new apps. If you’re a new or a learning developer with enthusiasm to learn, you might be thinking of GraphQL as a technology that is extremely tricky to use.
To that my answer is no. GraphQL has become one of the hottest technologies to learn, and this is with good reason. …
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:
Implementing these steps in code used to be a bit tedious. This is where React Router starts to shine.
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:
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:
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
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.
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:
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:
One of the easiest and useful projects in any programming language one can do is to build an application that simply displays the weather of your hometown.
In this post, we’ll be building an extremely simple weather app with minimal design. As this will be your program, you can customize the code as well, allowing you to change the look and feel of your program. Let’s dive in!
create-react-app to build the template of your app. The name of my app is
npx create-react-app weatherfrontend
Now, you need to log on to the OpenWeatherMap website and get your API key. This API key allows you to access OpenWeatherMap’s database so that you could use the data returned from their servers to display the relevant information on the webpage. …