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

#javascript #react #express #node

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: https://github.com/facebook/create-react-app

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',
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

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

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

{user.username}

(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 {users.map(this.showUsers)} ); }

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.