アルム＝バンド ReactベースのSSGを何かしら試したかったのですが、Gatsbyがコケたのでこちらを試します。
> yarn add react-static
## 略
Done in 84.17s.OK。
> react-static create
? What should we name this project? rs_test
? Select a template below... basic
Creating new react-static project...
Using React Static template: basic
Installing dependencies with: Yarn...
warning ..\package.json: No license field
## 略
[✓] Project "rs_test" created (200.6s)
To get started:
cd "rs_test"
yarn start - Start the development server
yarn build - Build for production
yarn serve - Test a production build locally作成できました。裏で色々走らせていたせいでできるまでが遅かったですが。
> cd .\rs_test\
> yarn start
yarn run v1.21.1
warning ..\package.json: No license field
$ react-static start
Starting Development Server...
Fetching Site Data...
[✓] Site Data Downloaded (0.5s)
Building Routes...
Importing routes from directory...
{ has404: true }
[✓] Routes Built (0.5s)
Building Templates...
[✓] Templates Built
Bundling Application...
Fetching Site Data...
[✓] Site Data Downloaded (0.3s)
Running plugins...
[✓] Application Bundled (35s)
[✓] App serving at http://localhost:3000走りましたね。これでlocalhost:3000にアクセスすると……。
来ました。試しに./src/pages/test.jsを以下のように書いてみます。
import React from 'react'
export default () => (
<div>
<h2>いろは歌</h2>
<p>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしよゑもせす</p>
</div>
)さらに./src/App.jsのナビゲーションバーにリンクを追加。
//略
function App() {
return (
<Root>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/blog">Blog</Link>
<Link to="/dynamic">Dynamic</Link>
<Link to="/test">Test</Link>
</nav>
<div className="content">
<React.Suspense fallback={<em>Loading...</em>}>
<Router>
<Dynamic path="dynamic" />
<Routes path="*" />
</Router>
</React.Suspense>
</div>
</Root>
)
}
//略
はい、localhost:3000/testでアクセスできました。
これくらい手軽な方が気楽にできるので、ひとまずReact Static触っていきましょうかね。