欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-05-31 18:26:14
...

常用网站

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>

使用react 开发者调式工具— chrome 插件 .crx

  • react-developer-tool

点击获取 –》工具链接，需要*

运行示例

注意：需要在localhost环境下打开。

你可以使用npm 安装http-server。

npm install http-server -g

安装之后，命令行中输入：

http-server

即可在当前目录下建立本地服务器。

相关标签： React 安装环境

上一篇： React开发环境搭建

下一篇： 搭建 webpack、react 开发环境（一）

推荐阅读