Create React App 2.0 华丽登场

贺！ Create React App 2.0 在 10/02 正式发布 👏🏼👏🏼👏🏼

Create React App 是由官方所维护的开发工具，主要提供了专属于 React 开发环境的前置工作。简单来说，就是不需要安装或设定像 Webpack、Babel 这类的构建工具，而是由 CRA 替你预设且隐藏的。最主要的好处即是让开发者可以专注在程式开发，节省了繁杂的环境设定。不过也因为如此，有些好用的功能是被预设中决定，无法自我调适。

更新了什么？

我们可以从官网的介绍中看到，Create React App 主要带来了这些改变，包含：

更多的 CSS 工具支援： Sass、CSS Modules
更新的开发工具： Babel 7、webpack 4、Jest 23

随着前端开发工具的更新，在 Create React App 2.0 主要带来了一些升级。其中最令人兴奋的就是加上 Sass、CSS Modules 这一类的 CSS 开发工具。

CSS Modules

导入 CSS Modeule 相当简单，可以直接将 CSS 写成一个档案 .module.css

然后，在 Component 中这样引入：

import React from 'react'
import './style.css';
import styles from './style.module.css'

export default () => <div className={styles.myStyle}>We are styled!</div>

这个时候，style.css 跟 style.module.css 就是 Global 跟 Local CSS。完全不需要任何的环境设定！完整的范例可以参考这边。

无痛升级 2.0

如果你原本就有使用 create-react-app 的话，那你现在开新专案预设就会是 2.0 react-scripts。如果是旧的专案，把 package.json 的 react-scripts 改成 2.0.3 然后 yarn 或 npm install 升级亦可。

Reference

License

本著作由Chang Wei-Yaun (v123582)制作，以创用CC 姓名标示-相同方式分享 3.0 Unported授权条款释出。