1. React와 Node(Express) 연동하기

1. create-react-app react-client(프로젝트이름)

2. express react-server(프로젝트이름)

2-1) es6문법 사용하기

- npm install --save-dev babel-cli babel-preset-es2015 설치

- .babelrc 파일 생성 후 아래와 같이 작성

{

"presets": ["es2015"]

}

- react-server/package.json 수정

"scripts": {

"start": "babel-node ./bin/www"

},

2-2) react-server/app.js 정적 파일을 react-client/build로 수정

app.set('views', path.join(__dirname, '../react-client/build'));

app.set('view engine', 'jade');

app.use(express.static(path.join(__dirname, '../react-client/build')));

2-3) react-server/bin/www port번호를 8080으로 수정

var port = normalizePort(process.env.PORT || '8080');

app.set('port', port);

3. react project에서 proxy 설정

- react-client/package.json 수정

"proxy": "http://localhost:8080",

4. 소스 파일 수정

4-1) react-client/src/App.js 수정

import React, { Component } from 'react';

import './App.css';

class App extends Component {

state = {users: []}

componentDidMount() {

fetch('/users')

.then(res => res.json())

.then(users => this.setState({ users }));

}

render() {

return (

<div className="App">

<h1>Users</h1>

{this.state.users.map(user =>

<div key={user.id}>{user.name}</div>

)}

</div>

);

}

}

export default App;

4-2) react-server/routes/users.js 수정

var express = require('express');

var router = express.Router();

/* GET users listing. */

router.get('/', function(req, res, next) {

res.json([{

  id: 1,

  name: "Kim"

}, {

  id: 2,

  name: "Park"

}]);

});

module.exports = router;

5. 연동 확인

- react project에서 npm run build 실행

- npm start

- http://localhost:3000/ 또는 http://localhost:8080/