Introduction

賀！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 中這樣引入：

1
2
3
4
5
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

[1] Create React App 2.0: Babel 7, Sass, and More
[2] cra-sass-modules-hot-reloading

License


本著作由 Chang, Wei-Yaun (v123582) 製作，
以創用CC 姓名標示-相同方式分享 3.0 Unported授權條款釋出。