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: template/README.md
+16-10Lines changed: 16 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -118,7 +118,7 @@ When you run `create-react-app`, it always creates the project with the latest v
118
118
119
119
To update an existing project to a new version of `react-scripts`, [open the changelog](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md), find the version you’re currently on (check `package.json` in this folder if you’re not sure), and apply the migration instructions for the newer versions.
120
120
121
-
In most cases bumping the `react-scripts` version in `package.json` and running `npm install` in this folder should be enough, but it’s good to consult the [changelog](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md) for potential breaking changes.
121
+
In most cases bumping the `react-scripts` version in `package.json` and running `npm install`(or `yarn install`) in this folder should be enough, but it’s good to consult the [changelog](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md) for potential breaking changes.
122
122
123
123
We commit to keeping the breaking changes minimal so you can upgrade `react-scripts` painlessly.
124
124
@@ -366,20 +366,20 @@ If you use a custom server for your app in production and want to modify the tit
366
366
The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`:
367
367
368
368
```sh
369
-
npm install --save react-router
369
+
npm install --save react-router-dom
370
370
```
371
371
372
372
Alternatively you may use `yarn`:
373
373
374
374
```sh
375
-
yarn add react-router
375
+
yarn add react-router-dom
376
376
```
377
377
378
-
This works for any library, not just `react-router`.
378
+
This works for any library, not just `react-router-dom`.
379
379
380
380
## Importing a Component
381
381
382
-
This project setup supports ES6 modules thanks to Babel.<br>
382
+
This project setup supports ES6 modules thanks to Webpack.<br>
383
383
While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead.
384
384
385
385
For example:
@@ -513,9 +513,11 @@ If you are concerned about using Webpack-specific semantics, you can put all you
513
513
514
514
## Adding a CSS Modules stylesheet
515
515
516
+
> Note: this feature is available with `[email protected]` and higher.
517
+
516
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]**.
517
519
518
-
> **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_.
519
521
520
522
An advantage of this is the ability to repeat the same classname within many CSS files without worrying about a clash.
521
523
@@ -563,6 +565,8 @@ No clashes from other `.error` class names
563
565
564
566
## Adding a Sass stylesheet
565
567
568
+
> Note: this feature is available with `[email protected]` and higher.
569
+
566
570
Generally, we recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a `.Button` CSS class in `<AcceptButton>` and `<RejectButton>` components, we recommend creating a `<Button>` component with its own `.Button` styles, that both `<AcceptButton>` and `<RejectButton>` can render (but [not inherit](https://facebook.github.io/react/docs/composition-vs-inheritance.html)).
567
571
568
572
Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable.
@@ -584,7 +588,7 @@ This will allow you to do imports like
584
588
585
589
```scss
586
590
@import'styles/_colors.scss'; // assuming a styles directory under src/
587
-
@import'nprogress/nprogress'; // importing a css file from the nprogress node module
591
+
@import'~nprogress/nprogress'; // importing a css file from the nprogress node module
588
592
```
589
593
590
594
> **Tip:** You can opt into using this feature with [CSS modules](#adding-a-css-modules-stylesheet) too!
@@ -805,7 +809,7 @@ To learn more about Flow, check out [its documentation](https://flow.org/).
805
809
806
810
## Adding a Router
807
811
808
-
Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/) is the most popular one.
812
+
Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/web/) is the most popular one.
809
813
810
814
To add it, run:
811
815
@@ -1103,7 +1107,7 @@ We don’t recommend this approach.
1103
1107
1104
1108
> Note: this feature is available with `[email protected]` and higher.
1105
1109
1106
-
If the `proxy` option is **not** flexible enough for you, you can get direct access to the Express app instance and hook up your own middleware.
1110
+
If the `proxy` option is **not** flexible enough for you, you can get direct access to the Express app instance and hook up your own proxy middleware.
1107
1111
1108
1112
First, install `http-proxy-middleware` using npm or Yarn:
1109
1113
@@ -1206,7 +1210,9 @@ Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data
1206
1210
1207
1211
## Running Tests
1208
1212
1209
-
> Note: this feature is available with `[email protected]` and higher.<br> >[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030)
1213
+
> Note: this feature is available with `[email protected]` and higher.<br>
1214
+
1215
+
> [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030)
1210
1216
1211
1217
Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try.
0 commit comments