├── .gitignore ├── README.md ├── chapter-01 └── readme.md ├── chapter-02 ├── 01-declaring-variables │ ├── 01-const.html │ ├── 02-const.html │ ├── 03-let.html │ ├── 04-let.html │ ├── 05-let.html │ ├── 06-let.html │ ├── 07-template-strings.html │ ├── 08-template-strings.html │ ├── 09-template-strings.html │ └── 10-template-strings.html ├── 02-es6-functions │ ├── 01-default-parameters.html │ └── 02-default-parameters.html ├── 03-arrow-functions │ ├── 01-arrows.html │ ├── 02-arrows.html │ ├── 03-arrows.html │ ├── 04-arrows.html │ ├── 05-arrows.html │ ├── 06-arrows.html │ ├── 07-arrows.html │ ├── 08-arrows.html │ ├── 09-arrows.html │ ├── 10-arrows.html │ └── 11-arrows.html ├── 04-objects-and-arrays │ ├── 01-destructuring.html │ ├── 02-destructuring.html │ ├── 03-destructuring.html │ ├── 04-destructuring.html │ ├── 05-destructuring.html │ ├── 06-object-literal-enhancement.html │ ├── 07-object-literal-enhancement.html │ ├── 08-object-literal-enhancement.html │ ├── 09-object-literal-enhancement.html │ ├── 10-spread-operator.html │ ├── 11-spread-operator.html │ ├── 12-spread-operator.html │ ├── 13-spread-operator.html │ ├── 14-spread-operator.html │ └── 15-spread-operator.html ├── 05-promises │ ├── 01-promises.html │ └── 02-promises.html ├── 06-es6-class-syntax │ ├── 01-classes.html │ ├── 02-classes.html │ └── 03-classes.html └── readme.md ├── chapter-03 ├── 01-functional-javascript │ ├── 01-functional.html │ ├── 02-functional.html │ ├── 03-functional.html │ ├── 04-functional.html │ ├── 05-functional.html │ ├── 06-functional.html │ └── 07-functional.html ├── 02-imperative-vs-declarative │ ├── 01-imperative-declarative.html │ └── 02-imperative-declarative.html ├── 03-immutability │ ├── 01-immutability.html │ ├── 02-immutability.html │ ├── 03-immutability.html │ ├── 04-immutability.html │ ├── 05-immutability.html │ └── 06-immutability.html ├── 04-pure-functions │ ├── 01-pure-functions.html │ ├── 02-pure-functions.html │ ├── 03-pure-functions.html │ ├── 04-pure-functions.html │ └── 05-pure-functions.html ├── 05-transforming-data │ ├── 01-data.html │ ├── 02-data.html │ ├── 03-data.html │ ├── 04-data.html │ ├── 05-data.html │ ├── 06-data.html │ ├── 07-data.html │ ├── 08-data.html │ ├── 09-data.html │ ├── 10-data.html │ ├── 11-data.html │ └── 12-data.html ├── 06-higher-order-functions │ ├── 01-higher-order-fns.html │ └── 02-higher-order-fns.html ├── 07-recursion │ ├── 01-recursion.html │ ├── 02-recursion.html │ └── 03-recursion.html ├── 08-composition │ ├── 01-composition.html │ ├── 02-composition.html │ ├── 03-composition.html │ ├── 04-imperative-clock.html │ ├── 04-imperative-clock.js │ ├── 05-declarative-clock.html │ └── 05-declarative-clock.js └── readme.md ├── chapter-04 ├── 01-page-setup │ ├── 01-page-setup.html │ └── 02-baked-salmon.html ├── 02-react-elements │ ├── 01-elements.html │ ├── 02-elements.html │ ├── 03-elements.html │ ├── 04-elements.html │ └── 05-elements.html ├── 03-react-components │ ├── 01-components.html │ └── 02-components.html └── readme.md ├── chapter-05 ├── readme.md ├── recipe-app │ ├── data │ │ └── recipes.json │ ├── dist │ │ ├── assets │ │ │ ├── bundle.js │ │ │ └── bundle.map │ │ └── index.html │ ├── package.json │ ├── readme.md │ ├── src │ │ ├── components │ │ │ ├── Ingredient.js │ │ │ ├── IngredientsList.js │ │ │ ├── Instructions.js │ │ │ ├── Menu.css │ │ │ ├── Menu.js │ │ │ └── Recipe.js │ │ └── index.js │ └── webpack.config.js ├── recipes.html └── recipes.js ├── chapter-06 └── readme.md ├── chapter-07 └── readme.md ├── chapter-08 └── readme.md ├── chapter-09 └── readme.md ├── chapter-10 ├── my-type │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.tsx │ │ ├── index.css │ │ ├── index.tsx │ │ └── react-app-env.d.ts │ └── tsconfig.json ├── readme.md ├── star-testing │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── Checkbox.js │ │ ├── Checkbox.test.js │ │ ├── Star.js │ │ ├── Star.test.js │ │ ├── index.css │ │ └── index.js └── testing │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── functions.js │ ├── functions.test.js │ └── index.js ├── chapter-11 ├── color-organizer │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── readme.md │ ├── src │ │ ├── Colors │ │ │ ├── AddColorForm.js │ │ │ ├── Color.js │ │ │ ├── ColorDetails.js │ │ │ ├── ColorList.js │ │ │ ├── Colors.css │ │ │ ├── Star.js │ │ │ ├── StarRating.js │ │ │ ├── default-colors.json │ │ │ ├── hooks.js │ │ │ └── index.js │ │ └── index.js │ └── yarn.lock ├── company-website │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── src │ │ ├── App.js │ │ ├── index.css │ │ ├── index.js │ │ └── pages.js │ └── yarn.lock └── readme.md ├── chapter-12 ├── client-fetching │ └── index.html ├── node-fetching │ ├── index.js │ ├── package-lock.json │ └── package.json ├── pets-next │ ├── .next │ │ ├── build-manifest.json │ │ ├── cache │ │ │ ├── autodll-webpack-plugin │ │ │ │ ├── development_instance_0_a243de3b532980b808da6738e16f9516 │ │ │ │ │ ├── dll.manifest.json │ │ │ │ │ ├── dll_88bfe47d29bf84228398.js │ │ │ │ │ ├── dll_88bfe47d29bf84228398.js.map │ │ │ │ │ └── stats.json │ │ │ │ └── package.json.hash │ │ │ ├── next-babel-loader │ │ │ │ ├── 0085417bfdb189eaab561f45b7d72cc5.json │ │ │ │ ├── 020516077cd3e5fbc6c9f50e7a4b1c30.json │ │ │ │ ├── 03c2204f24a2e9095f64961df018fb76.json │ │ │ │ ├── 073c4b22ee6209298a39c89b61051c29.json │ │ │ │ ├── 0780a1a8e4f5d917eac42b427827603f.json │ │ │ │ ├── 0886fb037d86207139fd92c5247a5408.json │ │ │ │ ├── 0a4c2534469f8ffcd8b1a35a67bebf03.json │ │ │ │ ├── 0a7adf89a9db9f246feae400dacf40ee.json │ │ │ │ ├── 0b3676aacea2cee604acbd28c70eb7fd.json │ │ │ │ ├── 0cc532bb5d2960587d944f2d848da249.json │ │ │ │ ├── 0d5b96d35dc34ba2145c66a0ee513b63.json │ │ │ │ ├── 0d915dcd43a9d7b46ecfb941cda24c9d.json │ │ │ │ ├── 0ddb73719fac958005a5958e4655cce7.json │ │ │ │ ├── 0e121ed12dbb1a508d4dfeb2e8293250.json │ │ │ │ ├── 0e150bf2255c0827c5c1ad74f9c4e6a2.json │ │ │ │ ├── 0e913e0c583fdda9c4ae84e02689cb26.json │ │ │ │ ├── 0eaa46c673fd6131248a90c364b5817c.json │ │ │ │ ├── 0ee4e26f8a0e48a02f5b01db56980928.json │ │ │ │ ├── 0f498d6ce7c1e23c79340fdcecafd1c4.json │ │ │ │ ├── 102c4a1cb8d502528f81ad428c8dd669.json │ │ │ │ ├── 1097ff48988b77b4c755e0f5da713ab4.json │ │ │ │ ├── 10ef1b3aa0c738609c5969ac2dc50cd6.json │ │ │ │ ├── 1235c316c154d3e52950f307455d4f92.json │ │ │ │ ├── 132444063d4831c6c0148d08df0a00f8.json │ │ │ │ ├── 14a31a61c6a431530b2594cae59dd088.json │ │ │ │ ├── 17e4250f77e2bc85947b493cf2e5bdfe.json │ │ │ │ ├── 1874e606c1af761779d7fd7de8cbed93.json │ │ │ │ ├── 1879cfbfb24646c1e65df310d550d6a8.json │ │ │ │ ├── 193b586a3efc04a1a30e1a2d56aecd37.json │ │ │ │ ├── 19af1a4d627da6ef81c233fbfaa482d5.json │ │ │ │ ├── 1c0dd551f1114fb2640b19bc5e091b4e.json │ │ │ │ ├── 1ce48ae7b40e5176f0c85d26ad4bf3a8.json │ │ │ │ ├── 1d450425e7f7973da54a79066b637885.json │ │ │ │ ├── 1df7d9091f07299a8a464426649dabb3.json │ │ │ │ ├── 1ed085a5801688e44758d052c4bcbaac.json │ │ │ │ ├── 1f4a8ae797aa4affcdac0e45c1e4b6f6.json │ │ │ │ ├── 20d0c340dfd9eb5451b30a0e3122f56a.json │ │ │ │ ├── 219c079723654b9868b5db1491860441.json │ │ │ │ ├── 22a4e97d6af42adb4e90951ac70591f5.json │ │ │ │ ├── 2337eabb95cc94028c58ee031dd2e9f0.json │ │ │ │ ├── 23e1da02a6ee2611b2445b144646d6aa.json │ │ │ │ ├── 244132788ea953d10d4cbea8b0d0c958.json │ │ │ │ ├── 24886fd74634619688e3722453af56d9.json │ │ │ │ ├── 24a66effba3b487763a015a189a06fbb.json │ │ │ │ ├── 24c860014e72ad42580c7280f5ae613f.json │ │ │ │ ├── 24d8891a8c92a10e1dc9a4b47faaa387.json │ │ │ │ ├── 26466408c67d5d70888ed57b40e3b646.json │ │ │ │ ├── 2781214898d6a949e2d03242c2404af6.json │ │ │ │ ├── 27a159b2c56f3050604db353f31df4c9.json │ │ │ │ ├── 28386338323866c0a73494ee31b10a5e.json │ │ │ │ ├── 2c2ea513122ddfc4b42173c7515d1844.json │ │ │ │ ├── 2d00618dfce063cee6e05f8594079759.json │ │ │ │ ├── 2d4b31ae89b687328389a36d55ea86e4.json │ │ │ │ ├── 2dbf6701a6099c9df7d22bcd5011ff73.json │ │ │ │ ├── 2df93626602afe8272ca29e634004945.json │ │ │ │ ├── 2e0d7b2e3f5d7dc1926fbb5e4994df24.json │ │ │ │ ├── 2eea7e090b1294fe10e5bba4af7d0787.json │ │ │ │ ├── 2f987e00c2cd3a9b0beebcfc34266d30.json │ │ │ │ ├── 31c04910b4aa656fd06813a67b780f1a.json │ │ │ │ ├── 31c9c83249a28d41a7fea44bdaeb8150.json │ │ │ │ ├── 321285fa3e7210ea0441a18c23ef14b4.json │ │ │ │ ├── 33269d2fd738031e691815c73c0a90ea.json │ │ │ │ ├── 335200dd9be1ac985a1cc38fc7edf44e.json │ │ │ │ ├── 35026f8f3b0bd213b2d32723b4347210.json │ │ │ │ ├── 3540d5554ad5ac9ed3145b7c5aa9d94d.json │ │ │ │ ├── 35c3b28fe939530b97d4abc03a530130.json │ │ │ │ ├── 36d6cb104bbfcfe53a99ff5c5f77a700.json │ │ │ │ ├── 36e71f755f8f9f46710756b3ea651b05.json │ │ │ │ ├── 379c83e2c58fe368bda5ba5a32e834a1.json │ │ │ │ ├── 391719d94ab9be82cb59d6087ffc73f7.json │ │ │ │ ├── 3a0950ab7162da8289603d01499f473c.json │ │ │ │ ├── 3a6c178b5daab2e26e504533a271c77a.json │ │ │ │ ├── 3af7f8e8740ca4bbe26364720716da39.json │ │ │ │ ├── 3d91c5490cabdaf1eaac5f0163a2f131.json │ │ │ │ ├── 3da03308e45561fc958a06e5ec07028a.json │ │ │ │ ├── 3e96d3515151a1572dd8504a5240d528.json │ │ │ │ ├── 3efd55bb7605a58976c7765f63ad033d.json │ │ │ │ ├── 4066f53798f3b543e59dc4c851e13de4.json │ │ │ │ ├── 4192c0da7019406f96a599c2261de861.json │ │ │ │ ├── 41bb987cedb5dff2d7551c4b88799868.json │ │ │ │ ├── 435f7d165130c97b84cb0c14ab224aff.json │ │ │ │ ├── 43ee2969031bd4deeb6070ff4d5f81b0.json │ │ │ │ ├── 45649725ceac174ef0a905905696114a.json │ │ │ │ ├── 46477123cb008af4329bb6f5e7d3a9c6.json │ │ │ │ ├── 4793843d5fae23d793d610e05471f48c.json │ │ │ │ ├── 48fb11012e36a38aa59cfcc474ede6bb.json │ │ │ │ ├── 49575fd45f8d6d3a646740a26812ed77.json │ │ │ │ ├── 4b2eae5402de6c3126016fd23364a162.json │ │ │ │ ├── 4b7f9bf4f067f4c7cb75831de0e61a92.json │ │ │ │ ├── 4c7b145840bec9e6263c50b27f78faf7.json │ │ │ │ ├── 4deb8dbd4cdb6631a07c3ea16fabf961.json │ │ │ │ ├── 4f48d90d106ebfe6aaeb71a663357413.json │ │ │ │ ├── 5104f8780a0958b6a78eb14bffac2561.json │ │ │ │ ├── 51f90f8c3816deef1feae84c05918322.json │ │ │ │ ├── 52392163565289aa1432abf377302760.json │ │ │ │ ├── 524954dd1d04beb8952f01a94eebef31.json │ │ │ │ ├── 532548e874afbdf944320a19c0b9e4ca.json │ │ │ │ ├── 535bdb815d751ef06d6dab235414dfe0.json │ │ │ │ ├── 5373cc6ade841292e619b886b6e59e96.json │ │ │ │ ├── 569a6cbd8cbb502d86324868c3799018.json │ │ │ │ ├── 5844d904889eaa6099823d6684879567.json │ │ │ │ ├── 5acca225edd624453a94ff418138cedb.json │ │ │ │ ├── 5b70fe7bc8146317956a30e94bb5beb0.json │ │ │ │ ├── 5bfdc5f63f164e5ae8766a4ed14ae887.json │ │ │ │ ├── 5c361a997d5091d0b96fb72fa1d3dc8a.json │ │ │ │ ├── 5cb0b6b495cf7e753443450b10578790.json │ │ │ │ ├── 5d9d82029b467dcacb478d25781fbdf0.json │ │ │ │ ├── 5db88397442dae4ef5e14f2f50e3760d.json │ │ │ │ ├── 5f04b7796303ac1dad4bc2e8627b7a2d.json │ │ │ │ ├── 5f26e3d7da0ab9fb44c6c53a7c8a5715.json │ │ │ │ ├── 62527b31a62bf43f7397d65fa9cdf77a.json │ │ │ │ ├── 627659516e04f9b89f5c68fc3edb85d4.json │ │ │ │ ├── 62d7eb3f431e82b2ece59eb544501b17.json │ │ │ │ ├── 62ebb17818cf101f8438dc857a231ccf.json │ │ │ │ ├── 64f997296949d5e3eceb4f3439b32821.json │ │ │ │ ├── 683dd02db3e8fe4e4e59672a8d48f75b.json │ │ │ │ ├── 6924784258878f709932c76bdf625242.json │ │ │ │ ├── 69cbc75d59e680beb61cd28c7a91cec5.json │ │ │ │ ├── 6d03cb577c9158b5b77ba9f2bc10e3d3.json │ │ │ │ ├── 6d22afab36fe50c42c77694e6b67e6db.json │ │ │ │ ├── 6d769aa74659892182e18bb298b249ef.json │ │ │ │ ├── 6df11c877451045f49a4d1716004448d.json │ │ │ │ ├── 6e2e63043f9e6c291b6ded6713b3389d.json │ │ │ │ ├── 6f28e8d6a0dc557c7bada0556ec8ce02.json │ │ │ │ ├── 6f6e8713bf79a134516ece4c1e265589.json │ │ │ │ ├── 6f9d737aa125be39c4ebfba881109239.json │ │ │ │ ├── 71e3236ff13caa1286ceb107bbe8dff8.json │ │ │ │ ├── 729eab7a079d8055f8d64da088c1187d.json │ │ │ │ ├── 7373b64ccef99665f257f16c346773f7.json │ │ │ │ ├── 774e0606251c754f7df07c42fbcf5413.json │ │ │ │ ├── 781b7d59aef8bfeb351a5324549faecb.json │ │ │ │ ├── 79dd31c2219b5065cbd54d4da6a1ce18.json │ │ │ │ ├── 7b25f1aeeca9a18ea353409a3fde7bc5.json │ │ │ │ ├── 7c2033769a0a6b6bafabaf463fac68ef.json │ │ │ │ ├── 7d612c9d53e2b6c658f0856378a31c8f.json │ │ │ │ ├── 7d83ee4fe51f35a11a57bf1ef985583c.json │ │ │ │ ├── 7ee96ef6842e472a1db8638e2fcfaff4.json │ │ │ │ ├── 7f40f429cf6a045e2433764810824f20.json │ │ │ │ ├── 80e48f63c43118c158628b335ac61c03.json │ │ │ │ ├── 82cea8045b7103e4c1538adfc227f654.json │ │ │ │ ├── 82ef7c7976ef592bec5e250925404f8f.json │ │ │ │ ├── 836651f19640dc1a7b8bee7661a224bb.json │ │ │ │ ├── 859a4a4e4a4313c30bb4fae9316f58e8.json │ │ │ │ ├── 85df26b97c5e8308163220afb4d2c3d4.json │ │ │ │ ├── 8875e6abc476f1df4c1271f66604fc44.json │ │ │ │ ├── 88e32d3823741d6096cd8c5c45fd9e84.json │ │ │ │ ├── 8930948abb3671a4bfa22396abc76cc7.json │ │ │ │ ├── 8c5eeb6f171b66342f34abfd1c830ad7.json │ │ │ │ ├── 8e0746d0d420f32e4893274fa85dedf1.json │ │ │ │ ├── 8ec162842945123740e9b3eedbefe9bd.json │ │ │ │ ├── 8f4390262b07691aecf3d1869452fb87.json │ │ │ │ ├── 8f4678b14961e23f5581a2c90c4e89db.json │ │ │ │ ├── 8f53b67f4120df37acf71c6d176148fe.json │ │ │ │ ├── 905863c9d307d7b9f4058c9468897f1e.json │ │ │ │ ├── 9322ccdf64191a7e5a78a5cdf43b32de.json │ │ │ │ ├── 936b5adfd21a1248ca41000a3460d439.json │ │ │ │ ├── 954fde466b570eb6ffcb0414f81e80e4.json │ │ │ │ ├── 9565a0b54ec53a41e52041b82a3150b3.json │ │ │ │ ├── 959bbbf260e05a3f43457f5d67b6c629.json │ │ │ │ ├── 964a6abbd9c001cfa14d2e0b6e7a9192.json │ │ │ │ ├── 968294bd7ee34ac5640883aa64b129c6.json │ │ │ │ ├── 968f41c84c6b1de042f2161c6f7f95ae.json │ │ │ │ ├── 96cb9779e54ac495f3e57bc0859b2d02.json │ │ │ │ ├── 96eee93276ae8d921f5aa13365273281.json │ │ │ │ ├── 97d39f5616359996627288c10dad2786.json │ │ │ │ ├── 97f6e84e981d8bea52b8abba4d05523d.json │ │ │ │ ├── 98f722bed3310342493699e03819fb05.json │ │ │ │ ├── 9924d5cdc226b34ad6715f7737605dc5.json │ │ │ │ ├── 99d5d5fcec521e5af238caf1866cf15a.json │ │ │ │ ├── 99fc8845903c3895b8357aaf8b29e803.json │ │ │ │ ├── 9b997fe08d74d5a27d8f166e8b04475c.json │ │ │ │ ├── 9dab0693910e67a93bc2506f8054861a.json │ │ │ │ ├── 9e8cb5fcb7e631cb91020f250cc617b9.json │ │ │ │ ├── 9ef5b84509b8ef17a229317a33f7a25a.json │ │ │ │ ├── a08581d760932f16be2f9024ee7d0d2d.json │ │ │ │ ├── a18f82f6481c339f3c2717f784d858b5.json │ │ │ │ ├── a2ddbfc5aba88f6b4d642ff7fa8becc2.json │ │ │ │ ├── a3972b021ebfb99750b30d18b83c6b02.json │ │ │ │ ├── a504c57cb98b38dbfe70ef32b67fc865.json │ │ │ │ ├── a6dc45e9df05abed452736700cddc1d0.json │ │ │ │ ├── a7eebd6237e264460998d7f4744fe223.json │ │ │ │ ├── aa38075bb42d680a00c293392a999866.json │ │ │ │ ├── ab39e7dd4259eb8f9f0eb8a049098471.json │ │ │ │ ├── ab682532749b90b99ab1a313d3e0de58.json │ │ │ │ ├── abcfa2ef9213f235591ba95db3d20588.json │ │ │ │ ├── ac7a4841db4e6c841d457ef4d3793c61.json │ │ │ │ ├── adf041ff2668ad1dfa7d64543635d597.json │ │ │ │ ├── ae4b8b64a60852f57998cac0d5f00f03.json │ │ │ │ ├── b027e459db3fc503a35a66dd175999d3.json │ │ │ │ ├── b03dfd81d8e7efb99ddd659828641bb4.json │ │ │ │ ├── b047aea9f04660e531c7e3274491a8bc.json │ │ │ │ ├── b08a604260a72f3f70fcd3dc48c4cfec.json │ │ │ │ ├── b2881849baae68b30649cc714436ebdf.json │ │ │ │ ├── b4009ddc42beb9f76324fcd4a609dc87.json │ │ │ │ ├── b41bf0e66e0811dafb430ed2dc57f4ad.json │ │ │ │ ├── b4737a2037bb3ead1f8b398828a9fdec.json │ │ │ │ ├── b4e45db21816ec345f29334391178604.json │ │ │ │ ├── b4f2fb01c13ec78c72cbfd84e4ce85fd.json │ │ │ │ ├── b572861c4b6aa2eafd5186a5e99ff1e7.json │ │ │ │ ├── b58be295346f0e6b2c718162d4506ca9.json │ │ │ │ ├── b599931b6c64ca9da4c0bc4bb35aa20c.json │ │ │ │ ├── b611426417b6767c71a5bb8bcccd72ff.json │ │ │ │ ├── b6595ab1484a1474f3777ec448abb828.json │ │ │ │ ├── b6a9fcdc0aabe92fd09d44b3827b6ab8.json │ │ │ │ ├── b7586076da1a553afc472a2f98ea17b4.json │ │ │ │ ├── b8242be6d6adcd40d1c3d81dc4aaf47c.json │ │ │ │ ├── b8badd2534c423531427630d175de645.json │ │ │ │ ├── bdb78214291eafd929b820804a0655e8.json │ │ │ │ ├── bf3a5facc4433594bd4df0ab383167a5.json │ │ │ │ ├── bf504d704eb03772a50b60170210fd91.json │ │ │ │ ├── bfd839213a0c9483b827fdb3cf461f1a.json │ │ │ │ ├── c03f08de8054b082ab7557506b328c87.json │ │ │ │ ├── c08a5c072cb817c8206f8dbc65894537.json │ │ │ │ ├── c11c0d992a887fa4ae5ee9c4ee2dc476.json │ │ │ │ ├── c2251010f92a2ada4b3ddfe47cdbd004.json │ │ │ │ ├── c25b615d251da3cd2bf214475c736588.json │ │ │ │ ├── c2e3626eebea028cf6bebdde8dfd6eda.json │ │ │ │ ├── c388a322dbeb3f7996559b21f99f15d2.json │ │ │ │ ├── c562e00cd80dca62a0d1b05b04a61726.json │ │ │ │ ├── c5d86d4a558793cf7b1997a5329f4451.json │ │ │ │ ├── c671244b95ded9345c3ad40fffcd4b8f.json │ │ │ │ ├── cadf2bf94906342e68ef0d67f380267c.json │ │ │ │ ├── cd0b05888139edad1b55908b1a427e54.json │ │ │ │ ├── cd79f1646702694f5f536ab71ae5a1b0.json │ │ │ │ ├── cf5edc60729b852d37142405c423f4c9.json │ │ │ │ ├── cfbb6592ae573552f958b8273496ff84.json │ │ │ │ ├── d0a95c026ce36f7a98ab5f1eca0e6d49.json │ │ │ │ ├── d1121337381936685ad3e8118df3979e.json │ │ │ │ ├── d29100e8152ec28d0c85992c7c4f1a5e.json │ │ │ │ ├── d2db681c9fd110107bfccde87ab33efe.json │ │ │ │ ├── d6096d0c8f2160800500274c327ba7b9.json │ │ │ │ ├── d66bfc5861e979ba084f9967548fdc64.json │ │ │ │ ├── d83110f3e67d30820e8adf7147438aaf.json │ │ │ │ ├── d9d7f82e69b4bdd5604c4862714fe27a.json │ │ │ │ ├── daa4a98a7ea33fe91ef36d1046edc0fe.json │ │ │ │ ├── db25d1802eac878fffb0482d80f3c082.json │ │ │ │ ├── db3cbe5fe7c8bc83767bc5062e142aae.json │ │ │ │ ├── dc21ec4284bcc6e0f64afb168c203ed9.json │ │ │ │ ├── ddeb59f2750269b29f874f7d9c34bd37.json │ │ │ │ ├── dfd7dd08ba12c7b8738685a490eeb052.json │ │ │ │ ├── e0f2686866afa7ad54cb78e36eb4a1c6.json │ │ │ │ ├── e130420d8ca861bd54b03e4ac7b6c60c.json │ │ │ │ ├── e2aa2f965e254570c45d53ab2d65579a.json │ │ │ │ ├── e3326f2715b9ad174fd86d560ee4c223.json │ │ │ │ ├── e368b15344c81b869a1910e59fd8de4a.json │ │ │ │ ├── e479c943f32b23c6dd84ade74b1e97ad.json │ │ │ │ ├── e4b814b8d90f4091a5811bdcce896774.json │ │ │ │ ├── e54c786fd72fdedbcab8b0cf57ab8ace.json │ │ │ │ ├── e648d2acdb42ef8c24e1492c9c67d7c6.json │ │ │ │ ├── e6c01fdd5c9fb05d04b4c6e587a7eaba.json │ │ │ │ ├── e716f9c0f46a388715f75c590e748575.json │ │ │ │ ├── e75c23ec8e2ffe1d8ed51053719eef7e.json │ │ │ │ ├── e8d0991af225c0f1b45cf241cfb4aa7f.json │ │ │ │ ├── e9106191e5a3cbfa9ed306cf57b70608.json │ │ │ │ ├── e95cf760b3d5814586279ea5027cbd5f.json │ │ │ │ ├── e9863ba6049d81b85016047932b347b4.json │ │ │ │ ├── eb06ea7a919d2dcf09aa473e3981c6c5.json │ │ │ │ ├── ed086bf22cb617b7696f1dfd55950e69.json │ │ │ │ ├── eeaeb6acccaa6cea21b0f49e9649bb27.json │ │ │ │ ├── ef51fb34c79085bcc7e3b271665a4d06.json │ │ │ │ ├── f0284a3d53d39a5b331aa87a19219d95.json │ │ │ │ ├── f1b552d95433bffdef69815674529c94.json │ │ │ │ ├── f1ee2e0ace126168c6e9c5d022305113.json │ │ │ │ ├── f44291422a59688d6bc07317952d153c.json │ │ │ │ ├── f5c5b253c1fc25ada27124914d673c73.json │ │ │ │ ├── f75d71c2f10f65e0ab14731a3bd941aa.json │ │ │ │ ├── f836ce9c409f19754f0048becd011ea0.json │ │ │ │ ├── f924f21f39e449e86c6282b4dad148b3.json │ │ │ │ ├── f9c16918ce812619cb22136c953ed860.json │ │ │ │ ├── fc62ba6f3b47e321d2ba3d843c04b12d.json │ │ │ │ ├── fd63b43ec3faa24d34dac73d33356cfb.json │ │ │ │ └── ff62c31d1e0e6386331fa897e87d568b.json │ │ │ └── next-minifier │ │ │ │ ├── a1181319044 │ │ │ │ ├── a1214342821 │ │ │ │ ├── a1627515434 │ │ │ │ ├── a1651489025 │ │ │ │ ├── a1689647695 │ │ │ │ ├── a1792046038 │ │ │ │ ├── a1961788320 │ │ │ │ ├── a2102651697 │ │ │ │ ├── a2189364336 │ │ │ │ ├── a2644109041 │ │ │ │ ├── a2696691532 │ │ │ │ ├── a270909093 │ │ │ │ ├── a3005832449 │ │ │ │ ├── a3085933467 │ │ │ │ ├── a3229630982 │ │ │ │ ├── a3748547463 │ │ │ │ ├── a3863076992 │ │ │ │ ├── a39333172 │ │ │ │ └── a4103550910 │ │ ├── react-loadable-manifest.json │ │ ├── server │ │ │ ├── init-server.js │ │ │ ├── init-server.js.map │ │ │ ├── on-error-server.js │ │ │ ├── on-error-server.js.map │ │ │ ├── pages-manifest.json │ │ │ ├── ssr-module-cache.js │ │ │ └── static │ │ │ │ └── development │ │ │ │ └── pages │ │ │ │ ├── _app.js │ │ │ │ ├── _app.js.map │ │ │ │ ├── _document.js │ │ │ │ ├── _document.js.map │ │ │ │ ├── _error.js │ │ │ │ ├── _error.js.map │ │ │ │ ├── index.js │ │ │ │ ├── index.js.map │ │ │ │ ├── pets.js │ │ │ │ └── pets.js.map │ │ └── static │ │ │ ├── chunks │ │ │ ├── 0.js │ │ │ └── 0.js.map │ │ │ ├── development │ │ │ ├── _buildManifest.js │ │ │ ├── _ssgManifest.js │ │ │ ├── dll │ │ │ │ ├── dll_88bfe47d29bf84228398.js │ │ │ │ └── dll_88bfe47d29bf84228398.js.map │ │ │ └── pages │ │ │ │ ├── _app.js │ │ │ │ ├── _app.js.map │ │ │ │ ├── _error.js │ │ │ │ ├── _error.js.map │ │ │ │ ├── index.js │ │ │ │ ├── index.js.map │ │ │ │ ├── pets.js │ │ │ │ └── pets.js.map │ │ │ ├── runtime │ │ │ ├── amp.js │ │ │ ├── amp.js.map │ │ │ ├── main.js │ │ │ ├── main.js.map │ │ │ ├── polyfills.js │ │ │ ├── polyfills.js.map │ │ │ ├── webpack.js │ │ │ └── webpack.js.map │ │ │ └── webpack │ │ │ ├── 0292b093dc64ce093240.hot-update.json │ │ │ └── fdaa338e5a22bdbf7699.hot-update.json │ ├── package.json │ └── pages │ │ ├── Header.js │ │ ├── Layout.js │ │ ├── Pets.js │ │ └── index.js ├── readme.md └── recipes │ ├── .babelrc │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── server-build │ └── index.js │ ├── server │ └── index.js │ ├── src │ ├── Menu.js │ ├── index.css │ └── index.js │ ├── webpack.server.js │ └── yarn.lock ├── learning-react-v1.jpg └── learning-react.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | .idea/ 4 | 5 | jest 6 | 7 | chapter-12/color-organizer/dist/ 8 | 9 | # Logs 10 | logs 11 | *.log 12 | npm-debug.log* 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (http://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules 39 | jspm_packages 40 | 41 | # Optional npm cache directory 42 | .npm 43 | 44 | # Optional REPL history 45 | .node_repl_history 46 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/01-const.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Const 7 | 8 | 9 | 10 |

Const

11 |

Open the console

12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/02-const.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Const 7 | 8 | 9 | 10 |

Const

11 |

Open the console

12 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/03-let.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Let 7 | 8 | 9 | 10 |

Let

11 |

Open the console

12 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/04-let.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Let 7 | 8 | 9 | 10 |

Let

11 |

Open the console

12 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/05-let.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | Let 19 | 20 | 21 | 22 |

Click on a Box

23 |
24 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/06-let.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | Let 19 | 20 | 21 | 22 |

Click on a Box

23 |
24 | 25 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/07-template-strings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Template Strings 7 | 8 | 9 | 10 |

Template Strings

11 |

Open the console

12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/08-template-strings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Template Strings 7 | 8 | 9 | 10 |

Template Strings

11 |

Open the console

12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/09-template-strings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Template Strings 7 | 8 | 9 | 10 |

Template Strings

11 |

Open the console

12 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /chapter-02/01-declaring-variables/10-template-strings.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Template Strings 7 | 8 | 9 | 10 |

Template Strings

11 |

Open the console

12 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /chapter-02/02-es6-functions/01-default-parameters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Default Parameters 7 | 8 | 9 | 10 |

Default Parameters

11 |

Open the console

12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapter-02/02-es6-functions/02-default-parameters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Default Parameters 7 | 8 | 9 | 10 |

Default Parameters

11 |

Open the console

12 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/01-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/02-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/03-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/04-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/05-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/06-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/07-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/08-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/09-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/10-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter-02/03-arrow-functions/11-arrows.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrow Functions 7 | 8 | 9 | 10 |

Arrow Functions

11 |

Open the console

12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/01-destructuring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Destructuring 7 | 8 | 9 | 10 |

Destructuring

11 |

Open the console

12 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/02-destructuring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Destructuring 7 | 8 | 9 | 10 |

Destructuring

11 |

Open the console

12 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/03-destructuring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Destructuring 7 | 8 | 9 | 10 |

Destructuring

11 |

Open the console

12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/04-destructuring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Destructuring 7 | 8 | 9 | 10 |

Destructuring

11 |

Open the console

12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/05-destructuring.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Destructuring 7 | 8 | 9 | 10 |

Destructuring

11 |

Open the console

12 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/06-object-literal-enhancement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Literal Enhancements 7 | 8 | 9 | 10 |

Literal Enhancements

11 |

Open the console

12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/07-object-literal-enhancement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Literal Enhancements 7 | 8 | 9 | 10 |

Literal Enhancements

11 |

Open the console

12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/08-object-literal-enhancement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Literal Enhancements 7 | 8 | 9 | 10 |

Literal Enhancements

11 |

Open the console

12 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/09-object-literal-enhancement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Literal Enhancements 7 | 8 | 9 | 10 |

Literal Enhancements

11 |

Open the console

12 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/10-spread-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spread Operator 7 | 8 | 9 | 10 |

Spread Operator

11 |

Open the console

12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/11-spread-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spread Operator 7 | 8 | 9 | 10 |

Spread Operator

11 |

Open the console

12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/12-spread-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spread Operator 7 | 8 | 9 | 10 |

Spread Operator

11 |

Open the console

12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/13-spread-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spread Operator 7 | 8 | 9 | 10 |

Spread Operator

11 |

Open the console

12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/14-spread-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spread Operator 7 | 8 | 9 | 10 |

Spread Operator

11 |

Open the console

12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter-02/04-objects-and-arrays/15-spread-operator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spread Operator 7 | 8 | 9 | 10 |

Spread Operator

11 |

Open the console

12 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /chapter-02/05-promises/01-promises.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promises 7 | 8 | 9 | 10 |

Promises

11 |

Open the console

12 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /chapter-02/05-promises/02-promises.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promises with fetch 7 | 8 | 9 | 10 |

Promises with fetch

11 |

Open the console

12 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter-02/06-es6-class-syntax/01-classes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Classes 7 | 8 | 9 | 10 |

Classes

11 |

Open the console

12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter-02/06-es6-class-syntax/02-classes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Classes 7 | 8 | 9 | 10 |

Classes

11 |

Open the console

12 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /chapter-03/01-functional-javascript/01-functional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | What It Means to Be Functional 10 | 11 | 12 | 13 |

Functional JavaScript

14 |

Open the console

15 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter-03/01-functional-javascript/02-functional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | What It Means to Be Functional 10 | 11 | 12 | 13 |

Functional JavaScript

14 |

Open the console

15 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /chapter-03/01-functional-javascript/03-functional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | What It Means to Be Functional 10 | 11 | 12 | 13 |

Functional JavaScript

14 |

Open the console

15 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter-03/01-functional-javascript/04-functional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | What It Means to Be Functional 10 | 11 | 12 | 13 |

Functional JavaScript

14 |

Open the console

15 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter-03/01-functional-javascript/05-functional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | What It Means to Be Functional 10 | 11 | 12 | 13 |

Functional JavaScript

14 |

Open the console

15 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-03/01-functional-javascript/06-functional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | What It Means to Be Functional 10 | 11 | 12 | 13 |

Functional JavaScript

14 |

Open the console

15 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /chapter-03/01-functional-javascript/07-functional.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | What It Means to Be Functional 10 | 11 | 12 | 13 |

Functional JavaScript

14 |

Open the console

15 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter-03/02-imperative-vs-declarative/01-imperative-declarative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Imperative vs. Declarative 10 | 11 | 12 | 13 |

Imperative vs. Declarative

14 |

Open the console

15 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /chapter-03/02-imperative-vs-declarative/02-imperative-declarative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Imperative vs. Declarative 10 | 11 | 12 | 13 |

Imperative vs. Declarative

14 |

Open the console

15 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter-03/03-immutability/01-immutability.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Immutability 10 | 11 | 12 | 13 |

Immutability

14 |

Open the console

15 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /chapter-03/03-immutability/02-immutability.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Immutability 10 | 11 | 12 | 13 |

Immutability

14 |

Open the console

15 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /chapter-03/03-immutability/03-immutability.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Immutability 10 | 11 | 12 | 13 |

Immutability

14 |

Open the console

15 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /chapter-03/03-immutability/04-immutability.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Immutability 10 | 11 | 12 | 13 |

Immutability

14 |

Open the console

15 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /chapter-03/03-immutability/05-immutability.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Immutability 10 | 11 | 12 | 13 |

Immutability

14 |

Open the console

15 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /chapter-03/03-immutability/06-immutability.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Immutability 10 | 11 | 12 | 13 |

Immutability

14 |

Open the console

15 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /chapter-03/04-pure-functions/01-pure-functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Pure Functions 10 | 11 | 12 | 13 |

Pure Functions

14 |

Open the console

15 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /chapter-03/04-pure-functions/02-pure-functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Pure Functions 10 | 11 | 12 | 13 |

Pure Functions

14 |

Open the console

15 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /chapter-03/04-pure-functions/03-pure-functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Pure Functions 10 | 11 | 12 | 13 |

Pure Functions

14 |

Open the console

15 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /chapter-03/04-pure-functions/04-pure-functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Pure Functions 10 | 11 | 12 | 13 |

Pure Functions

14 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-03/04-pure-functions/05-pure-functions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Pure Functions 10 | 11 | 12 | 13 | 14 | 15 |

Pure Functions

16 |
17 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/01-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | Transforming Data 10 | 11 | 12 | 13 |

Transforming Data

14 |

Open the Console

15 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/02-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/03-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/04-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/05-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/06-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/07-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/08-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/09-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/10-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter-03/05-transforming-data/12-data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transforming Data 7 | 8 | 9 | 10 |

Transforming Data

11 |

Open the Console

12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter-03/06-higher-order-functions/01-higher-order-fns.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Higher Order Functions 7 | 8 | 9 | 10 |

Higher Order Functions

11 |

Open the Console

12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /chapter-03/07-recursion/01-recursion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Recursion 7 | 8 | 9 | 10 |

Recursion

11 |

Open the Console

12 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /chapter-03/07-recursion/02-recursion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Recursion 7 | 8 | 9 | 10 |

Recursion

11 |

Open the Console

12 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /chapter-03/07-recursion/03-recursion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Recursion 7 | 8 | 9 | 10 |

Recursion

11 |

Open the Console

12 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /chapter-03/08-composition/01-composition.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Composition 7 | 8 | 9 | 10 |

Composition

11 |

Open the Console

12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-03/08-composition/04-imperative-clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Imperative Clock 7 | 8 | 9 |

Imperative Clock

10 |

Open the console to check the time.

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /chapter-03/08-composition/05-declarative-clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Declarative Clock 7 | 8 | 9 | 10 |

Declarative Clock

11 |

Open the console to check the time.

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /chapter-04/01-page-setup/01-page-setup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pure React Samples 6 | 7 | 8 | 9 |
10 | 11 | 12 | 16 | 20 | 21 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /chapter-04/01-page-setup/02-baked-salmon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Recipes 7 | 8 | 9 |

Recipes

10 | 11 |
12 |

Baked Salmon

13 | 21 |
22 |

Cooking Instructions

23 |

Preheat the oven to 350 degrees.

24 |

Spread the olive oil around a glass baking dish.

25 |

Add the salmon, garlic, and pine nuts to the dish.

26 |

Bake for 15 minutes.

27 |

Add the yellow squash and put back in the oven for 30 mins.

28 |

Remove from oven and let cool for 15 minutes. Add the lettuce and serve.

29 |
30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /chapter-04/02-react-elements/01-elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Elements 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /chapter-04/02-react-elements/02-elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Elements 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /chapter-04/02-react-elements/04-elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Elements 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /chapter-04/02-react-elements/05-elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Elements 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /chapter-04/03-react-components/02-components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Components 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /chapter-04/readme.md: -------------------------------------------------------------------------------- 1 | # Chapter 4 : Pure React 2 | 3 | If you take the time to understand what is going on behind the scenes you will be more efficient, especially when 4 | it comes time to debug. 5 | 6 | ## Samples 7 | 8 | ### Page Setup 9 | 10 | 1. HTML Document Setup ([code](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/01-page-setup/01-page-setup.html)) 11 | 2. HTML for a Recipe ([run it](https://github.com/MoonHighway/learning-react/blob/master/chapter-04/01-page-setup/02-baked-salmon.html)) 12 | 13 | ### React Elements 14 | 15 | 1. Rendering an Element ([run it](http://jsbin.com/polufak/1/edit?js,output)) 16 | 2. Rendering an Element with Properties ([run it](http://jsbin.com/polufak/2/edit?js,output)) 17 | 3. Rendering Lists ([run it](http://jsbin.com/polufak/3/edit?js,output)) 18 | 4. Mapping over Elements ([run it](http://jsbin.com/polufak/4/edit?js,output)) 19 | 5. Adding Keys ([run it](http://jsbin.com/polufak/5/edit?js,output)) 20 | 21 | ### React Components 22 | 23 | 1. Rendering createElement ([run it](https://jsbin.com/dizifem/1/edit?js,output)) 24 | 2. List Items as props ([run it](https://jsbin.com/sedovap/1/edit?js,output)) 25 | -------------------------------------------------------------------------------- /chapter-05/readme.md: -------------------------------------------------------------------------------- 1 | # Chapter 5 : React with JSX 2 | 3 | The alternative to typing out verbose React.createElement calls is JSX, a JavaScript extension that allows 4 | us to define React elements using syntax that looks similar to HTML. 5 | 6 | ## Samples 7 | 8 | ### Recipes App with JSX 9 | 10 | - Single HTML Page ([run it](https://codesandbox.io/s/focused-dream-3c95d?file=/src/index.js)) 11 | 12 | ### Code Sandbox Recipe App 13 | 14 | - Recipe App ([run it](https://3c95d.csb.app/)) ([code](https://codesandbox.io/s/learning-react-recipe-app-3c95d?file=/src/components/Menu.css:0-536)) 15 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | React Recipes App 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/readme.md: -------------------------------------------------------------------------------- 1 | Recipe App 2 | ========== 3 | Modularity will allow you to break down your source code into parts, or modules, 4 | that are easier to work with, especially in a team environment. 5 | 6 | [demo](http://rawgit.com/MoonHighway/learning-react/master/chapter-05/recipe-app/dist/) 7 | 8 | #### Installation 9 | Run this npm command to install dependencies: 10 | ``` 11 | $ npm install 12 | ``` 13 | 14 | #### Build 15 | Run this npm command to build the JavaScript bundle: 16 | ``` 17 | $ npm run build 18 | ``` 19 | 20 | #### Run 21 | Run this npm command to build the JavaScript Bundle and open the browser to the app using the file api: 22 | ``` 23 | $ npm start 24 | ``` 25 | 26 | Updates 27 | ---- 28 | 29 | We've updated the project's dependencies to include the [opener package](https://www.npmjs.com/package/opener). This will allow users to open/start files on both PCs and Macs via build scripts that use the '''opener''' command. 30 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/src/components/Ingredient.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Ingredient({ amount, measurement, name }) { 4 | return ( 5 |
  • 6 | {amount} {measurement} {name} 7 |
    • 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/src/components/IngredientsList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Ingredient from "./Ingredient"; 3 | 4 | export default function IngredientsList({ list = [] }) { 5 | return ( 6 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/src/components/Instructions.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Instructions({ title = "untitled", steps = [] }) { 4 | return ( 5 |
    6 |

    {title}

    7 | {steps.map((s, i) => ( 8 |

    {s}

    9 | ))} 10 |
    11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/src/components/Menu.css: -------------------------------------------------------------------------------- 1 | body, 2 | html, 3 | #react-container { 4 | height: 100%; 5 | } 6 | 7 | body, 8 | h1, h2, h3, h4, h5, 9 | p, td, span, div { 10 | padding: 0; 11 | margin: 0; 12 | font-family: Arial, sans-serif; 13 | } 14 | 15 | #react-container { 16 | padding: 1em; 17 | background-color: #EEE; 18 | } 19 | 20 | article>header { 21 | font-family: Verdana, sans-serif; 22 | font-size: 1.2em; 23 | color: darkslateblue; 24 | border-bottom: solid 2px goldenrod; 25 | margin-bottom: 1em; 26 | } 27 | 28 | div.recipes>section { 29 | border: double 4px saddlebrown; 30 | padding: 1em; 31 | background-color: white; 32 | margin-bottom: 1em; 33 | } 34 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/src/components/Menu.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Recipe from "./Recipe"; 3 | import "./Menu.css"; 4 | 5 | export default function Menu({ recipes = [] }) { 6 | return ( 7 |
    8 |
    9 |

    Delicious Recipes

    10 |
    11 |
    12 | {recipes.map((props, i) => ( 13 | 14 | ))} 15 |
    16 |
    17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/src/components/Recipe.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import IngredientsList from "./IngredientsList"; 3 | import Instructions from "./Instructions"; 4 | 5 | export default function Recipe({ 6 | name = "untitled", 7 | ingredients = [], 8 | steps = [], 9 | }) { 10 | return ( 11 |
    12 |

    {name}

    13 | 14 | 15 |
    16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import data from "../data/recipes.json"; 4 | import Menu from "./components/Menu"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /chapter-05/recipe-app/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path"); 2 | 3 | module.exports = { 4 | entry: "./src/index.js", 5 | output: { 6 | path: path.join(__dirname, "dist", "assets"), 7 | filename: "bundle.js", 8 | }, 9 | module: { 10 | rules: [ 11 | { 12 | test: /\.js$/, 13 | exclude: /(node_modules)/, 14 | use: { 15 | loader: "babel-loader", 16 | options: { 17 | presets: ["@babel/preset-env", "@babel/preset-react"], 18 | }, 19 | }, 20 | }, 21 | { 22 | test: /\.css$/i, 23 | use: ["style-loader", "css-loader"], 24 | }, 25 | ], 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /chapter-05/recipes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 13 | 17 | 21 | React Recipes 22 | 23 | 24 |
    25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /chapter-09/readme.md: -------------------------------------------------------------------------------- 1 | # Chapter 9: Suspense 2 | 3 | Suspense is an experimental feature of React that's used to handle loading states. In this chapter, we'll take a closer look at some of the stable features, some experimental features, and the React reconciliation algorithm. 4 | 5 | 1. Suspense with Error Boundaries ([run it](https://codesandbox.io/s/cool-glade-xg1cm?file=/src/Main.js)) 6 | 2. Status Component Rendering with Suspense ([run it](https://codesandbox.io/s/stupefied-fast-ortev?file=/src/App.js)) 7 | 8 | ## Resources 9 | 10 | - [React Suspense Docs](https://reactjs.org/docs/concurrent-mode-suspense.html): Read up on the latest with React Suspense 11 | - [Understanding Fiber](https://github.com/acdlite/react-fiber-architecture): This doc from Andrew Clark on the React team does a deep dive on Fiber's design 12 | -------------------------------------------------------------------------------- /chapter-10/my-type/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /chapter-10/my-type/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-type", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "@types/jest": "^24.9.1", 10 | "@types/node": "^12.12.44", 11 | "@types/react": "^16.9.35", 12 | "@types/react-dom": "^16.9.8", 13 | "react": "^16.13.1", 14 | "react-dom": "^16.13.1", 15 | "react-scripts": "3.4.1", 16 | "typescript": "^3.7.5" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test", 22 | "eject": "react-scripts eject" 23 | }, 24 | "eslintConfig": { 25 | "extends": "react-app" 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /chapter-10/my-type/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-10/my-type/public/favicon.ico -------------------------------------------------------------------------------- /chapter-10/my-type/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-10/my-type/public/logo192.png -------------------------------------------------------------------------------- /chapter-10/my-type/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-10/my-type/public/logo512.png -------------------------------------------------------------------------------- /chapter-10/my-type/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /chapter-10/my-type/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /chapter-10/my-type/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
    8 |
    9 | logo 10 |

    11 | Edit src/App.tsx and save to reload. 12 |

    13 | 19 | Learn React 20 | 21 |
    22 |
    23 | ); 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /chapter-10/my-type/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /chapter-10/my-type/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | type AppProps = { 5 | item: string; 6 | }; 7 | 8 | function App({ item }: AppProps) { 9 | const [fabricColor, setFabricColor] = useState("purple"); 10 | return ( 11 |
    12 |

    13 | {fabricColor} {item} 14 |

    15 | {/* Change the value sent to the `setFabricColor` function from `3` to `blue` to fix */} 16 | 19 |
    20 | ); 21 | } 22 | 23 | ReactDOM.render( 24 | , 25 | document.getElementById("root") 26 | ); 27 | -------------------------------------------------------------------------------- /chapter-10/my-type/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /chapter-10/my-type/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /chapter-10/readme.md: -------------------------------------------------------------------------------- 1 | # Chapter 10 : Testing 2 | 3 | In order to keep up with our competitors, we must move quickly and ensure quality. One vital tool in our arsenal that 4 | allows us to move quickly while ensuring quality is testing. Testing can mean a lot of things, from linting and typechecking to actually writing tests. 5 | 6 | ## Typechecking 7 | 8 | 1. PropTypes Error ([run it](https://codesandbox.io/s/stoic-bogdan-v62tk?file=/src/index.js)) 9 | 2. PropTypes Required Values ([run it](https://codesandbox.io/s/vigorous-matsumoto-ozm55?file=/src/index.js)) 10 | 3. PropTypes OneOf ([run it](https://codesandbox.io/s/modest-jennings-wy40n?file=/src/index.js)) 11 | 4. Flow Project ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-10/in-the-flow)) 12 | 5. TypeScript Project ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-10/my-type)) 13 | 14 | ## TDD with React 15 | 16 | 1. Testing Introduction ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-10/testing)) 17 | 2. Testing React Components ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-10/star-testing)) 18 | -------------------------------------------------------------------------------- /chapter-10/star-testing/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /chapter-10/star-testing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "star-testing", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-icons": "^3.10.0", 12 | "react-scripts": "3.4.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /chapter-10/star-testing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-10/star-testing/public/favicon.ico -------------------------------------------------------------------------------- /chapter-10/star-testing/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-10/star-testing/public/logo192.png -------------------------------------------------------------------------------- /chapter-10/star-testing/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-10/star-testing/public/logo512.png -------------------------------------------------------------------------------- /chapter-10/star-testing/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /chapter-10/star-testing/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /chapter-10/star-testing/src/Checkbox.js: -------------------------------------------------------------------------------- 1 | import React, { useReducer } from "react"; 2 | 3 | export function Checkbox() { 4 | const [checked, setChecked] = useReducer( 5 | checked => !checked, 6 | false 7 | ); 8 | 9 | return ( 10 | <> 11 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /chapter-10/star-testing/src/Checkbox.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render, fireEvent } from "@testing-library/react"; 3 | import { Checkbox } from "./Checkbox"; 4 | 5 | test("Selecting the checkbox should toggle its value", () => { 6 | const { getByLabelText } = render(); 7 | const checkbox = getByLabelText(/not checked/i); 8 | fireEvent.click(checkbox); 9 | expect(checkbox.checked).toEqual(true); 10 | fireEvent.click(checkbox); 11 | expect(checkbox.checked).toEqual(false); 12 | }); 13 | -------------------------------------------------------------------------------- /chapter-10/star-testing/src/Star.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaStar } from "react-icons/fa"; 3 | 4 | export default function Star({ selected = false }) { 5 | return ( 6 | <> 7 |

    Great Star

    8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /chapter-10/star-testing/src/Star.test.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import Star from "./Star"; 4 | import { toHaveAttribute } from "@testing-library/jest-dom"; 5 | import { render } from "@testing-library/react"; 6 | import "@testing-library/jest-dom/extend-expect"; 7 | 8 | expect.extend({ toHaveAttribute }); 9 | 10 | // test("renders a star", () => { 11 | // const div = document.createElement("div"); 12 | // ReactDOM.render(, div); 13 | // expect(div.querySelector("svg")).toHaveAttribute( 14 | // "id", 15 | // "star" 16 | // ); 17 | // }); 18 | 19 | test("renders an h1", () => { 20 | const { getByText } = render(); 21 | const h1 = getByText(/Great Star/); 22 | expect(h1).toHaveTextContent("Great Star"); 23 | }); 24 | -------------------------------------------------------------------------------- /chapter-10/star-testing/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /chapter-10/star-testing/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import Star from "./Star"; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById("root") 10 | ); 11 | -------------------------------------------------------------------------------- /chapter-10/testing/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /chapter-10/testing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "testing", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /chapter-10/testing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-10/testing/public/favicon.ico -------------------------------------------------------------------------------- /chapter-10/testing/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-10/testing/public/logo192.png -------------------------------------------------------------------------------- /chapter-10/testing/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-10/testing/public/logo512.png -------------------------------------------------------------------------------- /chapter-10/testing/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /chapter-10/testing/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /chapter-10/testing/src/functions.js: -------------------------------------------------------------------------------- 1 | export function timesTwo(a) { 2 | return a * 2; 3 | } 4 | 5 | export function order(items) { 6 | const total = items.reduce( 7 | (price, item) => price + item.price, 8 | 0 9 | ); 10 | return { 11 | orderItems: items, 12 | total 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /chapter-10/testing/src/functions.test.js: -------------------------------------------------------------------------------- 1 | import { timesTwo, order } from "./functions"; 2 | 3 | test("Multiplies by two", () => { 4 | expect(timesTwo(4)).toBe(8); 5 | }); 6 | 7 | const menuItems = [ 8 | { 9 | id: "1", 10 | name: "Tatted Up Turkey Burger", 11 | price: 19.5 12 | }, 13 | { 14 | id: "2", 15 | name: "Lobster Lollipops", 16 | price: 16.5 17 | }, 18 | { 19 | id: "3", 20 | name: "Motley Que Pulled Pork Sandwich", 21 | price: 21.5 22 | }, 23 | { 24 | id: "4", 25 | name: "Trash Can Nachos", 26 | price: 19.5 27 | } 28 | ]; 29 | 30 | test("Build an order object", () => { 31 | const result = { 32 | orderItems: menuItems, 33 | total: 77 34 | }; 35 | expect(order(menuItems)).toEqual(result); 36 | }); 37 | -------------------------------------------------------------------------------- /chapter-10/testing/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "color-organizer", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.0", 10 | "react-dom": "^16.13.0", 11 | "react-icons": "^3.9.0", 12 | "react-router": "^6.0.0-alpha.2", 13 | "react-router-dom": "^6.0.0-alpha.2", 14 | "react-scripts": "3.4.0" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": "react-app" 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-11/color-organizer/public/favicon.ico -------------------------------------------------------------------------------- /chapter-11/color-organizer/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-11/color-organizer/public/logo192.png -------------------------------------------------------------------------------- /chapter-11/color-organizer/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-11/color-organizer/public/logo512.png -------------------------------------------------------------------------------- /chapter-11/color-organizer/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/src/Colors/AddColorForm.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useInput, useColors } from "./"; 3 | 4 | export default function AddColorForm() { 5 | const [titleProps, resetTitle] = useInput(""); 6 | const [colorProps, resetColor] = useInput("#000000"); 7 | const { addColor } = useColors(); 8 | 9 | const submit = e => { 10 | e.preventDefault(); 11 | addColor(titleProps.value, colorProps.value); 12 | resetTitle(); 13 | resetColor(); 14 | }; 15 | 16 | return ( 17 |
    18 | 24 | 25 | 26 |
    27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/src/Colors/ColorDetails.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useColors } from "./"; 3 | import { useParams } from "react-router-dom"; 4 | 5 | export function ColorDetails() { 6 | let { id } = useParams(); 7 | let { colors } = useColors(); 8 | 9 | let foundColor = colors.find( 10 | color => color.id === id 11 | ); 12 | 13 | return ( 14 |
    15 |
    22 |

    {foundColor.title}

    23 |

    {foundColor.color}

    24 |
    25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/src/Colors/ColorList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useColors } from "./"; 3 | import Color from "./Color"; 4 | 5 | export default function ColorList() { 6 | const { colors } = useColors(); 7 | 8 | return ( 9 |
    10 | {colors.length === 0 ? ( 11 |

    No Colors Listed. (Add a Color)

    12 | ) : ( 13 | colors.map(color => ( 14 | 15 | )) 16 | )} 17 |
    18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/src/Colors/Colors.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | #root { 4 | height: 100%; 5 | } 6 | 7 | body, 8 | #root, 9 | h1, 10 | h2, 11 | h3, 12 | h4, 13 | p, 14 | td, 15 | span, 16 | div { 17 | padding: 0; 18 | margin: 0; 19 | } 20 | 21 | #root { 22 | display: flex; 23 | flex-direction: column; 24 | } 25 | 26 | .color-list { 27 | display: flex; 28 | flex-wrap: wrap; 29 | justify-content: space-around; 30 | } 31 | 32 | .color { 33 | flex-basis: calc(100% - 3em - 2px); 34 | flex-grow: 1; 35 | margin: 1em; 36 | border: solid 1px #ddd; 37 | padding: 0.5em; 38 | } 39 | 40 | .add-color { 41 | margin: 1em; 42 | display: flex; 43 | } 44 | 45 | .add-color input[type="text"] { 46 | flex-grow: 1; 47 | } 48 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/src/Colors/Star.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { FaStar } from "react-icons/fa"; 3 | 4 | export default function Star({ selected = false, onSelect = f => f }) { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/src/Colors/StarRating.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Star from "./Star"; 3 | 4 | const createArray = length => [...Array(length)]; 5 | 6 | export default function StarRating({ 7 | total = 5, 8 | selected = 0, 9 | onChange = f => f 10 | }) { 11 | return ( 12 |
    13 | {createArray(total).map((n, i) => ( 14 | i} 17 | onSelect={() => onChange(i + 1)} 18 | /> 19 | ))} 20 |

    21 | {selected} of {total} stars 22 |

    23 |
    24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/src/Colors/default-colors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "0175d1f0-a8c6-41bf-8d02-df5734d829a4", 4 | "title": "ocean at dusk", 5 | "color": "#00c4e2", 6 | "rating": 5 7 | }, 8 | { 9 | "id": "83c7ba2f-7392-4d7d-9e23-35adbe186046", 10 | "title": "lawn", 11 | "color": "#26ac56", 12 | "rating": 3 13 | }, 14 | { 15 | "id": "a11e3995-b0bd-4d58-8c48-5e49ae7f7f23", 16 | "title": "bright red", 17 | "color": "#ff0000", 18 | "rating": 0 19 | } 20 | ] 21 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/src/Colors/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Routes, Route } from "react-router-dom"; 3 | import AddColorForm from "./AddColorForm"; 4 | import ColorList from "./ColorList"; 5 | import { ColorDetails } from "./ColorDetails"; 6 | import "./Colors.css"; 7 | import { ColorProvider } from "./hooks"; 8 | export * from "./hooks"; 9 | 10 | export default function App() { 11 | return ( 12 | 13 | 14 | 15 | } 18 | > 19 | } 22 | /> 23 | 24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /chapter-11/color-organizer/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | import { BrowserRouter as Router } from "react-router-dom"; 4 | import App from "./Colors"; 5 | 6 | render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | -------------------------------------------------------------------------------- /chapter-11/company-website/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /chapter-11/company-website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "company-website", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.0", 10 | "react-dom": "^16.13.0", 11 | "react-router": "^6.0.0-alpha.2", 12 | "react-router-dom": "^6.0.0-alpha.2", 13 | "react-scripts": "3.4.0" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /chapter-11/company-website/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-11/company-website/public/favicon.ico -------------------------------------------------------------------------------- /chapter-11/company-website/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-11/company-website/public/logo192.png -------------------------------------------------------------------------------- /chapter-11/company-website/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-11/company-website/public/logo512.png -------------------------------------------------------------------------------- /chapter-11/company-website/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /chapter-11/company-website/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /chapter-11/company-website/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /chapter-11/company-website/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | import App from "./App"; 4 | 5 | import { BrowserRouter as Router } from "react-router-dom"; 6 | 7 | render( 8 | 9 | 10 | , 11 | document.getElementById("root") 12 | ); 13 | -------------------------------------------------------------------------------- /chapter-11/readme.md: -------------------------------------------------------------------------------- 1 | # Chapter 11 : React Router 2 | 3 | In this chapter, we cover the most recent version of the React Router, v6. 4 | 5 | ## Starter Website with Router 6 | 7 | - Company Website ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-11/company-website/)) 8 | - Color Organizer with Routing ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-11/color-organizer/)) 9 | 10 | ## React Router Docs & Repo 11 | 12 | - [Website](https://reacttraining.com/react-router/) 13 | - [Repo](https://github.com/ReactTraining/react-router) 14 | -------------------------------------------------------------------------------- /chapter-12/client-fetching/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | load and print 10 | 11 | 12 |

    Open the console

    13 | 14 | 15 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /chapter-12/node-fetching/index.js: -------------------------------------------------------------------------------- 1 | const fetch = require("node-fetch"); 2 | 3 | const userDetails = response => { 4 | const login = response.login; 5 | console.log(login); 6 | }; 7 | 8 | fetch("https://api.github.com/users/moonhighway") 9 | .then(res => res.json()) 10 | .then(userDetails); 11 | -------------------------------------------------------------------------------- /chapter-12/node-fetching/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-fetching", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "isomorphic-fetch": "^2.2.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/build-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "devFiles": [ 3 | "static/development/dll/dll_88bfe47d29bf84228398.js", 4 | "static/development/dll/dll_88bfe47d29bf84228398.js.map" 5 | ], 6 | "lowPriorityFiles": [ 7 | "static/development/_buildManifest.js", 8 | "static/development/_ssgManifest.js" 9 | ], 10 | "pages": { 11 | "/": [ 12 | "static/runtime/webpack.js", 13 | "static/runtime/main.js" 14 | ], 15 | "/_app": [ 16 | "static/runtime/webpack.js", 17 | "static/runtime/main.js" 18 | ], 19 | "/_error": [ 20 | "static/runtime/webpack.js", 21 | "static/runtime/main.js" 22 | ], 23 | "/_polyfills": [ 24 | "static/runtime/polyfills.js", 25 | "static/runtime/polyfills.js.map" 26 | ], 27 | "/index": [ 28 | "static/runtime/webpack.js", 29 | "static/runtime/main.js" 30 | ], 31 | "/pets": [ 32 | "static/runtime/webpack.js", 33 | "static/runtime/main.js" 34 | ] 35 | } 36 | } -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/autodll-webpack-plugin/package.json.hash: -------------------------------------------------------------------------------- 1 | {"name":"pets-next","version":"1.0.0","description":"","main":"index.js","scripts":{"dev":"next","build":"next build","start":"next start"},"keywords":[],"author":"","license":"ISC","dependencies":{"isomorphic-unfetch":"^3.0.0","next":"^9.3.0","react":"^16.13.0","react-dom":"^16.13.0"},"readme":"ERROR: No README data found!","_id":"pets-next@1.0.0"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/0886fb037d86207139fd92c5247a5408.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport Header from \"./Header\";\nexport default function Layout(props) {\n return __jsx(\"div\", null, __jsx(Header, null), props.children);\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/0ddb73719fac958005a5958e4655cce7.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport Link from \"next/link\";\nconst linkStyle = {\n marginRight: 15,\n color: \"salmon\"\n};\nexport function Header() {\n return __jsx(\"div\", null, __jsx(Link, {\n href: \"/\"\n }, __jsx(\"a\", {\n style: linkStyle\n }, \"Home\")), __jsx(Link, {\n href: \"/pets\"\n }, __jsx(\"a\", {\n style: linkStyle\n }, \"Pets\")));\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/0e150bf2255c0827c5c1ad74f9c4e6a2.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport default function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 2\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Pets"],"mappings":";;;AAAA,eAAe,SAASA,IAAT,GAAgB;AAC7B,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["export default function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/0ee4e26f8a0e48a02f5b01db56980928.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/ /recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport Layout from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }, __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 7\n },\n __self: this\n }, \"Hello everyone!\")));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/pages/index.js"],"names":["Layout","Index"],"mappings":";;;AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,eAAe,SAASC,KAAT,GAAiB;AAC9B,SACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBADF,CADF,CADF;AAOD","sourcesContent":["import Layout from \"./Layout\";\n\nexport default function Index() {\n return (\n \n
    \n

    Hello everyone!

    \n
    \n     \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/10ef1b3aa0c738609c5969ac2dc50cd6.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport default function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 2\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Pets"],"mappings":";;;AAAA,eAAe,SAASA,IAAT,GAAgB;AAC7B,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["export default function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/132444063d4831c6c0148d08df0a00f8.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar _interopRequireWildcard = require(\"@babel/runtime/helpers/interopRequireWildcard\");\n\nvar next = _interopRequireWildcard(require(\"./\"));\n\nwindow.next = next;\n(0, next[\"default\"])()[\"catch\"](function (err) {\n console.error(err.message + \"\\n\" + err.stack);\n});","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/14a31a61c6a431530b2594cae59dd088.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.content);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Layout.js"],"names":["Header","Layout","props","content"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,OAAO,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AAC5B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,OAFT,CADF;AAMD","sourcesContent":["import { Header } from \"./Header\";\n\nexport function Layout(props) {\n return (\n
    \n
    \n {props.content}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/19af1a4d627da6ef81c233fbfaa482d5.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/node_modules/next/dist/client/dev/noop.js"],"names":[],"mappings":"AAAA","sourcesContent":["\"use strict\";"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/1df7d9091f07299a8a464426649dabb3.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nfunction getRouteRegex(normalizedRoute) {\n // Escape all characters that could be considered RegEx\n var escapedRoute = (normalizedRoute.replace(/\\/$/, '') || '/').replace(/[|\\\\{}()[\\]^$+*?.-]/g, '\\\\$&');\n var groups = {};\n var groupIndex = 1;\n var parameterizedRoute = escapedRoute.replace(/\\/\\\\\\[([^/]+?)\\\\\\](?=\\/|$)/g, function (_, $1) {\n var isCatchAll = /^(\\\\\\.){3}/.test($1);\n groups[$1 // Un-escape key\n .replace(/\\\\([|\\\\{}()[\\]^$+*?.-])/g, '$1').replace(/^\\.{3}/, '') // eslint-disable-next-line no-sequences\n ] = {\n pos: groupIndex++,\n repeat: isCatchAll\n };\n return isCatchAll ? '/(.+?)' : '/([^/]+?)';\n });\n return {\n re: new RegExp('^' + parameterizedRoute + '(?:/)?$', 'i'),\n groups: groups\n };\n}\n\nexports.getRouteRegex = getRouteRegex;","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/1f4a8ae797aa4affcdac0e45c1e4b6f6.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.children);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Layout.js"],"names":["Header","Layout","props","children"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,OAAO,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AAC5B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,QAFT,CADF;AAMD","sourcesContent":["import { Header } from \"./Header\";\n\nexport function Layout(props) {\n return (\n
    \n
    \n {props.children}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/22a4e97d6af42adb4e90951ac70591f5.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport default function Layout(props) {\n return __jsx(\"div\", null, __jsx(Header, null), props.children);\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/24886fd74634619688e3722453af56d9.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n return mod && mod.__esModule ? mod : {\n \"default\": mod\n };\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar react_1 = __importDefault(require(\"react\"));\n\nvar amp_context_1 = require(\"./amp-context\");\n\nfunction isInAmpMode() {\n var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n _ref$ampFirst = _ref.ampFirst,\n ampFirst = _ref$ampFirst === void 0 ? false : _ref$ampFirst,\n _ref$hybrid = _ref.hybrid,\n hybrid = _ref$hybrid === void 0 ? false : _ref$hybrid,\n _ref$hasQuery = _ref.hasQuery,\n hasQuery = _ref$hasQuery === void 0 ? false : _ref$hasQuery;\n\n return ampFirst || hybrid && hasQuery;\n}\n\nexports.isInAmpMode = isInAmpMode;\n\nfunction useAmp() {\n // Don't assign the context value to a variable to save bytes\n return isInAmpMode(react_1[\"default\"].useContext(amp_context_1.AmpStateContext));\n}\n\nexports.useAmp = useAmp;","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/24a66effba3b487763a015a189a06fbb.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport Layout from \"./Layout\";\nimport fetch from \"isomorphic-unfetch\";\nexport default function Pets(props) {\n return __jsx(Layout, null, __jsx(\"div\", null, __jsx(\"h1\", null, \"Pets!\"), __jsx(\"ul\", null, props.pets.map(pet => __jsx(\"li\", {\n key: pet.id\n }, pet.name)))));\n}\n\nPets.getInitialProps = async function () {\n const res = await fetch(`http://pet-library.moonhighway.com/api/pets`);\n const data = await res.json();\n return {\n pets: data\n };\n};","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/26466408c67d5d70888ed57b40e3b646.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar runtimeConfig;\n\nexports[\"default\"] = function () {\n return runtimeConfig;\n};\n\nfunction setConfig(configValue) {\n runtimeConfig = configValue;\n}\n\nexports.setConfig = setConfig;","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/node_modules/next/dist/next-server/lib/runtime-config.js"],"names":["Object","defineProperty","exports","value","runtimeConfig","setConfig","configValue"],"mappings":"AAAA;;AACAA,MAAM,CAACC,cAAP,CAAsBC,OAAtB,EAA+B,YAA/B,EAA6C;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAA7C;AACA,IAAIC,aAAJ;;AACAF,OAAO,WAAP,GAAkB,YAAM;AACpB,SAAOE,aAAP;AACH,CAFD;;AAGA,SAASC,SAAT,CAAmBC,WAAnB,EAAgC;AAC5BF,EAAAA,aAAa,GAAGE,WAAhB;AACH;;AACDJ,OAAO,CAACG,SAAR,GAAoBA,SAApB","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nlet runtimeConfig;\nexports.default = () => {\n return runtimeConfig;\n};\nfunction setConfig(configValue) {\n runtimeConfig = configValue;\n}\nexports.setConfig = setConfig;\n"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/2d4b31ae89b687328389a36d55ea86e4.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar __importStar = this && this.__importStar || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) {\n if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\n }\n result[\"default\"] = mod;\n return result;\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar React = __importStar(require(\"react\"));\n\nexports.RouterContext = React.createContext(null);","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/2dbf6701a6099c9df7d22bcd5011ff73.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n}); // Identify /[param]/ in route string\n\nconst TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\n\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\n\nexports.isDynamicRoute = isDynamicRoute;","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/node_modules/next/dist/next-server/lib/router/utils/is-dynamic.js"],"names":["Object","defineProperty","exports","value","TEST_ROUTE","isDynamicRoute","route","test"],"mappings":"AAAA;;AACAA,MAAM,CAACC,cAAP,CAAsBC,OAAtB,EAA+B,YAA/B,EAA6C;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAA7C,E,CACA;;AACA,MAAMC,UAAU,GAAG,sBAAnB;;AACA,SAASC,cAAT,CAAwBC,KAAxB,EAA+B;AAC3B,SAAOF,UAAU,CAACG,IAAX,CAAgBD,KAAhB,CAAP;AACH;;AACDJ,OAAO,CAACG,cAAR,GAAyBA,cAAzB","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Identify /[param]/ in route string\nconst TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\nexports.isDynamicRoute = isDynamicRoute;\n"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/2f987e00c2cd3a9b0beebcfc34266d30.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport Header from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.content);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Layout.js"],"names":["Header","Layout","props","content"],"mappings":";;;AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,OAAO,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AAC5B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,OAFT,CADF;AAMD","sourcesContent":["import Header from \"./Header\";\n\nexport function Layout(props) {\n return (\n
    \n
    \n {props.content}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/31c04910b4aa656fd06813a67b780f1a.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar __importStar = this && this.__importStar || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\n result[\"default\"] = mod;\n return result;\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nconst React = __importStar(require(\"react\"));\n\nexports.HeadManagerContext = React.createContext(null);","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/31c9c83249a28d41a7fea44bdaeb8150.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar __importStar = this && this.__importStar || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) {\n if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\n }\n result[\"default\"] = mod;\n return result;\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar React = __importStar(require(\"react\"));\n\nexports.HeadManagerContext = React.createContext(null);","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/335200dd9be1ac985a1cc38fc7edf44e.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }, __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 7\n },\n __self: this\n }, \"Hello everyone!\")));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/index.js"],"names":["Layout","Index"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,eAAe,SAASC,KAAT,GAAiB;AAC9B,SACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBADF,CADF,CADF;AAOD","sourcesContent":["import { Layout } from \"./Layout\";\n\nexport default function Index() {\n return (\n \n
    \n

    Hello everyone!

    \n
    \n     \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/36d6cb104bbfcfe53a99ff5c5f77a700.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport Link from \"next/link\";\nvar linkStyle = {\n marginRight: 15,\n color: \"salmon\"\n};\nexport default function Header() {\n return __jsx(\"div\", null, __jsx(Link, {\n href: \"/\"\n }, __jsx(\"a\", {\n style: linkStyle\n }, \"Home\")), __jsx(Link, {\n href: \"/pets\"\n }, __jsx(\"a\", {\n style: linkStyle\n }, \"Pets\")));\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/3d91c5490cabdaf1eaac5f0163a2f131.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/ /recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport Layout from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }, __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 7\n },\n __self: this\n }, \"Hello everyone!\")));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/pages/index.js"],"names":["Layout","Index"],"mappings":";;;AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,eAAe,SAASC,KAAT,GAAiB;AAC9B,SACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBADF,CADF,CADF;AAOD","sourcesContent":["import Layout from \"./Layout\";\n\nexport default function Index() {\n return (\n \n
    \n

    Hello everyone!

    \n
    \n     \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/49575fd45f8d6d3a646740a26812ed77.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport Header from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.children);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Layout.js"],"names":["Header","Layout","props","children"],"mappings":";;;AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,OAAO,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AAC5B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,QAFT,CADF;AAMD","sourcesContent":["import Header from \"./Header\";\n\nexport function Layout(props) {\n return (\n
    \n
    \n {props.children}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/4c7b145840bec9e6263c50b27f78faf7.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar __importStar = this && this.__importStar || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\n result[\"default\"] = mod;\n return result;\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nconst React = __importStar(require(\"react\"));\n\nexports.AmpStateContext = React.createContext({});","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/532548e874afbdf944320a19c0b9e4ca.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nrequire(\"@next/polyfill-nomodule\");","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/node_modules/next/dist/client/polyfills.js"],"names":["require"],"mappings":"AAAA;;AAAaA,OAAO,CAAC,yBAAD,CAAP","sourcesContent":["\"use strict\";require(\"@next/polyfill-nomodule\");"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/5bfdc5f63f164e5ae8766a4ed14ae887.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, null, __jsx(\"div\", null, __jsx(\"h1\", null, \"Hello everyone!\")));\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/5c361a997d5091d0b96fb72fa1d3dc8a.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"'use strict';\n\nvar ansiRegex = require('ansi-regex');\n\nvar stripAnsi = function stripAnsi(string) {\n return typeof string === 'string' ? string.replace(ansiRegex(), '') : string;\n};\n\nmodule.exports = stripAnsi;\nmodule.exports[\"default\"] = stripAnsi;","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/node_modules/strip-ansi/index.js"],"names":["ansiRegex","require","stripAnsi","string","replace","module","exports"],"mappings":"AAAA;;AACA,IAAMA,SAAS,GAAGC,OAAO,CAAC,YAAD,CAAzB;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,MAAM;AAAA,SAAI,OAAOA,MAAP,KAAkB,QAAlB,GAA6BA,MAAM,CAACC,OAAP,CAAeJ,SAAS,EAAxB,EAA4B,EAA5B,CAA7B,GAA+DG,MAAnE;AAAA,CAAxB;;AAEAE,MAAM,CAACC,OAAP,GAAiBJ,SAAjB;AACAG,MAAM,CAACC,OAAP,cAAyBJ,SAAzB","sourcesContent":["'use strict';\nconst ansiRegex = require('ansi-regex');\n\nconst stripAnsi = string => typeof string === 'string' ? string.replace(ansiRegex(), '') : string;\n\nmodule.exports = stripAnsi;\nmodule.exports.default = stripAnsi;\n"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/5cb0b6b495cf7e753443450b10578790.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.children);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Layout.js"],"names":["Header","Layout","props","children"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,OAAO,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AAC5B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,QAFT,CADF;AAMD","sourcesContent":["import { Header } from \"./Header\";\n\nexport function Layout(props) {\n return (\n
    \n
    \n {props.children}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/5d9d82029b467dcacb478d25781fbdf0.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.content);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Layout.js"],"names":["Header","Layout","props","content"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,OAAO,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AAC5B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,OAFT,CADF;AAMD","sourcesContent":["import { Header } from \"./Header\";\n\nexport function Layout(props) {\n return (\n
    \n
    \n {props.content}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/62d7eb3f431e82b2ece59eb544501b17.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n}); // Identify /[param]/ in route string\n\nvar TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\n\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\n\nexports.isDynamicRoute = isDynamicRoute;","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/62ebb17818cf101f8438dc857a231ccf.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports[\"default\"] = withRouter;\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _router = require(\"./router\");\n\nfunction withRouter(ComposedComponent) {\n function WithRouterWrapper(props) {\n return _react[\"default\"].createElement(ComposedComponent, Object.assign({\n router: (0, _router.useRouter)()\n }, props));\n }\n\n WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps // This is needed to allow checking for custom getInitialProps in _app\n ;\n WithRouterWrapper.origGetInitialProps = ComposedComponent.origGetInitialProps;\n\n if (false) {\n var name = ComposedComponent.displayName || ComposedComponent.name || 'Unknown';\n WithRouterWrapper.displayName = \"withRouter(\" + name + \")\";\n }\n\n return WithRouterWrapper;\n}","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/6924784258878f709932c76bdf625242.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\nexport default function Pets() {\n return __jsx(Layout, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }, __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 7\n },\n __self: this\n }, \"Hey pets!\")));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Layout","Pets"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,eAAe,SAASC,IAAT,GAAgB;AAC7B,SACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBADF,CADF,CADF;AAOD","sourcesContent":["import { Layout } from \"./Layout\";\n\nexport default function Pets() {\n return (\n \n
    \n

    Hey pets!

    \n
    \n     \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/6d03cb577c9158b5b77ba9f2bc10e3d3.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport default function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 3\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Header","Pets"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AACA,eAAe,SAASC,IAAT,GAAgB;AAC7B,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["import { Header } from \"./Header\";\nexport default function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/6f6e8713bf79a134516ece4c1e265589.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nfunction getRouteMatcher(routeRegex) {\n var re = routeRegex.re,\n groups = routeRegex.groups;\n return function (pathname) {\n var routeMatch = re.exec(pathname);\n\n if (!routeMatch) {\n return false;\n }\n\n var decode = decodeURIComponent;\n var params = {};\n Object.keys(groups).forEach(function (slugName) {\n var g = groups[slugName];\n var m = routeMatch[g.pos];\n\n if (m !== undefined) {\n params[slugName] = ~m.indexOf('/') ? m.split('/').map(function (entry) {\n return decode(entry);\n }) : g.repeat ? [decode(m)] : decode(m);\n }\n });\n return params;\n };\n}\n\nexports.getRouteMatcher = getRouteMatcher;","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/71e3236ff13caa1286ceb107bbe8dff8.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport default function Index() {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 3\n },\n __self: this\n }, __jsx(\"p\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 4\n },\n __self: this\n }, \"Hello everyone!\"));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/index.js"],"names":["Index"],"mappings":";;;AAAA,eAAe,SAASA,KAAT,GAAiB;AAC9B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBADF,CADF;AAKD","sourcesContent":["export default function Index() {\n return (\n
    \n

    Hello everyone!

    \n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/729eab7a079d8055f8d64da088c1187d.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }, __jsx(\"p\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 7\n },\n __self: this\n }, \"Hello everyone!\")));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/index.js"],"names":["Layout","Index"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,eAAe,SAASC,KAAT,GAAiB;AAC9B,SACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBADF,CADF,CADF;AAOD","sourcesContent":["import { Layout } from \"./Layout\";\n\nexport default function Index() {\n return (\n \n
    \n

    Hello everyone!

    \n
    \n     \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/7373b64ccef99665f257f16c346773f7.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar runtimeConfig;\n\nexports[\"default\"] = function () {\n return runtimeConfig;\n};\n\nfunction setConfig(configValue) {\n runtimeConfig = configValue;\n}\n\nexports.setConfig = setConfig;","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/7f40f429cf6a045e2433764810824f20.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar __importStar = this && this.__importStar || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) {\n if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\n }\n result[\"default\"] = mod;\n return result;\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar React = __importStar(require(\"react\"));\n\nexports.AmpStateContext = React.createContext({});","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/82ef7c7976ef592bec5e250925404f8f.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", null, __jsx(Header, null), props.children);\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/836651f19640dc1a7b8bee7661a224bb.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = withRouter;\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _router = require(\"./router\");\n\nfunction withRouter(ComposedComponent) {\n function WithRouterWrapper(props) {\n return _react.default.createElement(ComposedComponent, Object.assign({\n router: (0, _router.useRouter)()\n }, props));\n }\n\n WithRouterWrapper.getInitialProps = ComposedComponent.getInitialProps // This is needed to allow checking for custom getInitialProps in _app\n ;\n WithRouterWrapper.origGetInitialProps = ComposedComponent.origGetInitialProps;\n\n if (false) {\n var name = ComposedComponent.displayName || ComposedComponent.name || 'Unknown';\n WithRouterWrapper.displayName = \"withRouter(\" + name + \")\";\n }\n\n return WithRouterWrapper;\n}","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/8875e6abc476f1df4c1271f66604fc44.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/ /recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport Header from \"./Header\";\nexport default function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.children);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/pages/Layout.js"],"names":["Header","Layout","props","children"],"mappings":";;;AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,eAAe,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AACpC,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,QAFT,CADF;AAMD","sourcesContent":["import Header from \"./Header\";\n\nexport default function Layout(props) {\n return (\n
    \n
    \n {props.children}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/88e32d3823741d6096cd8c5c45fd9e84.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport default function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 2\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Pets.js"],"names":["Pets"],"mappings":";;;AAAA,eAAe,SAASA,IAAT,GAAgB;AAC7B,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["export default function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/8930948abb3671a4bfa22396abc76cc7.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 2\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Pets"],"mappings":";;;AAAA,OAAO,SAASA,IAAT,GAAgB;AACrB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["export function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/8e0746d0d420f32e4893274fa85dedf1.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nrequire(\"@next/polyfill-nomodule\");","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/node_modules/next/dist/client/polyfills.js"],"names":["require"],"mappings":"AAAA;;AAAaA,OAAO,CAAC,yBAAD,CAAP","sourcesContent":["\"use strict\";require(\"@next/polyfill-nomodule\");"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/905863c9d307d7b9f4058c9468897f1e.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\nimport fetch from \"isomorphic-unfetch\";\nexport default function Pets(props) {\n return __jsx(Layout, null, __jsx(\"div\", null, __jsx(\"h1\", null, \"Pets!\"), __jsx(\"ul\", null, props.pets.map(pet => __jsx(\"li\", {\n key: pet.id\n }, pet.name)))));\n}\n\nPets.getInitialProps = async function () {\n const res = await fetch(`http://pet-library.moonhighway.com/api/pets`);\n const data = await res.json();\n return {\n pets: data\n };\n};","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/968f41c84c6b1de042f2161c6f7f95ae.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }, __jsx(\"p\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 7\n },\n __self: this\n }, \"Hello everyone!\")));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/index.js"],"names":["Layout","Index"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,eAAe,SAASC,KAAT,GAAiB;AAC9B,SACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBADF,CADF,CADF;AAOD","sourcesContent":["import { Layout } from \"./Layout\";\n\nexport default function Index() {\n return (\n \n
    \n

    Hello everyone!

    \n
    \n     \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/96cb9779e54ac495f3e57bc0859b2d02.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport default function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 2\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Pets.js"],"names":["Pets"],"mappings":";;;AAAA,eAAe,SAASA,IAAT,GAAgB;AAC7B,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["export default function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/98f722bed3310342493699e03819fb05.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"'use strict';\n\nvar ansiRegex = require('ansi-regex');\n\nvar stripAnsi = function stripAnsi(string) {\n return typeof string === 'string' ? string.replace(ansiRegex(), '') : string;\n};\n\nmodule.exports = stripAnsi;\nmodule.exports[\"default\"] = stripAnsi;","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/node_modules/strip-ansi/index.js"],"names":["ansiRegex","require","stripAnsi","string","replace","module","exports"],"mappings":"AAAA;;AACA,IAAMA,SAAS,GAAGC,OAAO,CAAC,YAAD,CAAzB;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,MAAM;AAAA,SAAI,OAAOA,MAAP,KAAkB,QAAlB,GAA6BA,MAAM,CAACC,OAAP,CAAeJ,SAAS,EAAxB,EAA4B,EAA5B,CAA7B,GAA+DG,MAAnE;AAAA,CAAxB;;AAEAE,MAAM,CAACC,OAAP,GAAiBJ,SAAjB;AACAG,MAAM,CAACC,OAAP,cAAyBJ,SAAzB","sourcesContent":["'use strict';\nconst ansiRegex = require('ansi-regex');\n\nconst stripAnsi = string => typeof string === 'string' ? string.replace(ansiRegex(), '') : string;\n\nmodule.exports = stripAnsi;\nmodule.exports.default = stripAnsi;\n"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/9924d5cdc226b34ad6715f7737605dc5.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/ /recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport Header from \"./Header\";\nexport default function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.children);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/pages/Layout.js"],"names":["Header","Layout","props","children"],"mappings":";;;AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,eAAe,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AACpC,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,QAFT,CADF;AAMD","sourcesContent":["import Header from \"./Header\";\n\nexport default function Layout(props) {\n return (\n
    \n
    \n {props.children}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/9b997fe08d74d5a27d8f166e8b04475c.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 2\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Pets.js"],"names":["Pets"],"mappings":";;;AAAA,OAAO,SAASA,IAAT,GAAgB;AACrB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["export function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/a3972b021ebfb99750b30d18b83c6b02.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }, __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 7\n },\n __self: this\n }, \"Hello everyone!\")));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/index.js"],"names":["Layout","Index"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,eAAe,SAASC,KAAT,GAAiB;AAC9B,SACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBADF,CADF,CADF;AAOD","sourcesContent":["import { Layout } from \"./Layout\";\n\nexport default function Index() {\n return (\n \n
    \n

    Hello everyone!

    \n
    \n     \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/a504c57cb98b38dbfe70ef32b67fc865.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 2\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Pets"],"mappings":";;;AAAA,OAAO,SAASA,IAAT,GAAgB;AACrB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["export function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/ab682532749b90b99ab1a313d3e0de58.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\nexport default function Pets() {\n return __jsx(Layout, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }, __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 7\n },\n __self: this\n }, \"Hey pets!\")));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Layout","Pets"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AAEA,eAAe,SAASC,IAAT,GAAgB;AAC7B,SACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBADF,CADF,CADF;AAOD","sourcesContent":["import { Layout } from \"./Layout\";\n\nexport default function Pets() {\n return (\n \n
    \n

    Hey pets!

    \n
    \n     \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/ae4b8b64a60852f57998cac0d5f00f03.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nfunction getRouteMatcher(routeRegex) {\n const {\n re,\n groups\n } = routeRegex;\n return pathname => {\n const routeMatch = re.exec(pathname);\n\n if (!routeMatch) {\n return false;\n }\n\n const decode = decodeURIComponent;\n const params = {};\n Object.keys(groups).forEach(slugName => {\n const g = groups[slugName];\n const m = routeMatch[g.pos];\n\n if (m !== undefined) {\n params[slugName] = ~m.indexOf('/') ? m.split('/').map(entry => decode(entry)) : g.repeat ? [decode(m)] : decode(m);\n }\n });\n return params;\n };\n}\n\nexports.getRouteMatcher = getRouteMatcher;","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/b6595ab1484a1474f3777ec448abb828.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport Layout from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, null, __jsx(\"div\", null, __jsx(\"h1\", null, \"Hello everyone!\")));\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/b6a9fcdc0aabe92fd09d44b3827b6ab8.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n}); // Identify /[param]/ in route string\n\nvar TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\n\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\n\nexports.isDynamicRoute = isDynamicRoute;","map":{"version":3,"sources":["/Users/eveporcello/Desktop/ /recipes-next/node_modules/next/dist/next-server/lib/router/utils/is-dynamic.js"],"names":["Object","defineProperty","exports","value","TEST_ROUTE","isDynamicRoute","route","test"],"mappings":"AAAA;;AACAA,MAAM,CAACC,cAAP,CAAsBC,OAAtB,EAA+B,YAA/B,EAA6C;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAA7C,E,CACA;;AACA,IAAMC,UAAU,GAAG,sBAAnB;;AACA,SAASC,cAAT,CAAwBC,KAAxB,EAA+B;AAC3B,SAAOF,UAAU,CAACG,IAAX,CAAgBD,KAAhB,CAAP;AACH;;AACDJ,OAAO,CAACG,cAAR,GAAyBA,cAAzB","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Identify /[param]/ in route string\nconst TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\nexports.isDynamicRoute = isDynamicRoute;\n"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/bdb78214291eafd929b820804a0655e8.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/node_modules/next/dist/client/dev/noop.js"],"names":[],"mappings":"AAAA","sourcesContent":["\"use strict\";"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/bf3a5facc4433594bd4df0ab383167a5.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport Header from \"./Header\";\nexport default function Layout(props) {\n return __jsx(\"div\", null, __jsx(Header, null), props.children);\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/c03f08de8054b082ab7557506b328c87.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\n\nconst petContent = __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 3\n },\n __self: this\n}, \"Hey pets!\");\n\nexport function Pets() {\n return __jsx(Layout, {\n content: petContent,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n });\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Layout","petContent","Pets"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;;AAEA,MAAMC,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAAnB;;AAEA,OAAO,SAASC,IAAT,GAAgB;AACrB,SAAO,MAAC,MAAD;AAAQ,IAAA,OAAO,EAAED,UAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAP;AACD","sourcesContent":["import { Layout } from \"./Layout\";\n\nconst petContent =

    Hey pets!

    ;\n\nexport function Pets() {\n return ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/c11c0d992a887fa4ae5ee9c4ee2dc476.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, null, __jsx(\"div\", null, __jsx(\"h1\", null, \"Hello everyone!\")));\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/c5d86d4a558793cf7b1997a5329f4451.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", null, __jsx(Header, null), props.children);\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/cadf2bf94906342e68ef0d67f380267c.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n}); // Identify /[param]/ in route string\n\nconst TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\n\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\n\nexports.isDynamicRoute = isDynamicRoute;","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/node_modules/next/dist/next-server/lib/router/utils/is-dynamic.js"],"names":["Object","defineProperty","exports","value","TEST_ROUTE","isDynamicRoute","route","test"],"mappings":"AAAA;;AACAA,MAAM,CAACC,cAAP,CAAsBC,OAAtB,EAA+B,YAA/B,EAA6C;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAA7C,E,CACA;;AACA,MAAMC,UAAU,GAAG,sBAAnB;;AACA,SAASC,cAAT,CAAwBC,KAAxB,EAA+B;AAC3B,SAAOF,UAAU,CAACG,IAAX,CAAgBD,KAAhB,CAAP;AACH;;AACDJ,OAAO,CAACG,cAAR,GAAyBA,cAAzB","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Identify /[param]/ in route string\nconst TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\nexports.isDynamicRoute = isDynamicRoute;\n"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/cf5edc60729b852d37142405c423f4c9.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n}); // Identify /[param]/ in route string\n\nconst TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\n\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\n\nexports.isDynamicRoute = isDynamicRoute;","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/cfbb6592ae573552f958b8273496ff84.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport Layout from \"./Layout\";\nexport default function Index() {\n return __jsx(Layout, null, __jsx(\"div\", null, __jsx(\"h1\", null, \"Hello everyone!\")));\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/d0a95c026ce36f7a98ab5f1eca0e6d49.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar __importStar = this && this.__importStar || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\n result[\"default\"] = mod;\n return result;\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nconst React = __importStar(require(\"react\"));\n\nexports.DocumentContext = React.createContext(null);","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/d1121337381936685ad3e8118df3979e.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport Link from \"next/link\";\nconst linkStyle = {\n marginRight: 15,\n color: \"salmon\"\n};\nexport default function Header() {\n return __jsx(\"div\", null, __jsx(Link, {\n href: \"/\"\n }, __jsx(\"a\", {\n style: linkStyle\n }, \"Home\")), __jsx(Link, {\n href: \"/pets\"\n }, __jsx(\"a\", {\n style: linkStyle\n }, \"Pets\")));\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/d66bfc5861e979ba084f9967548fdc64.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 2\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Pets.js"],"names":["Pets"],"mappings":";;;AAAA,OAAO,SAASA,IAAT,GAAgB;AACrB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["export function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/d9d7f82e69b4bdd5604c4862714fe27a.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Layout } from \"./Layout\";\n\nvar petContent = __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 3\n },\n __self: this\n}, \"Hey pets!\");\n\nexport function Pets() {\n return __jsx(Layout, {\n content: petContent,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n });\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Layout","petContent","Pets"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;;AAEA,IAAMC,UAAU,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAAnB;;AAEA,OAAO,SAASC,IAAT,GAAgB;AACrB,SAAO,MAAC,MAAD;AAAQ,IAAA,OAAO,EAAED,UAAjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAP;AACD","sourcesContent":["import { Layout } from \"./Layout\";\n\nconst petContent =

    Hey pets!

    ;\n\nexport function Pets() {\n return ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/db3cbe5fe7c8bc83767bc5062e142aae.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport Header from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.content);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Layout.js"],"names":["Header","Layout","props","content"],"mappings":";;;AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,OAAO,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AAC5B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,OAFT,CADF;AAMD","sourcesContent":["import Header from \"./Header\";\n\nexport function Layout(props) {\n return (\n
    \n
    \n {props.content}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/ddeb59f2750269b29f874f7d9c34bd37.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport default function Layout(props) {\n return __jsx(\"div\", null, __jsx(Header, null), props.children);\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/dfd7dd08ba12c7b8738685a490eeb052.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar __importDefault = this && this.__importDefault || function (mod) {\n return mod && mod.__esModule ? mod : {\n \"default\": mod\n };\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nconst react_1 = __importDefault(require(\"react\"));\n\nconst amp_context_1 = require(\"./amp-context\");\n\nfunction isInAmpMode({\n ampFirst = false,\n hybrid = false,\n hasQuery = false\n} = {}) {\n return ampFirst || hybrid && hasQuery;\n}\n\nexports.isInAmpMode = isInAmpMode;\n\nfunction useAmp() {\n // Don't assign the context value to a variable to save bytes\n return isInAmpMode(react_1.default.useContext(amp_context_1.AmpStateContext));\n}\n\nexports.useAmp = useAmp;","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/e0f2686866afa7ad54cb78e36eb4a1c6.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/Layout.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport Header from \"./Header\";\nexport function Layout(props) {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 5\n },\n __self: this\n }, __jsx(Header, {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 6\n },\n __self: this\n }), props.children);\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/Layout.js"],"names":["Header","Layout","props","children"],"mappings":";;;AAAA,OAAOA,MAAP,MAAmB,UAAnB;AAEA,OAAO,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AAC5B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,MAAC,MAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADF,EAEGA,KAAK,CAACC,QAFT,CADF;AAMD","sourcesContent":["import Header from \"./Header\";\n\nexport function Layout(props) {\n return (\n
    \n
    \n {props.children}\n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/e130420d8ca861bd54b03e4ac7b6c60c.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nvar __importStar = this && this.__importStar || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\n result[\"default\"] = mod;\n return result;\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nconst React = __importStar(require(\"react\"));\n\nexports.RouterContext = React.createContext(null);","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/e3326f2715b9ad174fd86d560ee4c223.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport default function Index() {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 3\n },\n __self: this\n }, __jsx(\"p\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 4\n },\n __self: this\n }, \"Hello everyone!\"));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/index.js"],"names":["Index"],"mappings":";;;AAAA,eAAe,SAASA,KAAT,GAAiB;AAC9B,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBADF,CADF;AAKD","sourcesContent":["export default function Index() {\n return (\n
    \n

    Hello everyone!

    \n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/e4b814b8d90f4091a5811bdcce896774.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/pets.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nimport { Header } from \"./Header\";\nexport default function Pets() {\n return __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 3\n },\n __self: this\n }, \"Pets!\");\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/pets.js"],"names":["Header","Pets"],"mappings":";;;AAAA,SAASA,MAAT,QAAuB,UAAvB;AACA,eAAe,SAASC,IAAT,GAAgB;AAC7B,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAAP;AACD","sourcesContent":["import { Header } from \"./Header\";\nexport default function Pets() {\n return

    Pets!

    ;\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/e648d2acdb42ef8c24e1492c9c67d7c6.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nrequire(\"@next/polyfill-nomodule\");","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/e75c23ec8e2ffe1d8ed51053719eef7e.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n}); // Identify /[param]/ in route string\n\nvar TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\n\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\n\nexports.isDynamicRoute = isDynamicRoute;","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/node_modules/next/dist/next-server/lib/router/utils/is-dynamic.js"],"names":["Object","defineProperty","exports","value","TEST_ROUTE","isDynamicRoute","route","test"],"mappings":"AAAA;;AACAA,MAAM,CAACC,cAAP,CAAsBC,OAAtB,EAA+B,YAA/B,EAA6C;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAA7C,E,CACA;;AACA,IAAMC,UAAU,GAAG,sBAAnB;;AACA,SAASC,cAAT,CAAwBC,KAAxB,EAA+B;AAC3B,SAAOF,UAAU,CAACG,IAAX,CAAgBD,KAAhB,CAAP;AACH;;AACDJ,OAAO,CAACG,cAAR,GAAyBA,cAAzB","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\n// Identify /[param]/ in route string\nconst TEST_ROUTE = /\\/\\[[^/]+?\\](?=\\/|$)/;\nfunction isDynamicRoute(route) {\n return TEST_ROUTE.test(route);\n}\nexports.isDynamicRoute = isDynamicRoute;\n"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/e9863ba6049d81b85016047932b347b4.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"import React from \"react\";\nvar __jsx = React.createElement;\nimport Link from \"next/link\";\nvar linkStyle = {\n marginRight: 15,\n color: \"salmon\"\n};\nexport function Header() {\n return __jsx(\"div\", null, __jsx(Link, {\n href: \"/\"\n }, __jsx(\"a\", {\n style: linkStyle\n }, \"Home\")), __jsx(Link, {\n href: \"/pets\"\n }, __jsx(\"a\", {\n style: linkStyle\n }, \"Pets\")));\n}","map":null,"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/ef51fb34c79085bcc7e3b271665a4d06.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nfunction getRouteRegex(normalizedRoute) {\n // Escape all characters that could be considered RegEx\n const escapedRoute = (normalizedRoute.replace(/\\/$/, '') || '/').replace(/[|\\\\{}()[\\]^$+*?.-]/g, '\\\\$&');\n const groups = {};\n let groupIndex = 1;\n const parameterizedRoute = escapedRoute.replace(/\\/\\\\\\[([^/]+?)\\\\\\](?=\\/|$)/g, (_, $1) => {\n const isCatchAll = /^(\\\\\\.){3}/.test($1);\n groups[$1 // Un-escape key\n .replace(/\\\\([|\\\\{}()[\\]^$+*?.-])/g, '$1').replace(/^\\.{3}/, '') // eslint-disable-next-line no-sequences\n ] = {\n pos: groupIndex++,\n repeat: isCatchAll\n };\n return isCatchAll ? '/(.+?)' : '/([^/]+?)';\n });\n return {\n re: new RegExp('^' + parameterizedRoute + '(?:/)?$', 'i'),\n groups\n };\n}\n\nexports.getRouteRegex = getRouteRegex;","map":null,"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/f1ee2e0ace126168c6e9c5d022305113.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport function Index() {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 3\n },\n __self: this\n }, __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 4\n },\n __self: this\n }, \"[Company Website]\"));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/index.js"],"names":["Index"],"mappings":";;;AAAA,OAAO,SAASA,KAAT,GAAiB;AACtB,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBADF,CADF;AAKD","sourcesContent":["export function Index() {\n return (\n
    \n

    [Company Website]

    \n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/f924f21f39e449e86c6282b4dad148b3.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar runtimeConfig;\n\nexports[\"default\"] = function () {\n return runtimeConfig;\n};\n\nfunction setConfig(configValue) {\n runtimeConfig = configValue;\n}\n\nexports.setConfig = setConfig;","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/node_modules/next/dist/next-server/lib/runtime-config.js"],"names":["Object","defineProperty","exports","value","runtimeConfig","setConfig","configValue"],"mappings":"AAAA;;AACAA,MAAM,CAACC,cAAP,CAAsBC,OAAtB,EAA+B,YAA/B,EAA6C;AAAEC,EAAAA,KAAK,EAAE;AAAT,CAA7C;AACA,IAAIC,aAAJ;;AACAF,OAAO,WAAP,GAAkB,YAAM;AACpB,SAAOE,aAAP;AACH,CAFD;;AAGA,SAASC,SAAT,CAAmBC,WAAnB,EAAgC;AAC5BF,EAAAA,aAAa,GAAGE,WAAhB;AACH;;AACDJ,OAAO,CAACG,SAAR,GAAoBA,SAApB","sourcesContent":["\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nlet runtimeConfig;\nexports.default = () => {\n return runtimeConfig;\n};\nfunction setConfig(configValue) {\n runtimeConfig = configValue;\n}\nexports.setConfig = setConfig;\n"]},"metadata":{},"sourceType":"script"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/cache/next-babel-loader/ff62c31d1e0e6386331fa897e87d568b.json: -------------------------------------------------------------------------------- 1 | {"ast":null,"code":"var _jsxFileName = \"/Users/eveporcello/Desktop/recipes-next/pages/index.js\";\nimport React from \"react\";\nvar __jsx = React.createElement;\nexport function Index() {\n return __jsx(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 3\n },\n __self: this\n }, __jsx(\"h1\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 4\n },\n __self: this\n }, \"[Company Website]\"));\n}","map":{"version":3,"sources":["/Users/eveporcello/Desktop/recipes-next/pages/index.js"],"names":["Index"],"mappings":";;;AAAA,OAAO,SAASA,KAAT,GAAiB;AACtB,SACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBADF,CADF;AAKD","sourcesContent":["export function Index() {\n return (\n
    \n

    [Company Website]

    \n
    \n );\n}\n"]},"metadata":{},"sourceType":"module"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/react-loadable-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "./dev/noop": [ 3 | { 4 | "id": "./node_modules/next/dist/client/dev/noop.js", 5 | "name": "./node_modules/next/dist/client/dev/noop.js", 6 | "file": "static/chunks/0.js", 7 | "publicPath": "static/chunks/0.js" 8 | } 9 | ] 10 | } -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/server/pages-manifest.json: -------------------------------------------------------------------------------- 1 | {"/_app":"static/development/pages/_app.js","/_document":"static/development/pages/_document.js","/_error":"static/development/pages/_error.js","/index":"static/development/pages/index.js","/pets":"static/development/pages/pets.js","/":"static/development/pages/index.js"} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/server/ssr-module-cache.js: -------------------------------------------------------------------------------- 1 | 2 | /* This cache is used by webpack for instantiated modules */ 3 | module.exports = {} 4 | -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/static/chunks/0.js: -------------------------------------------------------------------------------- 1 | (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{ 2 | 3 | /***/ "./node_modules/next/dist/client/dev/noop.js": 4 | /*!***************************************************!*\ 5 | !*** ./node_modules/next/dist/client/dev/noop.js ***! 6 | \***************************************************/ 7 | /*! no static exports found */ 8 | /***/ (function(module, exports, __webpack_require__) { 9 | 10 | "use strict"; 11 | 12 | 13 | /***/ }) 14 | 15 | }]); 16 | //# sourceMappingURL=0.js.map -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/static/chunks/0.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"static/chunks/0.js","sources":[],"mappings":";;;;;;;;;;;;;;A","sourceRoot":""} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/static/development/_buildManifest.js: -------------------------------------------------------------------------------- 1 | self.__BUILD_MANIFEST = {};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB() -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/static/development/_ssgManifest.js: -------------------------------------------------------------------------------- 1 | self.__SSG_MANIFEST=new Set;self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB() -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/static/webpack/0292b093dc64ce093240.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"fdaa338e5a22bdbf7699","c":{}} -------------------------------------------------------------------------------- /chapter-12/pets-next/.next/static/webpack/fdaa338e5a22bdbf7699.hot-update.json: -------------------------------------------------------------------------------- 1 | {"h":"d44e002a94f491e4cc54","c":{}} -------------------------------------------------------------------------------- /chapter-12/pets-next/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pets-next", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "next", 8 | "build": "next build", 9 | "start": "next start" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "isomorphic-unfetch": "^3.0.0", 16 | "next": "^9.3.0", 17 | "react": "^16.13.0", 18 | "react-dom": "^16.13.0" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /chapter-12/pets-next/pages/Header.js: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | 3 | const linkStyle = { 4 | marginRight: 15, 5 | color: "salmon" 6 | }; 7 | 8 | export default function Header() { 9 | return ( 10 |
    11 | 12 | Home 13 | 14 | 15 | Pets 16 | 17 |
    18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /chapter-12/pets-next/pages/Layout.js: -------------------------------------------------------------------------------- 1 | import Header from "./Header"; 2 | 3 | export default function Layout(props) { 4 | return ( 5 |
    6 |
    7 | {props.children} 8 |
    9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /chapter-12/pets-next/pages/Pets.js: -------------------------------------------------------------------------------- 1 | import Layout from "./Layout"; 2 | import fetch from "isomorphic-unfetch"; 3 | 4 | export default function Pets(props) { 5 | return ( 6 | 7 |
    8 |

    Pets!

    9 |
      10 | {props.pets.map(pet => ( 11 |
    • {pet.name}
      • 12 | ))} 13 |
    14 |
    15 |     16 | ); 17 | } 18 | 19 | Pets.getInitialProps = async function() { 20 | const res = await fetch( 21 | `http://pet-library.moonhighway.com/api/pets` 22 | ); 23 | const data = await res.json(); 24 | return { 25 | pets: data 26 | }; 27 | }; 28 | -------------------------------------------------------------------------------- /chapter-12/pets-next/pages/index.js: -------------------------------------------------------------------------------- 1 | import Layout from "./Layout"; 2 | 3 | export default function Index() { 4 | return ( 5 | 6 |
    7 |

    Hello everyone!

    8 |
    9 |     10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /chapter-12/readme.md: -------------------------------------------------------------------------------- 1 | # Chapter 12 : React & the Server 2 | 3 | In this chapter, we'll talk about React with Server Side Rendering, and the various tools in the ecosystem like Gatsby and Next.js. 4 | 5 | ## Client & Server Domains 6 | 7 | - Client Fetching ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-12/client-fetching)) 8 | - Node Fetching ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-12/node-fetching)): Run `node index` in the `node-fetching` folder. 9 | 10 | ## Server Rendered Recipes App 11 | 12 | - Recipes ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-12/node-fetching)) 13 | - Recipes with Next.js ([view the code](https://github.com/MoonHighway/learning-react/blob/master/chapter-12/node-fetching)) 14 | -------------------------------------------------------------------------------- /chapter-12/recipes/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "react-app"] 3 | } 4 | -------------------------------------------------------------------------------- /chapter-12/recipes/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /chapter-12/recipes/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /chapter-12/recipes/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-12/recipes/README.md -------------------------------------------------------------------------------- /chapter-12/recipes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-12/recipes/public/favicon.ico -------------------------------------------------------------------------------- /chapter-12/recipes/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-12/recipes/public/logo192.png -------------------------------------------------------------------------------- /chapter-12/recipes/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/chapter-12/recipes/public/logo512.png -------------------------------------------------------------------------------- /chapter-12/recipes/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /chapter-12/recipes/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /chapter-12/recipes/server/index.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import fs from "fs"; 3 | import React from "react"; 4 | import express from "express"; 5 | import ReactDOMServer from "react-dom/server"; 6 | 7 | import { Menu } from "../src/Menu.js"; 8 | 9 | const PORT = process.env.PORT || 4000; 10 | const app = express(); 11 | 12 | app.use(express.static("./build")); 13 | 14 | app.get("/*", (req, res) => { 15 | const app = ReactDOMServer.renderToString( 16 | 17 | ); 18 | 19 | const indexFile = path.resolve( 20 | "./build/index.html" 21 | ); 22 | 23 | fs.readFile(indexFile, "utf8", (err, data) => { 24 | return res.send( 25 | data.replace( 26 | '
    ', 27 | `
    ${app}
    ` 28 | ) 29 | ); 30 | }); 31 | }); 32 | 33 | app.listen(PORT, () => 34 | console.log( 35 | `Server is listening on port ${PORT}` 36 | ) 37 | ); 38 | -------------------------------------------------------------------------------- /chapter-12/recipes/src/Menu.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Recipe({ name, ingredients, steps }) { 4 | return ( 5 |
    8 |

    {name}

    9 |
      10 | {ingredients.map((ingredient, i) => ( 11 |
    • {ingredient.name}
      • 12 | ))} 13 |
    14 |
    15 |

    Cooking Instructions

    16 | {steps.map((step, i) => ( 17 |

    {step}

    18 | ))} 19 |
    20 |
    21 | ); 22 | } 23 | 24 | export function Menu({ title, recipes }) { 25 | return ( 26 |
    27 |
    28 |

    {title}

    29 |
    30 |
    31 | {recipes.map((recipe, i) => ( 32 | 33 | ))} 34 |
    35 |
    36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /chapter-12/recipes/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /chapter-12/recipes/webpack.server.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const nodeExternals = require("webpack-node-externals"); 3 | 4 | module.exports = { 5 | entry: "./server/index.js", 6 | 7 | target: "node", 8 | 9 | externals: [nodeExternals()], 10 | 11 | output: { 12 | path: path.resolve("build-server"), 13 | filename: "index.js" 14 | }, 15 | 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.js$/, 20 | use: "babel-loader" 21 | } 22 | ] 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /learning-react-v1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/learning-react-v1.jpg -------------------------------------------------------------------------------- /learning-react.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/super-devninja/learning-react/8dc166375e0bcc5ffb5df8e282021af96156043d/learning-react.jpg --------------------------------------------------------------------------------