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授權條款釋出。