React学习-开篇

待我称王封你为后i 2022-11-29 11:52 144阅读 0赞

### **说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github.com_Brucewu998_react.js-learning]，笔者会不断更新这些代码，本篇代码在目录下demo-01文件夹下。** ###

### 介绍 ###

1.  React官网对自己最明显的介绍是：**声明式**、**组件化**和**一次学习随处编程**这三个标签，官网对其的解释是：
    
    1.  **声明式**：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
    2.  **组件化**：创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。
    3.  **一次学习，随处编写**：无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码React 还可以使用 Node 进行服务器渲染，或使用 **[React Native][]** 开发原生移动应用。
2.  学习React需要清楚的是，一切皆组件，和Vue一样，可以将一个页面拆分成组件，然后抽象，可以组装成不同的页面；笔者之前一直用的是Vue，所以对于组件化的思想有一定的理解，所以当你对组件化思想有一定的理解后，对React组件化的概念也可以很快掌握。
3.  相对于Vue来说，React所用的模板语法并不是类似于Vue的那种HTML模板语法，而是一种称之为JSX的语法， JSX是一个JavaScript的语法扩展，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。那么react为什么要使用JSX语法呢？因为：React认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。我们不一定要使用JSX， 但其具备以下优点:
    
    1.  JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
    2.  它是类型安全的，在编译过程中就能发现错误。
    3.  使用 JSX 编写模板更加简单快速。
    4.  代码示例：这里注意一般在JSX的语法中，原来的HTML的class类名属性应该换成className，因为class与ES6种的class关键字冲突，

const div = <div className="container">Hello, React.js!</div>

### **安装** ###

可以使用远程链接安装：

*  开发环境

*   生产环境：

亦可自己将文件下载下来保存在本地，然后引用即可。最后我们还需要一个将JSX语法编译为浏览器可执行的js代码的库：

### 开始编程： ###

demo1.html:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo-01</title>
        <script src="build/react.dev.js"></script>
        <script src="build/react-dom.dev.js"></script>
        <script src="build/brower.min.js"></script>
    </head>
    <body>
        <div id="demo-1" class="demo-1"></div>
        <script type="text/babel"> 
            let str = 'Hello, React.js!'
            ReactDOM.render(
                <h1>{ str }</h1>,
                document.getElementById('demo-1')
            ); // 
        </script>
    </body>
    </html>
    <style>
        .demo-1 {
            display: flex;
            flex-direction: row;
            justify-content: center;
            background: rgba(0, 0, 0, .3)
        }
    </style>

注意，由于使用了JSX语法， 所以必须将含有JSX代码的script标签的类型设置为：type="text/babel",让babel编译JSX, 否则就会运行出错。 ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。上面的示例是将一个<h1>标签插入demo-1的节点下，运行结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70][]

下一篇：**[React学习之元素渲染][React]**

[https_github.com_Brucewu998_react.js-learning]: https://github.com/Brucewu998/react.js-learning
[React Native]: https://reactnative.dev/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70]: /images/20221124/4f3725db4458440c8d2cc1a8a47ff8f8.png
[React]: https://blog.csdn.net/qq_37338983/article/details/108161726