1. 开发工具
个人喜欢用WebStorm和VScode,这里用WebStrom演示(你们肯定很奇怪为什么我的WebStrom是汉化的,后面我会给出汉化教程)
设置ES6开发环境
打开WebStrom,新建一个文件夹(名字随意,用于学习的文件夹)
依次点击->->->,将 改为,点击右下角的“应用”和“确定”
引入相关文件
这里需要引入三个文件,这里推荐大家使用一个在线的免费CDN
搜索
搜索,会看到下方和
进入的版本列表。选择,点击复制连接
以同样的操作进入版本列表。选择,点击复制连接
将复制的连接暂时保存起来
搜索官网
进入官网点击设置->in the brower,复制如图所示的链接,和刚刚的和链接保存在一起
4.配置开发的基本html模板
回到WebStrom,在刚刚的文件夹新建一个01-HelloWorld.html文件,将刚刚保存的链接粘贴到里面,新建一个为(名字随意)的,新加一个标签,将属性改为,格式如下
将属性改为是为了使用babel.js将ES6和JSX的高阶语法转为浏览器可以识别的低阶语法
上面的html文件配置是非工程化开发的基本模板,大家可以保存为快捷代码片段,使用快捷键按回车就能生成一个基本的模板
到此React的基本开发环境就配置完了,后面就是开始撸代码了
请继续看下一篇:JSX语法简介React零基础入门02–JSX语法简介
如果您觉得本文的内容对您的学习有所帮助:
关键字:
jquery