やったこととか思ったこと

やったことを忘れないように気が向いたら書きます

Frontend Bootcampを読む Step1-05

Microsoftが公開していたFrontend Bootcampを読み進めていくメモ

自分なりの適当な翻訳なので間違いがあるかもしれません。
また公開されたばかりで現在進行形で更新されているので僕が読んだ時とは内容が少し変わっているかもしれません。

Step1-05 Demo: Building a Static Page

Thinking in Reactで説明されている手順に従って、TODOアプリを作っていきます。

まず最初に、アプリケーションをCompoentの階層に分割していきます。このアプリケーションでは、4つに分割します。

  • TodoHeader
  • TodoList
  • TodoListItem
  • TodoFooter

このアプリケーションのモックアップを、step1-05/TodoApp.htmlで確認することができます。

TodoHeader

Componentは全てsrc/componentディレクトリに格納するので、ディレクトリを作成してください。作ったら、TodoHeader ComponentをTodoHeader.tsxというファイルに作ります。.tsx拡張子は、このファイルがTypeScript + Reactでコードを書いていると表します。

TypeScriptについては後で説明されます。今わかるのは、TypeScriptファイルにJavaScriptを書くことができるということです。

import React from "react";

export class TodoHeader extends React.Component<any, any> {
  render() {
    return (
      <header>
        <h1>todos</h1>
        <div className="addTodo">
          <input className="textfield" placeholder="add todo" />
          <button className="submit">Add</button>
        </div>
        <nav className="filter">
          <button className="completed">all</button>
          <button>active</button>
          <button>completed</button>
        </nav>
      </header>
    );
  };
}

Reactでは、classをclassNameにする必要があります。

TodoListItem

要素が繰り返し表示されている場合は、基本新しいComponentを作った方がいいです。propsを使えば、それらの要素を単一のComponentにすることができます。TodoListItemが、それに当てはまります。

import React from 'react';

export class TodolistItem extends React.Component<any, any> {
  render() {
    return (
      <li className="todo">
        <label>
          <input type="checkbox" /> Todo 1
        </label>
      </li>
    );
  }
}

これは、クラスの代わりに関数として作ることもできます

export const TodoListItem = (props) => {}

Exercise

TodoFooter

  1. TodoFooter Componrntをcomponentディレクトリに作ってください。<footer>タグとその子要素をstep1-05/TodoApp.htmlからコピーします。TodoFooterは関数またはクラスです。
  2. classをcalssNameに変更してください。

TodoList

  1. TodoFooterと同じようにTodoList Componentを追加してください。クラスと関数どちらでもいいです。
  2. TodoListItemをインポートし、
      の内側に4つ追加してください。
    • オプションでArrayのmapなどを利用して作成してみてください。

App.tsx

これらのComponentをApp.tsxにインポートし、TodoHeaderの下に配置してください。

// TodoFooter
export const TodoFooter = props => {
  return (
    <footer>
      <span>4 items left</span>
      <button class="submit">Clear Completed</button>
    </footer>
  )
}

// TodoList
import { TodoListItem } from "./TodoListItem;

export const TodoList = props => {
  return (
    <ul className= "todos">
      { [1, 2, 3, 4].map((i) => <TodoListItem key={i} text={"Todo " + i.toString()} />)}
    </ul>
  )
};

// TodoListItem
 <input type="checkbox" /> {this.props.text}

// App.tsx
import React from "react";
import { TodoHeader } from "./components/TodoHeaderr";
import { TodoList } from "./components/TodoList";
import { TodoFooter } from "./component/TodoFooter";

export class TodoApp extends Reract.Component<any, any> {
    render() {
        return (
            <div>
                <TodoHeader />
                <TodoList />
                <TodoFooter />
            </div>
        );
    }
}

参考