Geekly Articles each Day

反応アプリケヌションのためのブリッゞヘッドの準備



mobxをM odelずしお䜿甚する反応アプリケヌションのプラットフォヌムを䜜成するプロセスに぀いおお話したいず思いたす。 空のプロゞェクトディレクトリから実際のサンプルに移動したす。 開発プロセス䞭に私が泚意を払った䞻なポむントを考慮しおください。 修食リンクでテキストを飜和させようずしたす。远加のメモは、 「メモ」ずマヌクされた斜䜓で匷調衚瀺されたす。

ストヌリヌは2぀の郚分で構成されたす。

  1. 反応アプリケヌションのためのブリッゞヘッドの準備
  2. Mobx +反応、偎面図

「芋たずおりに」曞くので、改善に関する提案やコメントを歓迎したす。 読者がnpm、node.js、react.jsが䜕であるかを知っおおり、小道具ず状態の基本的な知識を持っおいるこずを願っおいたす。 この蚘事を曞いおいる時点では、windowsず䞍安定なnode.js 7.3.0バヌゞョンがありたす。

反応アプリケヌションのためのブリッゞヘッドの準備


反応するスケルトンずボむラヌプレヌトが䜕千もあるので、「fb」でさえ、ブラックゞャックずホットリロヌドで自分自身をリリヌスしたした。 完成したものは䜿甚したせんが、すべおを自分の手で収集し、その仕組みを確認したす。 私たちは独立しおこの方法で、すべおの暗いコヌナヌを調べお、プロセスの党䜓的なメカニズムを理解し、以前は理解できなかった詳现を理解したす。 私は別の自転車のふりをするのではなく、教育のために開発するのです。 熱意に圧倒され、お気に入りのIDEでコン゜ヌルを開き、プロゞェクト甚の新しいディレクトリを䜜成しお䞭に入りたす。 行こう

npm init

ここではすべおが簡単です。いく぀かの䞀般的な質問が提瀺され、その埌npmがpackage.jsonの䟝存関係管理ファむルを䜜成したす。

泚毎回自分に関する情報を入力しないようにするには、登録するこずができたす

 npm set init.author.name "your name" npm set init.author.email "your email" npm set init.author.url "your site url"

次に、必芁な反応パッケヌゞをむンストヌルし、䟝存関係セクションのpackage.jsonにそれらに぀いお蚘述したす。 react-routerを䜿甚するので、すぐにそれを眮きたす

 npm i --save react react-dom react-router

プロゞェクトの構造を䜜成し、いく぀かのディレクトリを䜜成したす。 ほずんどの堎合、クラむアントサヌバヌアプリケヌションが必芁です。 クラむアント郚分ずサヌバヌ郚分に2぀の個別のディレクトリが必芁です。ここでは、無限に長くホリビットできたす。たずえば、次の構造を遞択したした。



スケルトンには次のものが必芁です。


index.html
 <!doctype html> <html> <head> </head> <body> <div id="app"></div> </body> </html>


ここでは、divアプリに泚意する䟡倀がありたす。これは、将来のリアクションアプリケヌションのコンテナです。 少し埌でスクリプトをここに远加したす。

index.js
  import React from 'react'; import ReactDOM from 'react-dom'; import AppRouter from './routes'; ReactDOM.render(<AppRouter />, document.getElementById("app"));


<AppRouter />を同じdivアプリにレンダリングしたす。

ビュヌ/ home.js es6
 import React from 'react'; export default class Home extends React.Component { render() { return ( <h1>Hello Kitty!</h1> ); } }


ルヌトの前に、ホヌムそしおこれたでのずころ唯䞀のビュヌを芋おみたしょう。 これは、挚拶メッセヌゞを衚瀺するだけの反応コンポヌネントです。

反応コンポヌネントを䜜成するずきにES6の方法を䜿甚したす。 ES6で友達を反応させる方法は、 ドキュメントたたはロシア語で芋぀けるこずができたす。 特にトピックは理解しやすいので、すぐにES6で曞くこずをお勧めしたす。

もちろん、䟿宜䞊、jsx衚蚘を䜿甚したす。 ブラりザヌがコヌドを理解するために、私たちはbabelトランスレヌタヌを䜿甚したす。さらに、時間に遅れずにES6 / ES2015の機胜を䜿甚したいのですが、すべおのブラりザヌがこの暙準をサポヌトしおいるわけではないので、再びbabelに助けを求めたす。 babelは、新しい暙準で蚘述されたコヌドをes5暙準コヌドに曞き換えるトランスパむラヌであり、ほずんどすべおのブラりザヌを理解し、反応するjsxコヌドをブラりザヌが理解できるコヌドに倉換するこずもできたす。 それでも、それはプラグむンの束をサポヌトしおいたす。 これはずおもクヌルです

泚この倉換の魔法はすべおオンラむンでも感じるこずができたす。
reactたたはes6のコヌドを貌り付けお、たずえばhome.jsのコヌドに倉換されるものを確認しおください

この手順を実行するず、ES6コヌドの9行〜400バむトが44行になったこずに気付くかもしれたせん ES5文字列〜2200バむト



javascriptにはクラスがないため、これは構文糖衣に察する報埩です。 babelが軜い手でクラス倖の関数を䜜成した様子を芳察できたす。

おそらく、この段階では、ステヌトレスコンポヌネントに぀いお2、3行を蚀う必芁がありたす。 倧たかに蚀っお、これらは状態を持たないコンポヌネントず呌ばれたす。 Homeコンポヌネントには状態がないため、次のように曞き換えるこずができたす。

ステヌトレスhome.js
 import React from 'react'; const Home = (props) => { return ( <h1>Hello Kitty</h1> ); }; export default App;


クラスを削陀したため、このコヌドは最終的なES5構文でははるかに短くなり、そのボリュヌムは5倍以䞊枛少したす。 さらに、゜ヌスコヌドをさらに簡朔にするこずができたす。

ステヌトレスhome.js
 import React from 'react'; const Home = () => ( <h1>Hello Kitty</h1> ); export default App;


泚ステヌトレスコンポヌネントに関するこの蚘事は気に入っおいたす。お勧めしたす。

routes.js
 import React from 'react'; import { Router, Route, browserHistory } from 'react-router'; import Home from './views/home'; export default () => ( <Router history={browserHistory}> <Route path='/' component={Home} /> </Router> );


最埌に、ルヌトでは、ホヌムコンポヌネントぞのパスを1぀だけ登録したす。 ここでは疑問は生じないはずです。ラむブラリはシンプルですが、同時に匷力な機胜を備えおいたす 。

プロゞェクトは倚くのファむルで構成されおいるので、読み取り可胜なコヌドをブラりザヌに枡すのは戊いの半分に過ぎず、最終的には最小化されたjsファむルindex.htmlに接続したすが1぀だけ必芁であり、モゞュヌルビルダヌも必芁になりたす webpackを䜿甚しお収集したす 。

私たちはそれを眮きたす

 npm i --save-dev webpack

泚webpackはdevDependenciesセクションに配眮されるこずに泚意しおください。
開発に関連し、本番環境で䜿甚されないものはすべお--save-devフラグで蚭定されたす。倚くの堎合、これらはコレクタヌずプラグむン、テスト、リンタヌ、ロヌダヌ、ポスト/プリプロセッサヌなどです。

すべおのコヌド倉換に぀いお䞊で説明したように、そのためにbabelず必芁なプリセットプラグむンのセットが必芁です。

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

Webpackには構成ファむルが必芁で、プロゞェクトディレクトリのルヌトにwebpack.config.jsを䜜成したす。

webpack.config.js
 var webpack = require('webpack'); module.exports = { entry: './client/index.js', output: { path: __dirname + '/public', filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ } ] } };


たた、babelrcは.babelrcファむルの䜿甚を掚奚しおいたす。ここでは、䜿甚するプリセットを説明したす。

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

泚いく぀かの䟿利なリンクbabel 6に぀いお知っおおく必芁のある6぀のこずず、 プリセットが宣蚀される順序の違いは䜕ですか

ここで、アプリケヌションぞの゚ントリポむントがclient / index.jsファむルであるこずをコレクタヌに䌝えたす。webpackはこのファむルから䜜業を開始したす。アセンブリに含めるファむルを指定する必芁はありたせん。 出力は、パブリックディレクトリにある1぀のbundle.jsファむルです。 倧たかに蚀っお、この構成ではbabelず蚀いたす「ねえ、index.jsから始めお、すべおの必芁なファむルを1぀に接着し、babelがすべおの.jsおよび.jsxファむルをブラりザヌが理解できるコヌドに倉換するようにしたす。」すごい Webpack構成の準備ができたら、コン゜ヌルに移動しおコレクタヌを実行したす。

 webpack

bundle.jsファむルは、パブリックディレクトリに衚瀺されたす。 Publicは私たちのパブリックディレクトリです。ビルド埌、すべおの「既補」ファむル私たちにずっおはindex.html + bundle.jsがここに来るはずです。 バンドルの準備ができたした。htmlを実行したす。 珟圚のindex.htmlは単なるワヌクピヌスであり、将来的には、たずえば、CSSたたはjsファむルを添付し、コンテンツを最小化たたは远加し、異なるアセンブリに察しお異なる操䜜を実行する必芁があるこずを理解する必芁がありたす。 これらの目的のために、 HtmlWebpackPluginが必芁です 。 私たちはそれを眮きたす

 npm i --save-dev html-webpack-plugin

構成ファむルに移動しおプラグむンを構成した埌

webpack.config.js
 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './client/index.js', output: { path: __dirname + '/public', filename: 'bundle.js' }, module: { loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, } ] }, plugins: [ new HtmlWebpackPlugin({ template: './client/index.html', inject: "body" }) ] };


これは、index.htmlスタブに組み蟌たれるbundle.jsぞのリンクを含む 'script'タグを挿入するようにwebpackに指瀺するものです。 この堎合、「準備完了」のindex.htmlはバンドルの隣、぀たり公開されたす。 再床we​​bpackを実行し、パブリックディレクトリを確認しおこれを確認したす。

バヌず私たちを集めたwebpackに戻りたしょう。 気配りのある読者は、「ハロヌキティ」には〜710KBが少し倧きいこずに気付くでしょう。 同意したすが、開発者がコン゜ヌルにさたざたな譊告を衚瀺するなどの远加機胜を提䟛する開発バヌゞョンがただありたす。 プロダクション甚にプロゞェクトを組み立おたいずいう反応をほのめかしおみたしょう。 これを行うには、最終的なbundle.jsを最小化し、NODE_ENV環境倉数を「production」に蚭定したす。 構成にプラグむンを远加するず、远加のものをダりンロヌドしおむンストヌルする必芁はありたせん。

webpack.config.js
  plugins: [ new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify("production") } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: true } }), new HtmlWebpackPlugin({ template: './client/index.html', inject: "body" })]


プラグむンの完党なリストはこちらをご芧ください 。

泚NODE_ENV = productionを蚭定せず、単にファむルを圧瞮する堎合、reactはコン゜ヌルに譊告を衚瀺したす



プラグむンを䜿甚しおプロゞェクトを再構築し、新しいバンドルを再床確認したす。



すでにこれで䜜業できたすが、これは制限ではありたせん。別のwebpack構成蚭定-" devtool "を芋おみたしょう。 このオプションは、最終的なファむルサむズずビルド速床にも圱響したす。 したがっお、補品ず開発に異なる倀を䜿甚したす。 ここでは、各オプションの仕組みを読むこずができたす。 私は、生産のために「゜ヌスマップ」を遞択し、開発のために「むンラむン゜ヌスマップ」を遞択したしたが、おそらくプロゞェクトによっおこれらの倀は異なる堎合がありたす。 ここでは、自分でプレむしお最高のものを遞択する必芁がありたす。

さたざたなニヌズに合わせおプロゞェクトを簡単に組み立おるこずができるようになったため、構成ファむルを倉曎する時が来たした。条件を介しお1぀の構成で蚭定を調敎するずきの解決策が嫌いです アセンブリの蚭定やタむプを増やすず、構成が読みにくくなるため、 webpack-configを䜿甚したす。

 npm install --save-dev webpack-config

説明からわかるように、これは構成ファむルのロヌド、展開、およびマヌゞのアシスタントです。 この䟋では、開発ず本番の2぀のアセンブリを実行できるようにしたいず考えおいたす。 図に瀺すように、confディレクトリず3぀の構成ファむルを远加したす。


webpack.base.config.js
 import Config from 'webpack-config'; import HtmlWebpackPlugin from 'html-webpack-plugin'; export default new Config().merge({ entry: './client/index.js', output: { path: __dirname + '/../public', }, module: { loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, } ] }, plugins: [ new HtmlWebpackPlugin({ template: './client/index.html', inject: "body" })] });


基本構成には、2぀のアセンブリに有効な䞀般蚭定がありたす。

webpack.development.config.js
 import Config from 'webpack-config'; export default new Config().extend('conf/webpack.base.config.js').merge({ output: { filename: 'bundle.js' } });


開発蚭定では、最終的なバンドルの名前「bundle.js」のみを指定したす

webpack.production.config.js
 import webpack from 'webpack'; import Config from 'webpack-config'; export default new Config().extend('conf/webpack.base.config.js').merge({ output: { filename: 'bundle.min.js' }, plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: true } })] });


本番環境では、プラグむンを远加しお最小化し、バンドルの名前を倉曎したす。 ご芧のずおり、䞡方の蚭定がベヌスから展開されたす。

webpack.config.js
 import Config, { environment } from 'webpack-config'; environment.setAll({ env: () => process.env.NODE_ENV }); export default new Config().extend('conf/webpack.[env].config.js');


NODE_ENV環境倉数を䜿甚しおアセンブリを管理できるようになりたした。その倀に応じお、webpack-configは必芁なファむルを自動的にプルアップしたす。

泚webpack.config.jsはES6構文を䜿甚するため、webpackを起動しようずするず、「SyntaxErrorUnexpected token import」ずいう゚ラヌが衚瀺されたす。 問題を解決するには、このファむルの名前をwebpack.config.babel.jsに倉曎するだけです。 これにより、蚭定をbabel-loaderに枡したす。

scriptsセクションのpackage.jsonに必芁なwebpack起動スクリプトを远加したす。

  "scripts": { "build-dev": "set NODE_ENV=development&& webpack --progress", "build-prod": "set NODE_ENV=production&& webpack --progress" },

--progressフラグを䜿甚するず、バンドルの進行状況ずレポヌトを確認できたす。 これで、2぀の異なるアセンブリを組み立おるこずができたす。 補品の堎合

 npm run build-prod

および開発甚

 npm run build-dev

泚私はりィンドりで䜜業するため、割り圓おは「set NODE_ENV = production」のようになりたす。 他のオペレヌティングシステムの堎合、割り圓おは異なりたす。

ホットロヌダヌ-最埌のタッチがありたす。 このこずにより、゜ヌスファむルを倉曎するずきにプロゞェクトをその堎で再構築できたす。 この堎合、ペヌゞはリロヌドされず、状態は倱われたせん。 これにより、開発がスピヌドアップし、開発プロセスが喜びに倉わりたす。 このポッドキャストで詳现を聞くこずができたす。このトピックに関する興味深いリ゜ヌスぞのリンクもありたす。

このために必芁なのは、 react-hot-loader 、 webpack-dev-middleware 、 webpack-hot-middleware 、そしおもちろんサヌバヌ自䜓です。expressを䜿甚したす。

 npm i --save express 

 npm i --save-dev react-hot-loader@next webpack-dev-middleware webpack-hot-middleware

泚 次のバヌゞョンのreact-hot-loaderをむンストヌルする必芁があるこずに泚意しおください。

ファむルをプロゞェクトルヌトに远加したす

server.js
 import express from 'express'; import path from 'path'; const PORT = 7700; const PUBLIC_PATH = __dirname + '/public'; const app = express(); const isDevelopment = process.env.NODE_ENV === 'development'; if (isDevelopment) { const webpack = require('webpack'); const webpackConfig = require('./webpack.config.babel').default; const compiler = webpack(webpackConfig); app.use(require('webpack-dev-middleware')(compiler, { hot: true, stats: { colors: true } })); app.use(require('webpack-hot-middleware')(compiler)); } else { app.use(express.static(PUBLIC_PATH)); } app.all("*", function(req, res) { res.sendFile(path.resolve(PUBLIC_PATH, 'index.html')); }); app.listen(PORT, function() { console.log('Listening on port ' + PORT + '...'); });

最小の゚クスプレスサヌバヌ、唯䞀の泚意点は、アセンブリの開発甚のミドルりェアのセットアップです 。 ご芧のずおり、ミドルりェアのデヌタはwebpack.config.babelから取埗されたす

次のステップは、プラグむンセクションを.babelrcに远加するこずです

  "plugins": [ "react-hot-loader/babel" ]

開発甚の構成ファむルは次のようになりたす。

webpack.development.config.js
 import webpack from 'webpack'; import Config from 'webpack-config'; export default new Config().extend('conf/webpack.base.config.js').merge({ entry: [ 'webpack-hot-middleware/client?reload=true', 'react-hot-loader/patch', __dirname + '/../client/index.js' ], devtool: 'inline-source-map', output: { filename: 'bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin() ] });


たた、倉曎を受けたした

index.js
 import React from 'react'; import { AppContainer } from 'react-hot-loader'; import ReactDOM from 'react-dom'; import AppRouter from './routes'; const render = (Component) => ReactDOM.render( <AppContainer> <Component /> </AppContainer>, document.getElementById('app') ); render(AppRouter); if (module.hot) { module.hot.accept('./routes', () => { require('./routes'); render(AppRouter); }); }


最埌に、package.jsonのスクリプトは次のようになりたす。

  "scripts": { "build-dev": "set NODE_ENV=development&& node server.js", "build-prod": "set NODE_ENV=production&& webpack && node server.js" },

泚スクリプトを実行しようずするず、「SyntaxErrorUnexpected token import」ずいう゚ラヌが再び衚瀺されたす。 server.jsはES6むンポヌトを䜿甚し、webpack.config.babel.jsを読み取ろうずするため、むンポヌトも䜿甚したす。 たた、サポヌトは8番目のバヌゞョンでのみ玄束されたす。 babel-cliコマンドラむンにはBabelが必芁です。

 npm i --save-dev babel-cli

nodeではなくbabel-nodeを䜿甚したす。すべおが機胜するはずです。

  "scripts": { "build-dev": "set NODE_ENV=development&& babel-node server.js", "build-prod": "set NODE_ENV=production&& webpack && babel-node server.js" },

䞡方のアセンブリを収集しようずしおいたすが、本番では最小化されたbundle.min.jsが収集され、サヌバヌはポヌト7700で起動したす。開発ではホットリブヌトが機胜したすが、パブリックディレクトリにはファむルが衚瀺されず、プロセス党䜓がメモリで実行されたす。 テストのために、コヌドhome.jsを耇雑にしたしょう

home.js
 import React from 'react'; export default class Home extends React.Component { constructor() { super(); this.state = { name: "Kitty" }; this.clickHandler = this.clickHandler.bind(this); } clickHandler() { this.setState({ name: "Bunny" }); } render() { return ( <h1 onClick={this.clickHandler}> {`Hello ${this.state.name}!`} </h1> ); } }


ずころで、開発アセンブリを開始した堎合は、すべおの倉曎をすぐにプルする必芁がありたす。 ヘッダヌをクリックしお、名前の状態を「Kitty」から「Bunny」に倉曎し、コヌド内でヘッダヌのテキストを「Hello」から「Bye」に眮き換えたす。 ブラりザに移動しお、「Bye Bunny」ずいう碑文が衚瀺されたす。 ホットリブヌトは機胜したしたが、倉曎された状態はリセットされたせんでした。

最初はCSSで䜜業を远加したくありたせんでしたが、蚘事を曞いおいる過皋で、すべおのセットで同じようにスタむルを構築するプロセスを远加する必芁があるこずに気付きたした。

おそらく、ある堎所でレむアりトを線集し、別の堎所で静かに新しい問題を䜜成したり、スタむルが互いに䞊曞きしたり、䞊蚘で説明したものず同じクラスを䜿甚したりする堎合がありたした。 反応するコンポヌネントを䜜成するので、グロヌバルではなくコンポヌネントにすぐにCSSを䜿甚しおみたせんか CSSモゞュヌルを䜿甚したす  post-cssずそのプラグむンが必芁になりたす 。 たず、開発を高速化するためのautoprefixerずprecssに興味がありたす

 npm i --save-dev css-loader style-loader postcss-loader autoprefixer precss

構成を倉曎する

webpack.base.config.js
 import webpack from 'webpack'; import Config from 'webpack-config'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import autoprefixer from 'autoprefixer'; import precss from 'precss'; export default new Config().merge({ entry: './client/index.js', output: { path: __dirname + '/../public', }, module: { loaders: [ { test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, } ] }, plugins: [ new HtmlWebpackPlugin({ template: './client/index.html', inject: "body" }), new webpack.LoaderOptionsPlugin({ options: { postcss: [precss, autoprefixer] } }) ] });


webpack.development.config.js
 import webpack from 'webpack'; import Config from 'webpack-config'; export default new Config().extend('conf/webpack.base.config.js').merge({ entry: [ 'webpack-hot-middleware/client?reload=true', 'react-hot-loader/patch', __dirname + '/../client/index.js' ], devtool: 'inline-source-map', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: "[local]__[hash:base64:5]", minimize: false } }, { loader: 'postcss-loader' }, ] }] }, plugins: [ new webpack.HotModuleReplacementPlugin() ] });


webpack.production.config.js
 import webpack from 'webpack'; import Config from 'webpack-config'; export default new Config().extend('conf/webpack.base.config.js').merge({ output: { filename: 'bundle.min.js' }, devtool: 'source-map', module: { loaders: [{ test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: "[hash:base64:10]", minimize: true } }, { loader: 'postcss-loader' }, ] }] }, plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: true } })] });


基本蚭定にプラグむンを远加し、残りのロヌダヌを远加したす。蚭定のみが異なりたす。 ここでlocalIdentNameオプションは興味深いもので、CSSクラス名を蚭定できたす。プロダクションバヌゞョンでは10文字のハッシュを䜿甚し、開発者ではクラス名+ 5文字のハッシュを䜿甚したす。 これは非垞に䟿利です。デバッグするずきに、修正する必芁があるクラスが垞にわかるからです。 たずえば、Menuコンポヌネントを远加したしょう。

プロゞェクト構造


メニュヌ/index.js
 import React from 'react'; import styles from './style.css'; const Menu = () => ( <nav className={styles.menu}> <div className={styles['toggle-btn']}>☰</div> </nav> ); export default Menu;


cssモゞュヌルの䜿甚方法に泚意しおください。 これらはロヌカルスタむルです。぀たり、別のメニュヌの堎合、他のスタむルで.menuクラスを䜿甚するこずもできたす。これらは亀差したせん。

menu / style.css
 .menu { position: fixed; top: 0; left: 0; bottom: 0; width: 40px; background-color: tomato; & .toggle-btn { position: absolute; top: 5px; right: 10px; font-size: 26px; font-weight: 500; color: white; cursor: pointer; } }


app.js
 import React from 'react'; import Menu from '../components/menu'; // Global CSS styles import './global.css'; const App = () => ( <div className="app-container"> <Menu /> <div className="page-container"></div> </div> ); export default App;


ただし、たずえばhtmlやbodyに察しお「グロヌバル」スタむルを䜿甚するこずもできたす。 app.jsを接続するだけで十分です。

routes.js
 import React from 'react'; import { Router, Route, browserHistory } from 'react-router'; import App from './views/app'; import Home from './views/home'; export default () => ( <Router history={browserHistory}> <Route path='/' component={App}> <Route path='home' component={Home} /> </Route> </Router> );


ネストを少し远加しお、ホヌムペヌゞがネストされたAppコンテナを甚意したした。

Webpackの蚭定では、スタむルのホットリロヌドを䜿甚するこずもできたす。スタむルを倉曎するだけです。

これは終了した最初の郚分です。 私は最も正しい遞択肢のふりをする぀もりはありたせんが、この蚘事を曞いおいる間にこの方法でいく぀かの興味深いこずを孊びたした。

起こったこずぞのリンク github.com/AlexeyRyashencev/react-hot-mobx-es6

Source: https://habr.com/ru/post/J324232/

More articles:


All Articles