基础知识
-
Facebok推出
-
函数式编程
-
React Fiber (16版本)
-
与Vue.js对比
环境搭建
-
引入.js文件来使用
-
通过脚手架工具来编码
-
GRUNT
-
webpack
-
Create-react-app(官方)
-
-
安装
-
下载nodejs (LTS 稳定版 Current 最新版)
-
npm -v
-
node -v
-
npm install -g create-react-app
-
create-react-app todolist 生成项目目录
-
cd todolist
-
npm run start (出现页面就安装成功了)
-
工程目录简介
-
yarn.lock 项目依赖安装包
-
Readme.md 项目介绍
-
package.json node包 一些项目介绍和命令
-
.gitgnore 不希望上传到github的内容
-
node_modules 脚手架写好的一些依赖包和第三方模块
-
public
-
favicon.ico 网页标题图标
-
index.html 项目模板 *
-
manifest.json
-
定义了网页快捷方式,图标 ....
-
-
-
src 项目源代码
-
index.js 项目入口 *
-
App.js *
-
registerServiceWorker.js PWA 借助网页写手机APP应用
-
网页断网不影响上次访问的页面 PWA 做到了保存
-
-
App.test.js 自动化测试文件
-
组件
-
组件定义
-
App.js
import React,{ Component } from 'react';
等价于
import React from 'react';
const Component = React.Component
class App extends Component{
render(){
return(
<div>
hello world
</div>
)
}
}
export default App;
等价于
import React from 'react';
class App extends React.Component{//继承组件类
render(){//展示返回内容 渲染
return(//返回的内容
//JSX语法
<div>
hello world
</div>
)
}
}
export default App;//导出组件
-
index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';//引入App.js
ReactDom.render(<App />, document.getElementById('root'));
等价于
import React from 'react';//编译 JSX语法
import {render} from "react-dom";
import App from "./App";//引入App.js组件
render(<App/>,document.getElementById("root"));//将App挂载到id 为 root 节点下
//<App/> JSX语法
JSX语法
-
js里写的html标签和自定义标签
-
自定义标签 字母开头大写
TodoList功能
-
代码
-
index.js
import React from 'react';//编译 JSX语法
import {render} from "react-dom";
import TodoList from "./TodoList";//引入TodoList.js组件
render(<TodoList/>,document.getElementById("root"));//将App挂载到id 为 root 节点下
-
TodoList.js
import React,{Fragment} from 'React';//引入Fragment 占位 替代外层的div
class TodoList extends React.Comonent {
render(){
return(//JSX语法中外层需要一层 包裹整体的元素
<Fragment>
<div><input /><button>提交<button></div>
<ul>
<li>学英语</li>
<li>Learning React</li>
</ul>
</Fragment>
)
}
}
export default TodoList;
React中的响应式设计思想和事件绑定
-
TodoList.js
-
原始dom思想 操作dom
-
绑定单击事件
-
获取input的value值
-
创建节点,添加节点文本
-
找到需要添加的父级节点
-
添加新元素
-
-
React思想 操作数据
-
根据数据变化 自动生成节点
-
定义数据项
-
一组存input, 一组存显示的li数据
-
import React,{Fragment} from 'React';//引入Fragment 占位 替代外层的div
class TodoList extends React.Comonent {
constructor(props){//构造函数
super(props);
this.state={//组件的状态
inputValue:'Hello!!',
list:[]
}
}
render(){
return(//JSX语法中外层需要一层 包裹整体的元素
<Fragment>
//绑定input的Value 需要{} 固定写死了 +事件onChange来解决 *
<div>
<input
value={this.state.inputValue}
onChange={this.handleInputChange}
//可以使用 bind 改变this指向 TodoList 不建议使用
onChange={this.handleInputChange.bind(this)}
/><button>提交<button></div>
<ul>
<li>学英语</li>
<li>Learning React</li>
</ul>
</Fragment>
)
}
handleInputChange =(e)=>{//使用箭头函数 接收事件e 改变this指向 推荐 *
console.log(e.target.value)//拿到新的内容
//改变state的值 使用setState方法
this.setState({
inputValue:e.target.value,
})
}
}
export default TodoList;
实现新增删除功能
-
TodoList.js
import React,{Fragment} from 'React';//引入Fragment 占位 替代外层的div
import "./style.css";//引入css
class TodoList extends React.Comonent {
constructor(props){//构造函数
super(props);
this.state={//组件的状态
inputValue:'Hello!!',
list:[],
}
}
render(){
return(//JSX语法中外层需要一层 包裹整体的元素
<Fragment>//是一个组件
//绑定input的Value 需要{} 固定写死了 +事件onChange来解决 *
<div>
<label htmlFor="insertArea">输入内容</label>//htmlFor 替代for
<input
id="insertArea"
className="input"//class是关键词 使用className替代
value={this.state.inputValue}
onChange={this.handleInputChange}
//可以使用 bind 改变this指向 TodoList 不建议使用
onChange={this.handleInputChange.bind(this)}
/>
<button
onClick={this.handleBtnClick}
>提交
</button>
</div>
<ul>
//进行循环遍历
{//花括号包裹
this.state.list.map((item,index)=>{
return (// key={index} 解决没有key报错的问题 唯一标识符
<li
key={index}
//delete 传递下标
onClick={(index)=>{
this.handleItemDelete(index)
}}
//等价于
onClick={
this.handleItemDelete.bind(this,index)
}
dangerouslySetInnerHtml={{
__html:item
}}//可以显示输入的标签不转义 比如显示h2样式
>
//{item}
</li>
)
})
}
</ul>
</Fragment>
)
}
handleInputChange =(e)=>{