React + Node.js + Express + MySQL example: Build a CRUD App

In this tutorial, I will show you how to build full-stack React + Node.js + Express + MySQL example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is a React.js client with React Router, Axios & Bootstrap.

Related Post: React + Node.js Express: User Authentication with JWT example


React + Node.js + Express + MySQL example Overview

We will build a full-stack Tutorial Application in that:

  • Tutorial has id, title, description, published status.
  • User can create, retrieve, update, delete Tutorials.
  • There is a search box for finding Tutorials by title.

Here are screenshots of the example.

– Add an item:

react-node-express-mysql-crud-example-demo-create

– Show all items:

react-node-express-mysql-crud-example-demo-retrieve

– Click on Edit button to view details of an item:

react-node-express-mysql-crud-example-demo-retrieve-one

On this Page, you can:

  • change status to Published/Pending using Publish/UnPublished button
  • remove the object from MySQL Database using Delete button
  • update this object’s details on Database with Update button

react-node-express-mysql-crud-example-demo-update

– Search objects by field ‘title’:

react-node-express-mysql-crud-example-demo-search

– Check MySQL database:

react-node-express-mysql-crud-example-demo-mysql-database

React, Node.js Express, MySQL Architecture

We’re gonna build the application with following architecture:

react-node-express-mysql-crud-example-architecture

– Node.js Express exports REST APIs & interacts with MySQL Database using Sequelize ORM.
– React Client sends HTTP Requests and retrieves HTTP Responses using Axios, consume data on the components. React Router is used for navigating to pages.

Video

This is our React Node.js Express Sequelize application demo (with brief instruction) running with MySQL database.

Node.js Express Back-end

Overview

These are APIs that Node.js Express App will export:

MethodsUrlsActions
GETapi/tutorialsget all Tutorials
GETapi/tutorials/:idget Tutorial by id
POSTapi/tutorialsadd new Tutorial
PUTapi/tutorials/:idupdate Tutorial by id
DELETEapi/tutorials/:idremove Tutorial by id
DELETEapi/tutorialsremove all Tutorials
GETapi/tutorials?title=[kw]find all Tutorials which title contains 'kw'

Project Structure

react-node-js-express-mysql-example-node-server-project-structure

db.config.js exports configuring parameters for MySQL connection & Sequelize.
Express web server in server.js where we configure CORS, initialize & run Express REST APIs.
– Next, we add configuration for MySQL database in models/index.js, create Sequelize data model in models/tutorial.model.js.
– Tutorial controller in controllers.
– Routes for handling all CRUD operations (including custom finder) in tutorial.routes.js.

Implementation

You can find step by step to implement this Node.js Express App in the post:
Node.js Rest APIs example with Express, Sequelize & MySQL

React.js Front-end

Overview

react-node-express-mysql-crud-example-react-components-overview

– The App component is a container with React Router. It has navbar that links to routes paths.

TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial’s details based on :id.
AddTutorial component has form for submission new Tutorial.

– These Components call TutorialDataService methods which use axios to make HTTP requests and receive responses.

Technology

  • React 16
  • react-router-dom 5.1.2
  • axios 0.19.2
  • bootstrap 4.4.1

Project Structure

react-node-express-mysql-example-react-client-project-structure

package.json contains 4 main modules: react, react-router-dom, axios & bootstrap.
App is the container that has Router & navbar.
– There are 3 components: TutorialsList, Tutorial, AddTutorial.
http-common.js initializes axios with HTTP base Url and headers.
TutorialDataService has methods for sending HTTP requests to the Apis.
.env configures port for this React CRUD App.

Implementation

You can find step by step to implement this React App in the post:
React.js CRUD example to consume Web API
– or React Hooks CRUD example to consume Web API

Conclusion

Today we have an overview of React.js + Node.js Express + MySQL example when building a full-stack CRUD App.

We also take a look at client-server architecture for REST API using Express & Sequelize ORM, as well as React.js project structure for building a front-end app to make HTTP requests and consume responses.

Next tutorials show you more details about how to implement the system (including source code):
Back-end
– Front-end:

With Pagination:
React Pagination with API using Material-UI

react-pagination-with-api-material-ui-change-page

Or Serverless with Firebase:
React Firebase CRUD with Realtime Database
React Firestore CRUD App example | Firebase Cloud Firestore

Happy learning, see you again!

Further Reading

17 thoughts to “React + Node.js + Express + MySQL example: Build a CRUD App”

    1. Hi, we have CORS configuration for the front-end port 8080.
      Then you just run the React app and open browser with url: http://localhost:8080/.

    2. It is not possible to connect the front and the back directly for security reasons, you have to throw the data from the back in an api and then consume the api in the front.

  1. I follow the code in your site of https://bezkoder.com/react-node-express-mysql/

    i run the node server on port 3000. it run successful

    In your site you have example to connect react by using Sequelize but not without this. as in node you connect to MySQL directly without using the Sequelize .

    Please give the link which connect the front end to back-end without using Sequelize.

    Thanks

    Thanks

  2. Hi,
    Nice tutorial. Please provide a git url , etc. which I can download and start. I want something to start with for my project.

  3. I’m very new in node.js and your demo is very useful. I follow it step by step but I got an error as below.
    Please tell me wrong I did? It was occurred in model file while define data type.
    I got an error below
    type: Sequelize.INTEGER
    ^
    TypeError: Cannot read property ‘INTEGER’ of undefined

    1. Hi, you should initialize Sequelize first, please read this section. Once you have the Sequelize object, pass it to the function which define Sequelize model:
      db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);

    1. yes, you need to create a code in node js that queries your database and then throws that data in an api, then you access it in your application from a fetch if it is in react js

  4. This excellent website really has all the information and facts I needed concerning this subject and
    didn’t know who to ask.

    Many thanks for the tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *