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语法简介