react初步认识，核心库下载，jsx简介

1. 英文官网： https：// reactjs.org/

2.中文官网：https://react.docschina.org/

3.react的特点：

        1）声明式编码。

        2）组件化编码。

        3）React Native 编写原生应用。

        4）高效（优秀的diffing算法。

4.react高效的原因

        1）使用虚拟DOM，不总是直接操作页面真是dom。

        2）DOM Diffing算法，最小化页面重绘。

5.关于虚拟dom

        1）.本质就是一个Object对象

        2）虚拟Dom比较轻，可以使用debugger调试看看，真实DOM比较重，真实DOM上会绑定很多属性。

        3）虚拟dom最终会被React转化为真实Dom，呈现在页面上。

创建虚拟dom的两种方式：

相关包地址：

核心库（react.development.js）

核心库压缩版

react-dom.development.js

react-dom压缩版

babel

        方式一：采用jsx来创建

  <!-- 1.准备好一个容器 -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">  /*此处一定要写babel*/
    // 2、创建虚拟dom
    const VDOM = <h1>Hello, React</h1> /*此处一定不要写引号，因为不是字符串*/

    // 3.渲染虚拟dom到页面    ReactDOM.render(虚拟DOM， 容器)
    ReactDOM.render(VDOM, document.getElementById('test'))

       方式二：采用javascript来创建

  <!-- 1.准备好一个容器 -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">  /*此处一定要写babel*/
    // 2、创建虚拟dom
    const VDOM = <h1>Hello, React</h1> /*此处一定不要写引号，因为不是字符串*/

    // 3.渲染虚拟dom到页面    ReactDOM.render(虚拟DOM， 容器)
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
 

6.JSX简介

        可以安全地在jsx中插入用户输入内容，因为React DOM在渲染所有输入内容之前，默认会进行转义，所有的内容在渲染之前都被转换成了字符串。可以确保不会注入那些并非自己明确编写的内容。可以防止XSS（cross-site-scripting，跨站脚本）攻击。

语法规则：

        1）定义虚拟dom时，不要写引号，且只有一个根标签；

        2）标签中混入js表达式时要用：{js表达式}；

        3）样式的类名指定不能用class（避免跟js中class混），而是需要用className；

        4）内联样式，要用style={{key： value}}的形式，key需要使用小驼峰命名法；

        5）标签首字母：

                （1）若小写字母开头，默认为html元素，若html中没有对应同名元素，则会报错；

                （2）若大写字符开头，react就去渲染对应的组件，若组件没有定义，则报错。