Skip to content
This repository was archived by the owner on Feb 6, 2023. It is now read-only.

Commit 476099a

Browse files
author
Claudio Procida
committed
Fixes or ignores remaining issues
1 parent 0f0be1c commit 476099a

File tree

2 files changed

+30
-27
lines changed

2 files changed

+30
-27
lines changed

.alexignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,7 @@ CHANGELOG.md
66

77
# We will handle meeting notes and roadmap documents after the main docs are linted.
88
meta/meeting-notes/**/*.md
9-
meta/roadmaps/*.md
9+
meta/roadmaps/*.md
10+
11+
# This README contains some domain specific language that fails validation.
12+
examples/draft-0-10-0/playground/README.md

examples/draft-0-10-0/playground/README.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ Alternatively you may use `yarn`:
302302
yarn add husky lint-staged prettier
303303
```
304304

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.
306306
* `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).
307307
* `prettier` is the JavaScript formatter we will run before commits.
308308

@@ -685,7 +685,7 @@ This mechanism provides a number of benefits:
685685

686686
However there is an **escape hatch** that you can use to add an asset outside of the module system.
687687

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`.
689689

690690
Inside `index.html`, you can use it like this:
691691

@@ -736,7 +736,7 @@ You can avoid this by reading the global variable explicitly from the `window` o
736736
const $ = window.$;
737737
```
738738

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.
740740

741741
Alternatively, you can force the linter to ignore any line by adding `// eslint-disable-line` after it.
742742

@@ -818,7 +818,7 @@ default you will have `NODE_ENV` defined for you, and any other environment vari
818818
These environment variables will be defined for you on `process.env`. For example, having an environment
819819
variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`.
820820

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.
822822

823823
These environment variables can be useful for displaying information conditionally based on where the project is
824824
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:
942942
* The current specification version is not officially supported by Babel.
943943
* If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook.
944944

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>
946946
Please refer to these two threads for reference:
947947

948948
* [#214](https://github.com/facebookincubator/create-react-app/issues/214)
@@ -968,7 +968,7 @@ You can find the companion GitHub repository [here](https://github.com/fullstack
968968

969969
>Note: this feature is available with `[email protected]` and higher.
970970
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>
972972
For example, a production setup might look like this after the app is deployed:
973973

974974
```
@@ -977,7 +977,7 @@ For example, a production setup might look like this after the app is deployed:
977977
/api/todos - server handles any /api/* requests using the backend implementation
978978
```
979979

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.
981981

982982
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:
983983

@@ -1000,25 +1000,25 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can:
10001000

10011001
* [Configure the proxy yourself](#configuring-the-proxy-manually)
10021002
* 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.
10041004

10051005
### "Invalid Host Header" Errors After Configuring Proxy
10061006

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).
10081008

10091009
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:
10101010

10111011
>Invalid Host header
10121012
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:
10141014

10151015
```
1016-
HOST=mypublicdevhost.com
1016+
HOST=mypublicdevserver.com
10171017
```
10181018

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.
10201020

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:**
10221022

10231023
```
10241024
# NOTE: THIS IS DANGEROUS!
@@ -1154,7 +1154,7 @@ Since Create React App doesn’t support server rendering, you might be wonderin
11541154

11551155
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!
11561156

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.
11581158

11591159
## Pre-Rendering into Static HTML Files
11601160

@@ -1204,11 +1204,11 @@ Jest will look for test files with any of the following popular naming conventio
12041204

12051205
The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder.
12061206

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.
12081208

12091209
### Command Line Interface
12101210

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.
12121212

12131213
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:
12141214

@@ -1244,7 +1244,7 @@ You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.gi
12441244

12451245
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.
12461246

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:
12481248

12491249
```js
12501250
import React from 'react';
@@ -1319,7 +1319,7 @@ it('renders welcome message', () => {
13191319
All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/en/expect.html).<br>
13201320
Nevertheless you can use a third-party assertion library like [Chai](http://chaijs.com/) if you want to, as described below.
13211321

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.
13231323

13241324
```js
13251325
expect(wrapper).toContainReact(welcome)
@@ -1360,7 +1360,7 @@ and then use them in your tests like you normally do.
13601360

13611361
>Note: this feature is available with `[email protected]` and higher.
13621362
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.
13641364

13651365
For example:
13661366

@@ -1531,15 +1531,15 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest
15311531
## Developing Components in Isolation
15321532
15331533
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:
15351535
15361536
* In a regular state, with a text label.
15371537
* In the disabled mode.
15381538
* In a loading state.
15391539
15401540
Usually, it’s hard to see these states without running a sample app or some examples.
15411541
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**.
15431543
15441544
![Storybook for React Demo](http://i.imgur.com/7CIAWpB.gif)
15451545
@@ -1664,7 +1664,7 @@ frustration when previously cached assets are used and do not include the latest
16641664
changes you've made locally.
16651665
16661666
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
16681668
build directory. After running the build script, `create-react-app` will give
16691669
instructions for one way to test your production build locally and the [deployment instructions](#deployment) have
16701670
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
16901690
this messages is currently left as an exercise to the developer, but as a
16911691
starting point, you can make use of the logic included in [`src/registerServiceWorker.js`](src/registerServiceWorker.js), which
16921692
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
16941694
JavaScript console.
16951695
16961696
1. By default, the generated service worker file will not intercept or cache any
@@ -1774,7 +1774,7 @@ serve -h
17741774
17751775
### Other Solutions
17761776
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.
17781778
17791779
Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):
17801780
@@ -1890,7 +1890,7 @@ Then run the `firebase init` command from your project’s root. You need to cho
18901890
18911891
First, let's associate this project directory with a Firebase project.
18921892
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.
18941894
18951895
? What Firebase project do you want to associate as default? Example app (example-app-fd690)
18961896
@@ -2008,7 +2008,7 @@ You can configure a custom domain with GitHub Pages by adding a `CNAME` file to
20082008
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:
20092009

20102010
* 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 of this technique [in this 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 of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
20122012

20132013
### [Heroku](https://www.heroku.com/)
20142014

0 commit comments

Comments
 (0)