React学习笔记

React是构造用户界面的JavaScript库,就是负责视图层的,只负责视图的渲染,其特点是声明式,组件化 安装react npm i react react-dom 必需:react和react-dom react包是提供创建元素,组件等功能,是核心(废话) react-dom包提供DOM相关的功能 通常还需要导入babel来解析jsx(注意:在浏览器使用babel编译jsx效率很低,babel内嵌了对于jsx的支持),babel可以将es6语法转化为es5,方便运行在不支持es6的浏览器上 也可以通过引入src文件的方式引入cdn文件或者本地文件 第一个例子 <script type="text/babel"> ReactDOM.render( <h1>hallo,react!!!</h1>, document.getElementById("app") ); </script> 使用babel解析jsx,react官方推荐使用jsx,因为使用jsx渲染dom简单明了 jsx是一种JavaScript语法扩展,例如: const hallo = <h1>hallo</h1>; 像上面这种就是jsx,jsx本身是一个表达式,经过编译(例如babel)后jsx表达式会转换成JavaScript对象(注意:jsx不是标准的ECMAScript语法,是语法的扩展,不进行编译处理,直接使用是会报错的) 在jsx中插入JavaScript表达式,用大括号包含起来,例如: function hallo(yes){ return yes.name; } const yes = { name: "react" }; const hallo = <h1>hallo,{hallo(yes)}</h1>; ReactDOM.render( hallo, document.getElementById("app") ); 当然react并没有强制要求必须使用jsx,例如: const hallo = React.createElement("h1",{class: "main"},React.createElement("p",null,"hallo word!!!")) /* 上面提供了三个参数,分别是元素名称,元素属性,元素的子节点 */ ReactDOM.render(hallo,document.getElementById("app")) /* 上面提供了个两个参数,分别是要渲染的react元素,挂载点*/ react脚手架 初始化项目 npx create-react-app app 启动项目(在项目根目录执行) npm start或者yarn start 模块化导入react...

2021-07-09 · 6 min · Me