Greetings! Create React App 2.0 was officially released on 10/02 👏🏼👏🏼 port

Create React App is an official development tool that provides pre-installation work for the React development environment. In simple terms, there is no need to install or set up build tools like Webpack and Babel, but CRA presets and hides them for you. The main benefit is that it allows developers to focus on programming and saves on complex environment Settings. But because of this, some useful features are programmed in and don’t adapt themselves.

What’s updated?

The Create React App introduces the following changes:

  • More CSS tools support: Sass, CSS Modules
  • Updated development tools: Babel 7, WebPack 4, Jest 23

Create React App 2.0 mainly brings some upgrades along with the front-end development tools update. One of the most exciting is CSS development tools like Sass and CSS Modules.

CSS Modules

Importing CSS Modeule is fairly easy. You can write CSS directly as a file.module.css

Then, introduce it in Component like this:

import React from 'react'
import './style.css';
import styles from './style.module.css'

exportdefault () => <div className={styles.myStyle}>We are styled! </div>Copy the code

In this case, style.css and style.module. CSS are Global and Local CSS. You don’t need any environment Settings! See here for a complete example.

Painless upgrade 2.0

If you’re already using create-react-app, you’ll start new projects with 2.0 react-scripts by default. For older projects, change package.json’s react-scripts to 2.0.3 and install yarn or NPM to upgrade.

Reference

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

License

This work is by Chang Wei-Yaun (V123582) and is distributed under an INNOVATIVE CC name – Share in the same way with 3.0 Unported license.