Skip to content

Commit

Permalink
Cleanup README
Browse files Browse the repository at this point in the history
  • Loading branch information
Timer committed Sep 28, 2018
1 parent 72ccea5 commit 914f7e1
Showing 1 changed file with 16 additions and 10 deletions.
26 changes: 16 additions & 10 deletions template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ When you run `create-react-app`, it always creates the project with the latest v

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.

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

We commit to keeping the breaking changes minimal so you can upgrade `react-scripts` painlessly.

Expand Down Expand Up @@ -366,20 +366,20 @@ If you use a custom server for your app in production and want to modify the tit
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`:

```sh
npm install --save react-router
npm install --save react-router-dom
```

Alternatively you may use `yarn`:

```sh
yarn add react-router
yarn add react-router-dom
```

This works for any library, not just `react-router`.
This works for any library, not just `react-router-dom`.

## Importing a Component

This project setup supports ES6 modules thanks to Babel.<br>
This project setup supports ES6 modules thanks to Webpack.<br>
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.

For example:
Expand Down Expand Up @@ -513,9 +513,11 @@ If you are concerned about using Webpack-specific semantics, you can put all you

## Adding a CSS Modules stylesheet

> Note: this feature is available with `[email protected]` and higher.
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]**.

> **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*.
> **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_.
An advantage of this is the ability to repeat the same classname within many CSS files without worrying about a clash.

Expand Down Expand Up @@ -563,6 +565,8 @@ No clashes from other `.error` class names

## Adding a Sass stylesheet

> Note: this feature is available with `[email protected]` and higher.
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)).

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.
Expand All @@ -584,7 +588,7 @@ This will allow you to do imports like

```scss
@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import 'nprogress/nprogress'; // importing a css file from the nprogress node module
@import '~nprogress/nprogress'; // importing a css file from the nprogress node module
```

> **Tip:** You can opt into using this feature with [CSS modules](#adding-a-css-modules-stylesheet) too!
Expand Down Expand Up @@ -805,7 +809,7 @@ To learn more about Flow, check out [its documentation](https://flow.org/).

## Adding a Router

Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/) is the most popular one.
Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/web/) is the most popular one.

To add it, run:

Expand Down Expand Up @@ -1103,7 +1107,7 @@ We don’t recommend this approach.

> Note: this feature is available with `[email protected]` and higher.
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.
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.

First, install `http-proxy-middleware` using npm or Yarn:

Expand Down Expand Up @@ -1206,7 +1210,9 @@ Then, on the server, you can replace `__SERVER_DATA__` with a JSON of real data

## Running Tests

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

Expand Down

0 comments on commit 914f7e1

Please sign in to comment.