You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: packages/react-scripts/template/README.md
+17-16
Original file line number
Diff line number
Diff line change
@@ -24,8 +24,8 @@ You can find the most recent version of this guide [here](https://github.com/fac
24
24
-[Importing a Component](#importing-a-component)
25
25
-[Code Splitting](#code-splitting)
26
26
-[Adding a Stylesheet](#adding-a-stylesheet)
27
-
-[Adding a CSS Modules stylesheet](#adding-a-css-modules-stylesheet)
28
-
-[Adding a Sass stylesheet](#adding-a-sass-stylesheet)
27
+
-[Adding a CSS Modules Stylesheet](#adding-a-css-modules-stylesheet)
28
+
-[Adding a Sass Stylesheet](#adding-a-sass-stylesheet)
29
29
-[Post-Processing CSS](#post-processing-css)
30
30
-[Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
31
31
-[Adding SVGs](#adding-svgs)
@@ -511,15 +511,15 @@ In development, expressing dependencies this way allows your styles to be reload
511
511
512
512
If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool.
513
513
514
-
## Adding a CSS Modules stylesheet
514
+
## Adding a CSS Modules Stylesheet
515
515
516
516
> Note: this feature is available with `react-scripts@2.0.0` and higher.
517
517
518
-
This project supports [CSS Modules](https://github.com/css-modules/css-modules) alongside regular stylesheets using the **[name].module.css** file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format **[filename]\_[classname]\_\_[hash]**.
518
+
This project supports [CSS Modules](https://github.com/css-modules/css-modules) alongside regular stylesheets using the `[name].module.css` file naming convention. CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format `[filename]\_[classname]\_\_[hash]`.
519
519
520
-
> **Tip:** Should you want to preprocess a stylesheet with Sass then make sure to [follow the installation instructions](#adding-a-sass-stylesheet) and then change the stylesheet file extension as follows: _[name].module.scss_ or _[name].module.sass_.
520
+
> **Tip:** Should you want to preprocess a stylesheet with Sass then make sure to [follow the installation instructions](#adding-a-sass-stylesheet) and then change the stylesheet file extension as follows: `[name].module.scss` or `[name].module.sass`.
521
521
522
-
An advantage of this is the ability to repeat the same classname within many CSS files without worrying about a clash.
522
+
CSS Modules let you use the same CSS class name in different files without worrying about naming clashes. Learn more about CSS Modules [here](https://css-tricks.com/css-modules-part-1-need/).
523
523
524
524
### `Button.module.css`
525
525
@@ -552,7 +552,7 @@ class Button extends Component {
552
552
}
553
553
```
554
554
555
-
### `exported HTML`
555
+
### Result
556
556
557
557
No clashes from other `.error` class names
558
558
@@ -561,9 +561,9 @@ No clashes from other `.error` class names
561
561
<buttonclass="Button_error_ax7yz"></div>
562
562
```
563
563
564
-
**This is an optional feature.** Regular html stylesheets and js imported stylesheets are fully supported. CSS Modules are only added when explicitly named as a css module stylesheet using the extension `.module.css`.
564
+
**This is an optional feature.** Regular `<link>` stylesheets and CSS files are fully supported. CSS Modules are turned on for files ending with the `.module.css` extension.
565
565
566
-
## Adding a Sass stylesheet
566
+
## Adding a Sass Stylesheet
567
567
568
568
> Note: this feature is available with `react-scripts@2.0.0` and higher.
569
569
@@ -685,8 +685,7 @@ One way to add SVG files was described in the section above. You can also import
685
685
686
686
```js
687
687
import { ReactComponentasLogo } from'./logo.svg'
688
-
689
-
constApp= () => (
688
+
constApp= () => (
690
689
<div>
691
690
{/* Logo is an actual React component */}
692
691
<Logo />
@@ -1018,12 +1017,11 @@ REACT_APP_BAR=$DOMAIN/bar
1018
1017
1019
1018
## Can I Use Decorators?
1020
1019
1021
-
Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.<br>
1022
-
Create React App doesn’t support decorator syntax at the moment because:
1020
+
Some popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.<br>
1021
+
Create React App intentionally doesn’t support decorator syntax at the moment because:
1023
1022
1024
-
- It is an experimental proposal and is subject to change.
1025
-
- The current specification version is not officially supported by Babel.
1026
-
- If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook.
1023
+
- It is an experimental proposal and is subject to change (in fact, it has already changed once, and will change again).
1024
+
- Most libraries currently support only the old version of the proposal — which will never be a standard.
1027
1025
1028
1026
However in many cases you can rewrite decorator-based code without decorators just as fine.<br>
1029
1027
Please refer to these two threads for reference:
@@ -1715,6 +1713,7 @@ Learn more about React Storybook:
-[Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot
1717
1715
1716
+
<!--
1718
1717
### Getting Started with Styleguidist
1719
1718
1720
1719
Styleguidist combines a style guide, where all your components are presented on a single page with their props documentation and usage examples, with an environment for developing components in isolation, similar to Storybook. In Styleguidist you write examples in Markdown, where each code snippet is rendered as a live editable playground.
@@ -1786,6 +1785,8 @@ Offline-first Progressive Web Apps are faster and more reliable than traditional
1786
1785
- Your app will work regardless of network state, even if offline. This means your users will be able to use your app at 10,000 feet and on the subway.
1787
1786
- On mobile devices, your app can be added directly to the user's home screen, app icon and all. This eliminates the need for the app store.
1788
1787
1788
+
However, they [can make debugging deployments more challenging](https://github.com/facebook/create-react-app/issues/2398) so, starting with Create React App 2, service workers are opt-in.
1789
+
1789
1790
The [`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
1790
1791
is integrated into production configuration,
1791
1792
and it will take care of generating a service worker file that will automatically
0 commit comments