Version: 5.3

Our First Page

ユーザに、（素晴らしい）Redwoodのウェルカムページ（ありがとう @alicelovescake！）以外に見るべきものを提供しましょう。ここでは、redwood コマンドラインツールを使って、ページを作成します：

yarn redwood generate page home /

上記のコマンドは4つのことをします：

web/src/pages/HomePage/HomePage.tsx を作成する。Redwood は page の後の最初の引数として指定された名前を受け取り、PascalCases で "Page" を追加して、新しいページコンポーネントを構築する。つまり "home" は "HomePage" になる
web/src/pages/HomePage/HomePage.test.tsx に、この新しいページコンポーネントに付随するテストファイルを作成し、1つの成功するテストを記述する。コンポーネントのテストを 書きますよね？
このコンポーネントのStorybookファイルを web/src/pages/HomePage/HomePage.stories.tsx に作成する。StorybookはUIコンポーネントを効率的に開発し、整理するための素晴らしいツール（もし、この先を覗いてみたいなら、StorybookについてはチュートリアルのChapter 5で学びます）
web/src/Routes.tsx に <Route> を追加し、パス / を新しい HomePage ページにマップする

Automatic import of pages in the Routes file

Routesを見ると、インポートされていない HomePage コンポーネントを参照していることに気がつくと思います。RedwoodはRoutesファイル内のすべてのページを自動的にインポートします。これにより、巨大な import 宣言がルーティングファイルに散らかるのを防ぐことができます。

気づいていないかもしれませんが、このページは既に公開されています（ブラウザは自動的に再読み込みされます）：

Default HomePage render

きれいではありませんが、これでスタートです！ページをエディタで開き、テキストを変更して保存します。ブラウザが再読み込みされ新しいテキストが表示されるはずです。

Routing

web/src/Routes.tsx を開いて、作成されたルートを見てみましょう：

JavaScript
TypeScript

web/src/Routes.js
import { Router, Route } from '@redwoodjs/router'

const Routes = () => {
  return (
    <Router>
      <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

web/src/Routes.tsx
import { Router, Route } from '@redwoodjs/router'

const Routes = () => {
  return (
    <Router>
      <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
  )
}

export default Routes

パス / を持つルートがある限り、Redwood の初期スプラッシュスクリーンを再び見ることはありません。

リクエストされたURLにマッチするルートが見つからない場合、Redwoodは NotFoundPage を表示します。

ルートを次のように変更してみてください：

JavaScript
TypeScript

<Route path="/hello" page={HomePage} name="home" />

<Route path="/hello" page={HomePage} name="home" />

http://localhost:8910/ ではスプラッシュスクリーンが再び表示され、アプリで利用可能なURLの一覧が表示されます。

Redwood Splash Screen

hello に移動すると、再びホームページが表示されるはずです。

チュートリアルを続ける前に、ルートパスを / に戻してください！

Simple Styles

このチュートリアルの以前のバージョンでは、コードに集中するためにスタイリングせずにすべてを構築していましたが、正直に言うと、、、スタイルのないサイトはかなりカッコ悪いです。そこで本当に簡単なスタイルシートを追加して、サイトを構築する際に目に優しくしてあげましょう。次のコードを web/src/index.css に貼り付けてください：

web/src/index.css
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
ul {
  list-style-type: none;
  margin: 1rem 0;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 1rem 0 0 ;
}
h1 > a {
  text-decoration: none;
  color: black;
}
button, input, label, textarea {
  display: block;
  outline: none;
}
label {
  margin-top: 1rem;
}
.error {
  color: red;
}
input.error, textarea.error {
  border: 1px solid red;
}
.form-error {
  color: red;
  background-color: lavenderblush;
  padding: 1rem;
  display: inline-block;
}
.form-error ul {
  list-style-type: disc;
  margin: 1rem;
  padding: 1rem;
}
.form-error li {
  display: list-item;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-between button {
  display: inline;
}

これらのスタイルは、あなたのOSのシステムフォントに切り替えたり、文字の間に少し余白を入れたり、全体的にすっきりさせるものです。お好みに合わせて自由に調整してください（またはこれらのスタイルを完全に無視して、ブラウザーのデフォルトにこだわることもできます）。ただし覚えておいていただきたいのですが、以下のスクリーンショットはこの基本スタイルシートに対して作成されているので、あなたの体験とは異なるかもしれません。

Default homepage with custom styles

すでに良くなっているみたいですね！

Our First Page

Routing​

Simple Styles​

Routing

Simple Styles