React static入門
Index
- 英語がわかってもわからなくても、この5分動画を見るのが最もわかりやすい
React staticってなに？
- https://react-static.js.org/
- Reactのプログレッシブ静的サイトジェネレータ
- めちゃパフォーマンスがよい
- SEO対策もされてる
インストール
- 公式クイックスタートに沿ってやる
- yarnでグローバルインストール
$ yarn global add react-static
yarn global v1.5.1
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 📃 Building fresh packages...
success Installed "react-static@5.6.8" with binaries:
- react-static
✨ Done in 55.27s.
試す: プロジェクト作成〜Hello world
- 新しくプロジェクトを作りたいディレクトリに移動
react-static createコマンドを打つ- 対話形式でプロジェクトを作れる
- プロジェクト名 = ディレクトリ名
- テンプレート名 = とりあえずbasicで
$ react-static create
? What should we name this project? tryReactStatic
? Select a template below... basic
=> Creating new react-static project...
Using template: basic
=> Installing dependencies with: Yarn...
=> [✓] Project "tryReactStatic" created: 32126.416ms
=> To get started:
cd tryReactStatic
yarn start - Start the development server
yarn build - Build for production
yarn serve - Test a production build locally
- ディレクトリを移動して、yarnでRunする
- ビルドされてから、ローカルサーバーが立ち上がり、サイトが確認できる
$ cd tryReactStatic $ yarn start yarn run v1.5.1 $ react-static start => Building Routes... => [✓] Routes Built: 398.358ms => Building App Bundle... => [✓] Build Complete: 4145.172ms => [✓] App serving at http://localhost:3000
編集する: ディレクトリ構成〜Home画面の修正
- ディレクトリ構成はこんな感じ
├── README.md ├── dist # ビルドした本番用ファイル置き場 ├── node_modules ├── package.json ├── public # 静的ファイル置き場 ├── src # ソースコード置き場 │ ├── App.js # │ ├── app.css # │ ├── containers # 各ページのJSコード │ ├── index.js # │ └── logo.png ├── static.config.js # 設定ファイル ├── tmp └── yarn.lock
- containersの中のHome.jsのテキストを修正
- 再ビルドとサーバ立ち上げ -> Home画面が修正されてる
$ tree src/containers/ src/containers/ ├── 404.js ├── About.js ├── Blog.js ├── Home.js └── Post.js $ vi src/containers/Home.js $ yarn start
デプロイする: 本番用ビルドする
- yarn buildでビルドする
$ yarn build yarn run v1.5.1 $ react-static build => Info: No 'siteRoot' is defined in 'static.config.js'. This is suggested for absolute url's and a sitemap.xml to be automatically generated. => Copying public directory... => [✓] Public directory copied: 1.624ms => Building Routes... => [✓] Routes Built: 329.341ms => Bundling App... => [✓] App Bundled: 6516.959ms => Fetching Site Data... => [✓] Site Data Downloaded: 0.126ms => Fetching Route Data... => [==================================================================] 104/104 100% 14857/s 0.0s => [✓] Route Data Downloaded: 9.490ms => Exporting Route Data... => [✓] Route Data Exported: 10.393ms => Exporting HTML... => [====================================================================] 104/104 100% 208/s 0.0s => [✓] HTML Exported: 563.963ms => Site is ready for production!: 7860.281ms ✨ Done in 10.77s.
$ tree dist/ -L 1 dist/ ├── 404 ├── 404.html ├── about ├── blog ├── bootstrap.943eaf03.js ├── index.html ├── main.31e220f4.js ├── react-static-routes.js ├── robots.txt ├── routeInfo.json ├── static ├── static.ffae8488.js ├── static.ffae8488.js.map ├── styles.20041c42.css ├── styles.20041c42.css.map ├── styles.8db21466.css ├── styles.8db21466.css.map └── templates
