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

相關文章