75 |
77 |
78 |
79 | } />
81 |
86 |
87 |
88 |
89 |
90 | );
91 | }
92 | }
93 |
94 | export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main));
95 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register() {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Lets check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl);
38 |
39 | // Add some additional logging to localhost, pointing developers to the
40 | // service worker/PWA documentation.
41 | navigator.serviceWorker.ready.then(() => {
42 | console.log(
43 | 'This web app is being served cache-first by a service ' +
44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ'
45 | );
46 | });
47 | } else {
48 | // Is not local host. Just register service worker
49 | registerValidSW(swUrl);
50 | }
51 | });
52 | }
53 | }
54 |
55 | function registerValidSW(swUrl) {
56 | navigator.serviceWorker
57 | .register(swUrl)
58 | .then(registration => {
59 | registration.onupdatefound = () => {
60 | const installingWorker = registration.installing;
61 | installingWorker.onstatechange = () => {
62 | if (installingWorker.state === 'installed') {
63 | if (navigator.serviceWorker.controller) {
64 | // At this point, the old content will have been purged and
65 | // the fresh content will have been added to the cache.
66 | // It's the perfect time to display a "New content is
67 | // available; please refresh." message in your web app.
68 | console.log('New content is available; please refresh.');
69 | } else {
70 | // At this point, everything has been precached.
71 | // It's the perfect time to display a
72 | // "Content is cached for offline use." message.
73 | console.log('Content is cached for offline use.');
74 | }
75 | }
76 | };
77 | };
78 | })
79 | .catch(error => {
80 | console.error('Error during service worker registration:', error);
81 | });
82 | }
83 |
84 | function checkValidServiceWorker(swUrl) {
85 | // Check if the service worker can be found. If it can't reload the page.
86 | fetch(swUrl)
87 | .then(response => {
88 | // Ensure service worker exists, and that we really are getting a JS file.
89 | if (
90 | response.status === 404 ||
91 | response.headers.get('content-type').indexOf('javascript') === -1
92 | ) {
93 | // No service worker found. Probably a different app. Reload the page.
94 | navigator.serviceWorker.ready.then(registration => {
95 | registration.unregister().then(() => {
96 | window.location.reload();
97 | });
98 | });
99 | } else {
100 | // Service worker found. Proceed as normal.
101 | registerValidSW(swUrl);
102 | }
103 | })
104 | .catch(() => {
105 | console.log(
106 | 'No internet connection found. App is running in offline mode.'
107 | );
108 | });
109 | }
110 |
111 | export function unregister() {
112 | if ('serviceWorker' in navigator) {
113 | navigator.serviceWorker.ready.then(registration => {
114 | registration.unregister();
115 | });
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/src/shared/comments.js:
--------------------------------------------------------------------------------
1 | export const COMMENTS =
2 | [
3 | {
4 | id: 0,
5 | dishId: 0,
6 | rating: 5,
7 | comment: "Imagine all the eatables, living in conFusion!",
8 | author: "John Lemon",
9 | date: "2012-10-16T17:57:28.556094Z"
10 | },
11 | {
12 | id: 1,
13 | dishId: 0,
14 | rating: 4,
15 | comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
16 | author: "Paul McVites",
17 | date: "2014-09-05T17:57:28.556094Z"
18 | },
19 | {
20 | id: 2,
21 | dishId: 0,
22 | rating: 3,
23 | comment: "Eat it, just eat it!",
24 | author: "Michael Jaikishan",
25 | date: "2015-02-13T17:57:28.556094Z"
26 | },
27 | {
28 | id: 3,
29 | dishId: 0,
30 | rating: 4,
31 | comment: "Ultimate, Reaching for the stars!",
32 | author: "Ringo Starry",
33 | date: "2013-12-02T17:57:28.556094Z"
34 | },
35 | {
36 | id: 4,
37 | dishId: 0,
38 | rating: 2,
39 | comment: "It's your birthday, we're gonna party!",
40 | author: "25 Cent",
41 | date: "2011-12-02T17:57:28.556094Z"
42 | },
43 | {
44 | id: 5,
45 | dishId: 1,
46 | rating: 5,
47 | comment: "Imagine all the eatables, living in conFusion!",
48 | author: "John Lemon",
49 | date: "2012-10-16T17:57:28.556094Z"
50 | },
51 | {
52 | id: 6,
53 | dishId: 1,
54 | rating: 4,
55 | comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
56 | author: "Paul McVites",
57 | date: "2014-09-05T17:57:28.556094Z"
58 | },
59 | {
60 | id: 7,
61 | dishId: 1,
62 | rating: 3,
63 | comment: "Eat it, just eat it!",
64 | author: "Michael Jaikishan",
65 | date: "2015-02-13T17:57:28.556094Z"
66 | },
67 | {
68 | id: 8,
69 | dishId: 1,
70 | rating: 4,
71 | comment: "Ultimate, Reaching for the stars!",
72 | author: "Ringo Starry",
73 | date: "2013-12-02T17:57:28.556094Z"
74 | },
75 | {
76 | id: 9,
77 | dishId: 1,
78 | rating: 2,
79 | comment: "It's your birthday, we're gonna party!",
80 | author: "25 Cent",
81 | date: "2011-12-02T17:57:28.556094Z"
82 | },
83 | {
84 | id: 10,
85 | dishId: 2,
86 | rating: 5,
87 | comment: "Imagine all the eatables, living in conFusion!",
88 | author: "John Lemon",
89 | date: "2012-10-16T17:57:28.556094Z"
90 | },
91 | {
92 | id: 11,
93 | dishId: 2,
94 | rating: 4,
95 | comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
96 | author: "Paul McVites",
97 | date: "2014-09-05T17:57:28.556094Z"
98 | },
99 | {
100 | id: 12,
101 | dishId: 2,
102 | rating: 3,
103 | comment: "Eat it, just eat it!",
104 | author: "Michael Jaikishan",
105 | date: "2015-02-13T17:57:28.556094Z"
106 | },
107 | {
108 | id: 13,
109 | dishId: 2,
110 | rating: 4,
111 | comment: "Ultimate, Reaching for the stars!",
112 | author: "Ringo Starry",
113 | date: "2013-12-02T17:57:28.556094Z"
114 | },
115 | {
116 | id: 14,
117 | dishId: 2,
118 | rating: 2,
119 | comment: "It's your birthday, we're gonna party!",
120 | author: "25 Cent",
121 | date: "2011-12-02T17:57:28.556094Z"
122 | },
123 | {
124 | id: 15,
125 | dishId: 3,
126 | rating: 5,
127 | comment: "Imagine all the eatables, living in conFusion!",
128 | author: "John Lemon",
129 | date: "2012-10-16T17:57:28.556094Z"
130 | },
131 | {
132 | id: 16,
133 | dishId: 3,
134 | rating: 4,
135 | comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
136 | author: "Paul McVites",
137 | date: "2014-09-05T17:57:28.556094Z"
138 | },
139 | {
140 | id: 17,
141 | dishId: 3,
142 | rating: 3,
143 | comment: "Eat it, just eat it!",
144 | author: "Michael Jaikishan",
145 | date: "2015-02-13T17:57:28.556094Z"
146 | },
147 | {
148 | id: 18,
149 | dishId: 3,
150 | rating: 4,
151 | comment: "Ultimate, Reaching for the stars!",
152 | author: "Ringo Starry",
153 | date: "2013-12-02T17:57:28.556094Z"
154 | },
155 | {
156 | id: 19,
157 | dishId: 3,
158 | rating: 2,
159 | comment: "It's your birthday, we're gonna party!",
160 | author: "25 Cent",
161 | date: "2011-12-02T17:57:28.556094Z"
162 | }
163 | ];
--------------------------------------------------------------------------------
/src/components/AboutComponent.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Media } from 'reactstrap';
3 | import { Link } from 'react-router-dom';
4 | import { Loading } from './LoadingComponent';
5 | import { baseUrl } from '../shared/baseUrl';
6 | import { FadeTransform, Fade, Stagger } from 'react-animation-components';
7 |
8 | function About(props) {
9 |
10 | const leaders = props.leaders.leaders.map(leader => {
11 | return (
12 | {leader.designation}
26 |{leader.description}
27 |{props.leaders.errMess}
41 | ); 42 | } 43 | else return ( 44 |
54 |
111 | );
112 | }
113 |
114 | export default About;
--------------------------------------------------------------------------------
/src/components/HeaderComponent.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Navbar, NavbarBrand, Nav, NavbarToggler, NavItem, Collapse, Jumbotron, Button, Modal, ModalHeader, ModalBody, Form, FormGroup, Input, Label } from 'reactstrap';
3 | import { NavLink } from 'react-router-dom';
4 |
5 | export default class Header extends Component {
6 |
7 | constructor(props) {
8 | super(props)
9 |
10 | this.state = {
11 | isNavOpen: false,
12 | isModalOpen: false
13 | };
14 |
15 | this.toggleNav = this.toggleNav.bind(this);
16 | this.toggleModal = this.toggleModal.bind(this);
17 | this.handleLogin = this.handleLogin.bind(this);
18 | }
19 |
20 | toggleNav() {
21 | this.setState({ isNavOpen: !this.state.isNavOpen });
22 | }
23 |
24 | toggleModal() {
25 | this.setState({ isModalOpen: !this.state.isModalOpen });
26 | }
27 |
28 | handleLogin(evt){
29 | this.toggleModal();
30 |
31 | alert(this.username.value + " " + this.password.value);
32 |
33 | evt.preventDefault();
34 | }
35 |
36 | render() {
37 | return (
38 |
55 |
56 | Home
57 | About Us
58 |
59 |
64 |
60 |
62 |
63 | About Us
61 |62 |
65 |
102 |
66 |
70 | Our History
67 |Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong. Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.
68 |The restaurant traces its humble beginnings to The Frying Pan, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.
69 |
71 |
72 | Facts At a Glance
73 |
74 |
85 |
86 |
87 | -
75 |
- Started 76 |
- 3 Feb. 2013 77 |
- Major Stake Holder 78 |
- HK Fine Foods Inc. 79 |
- Last Year's Turnover 80 |
- $1,250,375 81 |
- Employees 82 |
- 40 83 |
88 |
89 |
90 |
99 |
100 |
101 | 91 |98 |You better cut the pizza in four pieces because 92 | I'm not hungry enough to eat six.
93 | 97 |
103 |
110 |
104 |
106 | Corporate Leadership
105 |
107 |
109 |
41 |
43 | 
44 |
45 |
46 |
47 |
72 |
79 |
80 |
81 |
44 |
84 |
91 |
85 |
90 |
86 |
89 | Ristorante Con Fusion
87 |We take inspiration from the world's jlsfjldsjfljldsjllj
88 |32 | -- {comment.author}, {new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit' }).format(new Date(Date.parse(comment.date)))} 33 |
34 |
41 |
49 | );
50 | }
51 |
52 | const DishDetail = props => {
53 | if (props.isLoading) {
54 | return (
55 | Comments
42 |-
43 |
56 |
60 | );
61 | }
62 | else if (props.errMess) {
63 | return (
64 |
57 |
59 |
65 |
69 | );
70 | }
71 | else if (props.dish) {
72 | return (
73 |
66 |
68 | {props.errMess}
67 |
74 |
93 | );
94 | }
95 | else {
96 | return (
97 |
98 | );
99 | }
100 | }
101 |
102 | export default DishDetail;
103 |
104 |
105 |
106 | const required = (val) => val && val.length;
107 | const maxLength = (len) => (val) => !(val) || (val.length <= len);
108 | const minLength = (len) => (val) => val && (val.length >= len);
109 |
110 | export class CommentForm extends Component {
111 | constructor(props) {
112 | super(props)
113 |
114 | this.state = {
115 | isModalOpen: false
116 | };
117 |
118 | this.toggleModal = this.toggleModal.bind(this);
119 | this.handleSubmit = this.handleSubmit.bind(this);
120 | }
121 |
122 | toggleModal() {
123 | this.setState({ isModalOpen: !this.state.isModalOpen });
124 | }
125 |
126 | handleSubmit(values) {
127 | this.toggleModal();
128 |
129 | this.props.postComment(this.props.dishId, values.rating, values.author, values.comment);
130 | }
131 |
132 | render() {
133 | return (
134 |
75 |
76 | Menu
77 | {props.dish.name}
78 |
79 |
84 |
80 |
82 |
83 | {props.dish.name}
81 |82 |
85 |
92 |
86 |
88 |
89 |
91 |
135 |
138 |
139 |
181 | );
182 | }
183 | }
--------------------------------------------------------------------------------
/src/components/ContactComponent.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Breadcrumb, BreadcrumbItem, Button, Label, Col, Row } from 'reactstrap';
3 | import { Link } from 'react-router-dom';
4 | import { Control, Form, Errors } from 'react-redux-form';
5 |
6 | const required = (val) => val && val.length;
7 | const maxLength = (len) => (val) => !(val) || (val.length <= len);
8 | const minLength = (len) => (val) => val && (val.length >= len);
9 | const isNumber = (val) => !isNaN(Number(val));
10 | const validEmail = (val) => /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(val);
11 |
12 | class Contact extends Component {
13 |
14 | constructor(props) {
15 | super(props);
16 |
17 | this.handleSubmit = this.handleSubmit.bind(this);
18 | }
19 |
20 | handleSubmit(values) {
21 | this.props.postFeedback(values);
22 | this.props.resetFeedbackForm();
23 | }
24 |
25 | render() {
26 | return (
27 |
140 |
141 | Submit comment
142 |
143 |
178 |
179 |
180 |
144 | this.handleSubmit(values)} >
145 |
146 |
147 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
165 |
166 |
167 |
168 |
173 |
174 |
175 |
176 |
177 |
28 |
137 | );
138 | };
139 | }
140 |
141 | export default Contact;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
2 |
3 | Below you will find some information on how to perform common tasks.
29 |
30 | Home
31 | Contact us
32 |
33 |
38 |
34 |
36 |
37 | Contact us
35 |36 |
39 |
64 |
40 |
42 | Location Information
41 |
43 |
46 | Clear Water Bay, Kowloon
47 | HONG KONG
48 | : +852 1234 5678
49 | : +852 8765 4321
50 | : confusion@food.net 51 | 52 |
53 | Our Address
44 | 45 | 121, Clear Water Bay Road46 | Clear Water Bay, Kowloon
47 | HONG KONG
48 | : +852 1234 5678
49 | : +852 8765 4321
50 | : confusion@food.net 51 | 52 |
54 |
56 |
63 | Map of our Location
55 |
65 |
136 |
66 |
68 | Send us you feedback
67 |
69 |
134 |
135 | 4 | 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). 5 | 6 | ## Table of Contents 7 | 8 | - [Updating to New Releases](#updating-to-new-releases) 9 | - [Sending Feedback](#sending-feedback) 10 | - [Folder Structure](#folder-structure) 11 | - [Available Scripts](#available-scripts) 12 | - [npm start](#npm-start) 13 | - [npm test](#npm-test) 14 | - [npm run build](#npm-run-build) 15 | - [npm run eject](#npm-run-eject) 16 | - [Supported Browsers](#supported-browsers) 17 | - [Supported Language Features and Polyfills](#supported-language-features-and-polyfills) 18 | - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor) 19 | - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor) 20 | - [Debugging in the Editor](#debugging-in-the-editor) 21 | - [Formatting Code Automatically](#formatting-code-automatically) 22 | - [Changing the Page `
976 | Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details. 977 | 978 | >Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need 979 | 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). 980 | 981 | #### Expanding Environment Variables In `.env` 982 | 983 | >Note: this feature is available with `react-scripts@1.1.0` and higher. 984 | 985 | Expand variables already on your machine for use in your `.env` file (using [dotenv-expand](https://github.com/motdotla/dotenv-expand)). 986 | 987 | For example, to get the environment variable `npm_package_version`: 988 | 989 | ``` 990 | REACT_APP_VERSION=$npm_package_version 991 | # also works: 992 | # REACT_APP_VERSION=${npm_package_version} 993 | ``` 994 | 995 | Or expand variables local to the current `.env` file: 996 | 997 | ``` 998 | DOMAIN=www.example.com 999 | REACT_APP_FOO=$DOMAIN/foo 1000 | REACT_APP_BAR=$DOMAIN/bar 1001 | ``` 1002 | 1003 | ## Can I Use Decorators? 1004 | 1005 | Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.
1006 | Create React App doesn’t support decorator syntax at the moment because: 1007 | 1008 | * It is an experimental proposal and is subject to change. 1009 | * The current specification version is not officially supported by Babel. 1010 | * If the specification changes, we won’t be able to write a codemod because we don’t use them internally at Facebook. 1011 | 1012 | However in many cases you can rewrite decorator-based code without decorators just as fine.
1013 | Please refer to these two threads for reference: 1014 | 1015 | * [#214](https://github.com/facebookincubator/create-react-app/issues/214) 1016 | * [#411](https://github.com/facebookincubator/create-react-app/issues/411) 1017 | 1018 | Create React App will add decorator support when the specification advances to a stable stage. 1019 | 1020 | ## Fetching Data with AJAX Requests 1021 | 1022 | React doesn't prescribe a specific approach to data fetching, but people commonly use either a library like [axios](https://github.com/axios/axios) or the [`fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provided by the browser. Conveniently, Create React App includes a polyfill for `fetch()` so you can use it without worrying about the browser support. 1023 | 1024 | The global `fetch` function allows to easily makes AJAX requests. It takes in a URL as an input and returns a `Promise` that resolves to a `Response` object. You can find more information about `fetch` [here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). 1025 | 1026 | This project also includes a [Promise polyfill](https://github.com/then/promise) which provides a full implementation of Promises/A+. A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises [here](https://www.promisejs.org/) and [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Both axios and `fetch()` use Promises under the hood. You can also use the [`async / await`](https://davidwalsh.name/async-await) syntax to reduce the callback nesting. 1027 | 1028 | You can learn more about making AJAX requests from React components in [the FAQ entry on the React website](https://reactjs.org/docs/faq-ajax.html). 1029 | 1030 | ## Integrating with an API Backend 1031 | 1032 | These tutorials will help you to integrate your app with an API backend running on another port, 1033 | using `fetch()` to access it. 1034 | 1035 | ### Node 1036 | Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/). 1037 | You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo). 1038 | 1039 | ### Ruby on Rails 1040 | 1041 | Check out [this tutorial](https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/). 1042 | You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo-rails). 1043 | 1044 | ## Proxying API Requests in Development 1045 | 1046 | >Note: this feature is available with `react-scripts@0.2.3` and higher. 1047 | 1048 | People often serve the front-end React app from the same host and port as their backend implementation.
1049 | For example, a production setup might look like this after the app is deployed: 1050 | 1051 | ``` 1052 | / - static server returns index.html with React app 1053 | /todos - static server returns index.html with React app 1054 | /api/todos - server handles any /api/* requests using the backend implementation 1055 | ``` 1056 | 1057 | 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. 1058 | 1059 | 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: 1060 | 1061 | ```js 1062 | "proxy": "http://localhost:4000", 1063 | ``` 1064 | 1065 | 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 `text/html` in its `Accept` header to the proxy. 1066 | 1067 | Conveniently, this avoids [CORS issues](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: 1068 | 1069 | ``` 1070 | 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. 1071 | ``` 1072 | 1073 | 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`. 1074 | 1075 | The `proxy` option supports HTTP, HTTPS and WebSocket connections.
1076 | If the `proxy` option is **not** flexible enough for you, alternatively you can: 1077 | 1078 | * [Configure the proxy yourself](#configuring-the-proxy-manually) 1079 | * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). 1080 | * Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app. 1081 | 1082 | ### "Invalid Host Header" Errors After Configuring Proxy 1083 | 1084 | 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). 1085 | 1086 | 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: 1087 | 1088 | >Invalid Host header 1089 | 1090 | To work around it, you can specify your public development host in a file called `.env.development` in the root of your project: 1091 | 1092 | ``` 1093 | HOST=mypublicdevhost.com 1094 | ``` 1095 | 1096 | If you restart the development server now and load the app from the specified host, it should work. 1097 | 1098 | 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:** 1099 | 1100 | ``` 1101 | # NOTE: THIS IS DANGEROUS! 1102 | # It exposes your machine to attacks from the websites you visit. 1103 | DANGEROUSLY_DISABLE_HOST_CHECK=true 1104 | ``` 1105 | 1106 | We don’t recommend this approach. 1107 | 1108 | ### Configuring the Proxy Manually 1109 | 1110 | >Note: this feature is available with `react-scripts@1.0.0` and higher. 1111 | 1112 | If the `proxy` option is **not** flexible enough for you, you can specify an object in the following form (in `package.json`).
1113 | You may also specify any configuration value [`http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) or [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options) supports. 1114 | ```js 1115 | { 1116 | // ... 1117 | "proxy": { 1118 | "/api": { 1119 | "target": "
1270 | >[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) 1271 | 1272 | 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. 1273 | 1274 | 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. 1275 | 1276 | 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. 1277 | 1278 | 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. 1279 | 1280 | ### Filename Conventions 1281 | 1282 | Jest will look for test files with any of the following popular naming conventions: 1283 | 1284 | * Files with `.js` suffix in `__tests__` folders. 1285 | * Files with `.test.js` suffix. 1286 | * Files with `.spec.js` suffix. 1287 | 1288 | The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder. 1289 | 1290 | 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. 1291 | 1292 | ### Command Line Interface 1293 | 1294 | 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. 1295 | 1296 | 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: 1297 | 1298 |  1299 | 1300 | ### Version Control Integration 1301 | 1302 | 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 run 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. 1303 | 1304 | 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. 1305 | 1306 | 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. 1307 | 1308 | ### Writing Tests 1309 | 1310 | 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. 1311 | 1312 | Jest provides a built-in `expect()` global function for making assertions. A basic test could look like this: 1313 | 1314 | ```js 1315 | import sum from './sum'; 1316 | 1317 | it('sums numbers', () => { 1318 | expect(sum(1, 2)).toEqual(3); 1319 | expect(sum(2, 2)).toEqual(4); 1320 | }); 1321 | ``` 1322 | 1323 | All `expect()` matchers supported by Jest are [extensively documented here](https://facebook.github.io/jest/docs/en/expect.html#content).
1324 | You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.github.io/jest/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. 1325 | 1326 | ### Testing Components 1327 | 1328 | 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. 1329 | 1330 | 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: 1331 | 1332 | ```js 1333 | import React from 'react'; 1334 | import ReactDOM from 'react-dom'; 1335 | import App from './App'; 1336 | 1337 | it('renders without crashing', () => { 1338 | const div = document.createElement('div'); 1339 | ReactDOM.render(