diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index ef369e359c3..74777af9b25 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -9,7 +9,7 @@ // Inspired by https://github.com/airbnb/javascript but less opinionated. -// We use eslint-loader so even warnings are very visibile. +// We use eslint-loader so even warnings are very visible. // This is why we only use "WARNING" level for potential errors, // and we don't use "ERROR" level at all. diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index ad8560fa043..391db9621ea 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -106,7 +106,7 @@ function ensureOverlayDivExists(onOverlayDivReady) { lastOnOverlayDivReady(overlayDiv); }); - // Zalgo alert: onIframeLoad() will be called either synchronouly + // Zalgo alert: onIframeLoad() will be called either synchronously // or asynchronously depending on the browser. // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires. document.body.appendChild(overlayIframe); diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index ec6befc71bc..8a8b59ed859 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -25,7 +25,7 @@ var paths = require('./paths'); var publicPath = '/'; // `publicUrl` is just like `publicPath`, but we will provide it to our app // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. -// Omit trailing shlash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. +// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. var publicUrl = ''; // Get environment variables to inject into our app. var env = getClientEnvironment(publicUrl); diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 228658de79a..c35d6b8f274 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -12,7 +12,7 @@ // Do this as the first thing so that any code reading it knows the right env. process.env.NODE_ENV = 'production'; -// Load environment variables from .env file. Surpress warnings using silent +// Load environment variables from .env file. Suppress warnings using silent // if this file is missing. dotenv will never modify any environment variables // that have already been set. // https://github.com/motdotla/dotenv diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 5ce896568eb..8723c281637 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -11,7 +11,7 @@ process.env.NODE_ENV = 'development'; -// Load environment variables from .env file. Surpress warnings using silent +// Load environment variables from .env file. Suppress warnings using silent // if this file is missing. dotenv will never modify any environment variables // that have already been set. // https://github.com/motdotla/dotenv diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index 0401c960600..90d1f835d54 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -12,7 +12,7 @@ process.env.NODE_ENV = 'test'; process.env.PUBLIC_URL = ''; -// Load environment variables from .env file. Surpress warnings using silent +// Load environment variables from .env file. Suppress warnings using silent // if this file is missing. dotenv will never modify any environment variables // that have already been set. // https://github.com/motdotla/dotenv diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index f44647ca3a8..a7e14dabeed 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: @@ -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,13 +511,13 @@ 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 @@ -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 @@ -717,7 +717,7 @@ it('renders without crashing', () => { }); ``` -Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `` and doesn’t go deeper. For example, even if `` itself renders a `