内容：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 = var app = document.getElementById("app") ReactDOM.render(el,app) 五、组件【重点】 1.定义方式 (1)es6 类 class 组件名 extends React.Component{ render(){ return( ) } } 注意：组件的类名首字母要大写 (2)构造函数 function 组件名(){ return( ) } 2.组件嵌套 function Index(){ return( ) } 六、脚手架 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 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 类名

本文章由javascript技术分享原创和收集