使用 React 完成一個 TODOList

時間 2019-11-11

標籤使用 react 完成一個 todolist 欄目 React 简体版

原文原文鏈接

用 React 完成一個 todolist

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

項目代碼連接：GitHubcss

項目預覽連接：Git Pageshtml

測試帳號：123vue

測試密碼：456java

經過使用 react 完成一個 TODOList，具備如下功能：react

1.能夠註冊並登陸，PC和移動端均可以使用webpack

2.能夠添加/刪除 todo 選項git

3.標記 todo 已完成github

4.展現 todo 列表web

項目初始化

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 項目就初步構建並能夠運行了：

項目目錄

來看看運行命令後咱們獲得了一個什麼樣的項目骨架：

.
│  .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」。

在 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