hello 大家好啊

利用端午假期 学习了 React的基础 端午假期不浪费 好好学习

接下来 我们开始学习吧

什么是React呢??

  1. React 是一个用于构建用户界面的 JAVASCRIPT 库。

  2. React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

  3. React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它

    React的特点

    1. 独特的JSX语法 是JavaScript + XML的语法
    2. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
    3. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
    4. 声明式设计 −React采用声明范式，可以轻松描述应用。

      第一个React的实例

      <script type="text/babel">
const  ele = <h1>hello React</h1>
  ReactDOM.render(
      ele,document.getElementById("test")
)
</script>

      看到这里你可能感到迷惑
      React使用了独特的JSX语法

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

const ele = <h1>hello world</h1>

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

将元素渲染到 DOM 中

首先我们在一个 HTML 页面中添加一个 id="test" 的

: 
<div id="test"></div>

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

const ele = <h1>Hello, world!</h1>;
ReactDOM.render(
    ele,
    document.getElementById('exa')
);

JSX

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：

  1. JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
  2. 它是类型安全的，在编译过程中就能发现错误。
  3. 使用 JSX 编写模板更加简单快速。

    我们可以看看一下语法代码

    const element = <h1>Hello, world!</h1>;

    这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。

它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。

JSX 是在 JavaScript 内部实现的。