You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Feb 6, 2023. It is now read-only.
Copy file name to clipboardExpand all lines: examples/draft-0-10-0/playground/README.md
+26-26Lines changed: 26 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -302,7 +302,7 @@ Alternatively you may use `yarn`:
302
302
yarn add husky lint-staged prettier
303
303
```
304
304
305
-
*`husky` makes it easy to use githooks as if they are npm scripts.
305
+
*`husky` makes it convenient to use githooks as if they are npm scripts.
306
306
*`lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
307
307
*`prettier` is the JavaScript formatter we will run before commits.
308
308
@@ -685,7 +685,7 @@ This mechanism provides a number of benefits:
685
685
686
686
However there is an **escape hatch** that you can use to add an asset outside of the module system.
687
687
688
-
If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use a special variable called `PUBLIC_URL`.
688
+
If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use a dedicated variable called `PUBLIC_URL`.
689
689
690
690
Inside `index.html`, you can use it like this:
691
691
@@ -736,7 +736,7 @@ You can avoid this by reading the global variable explicitly from the `window` o
736
736
const$=window.$;
737
737
```
738
738
739
-
This makes it obvious you are using a global variable intentionally rather than because of a typo.
739
+
This makes it clear you are using a global variable intentionally rather than because of a typo.
740
740
741
741
Alternatively, you can force the linter to ignore any line by adding `// eslint-disable-line` after it.
742
742
@@ -818,7 +818,7 @@ default you will have `NODE_ENV` defined for you, and any other environment vari
818
818
These environment variables will be defined for you on `process.env`. For example, having an environment
819
819
variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`.
820
820
821
-
There is also a special built-in environment variable called `NODE_ENV`. You can read it from `process.env.NODE_ENV`. When you run `npm start`, it is always equal to `'development'`, when you run `npm test` it is always equal to `'test'`, and when you run `npm run build` to make a production bundle, it is always equal to `'production'`. **You cannot override `NODE_ENV` manually.** This prevents developers from accidentally deploying a slow development build to production.
821
+
There is also a dedicated built-in environment variable called `NODE_ENV`. You can read it from `process.env.NODE_ENV`. When you run `npm start`, it is always equal to `'development'`, when you run `npm test` it is always equal to `'test'`, and when you run `npm run build` to make a production bundle, it is always equal to `'production'`. **You cannot override `NODE_ENV` manually.** This prevents developers from accidentally deploying a slow development build to production.
822
822
823
823
These environment variables can be useful for displaying information conditionally based on where the project is
824
824
deployed or consuming sensitive data that lives outside of version control.
@@ -942,7 +942,7 @@ Create React App doesn’t support decorator syntax at the moment because:
942
942
* The current specification version is not officially supported by Babel.
943
943
* If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook.
944
944
945
-
However in many cases you can rewrite decorator-based code without decorators just as fine.<br>
945
+
However in many cases you can rewrite decorator-based code without decorators.<br>
@@ -968,7 +968,7 @@ You can find the companion GitHub repository [here](https://github.com/fullstack
968
968
969
969
>Note: this feature is available with `[email protected]` and higher.
970
970
971
-
People often serve the front-end React app from the same host and port as their backend implementation.<br>
971
+
People often serve the front-end React app from the same server and port as their backend implementation.<br>
972
972
For example, a production setup might look like this after the app is deployed:
973
973
974
974
```
@@ -977,7 +977,7 @@ For example, a production setup might look like this after the app is deployed:
977
977
/api/todos - server handles any /api/* requests using the backend implementation
978
978
```
979
979
980
-
Such setup is **not** required. However, if you **do** have a setup like this, it is convenient to write requests like `fetch('/api/todos')` without worrying about redirecting them to another host or port during development.
980
+
Such setup is **not** required. However, if you **do** have a setup like this, it is convenient to write requests like `fetch('/api/todos')` without worrying about redirecting them to another server or port during development.
981
981
982
982
To tell the development server to proxy any unknown requests to your API server in development, add a `proxy` field to your `package.json`, for example:
983
983
@@ -1000,25 +1000,25 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can:
1000
1000
1001
1001
*[Configure the proxy yourself](#configuring-the-proxy-manually)
1002
1002
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
1003
-
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
1003
+
* Use [environment variables](#adding-custom-environment-variables) to inject the right server hostname and port into your app.
1004
1004
1005
1005
### "Invalid Host Header" Errors After Configuring Proxy
1006
1006
1007
-
When you enable the `proxy` option, you opt into a more strict set of host checks. This is necessary because leaving the backend open to remote hosts makes your computer vulnerable to DNS rebinding attacks. The issue is explained in [this article](https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a) and [this issue](https://github.com/webpack/webpack-dev-server/issues/887).
1007
+
When you enable the `proxy` option, you opt into a more strict set of hostname checks. This is necessary because leaving the backend open to remote servers makes your computer vulnerable to DNS rebinding attacks. The issue is explained in [this article](https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a) and [this issue](https://github.com/webpack/webpack-dev-server/issues/887).
1008
1008
1009
1009
This shouldn’t affect you when developing on `localhost`, but if you develop remotely like [described here](https://github.com/facebookincubator/create-react-app/issues/2271), you will see this error in the browser after enabling the `proxy` option:
1010
1010
1011
1011
>Invalid Host header
1012
1012
1013
-
To work around it, you can specify your public development host in a file called `.env.development` in the root of your project:
1013
+
To work around it, you can specify your public development server in a file called `.env.development` in the root of your project:
1014
1014
1015
1015
```
1016
-
HOST=mypublicdevhost.com
1016
+
HOST=mypublicdevserver.com
1017
1017
```
1018
1018
1019
-
If you restart the development server now and load the app from the specified host, it should work.
1019
+
If you restart the development server now and load the app from the specified server, it should work.
1020
1020
1021
-
If you are still having issues or if you’re using a more exotic environment like a cloud editor, you can bypass the host check completely by adding a line to `.env.development.local`. **Note that this is dangerous and exposes your machine to remote code execution from malicious websites:**
1021
+
If you are still having issues or if you’re using a more exotic environment like a cloud editor, you can bypass the server check completely by adding a line to `.env.development.local`. **Note that this is dangerous and exposes your machine to remote code execution from malicious websites:**
1022
1022
1023
1023
```
1024
1024
# NOTE: THIS IS DANGEROUS!
@@ -1154,7 +1154,7 @@ Since Create React App doesn’t support server rendering, you might be wonderin
1154
1154
1155
1155
Then, on the server, regardless of the backend you use, you can read `index.html` into memory and replace `__OG_TITLE__`, `__OG_DESCRIPTION__`, and any other placeholders with values depending on the current URL. Make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML!
1156
1156
1157
-
If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in simple cases.
1157
+
If you use a Node server, you can even share the route matching logic between the client and the server. However duplicating it also works fine in basic cases.
1158
1158
1159
1159
## Pre-Rendering into Static HTML Files
1160
1160
@@ -1204,11 +1204,11 @@ Jest will look for test files with any of the following popular naming conventio
1204
1204
1205
1205
The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder.
1206
1206
1207
-
We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects.
1207
+
We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects.
1208
1208
1209
1209
### Command Line Interface
1210
1210
1211
-
When you run `npm test`, Jest will launch in the watch mode. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code.
1211
+
When you run `npm test`, Jest will launch in the watch mode. Every time you save a file, it will re-run the tests, exactly like `npm start` recompiles the code.
1212
1212
1213
1213
The watcher includes an interactive command-line interface with the ability to run all tests, or focus on a search pattern. It is designed this way so that you can keep it open and enjoy fast re-runs. You can learn the commands from the “Watch Usage” note that the watcher prints after every run:
1214
1214
@@ -1244,7 +1244,7 @@ You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.gi
1244
1244
1245
1245
There is a broad spectrum of component testing techniques. They range from a “smoke test” verifying that a component renders without throwing, to shallow rendering and testing some of the output, to full rendering and testing component lifecycle and state changes.
1246
1246
1247
-
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating simple smoke tests for your components:
1247
+
Different projects choose different testing tradeoffs based on how often components change, and how much logic they contain. If you haven’t decided on a testing strategy yet, we recommend that you start with creating basic smoke tests for your components:
All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/en/expect.html).<br>
1320
1320
Nevertheless you can use a third-party assertion library like [Chai](http://chaijs.com/) if you want to, as described below.
1321
1321
1322
-
Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme.
1322
+
Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written in a concise way with jest-enzyme.
1323
1323
1324
1324
```js
1325
1325
expect(wrapper).toContainReact(welcome)
@@ -1360,7 +1360,7 @@ and then use them in your tests like you normally do.
1360
1360
1361
1361
>Note: this feature is available with `[email protected]` and higher.
1362
1362
1363
-
If your app uses a browser API that you need to mock in your tests or if you just need a global setup before running your tests, add a `src/setupTests.js` to your project. It will be automatically executed before running your tests.
1363
+
If your app uses a browser API that you need to mock in your tests or if you only need a global setup before running your tests, add a `src/setupTests.js` to your project. It will be automatically executed before running your tests.
1364
1364
1365
1365
For example:
1366
1366
@@ -1531,15 +1531,15 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest
1531
1531
## Developing Components in Isolation
1532
1532
1533
1533
Usually, in an app, you have a lot of UI components, and each of them has many different states.
1534
-
For an example, a simple button component could have following states:
1534
+
For an example, a plain button component could have following states:
1535
1535
1536
1536
* In a regular state, with a text label.
1537
1537
* In the disabled mode.
1538
1538
* In a loading state.
1539
1539
1540
1540
Usually, it’s hard to see these states without running a sample app or some examples.
1541
1541
1542
-
Create React App doesn’t include any tools for this by default, but you can easily add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**.
1542
+
Create React App doesn’t include any tools for this by default, but you can add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**.
1543
1543
1544
1544

1545
1545
@@ -1664,7 +1664,7 @@ frustration when previously cached assets are used and do not include the latest
1664
1664
changes you've made locally.
1665
1665
1666
1666
1. If you *need* to test your offline-first service worker locally, build
1667
-
the application (using `npm run build`) and run a simple http server from your
1667
+
the application (using `npm run build`) and run a basic http server from your
1668
1668
build directory. After running the build script, `create-react-app` will give
1669
1669
instructions for one way to test your production build locally and the [deployment instructions](#deployment) have
1670
1670
instructions for using other methods. *Be sure to always use an
@@ -1690,7 +1690,7 @@ page (showing a "New content is available; please refresh." message). Showing
1690
1690
this messages is currently left as an exercise to the developer, but as a
1691
1691
starting point, you can make use of the logic included in [`src/registerServiceWorker.js`](src/registerServiceWorker.js), which
1692
1692
demonstrates which service worker lifecycle events to listen for to detect each
1693
-
scenario, and which as a default, just logs appropriate messages to the
1693
+
scenario, and which as a default, only logs appropriate messages to the
1694
1694
JavaScript console.
1695
1695
1696
1696
1. By default, the generated service worker file will not intercept or cache any
@@ -1774,7 +1774,7 @@ serve -h
1774
1774
1775
1775
### Other Solutions
1776
1776
1777
-
You don’t necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one.
1777
+
You don’t necessarily need a static server in order to run a Create React App project in production. It works fine when integrated into an existing dynamic one.
1778
1778
1779
1779
Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):
1780
1780
@@ -1890,7 +1890,7 @@ Then run the `firebase init` command from your project’s root. You need to cho
1890
1890
1891
1891
First, let's associate this project directory with a Firebase project.
1892
1892
You can create multiple project aliases by running firebase use --add,
1893
-
but for now we'll just set up a default project.
1893
+
but for now we'll set up a default project.
1894
1894
1895
1895
? What Firebase project do you want to associate as default? Example app (example-app-fd690)
1896
1896
@@ -2008,7 +2008,7 @@ You can configure a custom domain with GitHub Pages by adding a `CNAME` file to
2008
2008
GitHub Pages doesn’t support routers that use the HTML5`pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of`/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
2009
2009
2010
2010
* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
2011
-
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation ofthis technique [inthis guide](https://github.com/rafrex/spa-github-pages).
2011
+
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a dedicated redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation ofthis technique [inthis guide](https://github.com/rafrex/spa-github-pages).
0 commit comments