forked from facebook/create-react-app
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ed2f523
commit 28ce284
Showing
7 changed files
with
34 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). | ||
|
||
Below you will find some information on how to perform common tasks. | ||
Below you will find some information on how to perform common tasks. | ||
You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). | ||
|
||
## Table of Contents | ||
|
@@ -100,13 +100,13 @@ For the project to build, **these files must exist with exact filenames**: | |
|
||
You can delete or rename the other files. | ||
|
||
You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack. | ||
You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack. | ||
You need to **put any JS and CSS files inside `src`**, or Webpack won’t see them. | ||
|
||
Only files inside `public` can be used from `public/index.html`. | ||
Only files inside `public` can be used from `public/index.html`. | ||
Read instructions below for using assets from JavaScript and HTML. | ||
|
||
You can, however, create more top-level directories. | ||
You can, however, create more top-level directories. | ||
They will not be included in the production build so you can use them for things like documentation. | ||
|
||
## Available Scripts | ||
|
@@ -123,7 +123,7 @@ You will also see any lint errors in the console. | |
|
||
### `npm test` | ||
|
||
Launches the test runner in the interactive watch mode. | ||
Launches the test runner in the interactive watch mode. | ||
See the section about [running tests](#running-tests) for more information. | ||
|
||
### `npm run build` | ||
|
@@ -189,7 +189,7 @@ npm install --save <library-name> | |
|
||
## Importing a Component | ||
|
||
This project setup supports ES6 modules thanks to Babel. | ||
This project setup supports ES6 modules thanks to Babel. | ||
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: | ||
|
@@ -323,7 +323,7 @@ function Header() { | |
export default function Header; | ||
``` | ||
|
||
This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths. | ||
This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths. | ||
|
||
This works in CSS too: | ||
|
||
|
@@ -337,7 +337,7 @@ Webpack finds all relative module references in CSS (they start with `./`) and r | |
|
||
Please be advised that this is also a custom feature of Webpack. | ||
|
||
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). | ||
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). | ||
An alternative way of handling static assets is described in the next section. | ||
|
||
## Using the `public` Folder | ||
|
@@ -362,7 +362,7 @@ Inside `index.html`, you can use it like this: | |
|
||
Only files inside the `public` folder will be accessible by `%PUBLIC_URL%` prefix. If you need to use a file from `src` or `node_modules`, you’ll have to copy it there to explicitly specify your intention to make this file a part of the build. | ||
|
||
When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL. | ||
When you run `npm run build`, Create React App will substitute `%PUBLIC_URL%` with a correct absolute path so your project works even if you use client-side routing or host it at a non-root URL. | ||
|
||
In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes: | ||
|
||
|
@@ -511,28 +511,28 @@ REACT_APP_SECRET_CODE=abcdef npm start | |
>Note: this feature is available with `react-scripts@0.5.0` and higher. | ||
To define permanent environment vairables, create a file called `.env` in the root of your project: | ||
To define permanent environment variables, create a file called `.env` in the root of your project: | ||
``` | ||
REACT_APP_SECRET_CODE=abcdef | ||
``` | ||
These variables will act as the defaults if the machine does not explicitly set them. | ||
These variables will act as the defaults if the machine does not explicitly set them. | ||
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details. | ||
>Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need | ||
these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars). | ||
## Can I Use Decorators? | ||
Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation. | ||
Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation. | ||
Create React App doesn’t support decorator syntax at the moment because: | ||
* It is an experimental proposal and is subject to change. | ||
* The current specification version is not officially supported by Babel. | ||
* If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook. | ||
However in many cases you can rewrite decorator-based code without decorators just as fine. | ||
However in many cases you can rewrite decorator-based code without decorators just as fine. | ||
Please refer to these two threads for reference: | ||
* [#214](https://github.com/facebookincubator/create-react-app/issues/214) | ||
|
@@ -548,7 +548,7 @@ Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-r | |
>Note: this feature is available with `react-scripts@0.2.3` and higher. | ||
People often serve the front-end React app from the same host and port as their backend implementation. | ||
People often serve the front-end React app from the same host and port as their backend implementation. | ||
For example, a production setup might look like this after the app is deployed: | ||
``` | ||
|
@@ -575,7 +575,7 @@ Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow- | |
Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request without a `text/html` accept header will be redirected to the specified `proxy`. | ||
Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections. | ||
Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections. | ||
If the `proxy` option is **not** flexible enough for you, alternatively you can: | ||
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). | ||
|
@@ -623,7 +623,7 @@ If you use a Node server, you can even share the route matching logic between th | |
## Running Tests | ||
>Note: this feature is available with `[email protected]` and higher. | ||
>Note: this feature is available with `[email protected]` and higher. | ||
>[Read the migration guide to learn how to enable it in older projects!](https://github.com/facebookincubator/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. | ||
|
@@ -677,7 +677,7 @@ it('sums numbers', () => { | |
}); | ||
``` | ||
All `expect()` matchers supported by Jest are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value). | ||
All `expect()` matchers supported by Jest are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value). | ||
You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](http://facebook.github.io/jest/docs/api.html#tobecalled) to create “spies” or mock functions. | ||
### Testing Components | ||
|
@@ -717,7 +717,7 @@ it('renders without crashing', () => { | |
}); | ||
``` | ||
Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `<App>` and doesn’t go deeper. For example, even if `<App>` itself renders a `<Button>` that throws, this test will pass. Shallow rendering is great for isolated unit tests, but you may still want to create some full rendering tests to ensure the components integrate correctly. Enzyme supports [full rendering with `mount()`](http://airbnb.io/enzyme/docs/api/mount.html), and you can also use it for testing state changes and component lifecyle. | ||
Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `<App>` and doesn’t go deeper. For example, even if `<App>` itself renders a `<Button>` that throws, this test will pass. Shallow rendering is great for isolated unit tests, but you may still want to create some full rendering tests to ensure the components integrate correctly. Enzyme supports [full rendering with `mount()`](http://airbnb.io/enzyme/docs/api/mount.html), and you can also use it for testing state changes and component lifecycle. | ||
You can read the [Enzyme documentation](http://airbnb.io/enzyme/) for more testing techniques. Enzyme documentation uses Chai and Sinon for assertions but you don’t have to use them because Jest provides built-in `expect()` and `jest.fn()` for spies. | ||
|
@@ -736,8 +736,8 @@ it('renders welcome message', () => { | |
}); | ||
``` | ||
All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value). | ||
Nevertheless you can use a third-party assertion library like Chai if you want to, as described below. | ||
All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value). | ||
Nevertheless you can use a third-party assertion library like [Chai](http://chaijs.com/) if you want to, as described below. | ||
### Using Third Party Assertion Libraries | ||
|
@@ -772,12 +772,12 @@ global.localStorage = localStorageMock | |
### Focusing and Excluding Tests | ||
You can replace `it()` with `xit()` to temporarily exclude a test from being executed. | ||
You can replace `it()` with `xit()` to temporarily exclude a test from being executed. | ||
Similarly, `fit()` lets you focus on a specific test without running any other tests. | ||
### Coverage Reporting | ||
Jest has an integrated coverage reporter that works well with ES6 and requires no configuration. | ||
Jest has an integrated coverage reporter that works well with ES6 and requires no configuration. | ||
Run `npm test -- --coverage` (note extra `--` in the middle) to include a coverage report like this: | ||
![coverage report](http://i.imgur.com/5bFhnTS.png) | ||
|
@@ -791,7 +791,7 @@ By default `npm test` runs the watcher with interactive CLI. However, you can fo | |
### On CI servers | ||
#### Travis CI | ||
1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your Github repository with Travis. You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page. | ||
1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis. You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page. | ||
1. Add a `.travis.yml` file to your git repository. | ||
``` | ||
language: node_js | ||
|
@@ -838,7 +838,7 @@ By default, the `package.json` of the generated project looks like this: | |
} | ||
``` | ||
If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster. | ||
If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster. | ||
To help you make up your mind, here is a list of APIs that **need jsdom**: | ||
* Any browser globals like `window` and `document` | ||
|
@@ -863,7 +863,7 @@ This feature is experimental and still [has major usage issues](https://github.c | |
## Building for Relative Paths | ||
By default, Create React App produces a build assuming your app is hosted at the server root. | ||
By default, Create React App produces a build assuming your app is hosted at the server root. | ||
To override this, specify the `homepage` in your `package.json`, for example: | ||
```js | ||
|
@@ -882,7 +882,7 @@ Open your `package.json` and add a `homepage` field: | |
"homepage": "http://myusername.github.io/my-app", | ||
``` | ||
**The above step is important!** | ||
**The above step is important!** | ||
Create React App uses the `homepage` field to determine the root URL in the built HTML file. | ||
Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages: | ||
|
@@ -905,7 +905,7 @@ Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` hi | |
### Heroku | ||
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack). | ||
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack). | ||
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration). | ||
### Modulus | ||
|
@@ -964,7 +964,7 @@ Install the Surge CLI if you haven't already by running `npm install -g surge`. | |
Success! Project is published and running at create-react-app.surge.sh | ||
``` | ||
Note that in order to support routers that use html5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing). | ||
Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing). | ||
## Something Missing? | ||
|