React Staticを試してみる

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にアクセスすると……。

React Staticのテストサイト
React Staticのテストサイト

来ました。試しに./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>
  )
}

//略

React Staticのテストサイト
React Staticのテストサイト

はい、localhost:3000/testでアクセスできました。

これくらい手軽な方が気楽にできるので、ひとまずReact Static触っていきましょうかね。

参考

この記事を書いた人

アバター

アルム=バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。