🐉 後回しにしていたことをやる①ReactでTodoアプリ
作成日: 2022/03/24
1

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

初めての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'));

なんかさみしかったので適当に影をつけてみた。
スクリーンショット 2022-03-24 21.30.23.png

.envファイル追加してポート番号も変更しました。
スクリーンショット 2022-03-24 21.36.46.png


次回予告

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


2021年からプログラミング学習を開始し、未経験から受託開発企業に転職。2022年前半を目標に転職活動中です。 JavaScriptとjQueryはPFで使用経験あり。最近始めたReactを使用してアプリを作成したいと考えております。 #ENJIN