【重点突破】—— create-react-app&React组件化思想
前言：正在学习react大众点评项目课程的todoList应用阶段，学习react、redux、react-router基础知识。
一、 React项目脚手架：create-react-app
- 新建项目：
npx create-react-app 项目名
注：（npm >= 5.2 )
- 三个依赖：react、react-dom、react-scripts
- 四个命令：start、build、test、eject(将webpack的封装弹射出来）
cd 项目名 npm start (npm run start中run可省略)
二、使用Mock数据 —— 前后端分离模拟通过http获取mock数据的过程
方式一： 代理到mock服务器
需要开启一台mock服务器，将前端请求转发到这台mock服务器上
安装：
npm install -g serve
启动：
serve
服务器地址：http://localhost:5000
新建api目录，创建data.json文件
脚手架集成了请求转发的功能：package.json文件中
1.create-react-app脚手架低于2.0版本时候，可以使用对象类型
"proxy": {
"/api": {
"target": "http://localhost:5000",
"changeOrigin": true
}
}
2.最新的create-react-app脚手架2.0版本以上只能配置string类型
"proxy": "http://localhost:5000"
3.最好的方式可以通过middleware中间件进行配置（可以配置多个代理）
npm install http-proxy-middleware --save
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(
proxy("/api/", {
target: "http://localhost:5000",//跨域地址
changeOrigin: true
})
);
};
请求地址：localhost:3000/api/data.json
注意：package.json内容发生了修改，必须重启应用，才能生效。
方式二： 直接将mock数据放到项目public/mock文件夹下（采用）
原因：public文件夹下的内容不会被构建，是静态资源，可直接使用，这样在服务器上，就可以用http方式请求到mock数据了。
三、React思维方式：组件化思想
1.组件划分原则
解耦：降低单一模块/组件的复杂度
复用：保证组件一致性，提升开发效率
组件颗粒度需要避免过大或过小！
2.编写静态组件
开发过程解耦：静态页面和动态交互
组件开发顺序：自上而下 or 自下而上
App -> TodoList -> Todo -> AddTodo -> Footer
3.什么是state
代表UI的完整且最小状态集合
4.如何判断
是否通过父组件props传入？
是否不会随着时间、交互操作变化？
是否可以通过其它state或props计算得到？
5.State的双层含义
代表应用UI的所有状态的集合
代表集合中的每一部分（待办事项列表、新增输入框文本、筛选条件）
6.分析State保存位置
确定依赖state的每一个组件
如果某个state被多个组件依赖，寻找共同的父组件（状态上移）
7.添加交互行为
借助props，添加反向数据流
新增todo、修改todo状态、过滤显示
8.代码
src->index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));
src->components->App.js
import React, { Component } from "react";
import AddTodo from "./AddTodo";
import TodoList from "./TodoList";
import Footer from "./Footer";
class App extends Component {
constructor(props) {
super(props);
this.state = {
todos: [],
filter: "all"
};
this.nextTodoId = 0;
}
render() {
const todos = this.getVisibleTodos();
const { filter } = this.state;
return (
<div>
<AddTodo addTodo={this.addTodo} />
<TodoList todos={todos} toggleTodo={this.toggleTodo} />
<Footer
filter={filter}
setVisibilityFilter={this.setVisibilityFilter}
/>
</div>
);
}
getVisibleTodos = () => {
const currentFilter = this.state.filter;
return this.state.todos.filter(item => {
if (currentFilter === "active") {
return !item.completed;
} else if (currentFilter === "completed") {
return item.completed;
} else {
return true;
}
});
};
addTodo = text => {
const todo = {
id: this.nextTodoId++,
text,
completed: false
};
const newTodos = [todo, ...this.state.todos];
this.setState({
todos: newTodos
});
};
toggleTodo = id => {
const newTodos = this.state.todos.map(item => {
return item.id === id ? { ...item, completed: !item.completed } : item;
});
this.setState({
todos: newTodos
});
};
setVisibilityFilter = filter => {
this.setState({
filter
});
};
}
export default App;
src->components->TodoList.js
import React, { Component } from 'react';
import Todo from "./Todo";
class TodoList extends Component {
render() {
const {todos, toggleTodo} = this.props;
return (
<ul>
{
todos.map(todo => {
return <Todo key={todo.id} {...todo}
onClick={() => {toggleTodo(todo.id)}}/>
})
}
</ul>
);
}
}
export default TodoList;
src->components->Todo.js
import React, { Component } from "react";
class Todo extends Component {
render() {
const { completed, text, onClick } = this.props;
return (
<li
onClick={onClick}
style={{
textDecoration: completed ? "line-through" : "none"
}}
>
{text}
</li>
);
}
}
export default Todo;
src->components->AddTodo.js
import React, { Component } from 'react';
class AddTodo extends Component {
constructor(props) {
super(props);
this.state = {
text: ''
}
}
render() {
return (
<div>
<input value={this.state.text} onChange={this.handleChange}/>
<button onClick={this.handleClick}>Add</button>
</div>
);
}
handleChange = (e) => {
this.setState({
text: e.target.value
})
}
handleClick = () => {
this.props.addTodo(this.state.text);
}
}
export default AddTodo;
src->components->Footer.js
import React, { Component } from "react";
class Footer extends Component {
render() {
const { filter, setVisibilityFilter } = this.props;
return (
<div>
<span>Show:</span>
<button
disabled={filter === "all"}
onClick={() => setVisibilityFilter("all")}
>
All
</button>
<button
disabled={filter === "active"}
onClick={() => setVisibilityFilter("active")}
>
Active
</button>
<button
disabled={filter === "completed"}
onClick={() => setVisibilityFilter("completed")}
>
Completed
</button>
</div>
);
}
}
export default Footer;
注：项目来自慕课网
