ReactJSの開発導入について
- 2. アジェンダ • はじめに • 製造着手前の準備 • 新しいページの作り方 -- レンダリングの仕組み • Webpackのローカル環境で動作確認 • GithubPageへデプロイ(本番環境的な)
- 3. はじめに 今回のReact環境の構築について Create React Appを使わないReact導入手 順になります。 Create React App ・・・ Facebook が提供している CLI ツールで用意されたテンプレート を元にアプリケーションの雛形を生成してくれるもの
- 6. 製造着手前の準備
- 7. 製造着手前の準備
- 8. ディレクトリの状態
- 10. Webpackの設定
- 12. HtmlWebpackPlugin: コンパイル時に、生成された JavaScript ファ イルなどが読み込まれている状態の .html ファイルが作れる devServer: ローカルサーバーを立ち上げることができる module.rules のところで js と jsx のファイルを babel-loader に読ませる設定をしてます。 babel-loader に はプリセットの設定を行いました。 また plugin に HtmlWebpackPlugin を追加して html のテンプレートを 指定しています。devServerを設定しておくことで、React単体でローカル確認も簡単になります。 まとめ
- 13. ビルドについて $ npx webpack --config webpack.config.js ビルド後は、こんな感じで出力されます。 ‘npm run build で実行できます
- 17. 新しいページの作り方
- 22. git subtree push --prefix build/ origin gh-pages GitHub Pagesは特定なBranchを使って静的なファイルをサービスします。 したがってbuildフォルダ のためだけのBranchを作る必要があります。 次のコマンドを実行してbuildフォルダだけ新しい Branchにアップロードします。 手順1 手順2 手順3
- 23. ご清聴ありがとうございました