【React】Reactに爆速で入門する4。GN125、グラディウス400のメンテナンス/カスタムブログです。バイクGNブログRSSまとめカメラ/写真/絶景IT系GN125作成したスマホアプリ/Webアプリたち【React】Reactに爆速で入門する4。ReactHOMEIT系Javascript【React】Reactに爆速で入門する4。ビルドするはじめにReactに爆速で入門する1~3までで、React自体に対する理解はできてきました。(第1回はこちら)しかし、入門1~3では、1つのファイルで、しかもReactやBabelの読み込みをscriptタグでCDNで行っていました。実際のフロントエンド開発においては、この方式はまず採用されていなくて、大体はWebpackやBrowserifyやらを使用して、トランスパイル&バンドルするのが一般的ですよね。いうことで、今回は現状最も人気があると思われる(主観)Webpackを使用して、第3回までに作ったファイルを分割して見やすく、その分割したファイルをトランスパイル&バンドルするということをやっていこうと思います。ベースは第3回のリスト表示するコードになりますので、コードを取得していない方はもってきてください。npmを使用するので、とりあえずnodeをインストールしてください。公式ページからDLできます。-y[/text]次に、ReactとWebpackとBabelをインストールします。webpack[/text]結果のpackage.jsonは下記のような感じになっていると思います。"^2.9.5"}}[/text]WebpackとBabelの設定ファイルを作るさて、使用する色々なもののインストールが完了したら、webpackとbabelの設定フィルをつくります。webpackの設定ファイルwebpack.config.jsとしてルートに配置します。}}};[/text]srcフォルダのmain.jsを起点としてjsファイルを探していき、出力はdistフォルダ以下にbundle.jsとしてね、的な感じのことを書いてあります。babelの設定ファイル.babelrcとしてルートに配置します。"react"]}[/text]前回作成したファイルを分割する第3回で作成したindex.htmlをコンポーネントごとに分割していきましょう。index.htmlは、/dist/index.htmlとして配置し、それ以外のファイルは/src/以下に配置してください。/dist/index.htmlまずはindex.htmlを。このファイルに全てがつめこまれていましたが、下記の通りwebpackから生成されるbundle.jsを読み込む部分1つ残して、残り全てはクリアしてしまいます。src="./bundle.js"></script></body></html>[/html]/src/main.jsエントリポイントとしてwebpack.config.jsに記述したmain.jsを作ります。第3回のindex.htmlの、class定義部以外の全てをここにコピーする感じです。ReactDOMのimportを忘れずに、また、ListAppをRenderしますのでListAppのimportも行います。ListAppやMyListコンポーネントは、/src/components/に配置する予定ですのでListAppの読み込み先は./components/ListAppにします。/>,document.getElementById("app"));[/javascript]/src/components/ListApp.jsListAppもmain.jsと同じで、React関連の読み込みとMyListの読み込みをします。defaultでclass自体をexportするのを忘れずに。document.getElementById("ListApp-text").value})});}}[/javascript]/src/components/MyList.jsMyList.jsは特筆すべきところはないですね。key={i}><p>name:{v.name}</p><p>text:{v.text}</p></li>)})}</ul>)}}[/javascript]これでファイル分割の準備が完了しました。ここまでで、ファイル構成は下記のようになっているはずです。//src/componentsListApp.jsMyList.jsmain.js/distindex.htmlpackage.jsonwebpack.config.js.babelrcビルドするビルド用に、下記のコマンドをscriptsに追記します。1"},[/text]それでは、webpackによるトランスパイル&バンドルの動作確認します。ルートで下記のコマンドを叩きます。dev[/text]成功すれば、/dist/bundle.jsが生成されているはずです。/dist/index.htmlを開くと下記のように第3回と同じものが表示されます。これでやっとモダンなフロントエンド開発に近づいてきました。今回は、Phonegap/Cordova入門3回目です。UIを使わないと!という記事を書きました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。【Javascript】爆速でChrome拡張プラグイン開発を試す。作り方は意外とかんたんでした。【Talend】グローバル変数の使い方(globalMapとcontext)【Talend】条件分岐(if)する4つの方法をまとめました【JSF入門02】ボタン押下時のイベントを扱う。入門01】開発環境の構築。TalendをインストールしようETL開発ツールは比較するまでもなくTalend一択だと思う。入門02】CSVデータを変換する。Talendの使い方からはじめます。【エストレヤ】なんと妹がバイク乗りになるらしい。いうわけでバイクを購入しました。Songバイクでツーリングいこっ!心に残る絶景を写真にGN倶楽部IT系カテゴリの最新記事2019.03.06Wordpress,【WordPress】突然固定ページが404エラーで表示されなくなった!?ので私の対処法を書きます。WebSlides,【WebSlides】HTML+CSS+Javascriptでプレゼン資料を作成したら割とウケた話。React,【React】Reactに爆速で入門する4。React,【React】Reactに爆速で入門する3。React,【React】Reactに爆速で入門する2。WordPress.。