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: //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 id
POSTapi/tutorialsadd new TutorialPUTapi/tutorials/:idupdate Tutorial by id
DELETEapi/tutorials/:idremove Tutorial by id
DELETEapi/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
.
– id
0 component has form for submission new Tutorial.
– These Components call id
1 methods which use id
2 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:
//localhost:8080/
- React Client runs at url:
//localhost:8081/
Otherwise, when deploying React production-build with Node project, we only need to run Node Project for the fullstack [React + Node] system.