在此之前需要电脑已安装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/
npm init -y //安装配制文件， 里面的"main": "index.js"是入口文件
2.安装babel.jsnpm 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(){})
5.布尔值；
6.不能插入if判断，只是使用三目表达式；
7.不能直接使用json值，
react框架写的是jsx语法；
比如es6转为es5的代码：
babel.js 用来转换代码；
jsx语法原先在script作用域里面，是不会被解析。
在电脑中写项目，会引用到对应第三方模块；
生产环境：生产环境就是正式运行环境；
打包好的项目，直接部署到服务器上
babel.js 用来转换代码；
jsx语法原先在script作用域里面，是不会被解析。
在电脑中写项目，会引用到对应第三方模块；
生产环境：生产环境就是正式运行环境；
打包好的项目，直接部署到服务器上