React 基础
React 是什么
React是构建用户界面的JavaScript库 推荐使用脚手架方式
React 的特点
声明式 组件 学习一次，随处使用
React 创建引入指令
npm i react react-dom
React 创建脚手架指令
初始化项目： 推荐使用：npx create-react-app my-react npm init react-app my-react yarn create react-app my-react 启动项目：npm start npx的意义：无需安装脚手架包，可以直接使用这个包提供的命令
React.createElement()说明(知道就行)
创建react元素 参数一：元素名称 参数二：元素属性 参数三及以后：元素子节点 const title = React.createElement('h1',{title:"我是标题"},'Hello React')
ReactDOM.render()说明(重点)
渲染react元素(重点) 参数一：要渲染的react元素 参数二：DOM对象，用于指定渲染到页面中的位置 ReactDOM.render(title,document.querySelector('#root'))
JSX 使用
createElement()的问题
繁琐不简洁 不直观，无法一眼看出所描述的结构 不优雅，用户体验不爽
JSX 简介
JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML (HTML) 格式的代码 优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率 推荐使用JSX语法创建React元素 写JSX就跟写HTML 一样更加直观，友好 JSX语法更能体现React声明式的特点(描述UL长什么样子)
JSX 的使用步骤：
1.使用JSX创建react元素 const title = <h1>Helll JSX</h1> 2.渲染react元素 ReactDOM.render(title,document.querySelector('#root'))
为什么脚手架中可以使用JSX语法？
JSX 不是标准的 ECMAScript 语法，他是 ECMAScript 语法的扩展 需要使用 babel 编译处理后，才能在浏览器环境中使用 create-react-app 脚手架中已经默认有该配置，无需手动配置 编译 JSX 的语法包为：https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js
JSX 注意点
React元素的属性名使用驼峰命名法 特殊属性名：class -> className、for -> htmlFor、tabindex -> tabindex 没有子节点的React元素可以用 /> 结束(单标签) 推荐：使用小括号包裹 JSX，从而避免 JS 中的自动插入分号陷阱 const title = (<h1>Helll JSX</h1>)
在 JSX 中使用 JavaScript 表达式
嵌入 JS 表达式： 数据存储在JS中 语法：{JavaScript表达式} const name = '小明' const title = (<h1>你好，我叫：{name}</h1>)
JSX 的条件渲染
场景：Loading的效果 条件渲染：根据条件渲染特定的 JSX 结构 可以使用if/else或三元运算符或逻辑与运算符来实现
JSX 的列表渲染
如果要渲染一组数据，应该使用数组的 map() 方法 注意：渲染列表时应该添加 key 属性，key属性的值要保证唯一 原则：map() 遍历谁，就给谁添加 key 属性 注意：尽量避免使用索引号作为 key
JSX 的样式处理
行内样式 -- style 类名 -- className
JSX 总结
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
- JSX优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
const element = <h1>Hello, world!</h1>;
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。
它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
JSX 是在 JavaScript 内部实现的。
我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：
总结：
以上就是 React 中基础和 JSX 的使用，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
