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.
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() {
exportdefaultfunctionHeader;
```
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:
@@ -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 `<App>` and doesn’t go deeper. For example, even if `<App>` itself renders a `<Button>` that throws, this test will pass. Shallow rendering is great for isolated unit tests, but you may still want to create some full rendering tests to ensure the components integrate correctly. Enzyme supports [full rendering with `mount()`](http://airbnb.io/enzyme/docs/api/mount.html), and you can also use it for testing state changes and component lifecyle.
Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `<App>` and doesn’t go deeper. For example, even if `<App>` itself renders a `<Button>` that throws, this test will pass. Shallow rendering is great for isolated unit tests, but you may still want to create some full rendering tests to ensure the components integrate correctly. Enzyme supports [full rendering with `mount()`](http://airbnb.io/enzyme/docs/api/mount.html), and you can also use it for testing state changes and component lifecycle.
You can read the [Enzyme documentation](http://airbnb.io/enzyme/) for more testing techniques. Enzyme documentation uses Chai and Sinon for assertions but you don’t have to use them because Jest provides built-in `expect()` and `jest.fn()` for spies.
@@ -791,7 +791,7 @@ By default `npm test` runs the watcher with interactive CLI. However, you can fo
### On CI servers
#### Travis CI
1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your Github repository with Travis. You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis. You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page.
1. Add a `.travis.yml` file to your git repository.
```
language: node_js
...
...
@@ -838,7 +838,7 @@ By default, the `package.json` of the generated project looks like this:
}
```
If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster.
If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster.
To help you make up your mind, here is a list of APIs that **need jsdom**:
* Any browser globals like `window` and `document`
...
...
@@ -863,7 +863,7 @@ This feature is experimental and still [has major usage issues](https://github.c
## Building for Relative Paths
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
...
...
@@ -882,7 +882,7 @@ Open your `package.json` and add a `homepage` field:
"homepage":"http://myusername.github.io/my-app",
```
**The above step is important!**
**The above step is important!**
Create React App uses the `homepage` field to determine the root URL in the built HTML file.
Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages:
...
...
@@ -905,7 +905,7 @@ Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` hi
### Heroku
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
### Modulus
...
...
@@ -964,7 +964,7 @@ Install the Surge CLI if you haven't already by running `npm install -g surge`.
Success! Project is published and running at create-react-app.surge.sh
```
Note that in order to support routers that use html5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
