一、搭建好react的環境

npm install -g create-react-app

create-react-app . 　　　　// 這一命令會在文件夾中生成package.json/node-modules/public/src/.gitignore/package-lock.json/README.md這一系列的文件

yarn start // 不會生成build，只有yarn run build 才會有壓縮好的一堆文件生成

表示搭建成功。

在這裏我要講一個巨坑的經歷， 在上傳到github的遠程倉庫時，出現了一直報錯的情況，css/js找不到，歷時超久，發現是package.json裏面的homepage寫錯了地方，啊啊啊啊啊啊啊啊啊啊。

二、搭建基本框架

先構思一下，首先有一個h1標簽，顯示這是誰的待辦，然後有一個文本輸入框，再下面是個列表，用來存放用戶所有的待辦事項。

三、將輸入框和待辦事項列表拆分成兩個不同的組件，提高代碼的可維護性、可擴展性和可測試性。

四、基本框架做好之後我們來添加簡單的樣式，首先引入一個重置的CSS文件normalize.css和自己新建的reset.css。

normalize.css需要安裝 npm i -s normalize.css，在配置文件package.json添加一行依賴：

然後新建一個css文件命名為reset.css，裏面寫的是我們在css時最開始寫的重置代碼。

接著，就是我們自己對於頁面的設計了，同樣為了方便以後代碼的維護，我們將每個部分的樣式都新建一個css文件。

五、在添加玩自己定義的樣式文件之後發現我們的輸入框不能輸入東西，我們的頁面雖然沒有報錯但是有兩個警告在，其中一個警告的意思就是說我們的輸入框設置的value屬性不能變化，瀏覽器給了我們兩個建議，一個是將value改為defaultValue，還有一個是添加onChange或readOnly事件，我們首先采取第一種做法，同時給輸入框添加onKeyPress的監聽事件。以上，一起提交：

六、接下來我們想實現按回車，將輸入框中的文字添加到列表中，輸入框清空。

此時，我們發現還有一個問題就是，輸入框不清空，聯想到之前的兩種方法中我們選擇了第一種，換成第二種試試。

這樣，簡單的框架基本形成了。

未完待續。。。

前端項目之react-todolist