CRUD Operations in React.js and MySQL example
Tags: react, mysql, javascript, webdev
Published: 2021-01-04 14:27:37

In this tutorial, I will show you how to make CRUD Operation in React.js and MySQL example using Express & Sequelize. 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/](https://bezkoder.com/react-node-express-mysql/)

<h2>CRUD Operations with React.js and MySQL Overview</h2>
We will build a full-stack Tutorial Application in that:
<ul>
	<li>Tutorial has id, title, description, published status.</li>
	<li>User can create, retrieve, update, delete Tutorials.</li>
	<li>There is a search box for finding Tutorials by title.</li>
</ul>

Here are screenshots of the example.

– Add an item:

![crud-operations-react-js-mysql-example-create](https://dev-to-uploads.s3.amazonaws.com/i/zc6g3fitgkg6qh2gfaih.png)

– Show all items:

![crud-operations-react-js-mysql-example-retrieve-all](https://dev-to-uploads.s3.amazonaws.com/i/a4v3v130c5tem2sdqf39.png)

– Click on <strong>Edit</strong> button to view details of an item:

![crud-operations-react-js-mysql-example-retrieve](https://dev-to-uploads.s3.amazonaws.com/i/m4yhy557f6q2sxm996q8.png)

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong>/<strong>Pending</strong> using <strong>Publish</strong>/<strong>UnPublished</strong> button</li>
	<li>remove the object from MySQL Database using <strong>Delete</strong> button</li>
	<li>update this object's details on Database with <strong>Update</strong> button</li>
</ul>

![crud-operations-react-js-mysql-example-update](https://dev-to-uploads.s3.amazonaws.com/i/a9srx7h0heriphfsgd4y.png)

- Search objects by field 'title':

![crud-operations-react-js-mysql-example-search](https://dev-to-uploads.s3.amazonaws.com/i/f5k4qa9t7wersp6d6phc.png)

- Check MySQL database:

![crud-operations-react-js-mysql-example-database](https://dev-to-uploads.s3.amazonaws.com/i/dxrry3qxpzd0e0tue9iu.png)

<h2>React + Node.js + MySQL Architecture</h2>
We're gonna build the application with following architecture:

![crud-operations-react-js-mysql-example-architecture](https://dev-to-uploads.s3.amazonaws.com/i/4snwhhwxeaou0bmcv9zf.png)

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

<h2>Video</h2>
This is our React Node.js Express Sequelize application demo (with brief instruction) running with MySQL database.

{% youtube 7dZ0GN5FPA8 %}

<h2>Node.js Express Back-end</h2>
These are APIs that Node.js Express App will export:
<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>GET</td>
<td>api/tutorials</td>
<td>get all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>api/tutorials/:id</td>
<td>get Tutorial by <code>id</code></td>
</tr>
<tr>
<td>POST</td>
<td>api/tutorials</td>
<td>add new Tutorial</td>
</tr>
<tr>
<td>PUT</td>
<td>api/tutorials/:id</td>
<td>update Tutorial by <code>id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>api/tutorials/:id</td>
<td>remove Tutorial by <code>id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>api/tutorials</td>
<td>remove all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>api/tutorials?title=[kw]</td>
<td>find all Tutorials which title contains <code>'kw'</code></td>
</tr>
</tbody>
</table>
</div>

<h2>React.js Front-end</h2>
![crud-operations-react-js-mysql-example-client-components](https://dev-to-uploads.s3.amazonaws.com/i/p6uvdvnjf7zfhia9wrs2.png)

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

– <code>TutorialsList</code> component gets and displays Tutorials.
– <code>Tutorial</code> component has form for editing Tutorial's details based on <code>:id</code>.
– <code>AddTutorial</code> component has form for submission new Tutorial.

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

For more details, implementation and Github, please visit:
[https://bezkoder.com/react-node-express-mysql/](https://bezkoder.com/react-node-express-mysql/)

# Further Reading

Run both projects in one place:
<a href="https://bezkoder.com/integrate-react-express-same-server-port/">How to integrate React with Node.js Express on same Server/Port</a>

With Pagination:
<a href="https://bezkoder.com/react-pagination-material-ui/">React Pagination with API using Material-UI</a>

![crud-operations-react-js-mysql-example-pagination](https://dev-to-uploads.s3.amazonaws.com/i/jmxvrdurwu20bs443504.png)

Or Serverless with Firebase:
- <a href="https://bezkoder.com/react-firebase-crud/">React Firebase CRUD with Realtime Database</a>
- <a href="https://bezkoder.com/react-firestore-crud/">React Firestore CRUD App example | Firebase Cloud Firestore</a>