diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3260237975..75d25b126b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -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 ## 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: @@ -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 @@ -517,7 +517,7 @@ 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.
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 @@ -525,14 +525,14 @@ these defined as well. Consult their documentation how to do this. For example, ## 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 `react-scripts@0.3.0` and higher. +>Note: this feature is available with `react-scripts@0.3.0` 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 @@ -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).
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) @@ -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