关于angular:React-入门写个-TodoList-实例

2次阅读

共计 3631 个字符，预计需要花费 10 分钟才能阅读完成。

React 是一个用于构建用户界面的 JavaScript 库，次要特点有：

申明式渲染：设计好数据和视图的关系，数据变动 React 主动渲染，不用亲自操作 DOM
组件化：页面切分成多个小部件，通过组装拼成整体页面，利于代码复用

本文通过写个简略的 TodoList 实例，不求甚解，相熟下 React 的开发过程。

装置 Node.js

Node.js 是一个运行环境，相似 jdk，用以反对在服务端运行 JavaScript。

您能够在这里下载安装包：

http://nodejs.cn/download/

以绿色版装置为例，将 node-v10.16.1-win-x64.zip 解压到 E:software 并命名为 node-v10.16.1

在 Path 环境变量中减少两项：

E:softwarenode-v10.16.1
E:softwarenode-v10.16.1node_global

在 cmd 中应用 node -v 显示版本号，示意装置胜利。

Node.js 中有个 npm 软件包管理器，能够很不便的治理下载和应用第三方开源包，相似 maven，应用 npm -v 显示版本号，示意 npm 也没有问题。

绿色版装置实现后一些必要的配置：

npm config set prefix "E:softwarenode-v10.16.1node_global"

设置全局装置的模块存储门路

npm config set cache "E:softwarenode-v10.16.1node_cache"

设置下载缓存的存储门路

npm config set registry https://registry.npm.taobao.org`

设置 npm 下载源为淘宝镜像

简略应用:

npm install xxx: 装置到我的项目目录
npm install -g xxx 装置到全局目录
npm install -save xxx: 装置到我的项目目录，并在 package.json 中的 dependencies 节点记录依赖
npm install –save-dev xxx: 装置到我的项目目录，并在 package.json 中的 devDependencies 节点记录依赖

脚手架创立我的项目

React 官网出的脚手架工具 create-react-app，能够一键创立一个 Web 应用程序：

cmd> npm install -g create-react-app
cmd> cd E:
cmd> create-react-app react-todoapp
cmd> cd react-todoapp

脚手架会在当前目录创立一个 react-todoapp 目录：

react-todoapp
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

目录中次要的文件和文件夹阐明：

README.md: 我的项目简介，反对 Markdown 语法
node_modules: 我的项目的依赖包，相似 Maven Repository
package.json: 配置我的项目依赖的第三方包，相似 pom.xml
package-lock.json: 锁定第三方包的版本号，保障 npm install 版本统一
public: 公开资源，网站门路，相似 nginx 的 html 目录
src: 外围组件代码文件

为了便于开发，删除目录中不必要的文件，最终构造如下：

react-todoapp
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   └── index.html
└── src
    ├── App.css
    ├── index.js
    ├── TodoApp.js
    ├── TodoItem.js
    └── TodoList.js

接下来，设计与实现一个 TodoList 的例子，咱们把所有代码过一下，敲一遍，先不论为什么，跑起来，最初再整顿下知识点。

实例 TodoApp

次要实现性能有：

增加一个待办事项
删除一个待办事项
勾选复选框标记事项已实现

如图所示，总共将页面拆分成了三个组件：TodoApp, TodoList 和 TodoItem。

应该能够类比 java 的 main 办法，在 src 目录新建 index.js 内容如下：

// 引入 React, ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';
// 引入 TodoApp 组件
import TodoApp from './TodoApp';

// 将渲染后果挂在到 root 节点，该节点在 index.html 中
ReactDOM.render(
    <React.StrictMode>
        <TodoApp />
    </React.StrictMode>,
    document.getElementById('root')
);

先导入须要应用的组件（类），而后调用它们提供的办法和服务，有没有些许眼生？

TodoApp 设计了页面整体布局，它蕴含全副数据以及操作这些数据的办法，是其余两个组件的 父组件：

import React, {Component} from 'react';
import TodoList from './TodoList';
import './app.css';

class TodoApp extends Component {constructor(props) { // 构造方法，props 应该是父类的一个成员变量
        super(props);
        this.state = { // 组件状态数据
            text: '',
            items:[{id: 1, status: 1, text: "去月球"},{id: 2, status: 0, text: "去火星"}]
        };

        // 设置 this 指向，默认 undefined
        this.handleChange   = this.handleChange.bind(this);
        this.handleAdd      = this.handleAdd.bind(this);
        this.handleComplete = this.handleComplete.bind(this);
        this.handleDelete   = this.handleDelete.bind(this);
    }
    // 渲染解析 jsx
    render() {
        return (
            <div className="todo">
                <h3 className="text-center">Todos App</h3>
                <TodoList 
                    items={this.state.items} 
                    handleComplete={this.handleComplete} 
                    handleDelete={this.handleDelete} />

                <input className="input" type="text" placeholder="增加新工作" 
                    value={this.state.text} 
                    onChange={this.handleChange} />

                <button className="btn-add" onClick={this.handleAdd}> 增加 </button>
            </div>
        );
    }

    handleChange(e) {this.setState({ text: e.target.value})
    }

    handleAdd(e) {e.preventDefault();
        if (this.state.text.length === 0) {return;}

        const newItem = {id: Date.now(),
            text: this.state.text,
            status: 0
        };

        this.setState({items: [...this.state.items, newItem],
            text: ''
        });
    }

    handleComplete(taskid) {
        // 长期变量，不间接批改原数据
        let items = this.state.items;
        let findItem = items.find(item => item.id === taskid);
        findItem.status = findItem.status === 0 ? 1 : 0;

        this.setState({items: items});
    }
    
    handleDelete(taskid) {
        let items = this.state.items;
        items = items.filter(item => item.id !== taskid);
        this.setState({items: items});
    }
}

正文完