StencilでTODOアプリの写経にtryしてみるが、Createしかできず。

2018年8月3日

なんだか右往左往しているが、とりあえず、Stencilを触ってみたくなった。

以下のサイトを写経してみたい。

https://www.javascripttuts.com/creating-a-todo-application-using-stencil/

（開発環境）

VisualStudioCode 1.25.1
git version 2.17.1.windows.2

NodeJSを公式サイトからインストール後、コマンドプロンプトで、npm install -g ionic で、Ionic CLIをインストールしている。（2018/8/3時点）

（０）すること

C:/ionic4/ フォルダに、StencilによるTODOアプリを作成する

（１）stencil-startar-appのダウンロードとインストール

C:/ionic4/ フォルダをVisualStudioCodeで開き、Ctrl+@　でターミナルを開き、以下を入力。

git clone https://github.com/ionic-team/stencil-app-starter stencil-todo-app
cd stencil-todo-app
npm install
npm start

いつまでもChromeの画面が表示されない場合は、Chromeをリロードすると、上のような画面が出てきたりする。

（２）中身を見てみる。

今回写経してみたいサイトが書かれた2017年11月と比べて、stencil-app-starter の中身が、かなり変化してしまっているようである。

●　src/components/app-root/app-root.tsx

app-root.tsx で、以下のような雰囲気で、ルーティングをしているようである。

<stencil-router>
  <stencil-route-switch>
    <stencil-route url='/' component='app-home'>
    <stencil-route url='/profile/:name' component='app-profile'>
  </stencil-route-switch>
</stencil-router>

●　src/components/app-home/app-home.tsx

以下のような感じ、リンクを作成しているらしい。

<stencil-route-link url='/profile/stencil'>
  <button>
     Profile page
  </button>
</stencil-route-link>

●　src/components/app-profile/app-profile.tsx

（３）app-homeの編集

app-home.tsx に、TodoListを記載してみる。

src/components/app-home/app-home.tsx

(変更前)

(変更後)

（４）Todoコンポーネントの作成

src/components/ フォルダの中に、todo/ フォルダを作成し、その中に、todo.tsxを作成

src/components/todo/todo.tsx （作成直後）

(変更後)

（５）app-home.tsx を再度編集

(変更後)

追加することはできたが、編集したり、削除することはできなかった。。。

とりあえずおいておく。。。