Page Not Found

; 260 | } 261 | } 262 | ``` 263 | 264 | **This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack. 265 | 266 | In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified `.css` file in the build output. 267 | 268 | If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool. 269 | 270 | ## Post-Processing CSS 271 | 272 | This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it. 273 | 274 | For example, this: 275 | 276 | ```css 277 | .App { 278 | display: flex; 279 | flex-direction: row; 280 | align-items: center; 281 | } 282 | ``` 283 | 284 | becomes this: 285 | 286 | ```css 287 | .App { 288 | display: -webkit-box; 289 | display: -ms-flexbox; 290 | display: flex; 291 | -webkit-box-orient: horizontal; 292 | -webkit-box-direction: normal; 293 | -ms-flex-direction: row; 294 | flex-direction: row; 295 | -webkit-box-align: center; 296 | -ms-flex-align: center; 297 | align-items: center; 298 | } 299 | ``` 300 | 301 | There is currently no support for preprocessors such as Less, or for sharing variables across CSS files. 302 | 303 | ## Adding Images and Fonts 304 | 305 | With Webpack, using static assets like images and fonts works similarly to CSS. 306 | 307 | You can **`import` an image right in a JavaScript module**. This tells Webpack to include that image in the bundle. Unlike CSS imports, importing an image or a font gives you a string value. This value is the final image path you can reference in your code. 308 | 309 | Here is an example: 310 | 311 | ```js 312 | import React from 'react'; 313 | import logo from './logo.png'; // Tell Webpack this JS file uses this image 314 | 315 | console.log(logo); // /logo.84287d09.png 316 | 317 | function Header() { 318 | // Import result is the URL of your image 319 | return

; 320 | } 321 | 322 | export default function Header; 323 | ``` 324 | 325 | This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths. 326 | 327 | This works in CSS too: 328 | 329 | ```css 330 | .Logo { 331 | background-image: url(./logo.png); 332 | } 333 | ``` 334 | 335 | Webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets. 336 | 337 | Please be advised that this is also a custom feature of Webpack. 338 | 339 | **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). 340 | An alternative way of handling static assets is described in the next section. 341 | 342 | ## Using the `public` Folder 343 | 344 | >Note: this feature is available with `react-scripts@0.5.0` and higher. 345 | 346 | Normally we encourage you to `import` assets in JavaScript files as described above. This mechanism provides a number of benefits: 347 | 348 | * Scripts and stylesheets get minified and bundled together to avoid extra network requests. 349 | * Missing files cause compilation errors instead of 404 errors for your users. 350 | * Result filenames include content hashes so you don’t need to worry about browsers caching their old versions. 351 | 352 | However there is an **escape hatch** that you can use to add an asset outside of the module system. 353 | 354 | 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`. 355 | 356 | Inside `index.html`, you can use it like this: 357 | 358 | ```html 359 | 360 | ``` 361 | 362 | 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. 363 | 364 | 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. 365 | 366 | In JavaScript code, you can use `process.env.PUBLIC_URL` for similar purposes: 367 | 368 | ```js 369 | render() { 370 | // Note: this is an escape hatch and should be used sparingly! 371 | // Normally we recommend using `import` for getting asset URLs 372 | // as described in “Adding Images and Fonts” above this section. 373 | return

; 374 | } 375 | ``` 376 | 377 | Keep in mind the downsides of this approach: 378 | 379 | * None of the files in `public` folder get post-processed or minified. 380 | * Missing files will not be called at compilation time, and will cause 404 errors for your users. 381 | * Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change. 382 | 383 | However, it can be handy for referencing assets like [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest) from HTML, or including small scripts like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code. 384 | 385 | ## Adding Bootstrap 386 | 387 | You don’t have to use [React Bootstrap](https://react-bootstrap.github.io) together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps: 388 | 389 | Install React Bootstrap and Bootstrap from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well: 390 | 391 | ``` 392 | npm install react-bootstrap --save 393 | npm install bootstrap@3 --save 394 | ``` 395 | 396 | Import Bootstrap CSS and optionally Bootstrap theme CSS in the ```src/index.js``` file: 397 | 398 | ```js 399 | import 'bootstrap/dist/css/bootstrap.css'; 400 | import 'bootstrap/dist/css/bootstrap-theme.css'; 401 | ``` 402 | 403 | Import required React Bootstrap components within ```src/App.js``` file or your custom component files: 404 | 405 | ```js 406 | import { Navbar, Jumbotron, Button } from 'react-bootstrap'; 407 | ``` 408 | 409 | Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap. 410 | 411 | ## Adding Flow 412 | 413 | Flow typing is currently [not supported out of the box](https://github.com/facebookincubator/create-react-app/issues/72) with the default `.flowconfig` generated by Flow. If you run it, you might get errors like this: 414 | 415 | ```js 416 | node_modules/fbjs/lib/Deferred.js.flow:60 417 | 60: Promise.prototype.done.apply(this._promise, arguments); 418 | ^^^^ property `done`. Property not found in 419 | 495: declare class Promise<+R> { 420 | ^ Promise. See lib: /private/tmp/flow/flowlib_34952d31/core.js:495 421 | 422 | node_modules/fbjs/lib/shallowEqual.js.flow:29 423 | 29: return x !== 0 || 1 / (x: $FlowIssue) === 1 / (y: $FlowIssue); 424 | ^^^^^^^^^^ identifier `$FlowIssue`. Could not resolve name 425 | ``` 426 | 427 | To fix this, change your `.flowconfig` to look like this: 428 | 429 | ```ini 430 | [ignore] 431 | /node_modules/fbjs/.* 432 | ``` 433 | 434 | Re-run flow, and you shouldn’t get any extra issues. 435 | 436 | ## Adding Custom Environment Variables 437 | 438 | >Note: this feature is available with `react-scripts@0.2.3` and higher. 439 | 440 | Your project can consume variables declared in your environment as if they were declared locally in your JS files. By 441 | default you will have `NODE_ENV` defined for you, and any other environment variables starting with 442 | `REACT_APP_`. These environment variables will be defined for you on `process.env`. For example, having an environment 443 | variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`, in addition 444 | to `process.env.NODE_ENV`. 445 | 446 | These environment variables can be useful for displaying information conditionally based on where the project is 447 | deployed or consuming sensitive data that lives outside of version control. 448 | 449 | First, you need to have environment variables defined. For example, let’s say you wanted to consume a secret defined 450 | in the environment inside a ` 461 | ); 462 | } 463 | ``` 464 | 465 | During the build, `process.env.REACT_APP_SECRET_CODE` will be replaced with the current value of the `REACT_APP_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. 466 | 467 | When you load the app in the browser and inspect the ``, you will see its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`: 468 | 469 | ```html 470 |

471 | You are running this application in development mode. 472 | 475 |

476 | ``` 477 | 478 | Having access to the `NODE_ENV` is also useful for performing actions conditionally: 479 | 480 | ```js 481 | if (process.env.NODE_ENV !== 'production') { 482 | analytics.disable(); 483 | } 484 | ``` 485 | 486 | The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this 487 | value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in 488 | a `.env` file. 489 | 490 | ### Adding Temporary Environment Variables In Your Shell 491 | 492 | Defining environment variables can vary between OSes. It's also important to know that this manner is temporary for the 493 | life of the shell session. 494 | 495 | #### Windows (cmd.exe) 496 | 497 | ```cmd 498 | set REACT_APP_SECRET_CODE=abcdef&&npm start 499 | ``` 500 | 501 | (Note: the lack of whitespace is intentional.) 502 | 503 | #### Linux, OS X (Bash) 504 | 505 | ```bash 506 | REACT_APP_SECRET_CODE=abcdef npm start 507 | ``` 508 | 509 | ### Adding Development Environment Variables In `.env` 510 | 511 | >Note: this feature is available with `react-scripts@0.5.0` and higher. 512 | 513 | To define permanent environment vairables, create a file called `.env` in the root of your project: 514 | 515 | ``` 516 | REACT_APP_SECRET_CODE=abcdef 517 | ``` 518 | 519 | These variables will act as the defaults if the machine does not explicitly set them. 520 | Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details. 521 | 522 | >Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need 523 | these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars). 524 | 525 | ## Can I Use Decorators? 526 | 527 | Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation. 528 | Create React App doesn’t support decorator syntax at the moment because: 529 | 530 | * It is an experimental proposal and is subject to change. 531 | * The current specification version is not officially supported by Babel. 532 | * If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook. 533 | 534 | However in many cases you can rewrite decorator-based code without decorators just as fine. 535 | Please refer to these two threads for reference: 536 | 537 | * [#214](https://github.com/facebookincubator/create-react-app/issues/214) 538 | * [#411](https://github.com/facebookincubator/create-react-app/issues/411) 539 | 540 | Create React App will add decorator support when the specification advances to a stable stage. 541 | 542 | ## Integrating with a Node Backend 543 | 544 | Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/) for instructions on integrating an app with a Node backend running on another port, and using `fetch()` to access it. You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo). 545 | 546 | ## Proxying API Requests in Development 547 | 548 | >Note: this feature is available with `react-scripts@0.2.3` and higher. 549 | 550 | People often serve the front-end React app from the same host and port as their backend implementation. 551 | For example, a production setup might look like this after the app is deployed: 552 | 553 | ``` 554 | / - static server returns index.html with React app 555 | /todos - static server returns index.html with React app 556 | /api/todos - server handles any /api/* requests using the backend implementation 557 | ``` 558 | 559 | 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. 560 | 561 | 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: 562 | 563 | ```js 564 | "proxy": "http://localhost:4000", 565 | ``` 566 | 567 | This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback. The development server will only attempt to send requests without a `text/html` accept header to the proxy. 568 | 569 | Conveniently, this avoids [CORS issues](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: 570 | 571 | ``` 572 | Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 573 | ``` 574 | 575 | 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`. 576 | 577 | Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections. 578 | If the `proxy` option is **not** flexible enough for you, alternatively you can: 579 | 580 | * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). 581 | * Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app. 582 | 583 | ## Using HTTPS in Development 584 | 585 | >Note: this feature is available with `react-scripts@0.4.0` and higher. 586 | 587 | You may require the dev server to serve pages over HTTPS. One particular case where this could be useful is when using [the "proxy" feature](#proxying-api-requests-in-development) to proxy requests to an API server when that API server is itself serving HTTPS. 588 | 589 | To do this, set the `HTTPS` environment variable to `true`, then start the dev server as usual with `npm start`: 590 | 591 | #### Windows (cmd.exe) 592 | 593 | ```cmd 594 | set HTTPS=true&&npm start 595 | ``` 596 | 597 | (Note: the lack of whitespace is intentional.) 598 | 599 | #### Linux, OS X (Bash) 600 | 601 | ```bash 602 | HTTPS=true npm start 603 | ``` 604 | 605 | Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page. 606 | 607 | ## Generating Dynamic `` Tags on the Server 608 | 609 | Since Create React App doesn’t support server rendering, you might be wondering how to make `` tags dynamic and reflect the current URL. To solve this, we recommend to add placeholders into the HTML, like this: 610 | 611 | ```html 612 | 613 | 614 | 615 | 616 | 617 | ``` 618 | 619 | 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. Just make sure to sanitize and escape the interpolated values so that they are safe to embed into HTML! 620 | 621 | 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. 622 | 623 | ## Running Tests 624 | 625 | >Note: this feature is available with `react-scripts@0.3.0` and higher. 626 | >[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) 627 | 628 | 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. 629 | 630 | Jest is a Node-based runner. This means that the tests always run in a Node environment and not in a real browser. This lets us enable fast iteration speed and prevent flakiness. 631 | 632 | While Jest provides browser globals such as `window` thanks to [jsdom](https://github.com/tmpvar/jsdom), they are only approximations of the real browser behavior. Jest is intended to be used for unit tests of your logic and your components rather than the DOM quirks. 633 | 634 | We recommend that you use a separate tool for browser end-to-end tests if you need them. They are beyond the scope of Create React App. 635 | 636 | ### Filename Conventions 637 | 638 | Jest will look for test files with any of the following popular naming conventions: 639 | 640 | * Files with `.js` suffix in `__tests__` folders. 641 | * Files with `.test.js` suffix. 642 | * Files with `.spec.js` suffix. 643 | 644 | The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder. 645 | 646 | 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. 647 | 648 | ### Command Line Interface 649 | 650 | 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. 651 | 652 | 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: 653 | 654 | ![Jest watch mode](http://facebook.github.io/jest/img/blog/15-watch.gif) 655 | 656 | ### Version Control Integration 657 | 658 | By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests runs fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests. 659 | 660 | Jest will always explicitly mention that it only ran tests related to the files changed since the last commit. You can also press `a` in the watch mode to force Jest to run all tests. 661 | 662 | Jest will always run all tests on a [continuous integration](#continuous-integration) server or if the project is not inside a Git or Mercurial repository. 663 | 664 | ### Writing Tests 665 | 666 | To create tests, add `it()` (or `test()`) blocks with the name of the test and its code. You may optionally wrap them in `describe()` blocks for logical grouping but this is neither required nor recommended. 667 | 668 | Jest provides a built-in `expect()` global function for making assertions. A basic test could look like this: 669 | 670 | ```js 671 | import sum from './sum'; 672 | 673 | it('sums numbers', () => { 674 | expect(sum(1, 2)).toEqual(3); 675 | expect(sum(2, 2)).toEqual(4); 676 | }); 677 | ``` 678 | 679 | All `expect()` matchers supported by Jest are [extensively documented here](http://facebook.github.io/jest/docs/api.html#expect-value). 680 | 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. 681 | 682 | ### Testing Components 683 | 684 | 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. 685 | 686 | 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: 687 | 688 | ```js 689 | import React from 'react'; 690 | import ReactDOM from 'react-dom'; 691 | import App from './App'; 692 | 693 | it('renders without crashing', () => { 694 | const div = document.createElement('div'); 695 | ReactDOM.render(, div); 696 | }); 697 | ``` 698 | 699 | This test mounts a component and makes sure that it didn’t throw during rendering. Tests like this provide a lot value with very little effort so they are great as a starting point, and this is the test you will find in `src/App.test.js`. 700 | 701 | When you encounter bugs caused by changing components, you will gain a deeper insight into which parts of them are worth testing in your application. This might be a good time to introduce more specific tests asserting specific expected output or behavior. 702 | 703 | If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). You can write a smoke test with it too: 704 | 705 | ```sh 706 | npm install --save-dev enzyme react-addons-test-utils 707 | ``` 708 | 709 | ```js 710 | import React from 'react'; 711 | import { shallow } from 'enzyme'; 712 | import App from './App'; 713 | 714 | it('renders without crashing', () => { 715 | shallow(); 716 | }); 717 | ``` 718 | 719 | Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `` and doesn’t go deeper. For example, even if `` itself renders a `

Welcome to React

404

Page Not Found

Why am I seeing this?