Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add simple test instructions. #371

Closed
wants to merge 1 commit into from
Closed

Add simple test instructions. #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ You can also read its latest version [here](https://github.com/facebookincubator
* Autoprefixed CSS, so you don’t need `-webkit` or other prefixes.
* A `build` script to bundle JS, CSS, and images for production, with sourcemaps.

**The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. Currently, it doesn’t support testing either. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything.
**The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything.

**You don’t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. We’ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps.

Expand All @@ -124,7 +124,6 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
Some features are currently **not supported**:

* Server rendering.
* Testing.
* Some experimental syntax extensions (e.g. decorators).
* CSS Modules.
* LESS or Sass.
Expand Down
23 changes: 15 additions & 8 deletions template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
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/template/README.md).

## Table of Contents
Expand All @@ -9,6 +9,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
- [Available Scripts](#available-scripts)
- [npm start](#npm-start)
- [npm run build](#npm-run-build)
- [npm run test](#npm-run-test)
- [npm run eject](#npm-run-eject)
- [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
- [Installing a Dependency](#installing-a-dependency)
Expand Down Expand Up @@ -75,10 +76,10 @@ 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.

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
Expand All @@ -101,6 +102,12 @@ It correctly bundles React in production mode and optimizes the build for the be
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

### `npm run test`

Runs the tests using [Jest](http://facebook.github.io/jest/).

An example React snapshot test is provided and snapshot tests are the recommended way of testing. To learn more, read the snapshot testing [tutorial](http://facebook.github.io/jest/docs/tutorial-react.html#snapshot-testing).

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
Expand Down Expand Up @@ -138,7 +145,7 @@ Then make sure `package.json` of your project ends with this block:
}
```

Projects generated with `[email protected]` and higher should already have it.
Projects generated with `[email protected]` and higher should already have it.
If you don’t need ESLint integration with your editor, you can safely delete those three lines from your `package.json`.

Finally, you will need to install some packages *globally*:
Expand All @@ -159,7 +166,7 @@ npm install --save <library-name>

## 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:
Expand Down Expand Up @@ -467,7 +474,7 @@ Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-r

>Note: this feature is available with `[email protected]` 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:

```
Expand All @@ -494,15 +501,15 @@ Fetch API cannot load http://localhost:400/api/todos. No 'Access-Control-Allow-O

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 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)).
* Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.

## Deployment

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
Expand Down