用 React 完成一個 todolist

嘗試一下之前沒有接觸過的框架： React。

項目代碼鏈接：GitHub

項目預覽鏈接：Git Pages

測試賬號：123

測試密碼：456

通過使用 react 完成一個 TODOList，具有以下功能：

1.可以注冊並登錄，PC和移動端都可以使用

注冊登錄

2.可以添加/刪除 todo 選項

添加/刪除

3.標記 todo 已完成

selected

4.展示 todo 列表

項目初始化

1.首先全局安裝 react：cnpm i create-react-app

2.進入項目目錄下輸入：create-react-app react-todolist

(熟悉 vue-cli 的話他的作用和 vue init webpack xxx是一樣的)

3.進入項目目錄，運行 cnpm start，然后他就會自動打開 http://localhost:3000/

一個 react 項目就初步構建並可以運行了：

react

項目目錄

來看看運行命令后我們得到了一個什么樣的項目骨架：

.
│  .gitignore
│  package-lock.json
│  package.json                 // 用於記錄項目及引用庫信息
│  README.md
├─public                        // 用於存放靜態資源
│      favicon.ico
│      index.html
│      manifest.json
│
└─src                           // 用於存放所有源代碼
        App.css
        App.js
        App.test.js
        index.css
        index.js                // 項目主入口
        logo.svg
        serviceWorker.js

在 package.json 中還配置了相關的 npm 腳本：

  "scripts": {
    "start": "react-scripts start", // 執行 npm start ,相當於 vue-cli 中的 npm run dev，webpack 熱啟動
    "build": "react-scripts build", // 執行 npm build,相當於 vue-cli 中的 npm run build,打包構建文件
  },

執行 npm build 后，項目會生成一個 build 文件夾(相當於 vue-cli build 后生成的 dist，存放用於發布的內容)：

build
├── asset-manifest.json
├── favicon.ico
├── index.html
└── static
    ├── css
    │   ├── main.9a0fe4f1.css
    │   └── main.9a0fe4f1.css.map
    ├── js
    │   ├── main.19e75c9e.js
    │   └── main.19e75c9e.js.map
    └── media
        └── logo.5d5d9eef.svg

Hello World

在項目目錄下的 src/index.js 文件中修改：

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

// after
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
);

再看看 http://localhost:3000/ ，我們已經用 react 成功寫出了「Hello World」。

helloworld

在 public/index.html 中，有一個 id 為「root」的 div 節點，代碼的作用，就是將 h1 標簽及其內容插入到這個節點中，所以我們才能看到「Hello World」

部署

如果要把 react 項目部署到 GitHub Pages 的話，需要：

1.把 .gitignore 里的 build 一行刪除

2.在 package.json 中添加： "homepage": "https://no1harm.github.io/react-todolist/build" （后面的值為 gitpages 鏈接地址 + /build）

3.運行 cnpm build

4.重新 push 上 GitHub，可以看到項目的正常預覽了。

入門 / 熟悉基本概念

React 入門教程

把組件寫入單獨的文件：commit
利用 props 傳遞數據：commit
state: commit

注意：

setState不會立刻改變React組件中state的值

函數式的setState用法，如：

function increment(state, props) {
  return {count: state.count + 1};
}
function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState(increment);
}

>同樣是把狀態中的count加1，但是狀態的來源不是this.state，而是輸入參數state

具體可參見這里：setState