内容：React入门
一、react是什么？
react是facebook使用的一个Javascript库
可以用来创建web用户交互界面
MVC中的视图层
官网：https://react.docschina.org/
优点：
效率高
组件化
跨浏览器兼容
虚拟DOM
JSX
报错信息完整清晰（提示）
缺点：不是完整的MVC框架
二、虚拟DOM
在react中，我们执行DOM操作的对象并不是真正的DOM节点，而是react创建的一个轻量级的JS对象，这个对象称为虚拟DOM。
Diff算法，每当数据变化时，都会重新构建整个DOM树，和上一次的DOM树进行对比，根据变化的部分来进行实际的DOM操作。
三、JSX语法糖【重点】
JSX是Javascript和XML，是facebook为react开发的一套语法糖，它是JavaScript的语法扩展，允许HTML与Javascript的混写。
它的目的是增加程序的可读性，从而减少程序代码出错的机会。
它不是一个新的语法，在JSX中，遇到“<>”会解析成HTML，遇到“{}”会解析成JS
四、基本使用
1.引入核心库（React、ReactDOM）、引入babel（编译器）
2.设置一个挂载点（作用范围）
3.ReactDOM.render来渲染页面
var el = <div>
<h1>这是JSX语法糖</h1>
</div>
var app = document.getElementById("app")
ReactDOM.render(el,app)
五、组件【重点】
1.定义方式
(1)es6 类
class 组件名 extends React.Component{
render(){
return(
<div></div>
)
}
}
注意：组件的类名首字母要大写
(2)构造函数
function 组件名(){
return(
<div></div>
)
}
2.组件嵌套
function Index(){
return(
<div>
<h1>Hello，Index组件</h1>
{ /* 通过组件名来使用已定义好的组件 */ }
<Home className="home" />
</div>
)
}
六、脚手架
1.安装
npm install create-react-app -g
2.初始化项目
create-react-app 项目名称
注意：项目名称不能包含中文和空格
3.项目目录结构
myapp
- node_modules 项目依赖目录
- public 项目根目录
- index.html 项目首页
- favicon 页面图标
- mainfest.json 页面配置文件
- src 项目源码（主战场）
- index.js 主入口
- index.css 全局样式表
- App.js 根组件
- App.css 根组件的样式表
- logo.svg 图片
- serviceWorker.js 离线访问服务
- setupTests.js 测试
- .gitignore git忽略规则文件
- package.json 项目依赖配置文件
- package-lock.json 锁定安装时的包的版本
- README.md 项目说明文件
运行流程：
public/index.html>src/index.js>src/App.js
七、常见错误【重点】
1.Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag
只能有一个结束标签：根标签
2.Warning: Invalid DOM property class. Did you mean className?
在jsx中，class属性应该写成className
3.uncaught SyntaxError: Inline Babel script: Unterminated JSX contents
在react中，input、img、br、hr 需要加上闭合
4.Warning: Invalid DOM property for. Did you mean htmlFor?
在react中，for属性应该写成htmlFor
5.Warning: Each child in a list should have a unique "key" prop.
遍历生成元素时，需要给元素指定key属性（key属性不能重复）
6.Uncaught Error: Target container is not a DOM element.
document.getElementById(“元素的id”)
指定的id元素，必须在dom存在
7.Warning: The tag <home> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
react中的组件名，应该是首字母大写的。
8../src/App.js
Attempted import error: './Hello' does not contain a default export (imported as 'Hello').
在脚手架的组件中，定义好组件后，需要导出 export default 类名
网友评论