Todoリスト - Ver. React.js

制作日: 2018年末~2019年初頃

確認方法

URL: https://react-todo-66663.firebaseapp.com/
FirebaseにてHostingしてあります。
Google Chromeにて上記URLを開いてご確認ください。

開発環境

言語: HTML/CSS/JavaScript/React
OS: Mac OS
ツール: Sublime Text3 / Google Chrome

概要

Reactを学習しながら、ポートフォリオ用に作成しました。
WEBアプリをゼロからコーディングしてみました。
Reactの開発環境が導入されていないと、ローカルで動作確認をしていただけないため、FirebaseにてHostingしてあります。
(当ファイル1行目に記述してあるURLを開いてご確認ください。)
font awesomeのアイコンフォントを導入しています。

機能説明

1. フォームに文字を入力してEnterを押下すると、DOリストに項目が追加されます。
   
2. チェックボックスを押下すると、DOリストからDONEリストへ、もしくはDONEリストからDOリストへ項目が移動します。
   
3. ゴミ箱アイコンを押下すると、項目が削除されます。
   

ファイル構成

ソースコードはsrcフォルダに入っております。
外観と機能的な部分はApp.js、スタイルシートはApp.cssへ記述しています。
reactの開発環境を導入し、 create react app でディレクトリを作成し、srcディレクトリを上書きして npm start していただければ、ローカルでも動作を確認できます。