1、 README.md（markdown文件 ，需要使用markdown语法）
项目说明文件
2、package.json
关于项目的介绍
还有相关指令 npm....
npm run start...
3、.gitignore
不想传到git的文件可以定义在里面
#注释
之后是相对路径
4、icon 左上角小图标
5、index.html 模板 网页显示的内容
6、src目录 （项目源代码）
运行入口：index.js 负责引入和渲染
引入registerserciceworker from './registerserviceworker'; 借助网页写app
用户断网后网页不会消失
自动化测试：app.test.js
manifest.json 配置PWA快捷方式的图标 网址跳转 专题颜色等
reactdom.render(<app />,document.getelementbyid('root'));
将app组件挂载到root节点下，则在div为root的模块下会显示app组件
使用jsx语法(带标签）必须要引入react
import react from 'react';
自定义组件开头必须大写
npm run start
render要求所有小组件必须包含在一个大的div中
react里有一个fragment占位符可以替代最外层div标签
先引入 <Fragment></Fragment>
引入react(及其
import React,{Component,Fragment|from'react';constructor构造函数（最先被执行
super(props)//调用父类构造函数实现输入框实时更新功能
this.state={//设置状态（数据
inputValue:' ',//输入框里的值
list:[]//一个列表数组
}
//将inputValue与input框进行绑定
<input value={this.state.inputValue} />
//还需要加入事件监听
<input
value={this.state.inputValue}
onChange={this.handleInputChange} />
handleInputChange(e){
//不能直接通过赋值改变state 但可以通过setState改变
console.log(e.target);//e.target是结点 e.target.value是值
console.log(this);//发现指向undefined 没被定义 所以需要绑定
}
//绑定后：
<input
value={this.state.inputValue}
onChange={this.handleInputChange.bind(this)} />
//加入setState后 实现输入框更改的更新
handleInputChange(e){
this.setState({
inputValue:e.target.value
})
}实现点击提交按钮后显示在下方列表功能
//render里的
<ul>
{this.state.list.map((item,index) =>{//循环遍历 item是内容
return <li>{item}</li> }) }
</ul>
<button onClick={this.handleBtnClick.bind(this)}>submit</button>
handleBtnClick(){
this.setState({
list:[...this.state.list,this.state.inputValue]//ES6展开运算符 展开之前指代的那个数组
//为了美观，需要把之前输入框清空
inputValue:''
}
//报警告 原因是未设key值
<li key={index}>{item}</li> //注：尽量不要设index为key值实现删除功能
补充知识：
JavaScript splice() 方法：splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
该方法会改变原始数组。
语法
arrayObject.splice(index,howmany,item1,.....,itemX)
参数 描述 index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, ..., itemX 可选。向数组添加的新项目。 返回值
类型 描述 Array 包含被删除项目的新数组，如果有的话。 说明
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
<ul>
{this.state.list.map((item,index) =>{//循环遍历 item是内容
return (
<li onClick={this.handDelete.bind(this，index)}>{item}</li> }) }//需要传递index下标版
</ul>)
handDelete(index){
const list=[...this.state.list]; //拷贝了一份新的数组
list.splice(index,1); //前面会有这个函数知识的补充 将下标为index的一项删除
this.setState({ //改变页面
list:list
})
}
immutable：react不允许改变State 只能改变其副本
大写字母开头为组件
JSX中的注释：
render()中
{/* **** */}
以及
{
// ****
}建立一个文件 style.css
在js文件中引入css文件
import './style.css'react中render中className=class名
实现输入框输入标签转译的效果
React
dangerouslySetInnerHTML - 将HTML字符串解析为html样式显示在table的扩展中
<li>属性中加入
dangerouslySetInnerHTML={{__html:item}}
点击标签光标移动到输入框
render中return中
<div>
<label for="insertt">内容：</label>
<input id="insertt">但会警告
原因是react中label中htmlFor替换for 以免混淆