Build a MySQL Node.js CRUD App #3: The Client-Side with React

Build a MySQL Node.js CRUD App #3: The Client-Side with React

Hello and welcome to the 3rd part of Let’s Build a MySQL Node.js CRUD App series! In the previous article, we have implemented all our GET…

Hello and welcome to the 3rd part of  Let’s Build a MySQL Node.js CRUD App series! In the previous article, we have implemented all our GET, POST, PUT and DELETE routes in our server.

If you haven’t read the previous article, please find it here.

In this part, we will be working on our front-end with React to complete our MySQL CRUD app!

Step 1: Install npm packages

Install axios and cors to allow our app to make requests to the server. Install react-hook-form for easy form handling in React.

npm install axios cors react-hook-form

Step 2: Import cors

In server.js, include the import statement at the top to use cors.

const cors = require("cors");

Then, to use it, add this line below the const app line.

app.use(cors());

This will allow our client-side at localhost:3001 to be able to make requests to the server at port 3000. To understand more about CORS, feel free to read this article on  Introduction to Cross-Origin Resource Sharing.

Step 3: Read Reviews

In App.js, we want to get and display the reviews from MySQL for users to read. To do so, we first import the following:

import { useState, useEffect } from "react";
import axios from "axios";

javascript nodejs programming

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Decoding Nodejs

The main goal of this blog is to explain the “Architecture of Nodejs” and to know how the Nodejs works behind the scenes. Generally, most of the server-side languages, like PHP, ASP.NET, Ruby, and including Nodejs follows multi-threaded architecture. That means for each client-side request initiates a new thread or even a new process.

Hire NodeJs Developer

Looking to build dynamic, extensively featured, and full-fledged web applications? **[Hire NodeJs Developer](https://hourlydeveloper.io/hire-dedicated-node-js-developer/ "Hire NodeJs Developer")** to create a real-time, faster, and scalable...

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

Learning JavaScript: Data Types and Variables

To paraphrase the title of an old computer science textbook, “Algorithms + Data = Programs.” The first step in learning a programming language such as JavaScript is to learn what types of data the language can work with. The second step is to learn how to store that data in variables. In this article I’ll discuss the different types of data you can work with in a JavaScript program and how to create and use variables to store and manipulate that data.