Skip to content

Commit 3783dd3

Browse files
authored
Tweak user guide a bit
1 parent 9f7f2ab commit 3783dd3

File tree

1 file changed

+17
-16
lines changed

1 file changed

+17
-16
lines changed

packages/react-scripts/template/README.md

+17-16
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ You can find the most recent version of this guide [here](https://github.com/fac
2424
- [Importing a Component](#importing-a-component)
2525
- [Code Splitting](#code-splitting)
2626
- [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)
2929
- [Post-Processing CSS](#post-processing-css)
3030
- [Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
3131
- [Adding SVGs](#adding-svgs)
@@ -511,15 +511,15 @@ In development, expressing dependencies this way allows your styles to be reload
511511

512512
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.
513513

514-
## Adding a CSS Modules stylesheet
514+
## Adding a CSS Modules Stylesheet
515515

516516
> Note: this feature is available with `react-scripts@2.0.0` and higher.
517517
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]`.
519519

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`.
521521
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/).
523523

524524
### `Button.module.css`
525525

@@ -552,7 +552,7 @@ class Button extends Component {
552552
}
553553
```
554554

555-
### `exported HTML`
555+
### Result
556556

557557
No clashes from other `.error` class names
558558

@@ -561,9 +561,9 @@ No clashes from other `.error` class names
561561
<button class="Button_error_ax7yz"></div>
562562
```
563563

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.
565565

566-
## Adding a Sass stylesheet
566+
## Adding a Sass Stylesheet
567567

568568
> Note: this feature is available with `react-scripts@2.0.0` and higher.
569569
@@ -685,8 +685,7 @@ One way to add SVG files was described in the section above. You can also import
685685

686686
```js
687687
import { ReactComponent as Logo } from './logo.svg'
688-
689-
const App = () => (
688+
const App = () => (
690689
<div>
691690
{/* Logo is an actual React component */}
692691
<Logo />
@@ -1018,12 +1017,11 @@ REACT_APP_BAR=$DOMAIN/bar
10181017

10191018
## Can I Use Decorators?
10201019

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:
10231022

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.
10271025

10281026
However in many cases you can rewrite decorator-based code without decorators just as fine.<br>
10291027
Please refer to these two threads for reference:
@@ -1715,6 +1713,7 @@ Learn more about React Storybook:
17151713
- [GitHub Repo](https://github.com/storybooks/storybook)
17161714
- [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot
17171715

1716+
<!--
17181717
### Getting Started with Styleguidist
17191718
17201719
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
17861785
- 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.
17871786
- 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.
17881787
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+
17891790
The [`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
17901791
is integrated into production configuration,
17911792
and it will take care of generating a service worker file that will automatically

0 commit comments

Comments
 (0)