之前我的前端主要是把JS看了一遍，然后自学了一下React，没有正式的去搞前后端分离。因为目前自己编写的应用，不用前后端分离也足够了，外加直接采用Bootstrap框架，也无需自己去编写JS代码。不过一直还是想着前端方面要更加专业一些，于是最近还是准备好好的把三剑客的基础再温习一遍，然后继续搞起了React来，也把各种现代工具都用上。
这篇文章准备记录一下前端常用的工具，不是指node之类，而是在线网站或者资源，以后如果遇到好网站也会加进来。
React框架官网
在线代码工具
codepen.io
codepen.io可以在线编写三剑客代码，很多教学网站都会使用codepen来作为教学工具，也可以很方便的使用Github账号登录，然后分享自己的代码给别人。
进到其中的pen页面就可以编写代码，可以在右上角更改整体布局。最有意思的是在settings中可以配置三剑客的解析工具和外部引入的文件地址。
对于React来说，需要把JavaScript Preprocessor修改成Babel，然后在外部引入的文件中，照抄React官网中的地址即可。
Babel REPL
由于React使用了JSX语法，所以要通过Babel来转译。那么到底会转译成什么样子呢？在Babel官网就可以查看转译的结果。
到官网后在左侧点击React，保留默认的stage-2即可，然后可以试着贴一下JSX代码看看转译的结果，比如：
转译前：
const content = <h1 id="root">saner</h1>;
转译后：
"use strict";
const content = React.createElement("h1", {
id: "root"
}, "saner");
再比如：
转译前：
ReactDOM.render(
<p>Rendered by react and saner</p>,
document.getElementById("root")
);
转译后：
ReactDOM.render(React.createElement("p", null, "Rendered by react and saner"), document.getElementById("root"));
通过转译，就可以知道React在内部调用了createElement方法来创建元素。
语言教程
现代 JavaScript 教程，这是一个非常好的教程，直接采用ES2015的标准进行教学，不再引入旧内容比如var之类。
免费下载视频课程的网站
https://freecoursesite.com/，这里可以下载到Udemy上很多的视频课程（不仅仅是开发），连源码和素材都一并奉送，想要什么课程到上边查一下很好。
https://courseclub.me/，和上边一样，网站界面也很像，我怀疑是不是同一家。
开发者工具
React Developer Tools，Facebook官方提供的React开发工具插件，安装之后如果页面是用React开发的，在Chrome的开发工具菜单栏最右边会多出两个菜单，可以在其中方便的查看组件的各项属性。
JSONView，如果浏览器中返回的是一段JSON，可以自动以可读性比较高的方式进行展示。
UI库
Fullstack React: The Complete Guide to ReactJS and Friends这书里提到了一个库Semantic UI，看了一下设计挺现代，但是发现这个库在2018年之后就不再更新了，现在更好的选择是Material UI。