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

Discussion (4)

Collapse
ace404 profile image
Ace404

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

Collapse
jstewart8053 profile image
jstewart8053

I appreciate you taking the time to share, very helpful ❀

Collapse
banksdada profile image
banks

npm star should be npm start

Collapse
miodragt profile image
Miodragt

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