React Node js Express + MySQL example: build a CRUD App GitHub

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

Full Article: https://bezkoder.com/react-node-express-mysql/

React + Node.js + MySQL CRUD 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:

– Show all items:

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

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

• Search objects by field 'title':

• Check MySQL database:

React + Node.js + MySQL Architecture

We're gonna build the application with following 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

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

MethodsUrlsActionsGETapi/tutorialsget all TutorialsGETapi/tutorials/:idget Tutorial by idPOSTapi/tutorialsadd new TutorialPUTapi/tutorials/:idupdate Tutorial by idDELETEapi/tutorials/:idremove Tutorial by idDELETEapi/tutorialsremove all TutorialsGETapi/tutorials?title=[kw]find all Tutorials which title contains 'kw'

React.js Front-end

– 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.
– id0 component has form for submission new Tutorial.

– These Components call id1 methods which use id2 to make HTTP requests and receive responses.

In this post, I will show you some examples that use React App with Node backend. You will see Github links for making following projects:

• React + Node App with MySQL
• React + Node App with PostgreSQL
• React + Node App with MongoDB
• React + Node App with SQL Server (MSSQL)
• React + Node: JWT Authentication and Authorization

Contents

Overview

The Github source code shows many full stack React and Node sample Projects with CRUD Operations. The back-end server uses Node.js with Express for REST API and specific library for interacting with database. Front-end side is made with React/React Hooks/React Redux, React Router and Bootstrap.

Each of them is the Tutorial CRUD Application in that:

• Each Tutorial has id, title, description, published status.
• We can create, retrieve, update, delete Tutorials.
• We can also find Tutorials by title.

The images below shows screenshots of our System.

– Add Tutorial:

– Retrieve Tutorials:

– Click on Edit button to go to a Tutorial page:

On this Page, you can:

• change status to Published using Publish button
• delete the Tutorial using Delete button
• update the Tutorial details with Update button

– Search Tutorials by title:

How to Run

Node Express server:
Open command line at the project root folder, run:

npm install
node .

The Node App will export Rest APIs at port 8080, CORS configuration for working with port 8081.

React Client:
Create .env file with content:

PORT=8081

Choose React Github source code as you need.
Open command line at the project root folder, run:

npm install
npm start

Or:

yarn install
yarn start

React + Node App Github with MySQL

Tutorial:
– React + Node Express + MySQL
– React Redux + Node Express + MySQL

Github Source code:
– Frontend:

• React Components
• React Hooks
• React Typescript Components
• React Typescript + Hooks
• React + Redux
• React + Redux + Hooks

– Backend:

• Node Express + MySQL (raw SQL): Rest API
• Node Express + Sequelize + MySQL: Rest API

– Video:

React + Node App Github with PostgreSQL

Tutorial: React + Node Express + PostgreSQL

Github Source code:
– Frontend:

• React Components
• React Hooks
• React Typescript Components
• React Typescript + Hooks
• React + Redux
• React + Redux + Hooks

– Backend: Node Express + Sequelize + PostgreSQL: Rest API

– Video:

React + Node App Github with MongoDB

Tutorial: React + Node Express + MongoDB

Github Source code:
– Frontend:

• React Components
• React Hooks
• React Typescript Components
• React Typescript + Hooks
• React + Redux
• React + Redux + Hooks

– Backend: Node Express + MongoDB: Rest API

– Video:

React + Node App Github with SQL Server (MSSQL)

Github Source code:
– Frontend:

• React Components
• React Hooks
• React Typescript Components
• React Typescript + Hooks
• React + Redux
• React + Redux + Hooks

– Backend: Node Express + MSSQL: Rest API

React Express Login Github

– Tutorial:

• React + Node.js Express: Authentication and Authorization with JWT example
• React + Node.js Express + MongoDB: Authentication and Authorization with JWT example

Github Source code:
– Frontend:

• React Components
• React Hooks
• React Typescript Components
• React Typescript + Hooks
• React + Redux
• React + Redux + Hooks

– Backend:

• Node Express + MySQL
• Node Express + PostgreSQL
• Node Express + MongoDB

– Video:

Using HttpOnly Cookies instead:
– Frontend:

• React JWT Auth with HttpOnly Cookies
• React + Redux JWT Auth with HttpOnly Cookies

– Backend:

• Node Express + MySQL/PostgreSQL
• Node Express + MongoDB

How to Run React and Node App on same Port

Assume that we have 2 projects: React & Node.

If we run them separately:

• Node Express Server exports Rest Apis at Url: http://localhost:8080/
• React Client runs at url: http://localhost:8081/

Otherwise, when deploying React production-build with Node project, we only need to run Node Project for the fullstack (React + Node) system.