reactでtodoアプリ作成

以前構築した環境でreactの勉強中！！
elsammit-beginnerblg.hatenablog.com

今回下記サイトを大いに参考してtodoアプリを作成しました。
webkikaku.co.jp

このサイトで公開しているtodoアプリではこの通り、実施予定の項目が追加できるようになっておりました。

こちらを写経し一折動くようにした後、
"自分なりのアレンジを加えてみたいな"
と思い、、、
　・題名をつける
　・納期が設定できるようにする
　・登録日を設定する
を追加してみました。

作成した結果はこちら。

ちょっとダサいけど、、、初めて作ったからまぁよし！！

躓いたのは、
　①todoリストの各要素に"納期項目"を追加
　②非同期処理への対応
になります。

①、②共に登録ボタンを押したときの動作でして、、登録ボタン押下時のイベントの最終的なコードはこのようになりました！！

    addTodo = async() => {
        const Do_AddToDo = () => {
            return new Promise((resolve, reject)=>{
                const {name} = this.state;
                const {day} = this.state;
                const {month} = this.state;
                
                if(name === null || name === ""){
                    resolve(-1);
                }

                this.setState({
                    list: name + " (納期 " + month + day + ") "
                })
                resolve(0);
            })
        }
        var ret = await Do_AddToDo();

        if(ret >= 0){
            const {todos, list} = this.state;
            this.setState({
                todos:[...todos, list]
            });
        }else{
            alert("入力エラー 入力してください");
        }
    } 

また、コンストラクターはこちらです。

    constructor (props) {
        super(props);
        this.state = {
            todos: [],
            name: '',
            month: '',
            day: '',
            list: ''
        };
    }

todoと月日変数とtodoリストとして表示するためのメッセージ項目としてlistを用意しました。
todosはtodoリストになります。
また、nameやmonth、day変数には各テキストボックスやコンボボックスからのイベントにて値をセットしています。

これら、name、month、day変数をメッセージ用のlist変数に代入し、
こちらをtodoリスト(todos)に追加しています。

次に、listに代入する処理とtodosに追加する処理が並列処理になってしまいました。
そこで、Promise、awaitを用いて同期処理を入れ込むことで回避しました。

最後に、、、

React、思ったより難しいです。。。
ビルドするとエラーになったり、動いてもエラーになったり、、、泣。
書き方も独特なので、、、
でもがんばろう！！

今回は写経したソースに少し手を加えてみましたが、次は自分で考えて一から作ってみたいと思います！！

皆さんは一から言語勉強するときはどうするのでしょうか？
自分は参考書とかから入らず、写経して分かったつもりになってから今回のように機能追加しながらやるのですが。
結構、分からないことが多くて苦労するのですが、出来たら達成感があり！！
ついついこの方法で勉強進めてしまうのですが、、、

もっといい方法あるのかな？