Angularのチュートリアル: Tour of Heroes をBlazorを使って再実装してみます。
新規プロジェクトを作成する
dotnet CLIを使用して初期アプリケーションを作成します。
- 開発環境をセットアップします。
- ソリューションとプロジェクトを作成します。
- サーバを起動してアプリケーションを動かしてみます。
開発環境をセットアップする
こちらの手順に従って開発環境をセットアップします。
Macの場合は、brewを使えば一発です。
brew cask install dotnet-sdk
ソリューションとプロジェクトを作成する
テスト等も含めたいので、プロジェクトを作成する前にソリューションを作成します。
dotnet new sln -o BlazorTourOfHeroes
ディレクトリとソリューションファイルが出来上がるので移動します。
cd BlazorTourOfHeroes
続いてBlazorプロジェクトとテストプロジェクトを作成します。
dotnet new blazorwasm -o BlazorTourOfHeroes
dotnet new xunit -o BlazorTourOfHeroes.Tests
ソリューションに作成したプロジェクトを追加します。
dotnet sln add BlazorTourOfHeroes
dotnet sln add BlazorTourOfHeroes.Tests
gitignoreファイルを作成します。
dotnet new gitignore
あとはいつものようにgitを初期化してコミットしておきます。
サーバを起動する
サーバを起動してみます。
dotnet run -p BlazorTourOfHeroes
ブラウザを起動して https://localhost:5001 か http://localhost:5000 へアクセスします。
こんなんできました
こんな感じの画面が見られます。
画面を構成するコンポーネント
以下のようなrazorファイルが生成されています。
razorファイルひとつがコンポーネントになります。
Angularのように、スタイルシートを個別に持つことはできません。
├── App.razor
├── Pages
│ ├── Counter.razor
│ ├── FetchData.razor
│ └── Index.razor
└── Shared
├── Heroes.razor
├── MainLayout.razor
├── NavMenu.razor
└── SurveyPrompt.razor
App.razorがAngularでいうところのルーティングを担っています。
変更してみる
トップページのタイトルを変更する
Index.razorファイルを編集します。
Pages/Index.razor
<h1>Tour of Heroes</h1>
スタイルを変更する
スタイルシートはアプリケーション全体で一つです。
wwwroot/css/app.css
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}