【React】归纳篇（一）基本使用 React开发环境搭建

蟹蟹蟹风流

已于 2022-04-15 14:38:33 修改

阅读量1.3k

点赞数 2

分类专栏： React | Vue 文章标签： React 安装环境

于 2018-08-30 20:56:01 首次发布

本文链接：https://blog.youkuaiyun.com/ImagineCode/article/details/82227719

版权

React | Vue 专栏收录该内容

30 篇文章

订阅专栏

博客介绍了React开发常用的三个必要文件，包括核心库、操作DOM的扩展库和解析JSX语法的库。还提及使用React开发者调试工具chrome插件，需翻墙获取链接。运行示例要在localhost环境下打开，可通过npm安装http - server建立本地服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
常用网站

https://reactjs.org/docs/getting-started.html
https://react.docschina.org/
https://www.bootcdn.cn/

常用三个文件

//react 核心库 [必要]

react.development.js

<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>

//专门用于操作DOM的react扩展库 [必要]

react-dom.development.js

<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>

//es6->es5；解析JSX语法代码转为纯JS语法代码的库，写的时候使用JSX,实际运行的时候是JS

babel.min.js

<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel"> //注意是babel，即告诉babel去解析JSX代码
        //1、创建虚拟DOM元素对象
        var vDom = <h1>Hello React</h1>    //不是字符串，一种JSX语法
        //2、将虚拟DOM渲染到页面真实DOM容器中
        ReactDOM.render(vDom,document.getElementById('test'))// 将虚拟DOM-vDom 插入到test div中，注意 ReactDOM的写法
    </script>
</body>
</html>