React入门（二）基本认识和JSX语法

---

（一）认识 React

1、什么是React

• React 是一个声明式，高效且灵活的用于构建用户界面的JavaScript 库；
• 从MVC的角度来看，React仅仅是视图层（V），也就是只负责视图的渲染；
• 起源于Facebook的内部项目，后来用于架设Instagram的网站。于2013年5月开源；
• React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

2、React 的特点

1. 声明式设计：用类似写html标签的形式来创建用户页面，它通过数据驱动视图变化，若数据发生变化它能很快更新dom；
2. 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互；
3. 灵活：可以与已知的框架或库很好的配合；
4. JSX：是JS语法的扩展，不一定使用，但建议用，使用 JSX，代码的可读性更好；
5. 组件化：（react核心）封装组件可以实现复用，也可以使业务逻辑看起来更清晰，还能使整个项目修改起来更方便，节省时间
6. 单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单

3、React 实例

步骤1：添加一个 DOM 容器到 HTML

<div id='root'></div>

步骤2：引入react 文件

  <!-- react核心库 -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <!-- react扩展库 操作dom元素-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- 把jsx语法转js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

步骤3：创建虚拟DOM

通过JS创建虚拟DOM

 <script>
        // 通过JS来创建虚拟DOM
        const V_DOM = React.createElement("p",{title:'react'},React.createElement('span',{},'hello,react~'))
        ReactDOM.render(V_DOM,document.getElementById('root'))
 </script>

通过JSX创建虚拟DOM
其中需要注意的是，我们的script标签中，type要写成【text/babel】，我们通过babel来把JSX转换成JS

<script type="text/babel">
    // 1.创建虚拟DOM
    const V_DOM = (
        <h1>
            <span>
                hello,react~
            </span>
        </h1>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(V_DOM,document.getElementById('root')) </script>

（二）JSX 语法

1. 定义虚拟DOM时不要用引号。
2. 标签混入JS表达式需要用{ } 。
3. 样式的类名指定不能使用class，使用className。
4. 内敛样式要使用style={{key:value}}包裹
5. 不能有多个根标签，只能有一个根标签
6. 标签必须闭合，自闭合也行；
7. 标签首字母
   若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
   若大写字母开头,react就去渲染对应组件,若组件没有定义,则报错。

1、注释

写在花括号里

ReactDOM.render(
    <div>
    <h1>hello</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('root')
);

2、数组

JSX 允许在模板中插入数组，数组自动展开全部成员

var arr = [
  <h1>老师</h1>,
  <h2>同学</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('root')
);

（三）小练习

需求： 遍历数组信息并输出到页面上

const data = ['A','B','C','D']
const V_DOM = (
    <div>
        <ul>
            {
                data.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })
            }
        </ul>
    </div>
)
ReactDOM.render(V_DOM, document.getElementById('root'));