首先创建一个文件夹在文件夹中创建index.html文件
在此之前需要电脑已安装node与npm
首先按住 shift + 鼠标右键 → (按下)在此处打开命令行窗口 进入命令行窗口
或者 win + R 键 输入cmd 进入命令行窗口
输入 ：node -v 与 npm -v 查看有无安装node与npm，没有则需要安装：以下证明已安装
若没安装 以下是博友安装方法：
https://blog.csdn.net/qq_33362864/article/details/80431162
之后使用VScode打开该文件夹→点击左下角的感叹号→打开终端
VScode编辑器下载地址：https://code.visualstudio.com/
1.安装配制文件
npm init -y //安装配制文件， 里面的"main": "index.js"是入口文件
2.安装babel.js
npm i babel-standalone -D //-D 开发环境下；
3.安装react的库与虚拟DOM 渲染页面时需要使用它们进行渲染；
npm i react react-dom -D //两个同时安装
接下来我们开始在index.html文件内引入并使用它们就完成啦
<!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>
<style></style>
</head>
<body>
<!-- 所有的页面代码都是放在这里面 -->
<div id='app'></div>
<!-- 用于解析jsx的代码 babel引用应在前面 -->
<script src="./node_modules/babel-standalone/babel.js"></script>
<!-- 引用react模块，用于构建用户界面的 JavaScript 库 UI库 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- 操作VM DOM 加载顺序必须先引入react再引入react-dom-->
<script src='./node_modules/react-dom/umd/react-dom.development.js'></script>
<!-- 引入script类型为babel样式 这样可以解析里面的jsx代码 -->
<script type='text/babel'>
//将标签样式先放入element内再放入ReactDOM.render
const element = <div>
{
// {} 是插值符号
// 这里面可以写函数 变量 注释等
}
<h2> hello react~~ </h2>
<h2> hello jsx~~ </h2>
<p> today, we are learn jsx from now on; </p>
</div>;
// const element1 = <h1> hello react </h1>
ReactDOM.render(
element, //需渲染的标签 只能是一个标签嵌套
document.getElementById('app') //渲染到id=app的标签中
)
</script>
</body>
</html>
运行结果如下：
知识点终结：
{}是插值符号
插值符号里面可以写些什么内容：
1.表达式
2.数组
3.字符串
4.即时函数；
(function(){})
function kaidy(){}
kaidy()
5.布尔值；
6.不能插入if判断，只是使用三目表达式；
7.不能直接使用json值，
react框架写的是jsx语法；
比如es6转为es5的代码：
babel.js 用来转换代码；
jsx语法原先在script作用域里面，是不会被解析。
-D 开发环境
在电脑中写项目，会引用到对应第三方模块；
生产环境：
生产环境就是正式运行环境；
打包好的项目，直接部署到服务器上
react框架用的是jsx语法编写；
babel.js 用来转换代码；
jsx语法原先在script作用域里面，是不会被解析。
-D 开发环境
在电脑中写项目，会引用到对应第三方模块；
生产环境：
生产环境就是正式运行环境；
打包好的项目，直接部署到服务器上