React 튜토리얼

개발 2018. 4. 15. 14:40

React 튜토리얼

  1. 개발 환경

    • centos 7.0 (CentOS Linux release 7.4.1708 (Core))
  2. React 설치하기

    • npm 설치:
      [centos@centos ~]$ sudo yum install npm
      ...
      [centos@centos ~]$ npm -v
      3.10.10
      
    • create-react-app 설치
      [centos@centos ~]$ sudo npm install -g create-react-app
      ...
      [centos@centos ~]$ create-react-app --version
      1.5.2
      
      • facebook 공식 그룹 밑에 있으며 react 를 쉽게 사용할 수 있도록 지원해주는 툴 이다
  3. React App 만들기

    • 명령어: create-react-app {{ WEB_APPLICATION_NAME }}
    • 명령어 한줄로 web application 생성이 가능하다

      [centos@centos node]$ create-react-app webapp
      
      Creating a new React app in /home/centos/node/webapp.
      
      Installing packages. This might take a couple of minutes.
      Installing react, react-dom, and react-scripts...
      
      [..................] | normalizeTree: sill install loadCurrentTree
      ...
      
  4. React App 의 패키지 설명

     {{ WEB_APPLICATION_NAME }}
      ㄴ README.md
      ㄴ package.json
      ㄴ node_modules   # react 관련 모듈을 설치하면 이곳에 추가가 된다
      ㄴ public                    # index.html 이 있으며 JS, css 를 추가할때 index.html 에 선언해도 된다
      ㄴ src                          # App.js , App.css 등 react 모듈들을 정의하고 호출하는데 사용
    
    • web application 을 만들고 필요한 추가 패키기를 설치할 때에는 {{ WEB_APPLICATION_NAME 설치 경로}} 에서 npm install 을 한다
      • example:
        [centos@centos webapp]$ pwd
        /home/centos/node/webapp
        [centos@centos webapp]$ npm i react-axios
        [centos@centos webapp]$ npm install react-bootstrap-table --save
        
  5. React App 실행하기

    • node.js 를 통해 간단하게 web server 를 띄울 수 있다
    • 기본적으로 localost:3000 으로 뜨게 되며 외부에서는 접근할 수 없다

      [centos@centos webapp]$ pwd
      /home/centos/node/webapp
      [centos@centos webapp]$ npm start
      ...
      
      Compiled successfully!
      
      You can now view webapp in the browser.
      
      Local:            http://localhost:3000/
      On Your Network:  http://10.0.2.15:3000/
      
      Note that the development build is not optimized.
      To create a production build, use npm run build.
      
  6. 추가 설정사항

    • 외부 IP 를 통해 접근하도록 수정 (listen 0.0.0.0 )
      • {{ WEB_APPLICATION_PATH }}/config/webpack.config.dev.js 수정하기
        module.exports = {
        devtool: 'eval',
        entry: [
          require.resolve('webpack-dev-server/client') + '?http://0.0.0.0:8081',
          require.resolve('webpack/hot/dev-server'),
          path.join(srcPath, 'index')
        ],
        
      • {{ WEB_APPLICATION_PATH }}/scripts/start.js 수정하기
        new WebpackDevServer(compiler, {
        historyApiFallback: true,
        hot: true, // Note: only CSS is currently hot reloaded
        publicPath: config.output.publicPath,
        quiet: true,
        }).listen(3000, '0.0.0.0', function (err, result) {
        
    • 외부 통신을 위한 패키지 설치
    • table 을 만들기 위한 패키지 설치
    • chart 를 그리기 위한 패키지 설치


'개발' 카테고리의 다른 글

ELK + grafana 구축  (0) 2019.01.08
성공적인 Git 브랜치 모델  (0) 2018.10.18
vi 사용하기  (0) 2018.02.08
React 의 특징  (0) 2017.12.20
Git 입문  (0) 2017.12.17
Posted by 감각적신사
,