Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 4)
Tags: javascript, react, express, node
Published: 2018-11-14 21:48:49

---
title: Step by step React, NodejS and MySQL Simple Full Stack Application 2018 (part: 4)
published: true
description: In this article I describe developing simple front end with use react library to show our back end data in browser 
tags: #javaScript #react #express #nodejs
---
<h4>In this article I describe developing simple front end with use react library to show our back end data in browser</h4>
<p>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: <a href="https://github.com/facebook/create-react-app">https://github.com/facebook/create-react-app</a></p>
1- Open GitBash and make a new folder and run this command: npm install -g express-generator on it:
<img src="https://thepracticaldev.s3.amazonaws.com/i/61nueh1uwtqnntu77396.png"/>
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:
<img src="https://thepracticaldev.s3.amazonaws.com/i/j3u52bxvtn80el2tilkx.png"/>
 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:
<img src="https://thepracticaldev.s3.amazonaws.com/i/3gs9ef98gkagr342zm5c.png"/>
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',
  user:'root',
  password:'myjs123',//password of your mysql db
  database:'simple-react-sql-db'
});

connection.connect(function(err){
  (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
<img src="https://thepracticaldev.s3.amazonaws.com/i/10zdu9dwc22yd09y62b3.png"/>
7- In client folder on app.js file remove <header> tag:
<img src="https://thepracticaldev.s3.amazonaws.com/i/fy4b3ou0rnc9qvc38brw.png"/>
8- Before render method write these codes:
  state = {
    users:[]
  }
  componentDidMount(){
    this.getUsers();

  }

  getUsers = _ => {
        fetch('http://localhost:3001')
    .then(response => console.log(response))//response.json())
    .then(({response}) => this.setState({users: 'response.users'}))
    .catch(error => console.log(error));
  }
  showUsers = user => <div key={user.id}>{user.username}</div>

* (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
      <div className="App">
        {users.map(this.showUsers)}
      </div>
    );
  }
 
<img src="https://thepracticaldev.s3.amazonaws.com/i/gzzfb97gs2rp3ddhm9zi.png"/>
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:

<img src="https://thepracticaldev.s3.amazonaws.com/i/lfk35i22lj9njn54hplv.png"/>
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:
<img src="https://thepracticaldev.s3.amazonaws.com/i/dm33tp58udxy3mrg5ab7.png"/>
13- Now open gitbash and go to client app.js route and then command: npm star to run react:
<img src="https://thepracticaldev.s3.amazonaws.com/i/nz77fnw5ofe40ooqqmzl.png"/>
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.
<img src="https://thepracticaldev.s3.amazonaws.com/i/r2if9y7zfu37n4uj431g.png"/>
<img src="https://thepracticaldev.s3.amazonaws.com/i/w9vp4qv75q3ueejr3igj.png"/>