react脚手架和JSX

<!--1. react概述 -->
React 是一个用于构建用户界面的 JavaScript 库。
1. React 概述
1.1 什么是 React
如果从 MVC 的角度来看，React 仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了
完整的 M 和 C 的功能。

<!-- 2.React 的特点 -->
1. 声明式
你只需要描述 UI（HTML）看起来是什么样，就跟写HTML一样
React 负责渲染 UI，并在数据变化时更新 UI 
    const jsx = <div className="app">
        <h1>Hello React! 动态变化数据：{count}</h1>
        </div>

<!-- 3.React 的安装 -->
npm i react react-dom
    react 包是核心，提供创建元素、组件等功能
    react-dom 包提供 DOM 相关功能等

<!-- 4. React 的使用 -->
1. 引入 react 和 react-dom 两个 js 文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
2. 创建 React 元素
3. 渲染 React 元素到页面中
    <div id="root"></div>
    <script>
        const title = React.createElement('h1', null, 'Hello React')
        ReactDOM.render(title, document.getElementById('root'))
    </script>
    
<!-- 5.方法说明 -->
React.createElement() 说明（知道）  //1. 繁琐不简洁。 2. 不直观，无法一眼看出所描述的结构。 3. 不优雅，用户体验不爽。
    // 返回值：React元素
    // 第一个参数：要创建的React元素名称
    // 第二个参数：该React元素的属性
    // 第三个及其以后的参数：该React元素的子节点
    const el = React.createElement('h1', { title: '标题' }, 'Hello React')

ReactDOM.render() 说明
    // 第一个参数：要渲染的React元素
    // 第二个参数：DOM对象，用于指定渲染到页面中的位置
    ReactDOM.render(el, document.getElementById('root'))

<!-- 6.使用 React 脚手架初始化项目 -->
1. 初始化项目，命令：npx create-react-app my-app
2. 启动项目，在项目根目录执行命令：npm start

<!-- 7.在脚手架中使用 React -->
1. 导入 react 和 react-dom 两个包。
    import React from 'react'
    import ReactDOM from 'react-dom'
2. 调用 React.createElement() 方法创建 react 元素。
3. 调用 ReactDOM.render() 方法渲染 react 元素到页面中。

------------------------------------------------------------------------------------

<!-- 1.JSX 简介 -->
JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码。
优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率
React 完全利用 JS 语言自身的能力来编写UI，而不是造轮子增强 HTML 功能。

<!-- 2. 使用步骤 -->
1. 使用 JSX 语法创建 react 元素
    const title = <h1>Hello JSX</h1>
2. 使用 ReactDOM.render() 方法渲染 react 元素到页面中
    ReactDOM.render(title, root)

<!-- 3.为什么脚手架中可以使用 JSX 语法？ -->
1. JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。
2. 需要使用 babel 编译处理后，才能在浏览器环境中使用。
3. create-react-app 脚手架中已经默认有该配置，无需手动配置。
4. 编译 JSX 语法的包为：@babel/preset-react 。

<!-- 4.注意点 -->
1. React元素的属性名使用驼峰命名法
2. 特殊属性名：class -> className、for -> htmlFor、tabindex -> tabIndex 。
3. 没有子节点的React元素可以用 /> 结束 。
4. 推荐：使用小括号包裹 JSX ，从而避免 JS 中的自动插入分号陷阱。
    const dv = (
    <div>Helo JSX</div>  // 使用小括号包裹 JSX
    )

<!-- 5.嵌入 JS 表达式 -->
数据存储在JS中
语法：{ JavaScript表达式 }
注意：语法中是单大括号，不是双大括号！
    const name = 'Jack'
    const dv = (
    <div>你好，我叫：{name}</div>
    )

2.注意点
    单大括号中可以使用任意的 JavaScript 表达式
    JSX 自身也是 JS 表达式
    注意：JS 中的对象是一个例外，一般只会出现在 style 属性中
    注意：不能在{}中出现语句（比如：if/for 等）
        const h1 = <h1>我是JSX</h1>
        const dv = (
        <div>嵌入表达式：{h1}</div>
        )

<!-- 6.JSX 的条件渲染 -->
场景：loading效果
条件渲染：根据条件渲染特定的 JSX 结构
可以使用if/else或三元运算符或逻辑与运算符来实现
    const loadData = () => {
        if (isLoading) {
        return <div>数据加载中，请稍后...</div>
        }
        return (
        <div>数据加载完成，此处显示加载后的数据</div>
        )
    }
    const dv = (
    <div>
    {loadData()}
    </div>
    )

<!-- 7.JSX 的列表渲染 -->
如果要渲染一组数据，应该使用数组的 map() 方法
 注意：渲染列表时应该添加 key 属性，key 属性的值要保证唯一
 原则：map() 遍历谁，就给谁添加 key 属性
 注意：尽量避免使用索引号作为 key
    const songs = [
    {id: 1, name: '痴心绝对'},
    {id: 2, name: '像我这样的人'},
    {id: 3, name: '南山南'},
    ]
    const list = (
        <ul>
        {songs.map(item => <li key={item.id}>{item.name}</li>)}
        </ul>
    )

<!-- 8.JSX 的样式处理 -->
1. 行内样式 —— style
    <h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
        JSX的样式处理
    </h1>
2. 类名 —— className（推荐）
    <h1 className="title">
        JSX的样式处理
    </h1>