2. React Module 설치하기

$ npm install --save axios react-addons-update react-router react-timeago redux react-redux redux-thunk

• axios: api 서버와 통신하기 위한 HTTP 클라이언트 모듈

• react-addons-update: Immutability Helper, react componet state 값을 변경 / redux 의 스토어 값을 변경할 때 사용

• react-router: SPA 를 쓸 경우 routing 이 서버가 아닌 클라이언트에서 컨트롤 되어야 하는데 그때 사용하게 되는 모듈

• react-timeago: react 용 Time Library

• redux, react-redux; Redux 를 사용하기 위한 모듈들

• redux-thunk: redux의 action creator에서 함수를 반환 할 수 있게 해주는 redux 미들웨어, 비동기작업을 처리 할 때 사용됩니다

그리고 폴더 구조를 아래와 같이 잡습니다.

파일들을 몇개 만들어 보겠습니다.

컨테이너의 index.js 는 말 그대로 container 에 있는 화면단위의 컴포넌트들을 route 페이지해주는 최 상단의 index.js 페이지로 전달해 주는 역할을 하게 됩니다.

/container/index.js

import App from './App';
import ContentList from './Contents/List'
import ContentDetail from './Contents/Detail'

export { App, ContentList, ContentDetail };

container/App.js

import React, { Component } from 'react';
import { Header } from '../components'

class App extends Component {
  render() {
    return (
      

        

        { this.props.children }
      
    );
  }
}

export default App;

/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Router, Route, browserHistory, IndexRoute} from 'react-router';
import { App } from './containers';

ReactDOM.render(
  
    
        
        
    
  ,
  document.getElementById('root')
);