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

常用网站

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开发环境搭建

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

运行示例

猜你喜欢