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

Commit

Permalink
Fixes or ignores remaining issues
Browse files Browse the repository at this point in the history
  • Loading branch information
Claudio Procida committed Oct 21, 2019
1 parent 0f0be1c commit 476099a
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 27 deletions.
5 changes: 4 additions & 1 deletion .alexignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,7 @@ CHANGELOG.md

# We will handle meeting notes and roadmap documents after the main docs are linted.
meta/meeting-notes/**/*.md
meta/roadmaps/*.md
meta/roadmaps/*.md

# This README contains some domain specific language that fails validation.
examples/draft-0-10-0/playground/README.md
52 changes: 26 additions & 26 deletions examples/draft-0-10-0/playground/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ Alternatively you may use `yarn`:
yarn add husky lint-staged prettier
```

* `husky` makes it easy to use githooks as if they are npm scripts.
* `husky` makes it convenient to use githooks as if they are npm scripts.
* `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).
* `prettier` is the JavaScript formatter we will run before commits.

Expand Down Expand Up @@ -685,7 +685,7 @@ This mechanism provides a number of benefits:

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

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

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

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

This makes it obvious you are using a global variable intentionally rather than because of a typo.
This makes it clear you are using a global variable intentionally rather than because of a typo.

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

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

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

These environment variables can be useful for displaying information conditionally based on where the project is
deployed or consuming sensitive data that lives outside of version control.
Expand Down Expand Up @@ -942,7 +942,7 @@ Create React App doesn’t support decorator syntax at the moment because:
* 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.<br>
However in many cases you can rewrite decorator-based code without decorators.<br>
Please refer to these two threads for reference:

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

>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.<br>
People often serve the front-end React app from the same server and port as their backend implementation.<br>
For example, a production setup might look like this after the app is deployed:

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

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

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:

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

* [Configure the proxy yourself](#configuring-the-proxy-manually)
* Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
* Use [environment variables](#adding-custom-environment-variables) to inject the right server hostname and port into your app.

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

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

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:

>Invalid Host header
To work around it, you can specify your public development host in a file called `.env.development` in the root of your project:
To work around it, you can specify your public development server in a file called `.env.development` in the root of your project:

```
HOST=mypublicdevhost.com
HOST=mypublicdevserver.com
```

If you restart the development server now and load the app from the specified host, it should work.
If you restart the development server now and load the app from the specified server, it should work.

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

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

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!

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

## Pre-Rendering into Static HTML Files

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

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

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

### Command Line Interface

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

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:

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

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.

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

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

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

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

>Note: this feature is available with `react-scripts@0.4.0` and higher.
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.
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.

For example:

Expand Down Expand Up @@ -1531,15 +1531,15 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest
## Developing Components in Isolation
Usually, in an app, you have a lot of UI components, and each of them has many different states.
For an example, a simple button component could have following states:
For an example, a plain button component could have following states:
* In a regular state, with a text label.
* In the disabled mode.
* In a loading state.
Usually, it’s hard to see these states without running a sample app or some examples.
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**.
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**.
![Storybook for React Demo](http://i.imgur.com/7CIAWpB.gif)
Expand Down Expand Up @@ -1664,7 +1664,7 @@ frustration when previously cached assets are used and do not include the latest
changes you've made locally.
1. If you *need* to test your offline-first service worker locally, build
the application (using `npm run build`) and run a simple http server from your
the application (using `npm run build`) and run a basic http server from your
build directory. After running the build script, `create-react-app` will give
instructions for one way to test your production build locally and the [deployment instructions](#deployment) have
instructions for using other methods. *Be sure to always use an
Expand All @@ -1690,7 +1690,7 @@ page (showing a "New content is available; please refresh." message). Showing
this messages is currently left as an exercise to the developer, but as a
starting point, you can make use of the logic included in [`src/registerServiceWorker.js`](src/registerServiceWorker.js), which
demonstrates which service worker lifecycle events to listen for to detect each
scenario, and which as a default, just logs appropriate messages to the
scenario, and which as a default, only logs appropriate messages to the
JavaScript console.
1. By default, the generated service worker file will not intercept or cache any
Expand Down Expand Up @@ -1774,7 +1774,7 @@ serve -h
### Other Solutions
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.
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.
Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/):
Expand Down Expand Up @@ -1890,7 +1890,7 @@ Then run the `firebase init` command from your project’s root. You need to cho
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
but for now we'll set up a default project.
? What Firebase project do you want to associate as default? Example app (example-app-fd690)
Expand Down Expand Up @@ -2008,7 +2008,7 @@ You can configure a custom domain with GitHub Pages by adding a `CNAME` file to
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:

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

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

Expand Down

0 comments on commit 476099a

Please sign in to comment.