Product CRUD project: React Express & Mysql

From this article, you learn React by an example project. We are going to create a simple product page that allow loggined user to manage add, list, update, delete, and search products. React is used for front-end and Express will be our backend. We create APIs to work with Mysql database using Express. Express is a minimal and fast Node.js web application framework that provides a robust set of features for web and mobile applications.

You have to create a folder called prod_project in drive D or in another drive of your choice.
From VSC editor, open the prod_project folder and on terminal change to the folder and issue the following command to create package.json file for the Express project.

D:\prod_project>npm init

Then, you go further to install Express framework by the command as below:

D:\prod_project>npm install express

To work with Mysql database on your Windows machine, you install Mysql database server. On my machine, i have xampp package that comes with Mysql database, Apache, and PHPMyAdmin to manage Mysql databases.

Comments

Get start with React

To start web development with React, i recommend you install Node. Node comes with NPM (package manager) helps you easy to add dependencies, create, start, and build your React apps. You can download and install NPM from its official web site: Download NPM . Another useful tool for coder is Visual Studio Code . On my Windows machine, i have installed Node version 16.10.0 with NPM 7.14.0. Now create a project folder and name it react_tutorials in Drive D: or other drive of your choice. Then open the folder in Visual Studio COde (VSC). From the VSC editor, select Terminal. In the terminal, enter the following command to create my-app app in the project folder created above. D:\react_tutorials>npm init react-app my-app After the my-app app is created successfully. You change to my-app folder (cd my-app) . Then You run " npm start " command to start your first react app on browser. React automatically starts on port 3000.

React Express & MYSQL - Full Stack Product Admin Panel

In the earlier tutorials, you learnt to create React app , and API endpoints to do authentication with JWT, protect APIs, get and count rows of MYSQL database, and upload form data with files to the database in ExpressJs. In this tutorial, we continue to develop the React app to build a full stack product admin panel website that accesses ExpressJs API endpoints . The product admin panel app will have a left sidebar that allows a visitor easily to navigate different parts of the app. We use bootstrap to style the app. So run the following command to add bootstrap into the React app. my-app>npm install bootstrap Our form components are from reactstrap and icons from react-icons packages. Let execute the commands below to install reactstrap and react-icons. my-app>npm install reacstrap react-icons To setup the left sidebar in the app, we start by creating the components folder in src folder. To group sidebar files, add sidebar folder to the components folder. We have three sidebar...

Why React?

React is one of the top UI development frameworks. It is very popular today among web developers around the globe. I love React because of the following things: - It is simple to learn and use. - It is JavaScript library. - It effectively applies changes to a web page without reloading the page while data changed. - It is easy to find problems or errors while you are coding.

React & Express

Search This Blog