賀！ 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

Create React App 2.0: Babel 7, Sass, and More

cra-sass-modules-hot-reloading

---

License

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

轉載于:https://juejin.im/post/5bb5cd6a6fb9a05d1013f669

總結

以上是生活随笔為你收集整理的Create React App 2.0 华丽登场的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。