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.<br>
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.<br>
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`.<br>
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.<br>
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.<br>
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.<br>
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:
...
...
@@ -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).<br>
An alternative way of handling static assets is described in the next section.
## Using the `public` Folder
...
...
@@ -517,7 +517,7 @@ To define permanent environment variables, create a file called `.env` in the ro
REACT_APP_SECRET_CODE=abcdef
```
These variables will act as the defaults if the machine does not explicitly set them.
These variables will act as the defaults if the machine does not explicitly set them.<br>
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.
>Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
...
...
@@ -525,14 +525,14 @@ these defined as well. Consult their documentation how to do this. For example,
## Can I Use Decorators?
Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.
Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.<br>
Create React App doesn’t support decorator syntax at the moment because:
* It is an experimental proposal and is subject to change.
* 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.
However in many cases you can rewrite decorator-based code without decorators just as fine.<br>
@@ -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.<br>
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.<br>
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.<br>
>[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).<br>
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.
@@ -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.<br>
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.<br>
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!**<br>
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).<br>
You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
