只需要引入以下3个js文件即可:
使用npm的方式获取
注意:使用npm需要先安装npm,也就是安装node.js,安装node.js时会顺带安装npm 查看node.js版本 : node -v 查看npm版本 : npm -v
具体操作流程:
(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
(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>
示例:
let myDom = <h1>你好啊,React!</h1>;
//JSX格式 : JavaScript和xml结合的一种格式
优点:
JSX格式 : JavaScript和xml结合的一种格式
代码:
<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>
说明:
ReactDOM.render(参数1,参数2); 参数1:所定义的jsx格式的变量 参数2:目标div 作用:将参数1渲染到参数2所在div
运行结果:
本文章仅作测试使用,从其他编辑器复制过来的,图片无法显示。