react是JavaScript的第三方库文件，想要搭建环境，只需要在页面中引用相关文件就可以达成
1.react.js 核心文件
2.react-dom.js
- web页面的DOM文件 渲染页面中的DOM
- 当前文件依赖于react核心文件
3.babel.js
- es6转换成es5
- JSX语法转换成JavaScript
下载
1.官网
2.cdn
3.npm
npm init -y 初始化
react核心包 npm i react --save
react-dom npm i react-dom --save
babel npm i babel-standalone --save
创建hello.html
<!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.min.js"></script>
</head>
<body>
<!-- 创建根节点容器 -->
<!-- 一个页面中需要有一个根节点，这个节点下的内容就会被react所管理 -->
<div id="demoReact"></div>
<!-- 写定script的类型 -->
<script type="text/babel">
// jsx = JavaScript xml
// JavaScript的扩展语法
// 优点：
// 1.执行的效率更快
// 2.类型更安全，编译的过程中就能及时的发现错误
// 3.在使用jsx的时候编写模板会更加简单快捷
// 注意：jsx中HTML标签必须按照m3c标准书写并闭合
let jsx = <h1>hello</h1>;
ReactDOM.render(jsx, document.getElementById('demoReact'))
</script>
</body>
</html>
网友评论