求职网站开发开题报告,写作网站大全,8uftp与wordpress,修改wordpress入口地址1、#x1f35f;你可以直接下载本节配套的资源代码#xff0c;然后导入vscode看效果#xff0c;也可以跟着教程一点一点敲#xff0c;都是没问题的。 2、#x1f914;怎么运行本节代码#xff1f; 很简单#xff0c;随便找个浏览器打开index.html即可。#x1f495; 代… 1、你可以直接下载本节配套的资源代码然后导入vscode看效果也可以跟着教程一点一点敲都是没问题的。 2、怎么运行本节代码 很简单随便找个浏览器打开index.html即可。 代码目录 运行效果 在讲React之前呢我们得先有一个趁手的IDE虽然现在WebStorm免费了但是安装和配置起来呢对电脑的要求还是有一定门槛所以我们还是使用VSCODE。
除了直接用浏览器打开index.html我们也可以用vscode的goLive功能只需要安装一个插件。
要在VSCode中打开浏览器可以按照以下步骤进行操作 安装VSCode插件首先打开VSCode点击左侧的扩展图标可通过快捷键Ctrl Shift X打开。在搜索栏中输入关键词“Live Server”并选择第一个结果点击插件右下角的“安装”按钮。 启动Live Server在安装完成后点击左下角的“Go Live”图标再点击“Open Browser”按钮这样便会自动在默认浏览器中打开你的HTML文件。 更改默认浏览器如果想要在不同的浏览器中打开文件可以在VSCode的设置中进行更改。点击左上角的“文件”菜单选择“首选项”Preferences再选择“设置”Settings。在搜索框中输入“liveServer.settings.CustomBrowser”并点击结果。选择“编辑设置.json”Edit in settings.json然后在打开的文件中添加以下代码
“json “liveServer.settings.CustomBrowser”: “浏览器完整路径” “
在这里将“浏览器完整路径”替换为你所希望使用的浏览器的完整路径。例如如果你想要使用Google Chrome可以填写以下代码
“json “liveServer.settings.CustomBrowser”: “C:/Program Files (x86)/Google/Chrome/Application/chrome.exe” “
使用自定义快捷键你还可以为打开浏览器操作添加自定义快捷键。点击左上角的“文件”菜单选择“首选项”Preferences再选择“键盘快捷方式”Keyboard Shortcuts。在搜索框中输入“live server”并点击结果。找到“Open Browser”命令右击并选择“更改键绑定”Change Keybinding。然后按下你希望的快捷键并保存设置。
现在你就可以使用VSCode打开浏览器来查看你的HTML文件了
1、聊聊这节课的需求
很简单啦就是在页面上输出一段话而已。
2、技术方案
为了降低入门React的难度我们直接用html的方式而不是脚手架的方式。 代码非常简单分为三步。
1、准备好一个容器
div idtest/div在页面上随便写一个div这个就是我们要用React渲染的目标区域。
2、引入必要的js文件
!-- 引入react核心库 --
script typetext/javascript src../static/react.development.js/script
!-- 引入react-dom用于支持react操作DOM --
script typetext/javascript src../static/react-dom.development.js/script
!-- 引入babel用于将jsx转为js --
script typetext/javascript src../static/babel.min.js/script第一个是React核心库还记得当年你是怎么学习jQuery的吗是不是第一步就是引入jQuery啊然后就可以用$去操作一些DOM元素了。比如你可以用
$(#test).html(h1Hello jQuery/h1); 来实现类似的效果。
那么同样的道理现在用React了自然也要引入react。
第二个是React-dom用来支持dom操作的用了React了我们就不需要手动去操作dom了而是让react帮我们操作就需要引入这个库。
第三个是babel我们知道浏览器早期是不支持ES6的也不支持import语法就需要用babel来做转换转成ES5才能运行代码。但是呢除了ES6转ES5babel还有一个作用就是解析JSX语法。
大家都知道JSJSX又是什么鬼简单来说JSX支持直接在JS文件里面写html代码主要就是这个作用。
3.创建虚拟dom并渲染到页面
script typetext/babel //1.创建虚拟DOMconst VDOM h1Hello,React/h1//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById(test))
/script注意h1Hello,React/h1 这个玩意可不是字符串啊而是虚拟DOM是JSX语法构建的虚拟DOM。有人问为啥不用JS创建虚拟DOM呢JS不好吗不香吗
欸你还真别说React是支持这样做的但是很不推荐就好比你写一个标签里面有属性标签里面还套标签你用JS写就很冗余了还看不清结构。如果你曾经写过Java并且经历过Servelt到JSP的阶段那么你应该能明白我在说什么。
所以React才特别推出了JSX语法了。
3、技术验证
用浏览器打开index.html检查输出是否符合预期
5、源码下载
下载本节配套资源即可。
4、答疑
有问题直接留言即可。
