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