-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
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
Showing
1 changed file
with
21 additions
and
21 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
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.<br> | ||
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.<br> | ||
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`.<br> | ||
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.<br> | ||
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.<br> | ||
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.<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: | ||
|
@@ -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).<br> | ||
An alternative way of handling static assets is described in the next section. | ||
|
||
## Using the `public` Folder | ||
|
@@ -517,22 +517,22 @@ To define permanent environment variables, create a file called `.env` in the ro | |
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.<br> | ||
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.<br> | ||
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.<br> | ||
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.<br> | ||
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.<br> | ||
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.<br> | ||
>[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).<br> | ||
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 | ||
|
@@ -736,7 +736,7 @@ it('renders welcome message', () => { | |
}); | ||
``` | ||
All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value). | ||
All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value).<br> | ||
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.<br> | ||
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.<br> | ||
Run `npm test -- --coverage` (note extra `--` in the middle) to include a coverage report like this: | ||
![coverage report](http://i.imgur.com/5bFhnTS.png) | ||
|
@@ -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.<br> | ||
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.<br> | ||
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!**<br> | ||
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).<br> | ||
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration). | ||
### Modulus | ||
|