React 初探 [一] React & JSX 基本介绍和 Hello World

梦里梦外; 2023-03-03 06:20 13阅读 0赞

> 项目中一直使用的是Vue，最近准别去了解了解React，为什么学习呢，因为他也是前端开发很流行的框架，很多公司很多项目在用的框架，扩展自己的技术栈也是今年的目标之一，而且自从经历今年疫情的隔离等，长时间不学习真的会知识焦虑，所以准备向React下手。

### [官网][Link 1] ###

### React 是什么 ###

一句话 React 是 JavaScript 库 ，再详细点就是 用于构建用户界面的 JavaScript 库 ，这是官网最精简的介绍，我的理解是他是JS 库 ，那么JS能干什么他就能干什么，只是有自己的语法，自己的优势，为什么会封装成库，肯定是为了给开发者的福利，让开发实现起来更简单，代码跑起来效率更高，当时使用 jquery 的时候，是不是感觉简化了很多代码，没错React 会有更多的进步。

### JSX ###

JSX 是 React 的装备，但不是必须品，它是JavaScript 的 扩展语法，可以同时包含UI 标签和 JS 逻辑，最终还是会转化成JS 标准DOM 执行，官网有介绍，刚开始熟悉，这种语法还不太了解，只是把UI 和 逻辑放在一块真的有点不习惯。

const vDom = <h1>Hello,world</h1>

上面这行代码就是JSX 语法，变量 vDom 不是一个字符串也不是我们下载模板中的标签，具体什么样来看看

const vDom = <h1>Hello,world</h1>
       const root = document.getElementById('root')
       debugger

debugger 之后 可以分别看下虚拟DOM 和 真实的DOM 都有哪些区别，会稍微有点明白为什么用虚拟dom ，之后再统一修改真实DOM ，其实虚拟DOM 相比较起来真的比较轻量级。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

### 依赖库 ###

以上都是开发环境使用的形式，线上环境往往使用的是压缩的.min 文件

react.js ：react 的核心库

react-dom.js：提供以DOM 相关的功能

babel.min.js ：可以将ES6 语法转换为ES5 语法，也可以对JSX提供支持

### 核心步骤 ###

创建虚拟DOM ===》渲染虚拟DOM

### HelloWorld ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <title>ReactDemo</title>
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    
    <body>
        <div id="root"></div>
        <script type="text/babel">
            // 创建虚拟DOM
            const vDom = <h1>Hello,world</h1>
            const root = document.getElementById('root')
            ReactDOM.render(vDom,root)
            // ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'))
        </script>
    </body>
    </html>

以上不是实现什么功能，而是把React 大体是个什么东西，能怎么做事情，有哪些依赖分享给大家，后续会继续深入学习，目标是敲一个像样的项目。

[Link 1]: https://react.docschina.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20230208/365098e6b15e402dac8d270aef5c4f61.png