DEV Community 👩‍💻👨‍💻

Maryam Keshavarz
Maryam Keshavarz

Posted on

Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 4)

In this article I describe developing simple front end with use react library to show our back end data in browser

For start work with react library can use create-react-app tool that built by developers at Facebook to help you build React applications. For more information visit:

1- Open GitBash and make a new folder and run this command: npm install -g express-generator on it:

with command: express nameOfBackEndFolder make a back end folder by default for the project and with npm install command, install all modules that you need:

2- For create react for fron end go to backend folder and run npm install -g create-react-app and after installation run: create-react-app client
3- Open project ot VSCode then open package.json file of client folder and add proxy key to it:

4- In app.js at the backend folder that is like server.js in the backend that you made add these code :
const mysql = require('mysql');
const connection = mysql.createConnection({
host: 'localhost',
password:'myjs123',//password of your mysql db

(err)? console.log(err+'+++++++++++++++//////////'): console.log('connection********');

require('./routes/html-routes')(app, connection);

5- Open app.js in terminal and run npm install mysql to add MySQL data base to the new project
6- change html-routes.js file to your html-route.js that wrote on your backend

7- In client folder on app.js file remove tag:

8- Before render method write these codes:
state = {


getUsers = _ => {
.then(response => console.log(response))//response.json())
.then(({response}) => this.setState({users: 'response.users'}))
.catch(error => console.log(error));
showUsers = user =>

  • (In next article will explain about these codes conception) 9- Then change render function to: render() {//building react method that comes inse od react component const { users } = this.state; return (//jsx code and can return only a single parent tag {} ); }

10- run MySQL command line client add your password and enter to start Mysql
11- In bin folder open www file and change port 3000 to 3001:

12- At the end of this step you have to open app.js of backend folder into the terminal of VSCode and run npm start command to run server on port: 3001:

13- Now open gitbash and go to client app.js route and then command: npm star to run react:

now you have to see your backend in port 3001 and fronend in port 3000 but probably you won't see any thing in front end page because of 'Cors' exception I will continue to solve it at the next article.

Top comments (4)

ace404 profile image

Hi Maryam,

Well.. i've lost you in this 4th article...
to many folders...
can you send a git reposetory for seeing the actual code?

Thanks, Yariv

jstewart8053 profile image

I appreciate you taking the time to share, very helpful ❤️

banksdada profile image

npm star should be npm start

miodragt profile image

do you have some links for this theme with code?
Miodrag Trajanovic

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.