React
反応環境の設定
サーチ…
単純反応成分
下のコンポーネントをコンパイルし、私たちのWebページにレンダリングできるようにしたい
ファイル名 :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を設定する
作業ディレクトリのルートに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>
コンポーネントをトランスパイルしてバンドルする
webpackを使用すると、コンポーネントをバンドルできます。
$ webpack
これにより、 build
ディレクトリに出力ファイルが作成されます。
ブラウザでHTMLページを開き、実際のコンポーネントを表示する
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow