很简单#xff0c;随便找个浏览器打开index.html即可。

#x1f495;

1、你可以直接下载本节配套的资源代码然后导入vscode看效果也可以跟着教程一点一点敲都是没问题的。

2、怎么运行本节代码

在讲React之前呢我们得先有一个趁手的IDE虽然现在WebStorm免费了但是安装和配置起来呢对电脑的要求还是有一定门槛所以我们还是使用VSCODE。

除了直接用浏览器打开index.html我们也可以用vscode的goLive功能只需要安装一个插件。

安装VSCode插件首先打开VSCode点击左侧的扩展图标可通过快捷键Ctrl

Shift

Browser”按钮这样便会自动在默认浏览器中打开你的HTML文件。

更改默认浏览器如果想要在不同的浏览器中打开文件可以在VSCode的设置中进行更改。

点击左上角的“文件”菜单选择“首选项”Preferences再选择“设置”Settings。

在搜索框中输入“liveServer.settings.CustomBrowser”并点击结果。

选择“编辑设置.json”Edit

“json

“liveServer.settings.CustomBrowser”:

“浏览器完整路径”

在这里将“浏览器完整路径”替换为你所希望使用的浏览器的完整路径。

例如如果你想要使用Google

“json

“liveServer.settings.CustomBrowser”:

“C:/Program

(x86)/Google/Chrome/Application/chrome.exe”

使用自定义快捷键你还可以为打开浏览器操作添加自定义快捷键。

点击左上角的“文件”菜单选择“首选项”Preferences再选择“键盘快捷方式”Keyboard

现在你就可以使用VSCode打开浏览器来查看你的HTML文件了

2、技术方案

为了降低入门React的难度我们直接用html的方式而不是脚手架的方式。

1、准备好一个容器

idtest/div在页面上随便写一个div这个就是我们要用React渲染的目标区域。

!--

src../static/react.development.js/script

!--

src../static/react-dom.development.js/script

!--

src../static/babel.min.js/script第一个是React核心库还记得当年你是怎么学习jQuery的吗是不是第一步就是引入jQuery啊然后就可以用$去操作一些DOM元素了。

比如你可以用

jQuery/h1);

第二个是React-dom用来支持dom操作的用了React了我们就不需要手动去操作dom了而是让react帮我们操作就需要引入这个库。

第三个是babel我们知道浏览器早期是不支持ES6的也不支持import语法就需要用babel来做转换转成ES5才能运行代码。

但是呢除了ES6转ES5babel还有一个作用就是解析JSX语法。

大家都知道JSJSX又是什么鬼简单来说JSX支持直接在JS文件里面写html代码主要就是这个作用。

3.创建虚拟dom并渲染到页面

h1Hello,React/h1//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,

这个玩意可不是字符串啊而是虚拟DOM是JSX语法构建的虚拟DOM。

有人问为啥不用JS创建虚拟DOM呢JS不好吗不香吗

欸你还真别说React是支持这样做的但是很不推荐就好比你写一个标签里面有属性标签里面还套标签你用JS写就很冗余了还看不清结构。

如果你曾经写过Java并且经历过Servelt到JSP的阶段那么你应该能明白我在说什么。

3、技术验证