Create React App 2.0 華麗登場

威威不想說話發表於2019-02-26
ReactAPP

賀！ Create React App 2.0 在 10/02 正式釋出 ??????

Create React App 是由官方所維護的開發工具，主要提供了專屬於 React 開發環境的前置工作。簡單來說，就是不需要安裝或設定像 Webpack、Babel 這類的構建工具，而是由 CRA 替你預設且隱藏的。最主要的好處即是讓開發者可以專注在程式開發，節省了繁雜的環境設定。不過也因為如此，有些好用的功能是被預設中決定，無法自我調適。

更新了什麼？

Create React App 2.0 華麗登場

我們可以從官網的介紹中看到，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

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

License

Create React App 2.0 華麗登場

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

相關文章