この投稿はブックマークやリーディングリストに入れてたけどやってなかったことをやるシリーズ(続くかは未定)です。

初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！

Reactは以前の投稿でトップページ眺めただけだったので、サクッとやれるものをやってみました。
30分位で完成。

以下自分メモ

• CSSやJavascriptの読込はimport
• 今回は入力フォームとボタンをJSのrender(){}の{}中に記述

render() {
    const { todos } = this.state;
    return(
	<div className="register">
      <p>今すぐ登録</p>
      <input type="text" onInput={this.onInput} />
      <button onClick={this.addTodo} className="submit">登録</button>
      <ul>
        {todos.map((todo, index) => <li key={index}>
          {todo}
          <button onClick={() => { this.removeTodo(index) }} className="delete">削除</button>
        </li>)}
      </ul>
    </div>);
  }

• JSファイルに記述したrenderを#root使って呼び出す

ReactDOM.render(<Todo />, document.getElementById('root'));

なんかさみしかったので適当に影をつけてみた。

.envファイル追加してポート番号も変更しました。

---

次回予告

【React+TypeScript】Netflixのクローンを作るチュートリアル