ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • <REACT>[Hello React]
      Flower in my dev/React 2017. 12. 20. 10:58

      [Hello React]

       

      *velopert 님의 유투브 강의를 듣고 작성하였습니다.

       

      1. nodejs와 npm 버전확인

      node -v

      npm -v

       

      2. 프로젝트 디렉토리 생성

      mkdir hello_react

      cd hello_react

       

      3. 프로젝트 디렉토리를 초기화

      npm init

      (설정은 필요 없이 모두 Enter로 넘어간다.)

       

      4. 초기화 후 package.json 확인

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      {
        "name": "hello_react",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "dev-server": "webpack-dev-server"
        },
        "author": "",
        "license": "ISC"
        },
      }
      		 cs

       

      5. node_modules 설치

      npm install --save react react-dom

       

      npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

       

      npm install --save-dev react-hot-loader webpack webpack-dev-server

       

      6. node_modules 설치 후 package.json 확인

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      {
        "name": "hello_react",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {
          "react": "^16.2.0",
          "react-dom": "^16.2.0"
        },
        "devDependencies": {
          "babel-core": "^6.26.0",
          "babel-loader": "^7.1.2",
          "babel-preset-es2015": "^6.24.1",
          "babel-preset-react": "^6.24.1",
          "react-hot-loader": "^3.1.3",
          "webpack": "^3.10.0",
          "webpack-dev-server": "^2.9.7"
        }
      }
      		 cs

       

       

      8. 소스 디렉토리 생성

      mkdir public

      mkdir -p src/components

       

      9. 서버 설정파일 & 소스코드 작성

      vi webpack.config.js

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      var webpack = require('webpack');
       
      module.exports = {
          entry: './src/index.js',
       
          output: {
              path: __dirname + '/public/',
              filename: 'bundle.js'
          },
       
          devServer: {
              hot: true,
              inline: true,
              host:'0.0.0.0',
              port: 9090,
              contentBase: __dirname + '/public/',
          },
       
          module: {
              loaders: [
                  {
                      test:/\.js$/,
                      loader: 'babel-loader',
                      exclude: /node_modules/,
                      query: {
                          cacheDirectory: true,
                          presets: ['es2015', 'react']
                      }
                  }
              ]
          },
       
          plugins: [
              new webpack.HotModuleReplacementPlugin()
          ]
      }
      		 cs

       

      vi public/index.html

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="UTF-8">
              <title>React App</title>
          </head>
       
          <body>
              <div id="root"></div>
              <script type="text/javascript" src="bundle.js"></script>
          </body>
      </html>
      		 cs

       

      vi src/components/App.js

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      import React from 'react';
       
      class App extends React.Component {
          render() {
              return (
                  <h1>Hello React</h1>
             );
          }
      }
       
      export default App;
      		 cs

       

      vi src.index.js

      1
      2
      3
      4
      5
      6
      import React from 'react';
      import ReactDOM from 'react-dom';
      import App from './components/App';
       
      const rootElement = document.getElementById('root');
      ReactDOM.render(<App/>, rootElement);
      		 cs

       

      vi .jshintrc

      1
      2
      3
      {
          "esversion": 6
      }
      		 cs

       

       

      10. 디렉토리 구조 by Pycharm

       

      11. package.json에 서버 설정&서버 실행

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      {
        "name": "hello_react",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "dev-server": "webpack-dev-server"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {
          "react": "^16.2.0",
          "react-dom": "^16.2.0"
        },
        "devDependencies": {
          "babel-core": "^6.26.0",
          "babel-loader": "^7.1.2",
          "babel-preset-es2015": "^6.24.1",
          "babel-preset-react": "^6.24.1",
          "react-hot-loader": "^3.1.3",
          "webpack": "^3.10.0",
          "webpack-dev-server": "^2.9.7"
        }
      }
      		 cs

       

      npm run dev-server

       

      12. 결과 확인

       

      저작자표시

      'Flower in my dev > React' 카테고리의 다른 글

      <NODE>[라즈베리파이 node&npm 업그레이드]  (0) 2017.12.17

      댓글

    Designed by Tistory.

    티스토리툴바