React => 반응 환경 설정

단순 반응 성분

우리는 아래 컴포넌트를 컴파일하고 웹 페이지에서 렌더링 할 수 있기를 원합니다.

파일 이름 : src / index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class ToDo extends React.Component {
    render() {
        return (<div>I am working</div>);
    }
}

ReactDOM.render(<ToDo />, document.getElementById('App'));

모든 의존성 설치

# install react and react-dom
$ npm i react react-dom --save

# install webpack for bundling
$ npm i webpack -g

# install babel for module loading, bundling and transpiling
$ npm i babel-core babel-loader --save

# install babel presets for react and es6
$ npm i babel-preset-react babel-preset-es2015 --save

웹팩 구성

작업 디렉토리의 루트에 webpack.config.js 파일을 만듭니다.

파일 이름 : webpack.config.js

module.exports = {
    entry: __dirname + "/src/index.jsx",
    devtool: "source-map",
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    }
}

바벨 구성

작업 디렉토리의 루트에 .babelrc 파일을 만듭니다.

파일 이름 : .babelrc

{
    "presets": ["es2015","react"]
}

반응 구성 요소를 사용하는 HTML 파일

프로젝트 디렉터리의 루트에 간단한 html 파일 설치

파일 이름 : index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="App"></div>
    <script src="build/bundle.js" charset="utf-8"></script>
  </body>
</html>

구성 요소를 Transpile 및 번들링

webpack을 사용하면 구성 요소를 번들로 묶을 수 있습니다.

$ webpack

그러면 build 디렉토리에 출력 파일이 생성됩니다.

실행중인 구성 요소를 보려면 브라우저에서 HTML 페이지 열기

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

React
반응 환경 설정

수색…