React入门

CherishTheYouth

发布于 2020-07-15 10:18:59

9650

发布于 2020-07-15 10:18:59

文章被收录于专栏：Vue技术实践Vue技术实践

React 开发环境搭建

需要什么文件？

只需要引入以下3个js文件即可：

react.js : 核心文件，基础文件
react-dom.js : 渲染页面中的DOM,依赖于react.js文件，引用时必须在react.js的后面引用
babel.js : ES6语法代码转为ES5，将JSX语法（浏览器不认识）转化为JavaScript语法（浏览器认识）

如何获取这三个文件？

使用npm的方式获取

注意：使用npm需要先安装npm，也就是安装node.js，安装node.js时会顺带安装npm 查看node.js版本： node -v 查看npm版本： npm -v

react.js npm i react --save
react-dom.js npm i react-dom --save
bable npm i babel-standalone --save

具体操作流程：

（1）新建项目文件夹：

（2）win+R 打开控制台，cd进入项目文件夹

（3）输入如下命令行，创建package.json文件

npm init -y

（3）下载react.js

在项目文件目录下，使用命令行 npm install react --save 或 npm i react --save

使用npm 比较慢，也可使用 cnpm进行下载，下载镜像不同而已 cnpm install react --save

（4）下载react-dom.js

同上 cnpm install react-dom --save （5）下载babel.js

新建html文件，引入三大文件

（1）新建hello.html文件

（2）引入核心文件react.js

在 react -> umd -> react.development.js

（3）引入react-dom.js和babel.js文件

注意：实际上是引入的文件是react-dom.development.js文件

创建根节点

创建dom根节点：一个页面下需要有一个根节点，这个节点下的内容就会被react所管理，后续内容都在根节点下，一个页面只有一个根节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules\react\umd\react.development.js"></script>
    <script src="node_modules\react-dom\umd\react-dom.development.js"></script>
    <script src="node_modules/babel-standalone/babel.js"></script>
</head>
<body>
        <!--
    创建dom根节点，一个页面下需要有一个根节点，这个节点下的内容就会被react所管理
    后续内容都在根节点下，一个页面只有一个根节点
    -->
    <div id="root-dom-react">

    </div>
</body>
</html>

JSX

示例：

let myDom = <h1>你好啊，React!</h1>; //JSX格式： JavaScript和xml结合的一种格式

优点：

JSX格式： JavaScript和xml结合的一种格式

1.执行的效率更快
2.是类型安全的，编译的过程中就能及时的发现错误
3.在使用jsx的时候编写模板会更加简单和快速

简单示例和结果展示

代码：

<body>
        <!--
    创建dom根节点，一个页面下需要有一个根节点，这个节点下的内容就会被react所管理
    后续内容都在根节点下，一个页面只有一个根节点
    -->
    <div id="root-dom-react">

    </div>
</body>
</html>

<script type="text/babel">
    let myDom = <h1>你好啊，React!</h1>; //JSX格式 ： JavaScript和xml结合的一种格式
    /*
    JSX格式 ： JavaScript和xml结合的一种格式
    优点：
    1.执行的效率更快
    2.是类型安全的，编译的过程中就能及时的发现错误
    3.在使用jsx的时候编写模板会更加简单和快速
    */ 
    ReactDOM.render(myDom,document.getElementById("root-dom-react"));
</script>

说明：