React & Express

In the previous tutorial, i showed how to upload form data with file using Multer & MYSQL in Express . This tutorial teaches you how to do authentication in Express using JWT (JSON Web Token) and MYSQL database.  Why we need authentication? The requirement is to allow APIs access to only authorized users.  A visitor creates a user account using username, email, and password. We are going to use bcrypt package to create an encrypted version of the password and to verify the password againts MYSQL database. Execute the following command to install bcrypt. npm i bcrypt Once the account is created successfully, he/she can login to the system. The login information is verified on Express server. If the log in information is correct, valid token will be created and returned to a client app. The client app that received the token need to pass the token to the server to get permission to access the APIs. The token has to be verified before granting permissions. The information in ...

In the previous tutorial, you learn to create /products route with  get method of router in Express with Mysql to fetch and filter data using findAndCountAll method. Now we move on creating APIs to allow client apps to upload form data files using POST and PUT method, and delete rows from database using DELETE method. To upload form data with files, we use Multer library. By using Multer, you can easily upload files to local storage or cloud storage like amazon s3.  Execute the following command to install Multer in to ExpressJs app. npm install multer To use Multer, you have to import it into routes/product.routes.js file: ....... const { Op } = require ( "sequelize" ); const multer = require ( 'multer' ); Write the following code to configure Multer to use public folder of the local storage: var storage = multer . diskStorage ({   destination : function ( req , file , callback ) {     callback ( null , './public' );   },   filename : functi...

 In the previous tutorial , your learnt to create models and migrations to generate schemas in Mysql database and insert sample data using Sequelize. Now move on creating APIs in Express to access data from Mysql database. In the root folder of the Express project (prod_product), create routes folder and add  product.routes.js file.  const db = require( "../db/models" ); const router = require( "express" ).Router(); const {Op } = require( "sequelize" ); router.get( "/products" , function (req,res){ // get search query const q = req.query.search; // define matching conditions const condition1 = q ? { title : { [Op.like] : ` % ${q} % ` } } : null ; const condition2 = q ? { description : { [Op.like] : ` % ${q} % ` } } : null ; const condition = condition1 && condition2 ? {[Op.or] : [ condition1, condition2, ]} : null ; // offset and limit - paging const sta = parseInt (req.query.start...

Now, you have React project in my-app folder and Express project in prod_project folder. We are going to create back-end APIs that will be accessed by our React app. If you don't have React and Express apps set up, you go to the page Product CRUD Project In the prod_project folder, run the following command to install dependencies that are required to create the APIs on Express server. D:\prod_project> npm install sequelize sequelize-cli mysql2 jsonwebtoken cors body-parser bcrypt sequelize helps us synchronize the models (defined later in our project) with Mysql database. From the models, you can create tables in the database, query, add, update, delete data in the tables. sequelize-cli - Sequelize Command Line Interface helps us create models, migrations, and database. mysql2   is a fast mysql driver to work with mysql database from Express. jsonwebtoken works in user authentication by token for securely transmitting data between our back-end Express and front-end...

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 M...

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 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.