Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 3)
Tags: javascript, mysql, database, node
Published: 2018-11-05 05:27:51

---
title: Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 3)
published: true
description: In this article I describe developing simple back end for access to database and show table's information with javaScript language
tags: #javaScript #MySQL #database #nodejs
---
<h4>In this article I describe developing simple back end for access to database and show table's information with javaScript language</h4>
<p>After installing nodeJs from: <a href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a> and visual studio code from: <a href="https://code.visualstudio.com/download">https://code.visualstudio.com/download</a> and GitBash from: <a href="https://git-scm.com/downloads">https://git-scm.com/downloads</a> we can start developing backend of project but before start we need a little knowledge about nodeJS.</p>
<h4>* What exactly is Node.js?</h4>
<p>Node.js is a JavaScript runtime environment. It  is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.</p>
<h4>* What is Git Bash?</h4>
<p> Git bash is a msys shell included in "Git for Windows", and is a slimmed-down version of Cygwin (an old version at that), whose only purpose is to provide enough of a POSIX layer to run a bash. Reminder: msysGit is the development environment to compile Git for Windows.</p>
<p>1- open git bash and make a folder in your selected address for back end example you can make a new folder in Git Bash with #mkdir command and open the folder in VScode environment with #code.. command</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/zkolycx57vforwc1h43p.png"/>
<p>2- Add a new .js file to the folder and name it server.js. This file is server of project add below codes to the server.js file:</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/d4v70nqzd4ftkvkh2wvg.png"/>
<p>I tried to explain very brief about per line of codes in server.js in the comment at the picture but for more information you can watch the video on this link: <a href="https://expressjs.com/">https://expressjs.com/</a></p>
<p>3- right click on server.js and select open in terminal option and at the terminal with npm init command and answer questions of new file (can answer just by enter) make a new file (package.json) </p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/jysinkq5mn5mybiyjb0k.png"/>
<p>4- Now with npm install express command install express module on your project to can run it. At the end with node server or node server.js command run your project</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/begmxr04czwydxshkg51.png"/>
<img src="https://thepracticaldev.s3.amazonaws.com/i/7y0rl2d1si2dqbac1j54.png"/>
<img src="https://thepracticaldev.s3.amazonaws.com/i/h6157julktbp9enpr6r0.png"/>
<p>5- In this step should make a route to solve Cannot Get / error on our project. So we should make a new folder (routes) and add a new .js file (html-routes.js) to it. After writing html-routes.js and running project you should see Hello from simple-react project on the browser on localhost:3000 address</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/c7y7m58pn4m7bl63zc9u.png"/>
<p>6- Now we have to connect to the MySQL database. SO we should add some more code for making a connection between database and server on server.js file:</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/8uzbn5j10jov2oye3d0h.png"/>
<p>7- Now with npm instal mysql command at the terminal we should add MySQL module to the project. After run we will see below error on the terminal and we have to do another step to fix it. This is an issue in MySQL version 8 </p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/019fajxykfx4dp613wgl.png"/>
<p>put username and password of your database</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/6z20gu2y3uw60tofsn9c.png"/>
<p>At the end:</p>
<img src="https://thepracticaldev.s3.amazonaws.com/i/34kjkdxqgujkyspwzazt.png"/>
<img src="https://thepracticaldev.s3.amazonaws.com/i/bi936iazo6drapn0c5g3.png"/>






<p>resources:</p>
https://medium.freecodecamp.org/what-exactly-is-node-js-ae36e97449f5
https://www.tutorialspoint.com/nodejs/nodejs_introduction.htm
https://stackoverflow.com/questions/17807485/what-is-the-exact-meaning-of-git-bash