├── Chapter 2-Code └── Lesson 2-Code │ ├── Code02.txt │ ├── activity-b.html │ ├── my-cart-01 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Cart.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-cart-02 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── items.json │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Cart.js │ │ ├── CartItemList.css │ │ ├── CartItemList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-cart-03 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── items.json │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Cart.js │ │ ├── CartItem.js │ │ ├── CartItemList.css │ │ ├── CartItemList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-cart-04 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── items.json │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Cart.js │ │ ├── CartItem.js │ │ ├── CartItemList.css │ │ ├── CartItemList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-shop-01 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Catalog.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-shop-02 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-shop-03 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-shop-4 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── Product.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ └── my-shop-5 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ └── products.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Catalog.css │ ├── Catalog.js │ ├── Product.js │ ├── ProductList.css │ ├── ProductList.js │ ├── index.css │ ├── index.js │ └── registerServiceWorker.js ├── Chapter 3-Code └── Lesson 3-Code │ ├── my-cart-01 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Cart.js │ │ ├── CartItem.js │ │ ├── CartItemList.css │ │ ├── CartItemList.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── Product.css │ │ ├── Product.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-cart-02 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── items.json │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Cart.js │ │ ├── CartItem.js │ │ ├── CartItemList.css │ │ ├── CartItemList.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── Product.css │ │ ├── Product.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-cart-03 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── items.json │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Cart.js │ │ ├── CartItem.js │ │ ├── CartItemList.css │ │ ├── CartItemList.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── Product.css │ │ ├── Product.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-cart-04 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── items.json │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Cart.js │ │ ├── CartItem.js │ │ ├── CartItemList.css │ │ ├── CartItemList.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── Product.css │ │ ├── Product.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── ShippingMethod.js │ │ ├── ShippingMethods.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-shop-01 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── Product.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-shop-02 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── Product.css │ │ ├── Product.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-shop-03 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── Product.css │ │ ├── Product.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ ├── my-shop-04 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── products.json │ └── src │ │ ├── About.js │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Catalog.css │ │ ├── Catalog.js │ │ ├── Product.css │ │ ├── Product.js │ │ ├── ProductList.css │ │ ├── ProductList.js │ │ ├── index.css │ │ ├── index.js │ │ └── registerServiceWorker.js │ └── my-shop-05 │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ └── products.json │ └── src │ ├── About.js │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Catalog.css │ ├── Catalog.js │ ├── Product.css │ ├── Product.js │ ├── ProductList.css │ ├── ProductList.js │ ├── WineMaker.js │ ├── WineMakers.js │ ├── index.css │ ├── index.js │ └── registerServiceWorker.js ├── LICENSE └── README.md /Chapter 2-Code/Lesson 2-Code/Code02.txt: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | 6 |
7 | 8 |
9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/activity-b.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
7 |
8 | 9 |
10 |
-------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-cart", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.2.0", 7 | "react-dom": "^16.2.0", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 2-Code/Lesson 2-Code/my-cart-01/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Cart from './Cart'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

The Cart App

11 |
12 | 13 |
14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/src/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Cart extends React.Component { 4 | render() { 5 | return

Cart

; 6 | } 7 | } 8 | 9 | export default Cart; 10 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-01/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-cart", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.2.0", 7 | "react-dom": "^16.2.0", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 2-Code/Lesson 2-Code/my-cart-02/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/public/items.json: -------------------------------------------------------------------------------- 1 | [ {"code":"P01", "name": "Traditional Merlot", "image": "", "price": 6.5}, 2 | {"code":"P02", "name": "Classic Chianti", "image": "", "price": 7.5} 3 | ] -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Cart from './Cart'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

The Cart App

11 |
12 | 13 |
14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/src/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CartItemList from './CartItemList'; 3 | 4 | class Cart extends React.Component { 5 | render() { 6 | return

Cart

; 7 | } 8 | } 9 | 10 | export default Cart; 11 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/src/CartItemList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/src/CartItemList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CartItemList.css'; 3 | 4 | class CartItemList extends React.Component { 5 | render() { 6 | return
    7 |
  • 8 |

    Traditional Merlot

    9 |
    • 10 |
  • 11 |

    Classic Chianti

    12 |
    • 13 |
; 14 | } 15 | } 16 | 17 | export default CartItemList; -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-02/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-cart", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.2.0", 7 | "react-dom": "^16.2.0", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 2-Code/Lesson 2-Code/my-cart-03/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/public/items.json: -------------------------------------------------------------------------------- 1 | [ {"code":"P01", "name": "Traditional Merlot", "image": "", "price": 6.5}, 2 | {"code":"P02", "name": "Classic Chianti", "image": "", "price": 7.5} 3 | ] -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Cart from './Cart'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 |

The Cart App

11 |
12 | 13 |
14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/src/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CartItemList from './CartItemList'; 3 | 4 | class Cart extends React.Component { 5 | render() { 6 | return

Cart

; 7 | } 8 | } 9 | 10 | export default Cart; 11 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/src/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class CartItem extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |
    • ; 8 | } 9 | } 10 | 11 | export default CartItem; -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/src/CartItemList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/src/CartItemList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CartItemList.css'; 3 | import CartItem from './CartItem'; 4 | 5 | class CartItemList extends React.Component { 6 | render() { 7 | let items = [ 8 | {code:"P01", name: "Traditional Merlot", image: "", price: 6.5}, 9 | {code:"P02", name: "Classic Chianti", image: "", price: 7.5} 10 | ]; 11 | let itemsComponents = []; 12 | 13 | for (let item of items) { 14 | itemsComponents.push(); 15 | } 16 | 17 | return
      {itemsComponents}
    ; 18 | } 19 | } 20 | 21 | export default CartItemList; -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-03/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-cart", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.2.0", 7 | "react-dom": "^16.2.0", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 2-Code/Lesson 2-Code/my-cart-04/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/public/items.json: -------------------------------------------------------------------------------- 1 | [ {"code":"P01", "name": "Traditional Merlot", "image": "", "price": 6.5}, 2 | {"code":"P02", "name": "Classic Chianti", "image": "", "price": 7.5} 3 | ] -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Cart from './Cart'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Cart App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/src/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CartItemList from './CartItemList'; 3 | 4 | class Cart extends React.Component { 5 | constructor() { 6 | super(); 7 | this.state = { items: [] }; 8 | 9 | fetch("items.json") 10 | .then(response => response.json()) 11 | .then(json => {this.setState({items: json})}) 12 | .catch(error => console.log(error)); 13 | } 14 | 15 | render() { 16 | return

    Cart

    ; 17 | } 18 | } 19 | 20 | export default Cart; 21 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/src/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class CartItem extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |
    • ; 8 | } 9 | } 10 | 11 | export default CartItem; -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/src/CartItemList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/src/CartItemList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CartItemList.css'; 3 | import CartItem from './CartItem'; 4 | 5 | class CartItemList extends React.Component { 6 | render() { 7 | let items = []; 8 | 9 | for (let item of this.props.items) { 10 | items.push(); 11 | } 12 | 13 | return
      {items}
    ; 14 | } 15 | } 16 | 17 | export default CartItemList; -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-cart-04/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 2-Code/Lesson 2-Code/my-shop-01/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 50px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Catalog App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Catalog extends React.Component { 4 | render() { 5 | return

    Catalog

    ; 6 | } 7 | } 8 | 9 | export default Catalog; 10 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-01/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 2-Code/Lesson 2-Code/my-shop-02/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 50px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Catalog App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | 4 | class Catalog extends React.Component { 5 | render() { 6 | return

    Catalog

    ; 7 | } 8 | } 9 | 10 | export default Catalog; 11 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-02/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 2-Code/Lesson 2-Code/my-shop-03/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile."}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish"}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle"}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity"} 6 | ] -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 50px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Catalog App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | 5 | class Catalog extends React.Component { 6 | render() { 7 | return

    Catalog

    ; 8 | } 9 | } 10 | 11 | export default Catalog; 12 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | 4 | class ProductList extends React.Component { 5 | render() { 6 | return
      7 |
    • 8 |

      Traditional Merlot

      9 |

      A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.

      10 |
      • 11 |
    • 12 |

      Classic Chianti

      13 |

      A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish

      14 |
      • 15 |
    • 16 |

      Chardonnay

      17 |

      A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle

      18 |
      • 19 |
    • 20 |

      Brunello di Montalcino

      21 |

      A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity

      22 |
      • 23 |
    ; 24 | } 25 | } 26 | 27 | export default ProductList; 28 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-03/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 2-Code/Lesson 2-Code/my-shop-4/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile."}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish"}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle"}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity"} 6 | ] -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 50px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Catalog App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | 5 | class Catalog extends React.Component { 6 | render() { 7 | return

    Wine Catalog

    ; 8 | } 9 | } 10 | 11 | export default Catalog; 12 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Product extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |

    {this.props.item.description}

    8 |
    • ; 9 | } 10 | } 11 | 12 | export default Product; 13 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = [ 8 | {code:"P01", name: "Traditional Merlot", description: "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile."}, 9 | {code:"P02", name: "Classic Chianti", description: "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish"}, 10 | {code:"P03", name: "Chardonnay", description: "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle"}, 11 | {code:"P04", name: "Brunello di Montalcino", description: "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity"} 12 | ]; 13 | let productComponents = []; 14 | 15 | for (let product of products) { 16 | productComponents.push(); 17 | } 18 | 19 | return
      {productComponents}
    ; 20 | } 21 | } 22 | 23 | export default ProductList; 24 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-4/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 2-Code/Lesson 2-Code/my-shop-5/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile."}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish"}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle"}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity"} 6 | ] -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 50px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Catalog App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | 5 | class Catalog extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { products: [] }; 9 | 10 | fetch("products.json") 11 | .then(response => response.json()) 12 | .then(json => {this.setState({products: json})}) 13 | .catch(error => console.log(error)); 14 | } 15 | 16 | render() { 17 | return

    Wine Catalog

    ; 18 | } 19 | } 20 | 21 | export default Catalog; 22 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Product extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |

    {this.props.item.description}

    8 |
    • ; 9 | } 10 | } 11 | 12 | export default Product; 13 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 2-Code/Lesson 2-Code/my-shop-5/src/registerServiceWorker.js: -------------------------------------------------------------------------------- 1 | // In production, we register a service worker to serve assets from local cache. 2 | 3 | // This lets the app load faster on subsequent visits in production, and gives 4 | // it offline capabilities. However, it also means that developers (and users) 5 | // will only see deployed updates on the "N+1" visit to a page, since previously 6 | // cached resources are updated in the background. 7 | 8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. 9 | // This link also includes instructions on opting out of this behavior. 10 | 11 | const isLocalhost = Boolean( 12 | window.location.hostname === 'localhost' || 13 | // [::1] is the IPv6 localhost address. 14 | window.location.hostname === '[::1]' || 15 | // 127.0.0.1/8 is considered localhost for IPv4. 16 | window.location.hostname.match( 17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 18 | ) 19 | ); 20 | 21 | export default function register() { 22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 23 | // The URL constructor is available in all browsers that support SW. 24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location); 25 | if (publicUrl.origin !== window.location.origin) { 26 | // Our service worker won't work if PUBLIC_URL is on a different origin 27 | // from what our page is served on. This might happen if a CDN is used to 28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 29 | return; 30 | } 31 | 32 | window.addEventListener('load', () => { 33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 34 | 35 | if (isLocalhost) { 36 | // This is running on localhost. Lets check if a service worker still exists or not. 37 | checkValidServiceWorker(swUrl); 38 | } else { 39 | // Is not local host. Just register service worker 40 | registerValidSW(swUrl); 41 | } 42 | }); 43 | } 44 | } 45 | 46 | function registerValidSW(swUrl) { 47 | navigator.serviceWorker 48 | .register(swUrl) 49 | .then(registration => { 50 | registration.onupdatefound = () => { 51 | const installingWorker = registration.installing; 52 | installingWorker.onstatechange = () => { 53 | if (installingWorker.state === 'installed') { 54 | if (navigator.serviceWorker.controller) { 55 | // At this point, the old content will have been purged and 56 | // the fresh content will have been added to the cache. 57 | // It's the perfect time to display a "New content is 58 | // available; please refresh." message in your web app. 59 | console.log('New content is available; please refresh.'); 60 | } else { 61 | // At this point, everything has been precached. 62 | // It's the perfect time to display a 63 | // "Content is cached for offline use." message. 64 | console.log('Content is cached for offline use.'); 65 | } 66 | } 67 | }; 68 | }; 69 | }) 70 | .catch(error => { 71 | console.error('Error during service worker registration:', error); 72 | }); 73 | } 74 | 75 | function checkValidServiceWorker(swUrl) { 76 | // Check if the service worker can be found. If it can't reload the page. 77 | fetch(swUrl) 78 | .then(response => { 79 | // Ensure service worker exists, and that we really are getting a JS file. 80 | if ( 81 | response.status === 404 || 82 | response.headers.get('content-type').indexOf('javascript') === -1 83 | ) { 84 | // No service worker found. Probably a different app. Reload the page. 85 | navigator.serviceWorker.ready.then(registration => { 86 | registration.unregister().then(() => { 87 | window.location.reload(); 88 | }); 89 | }); 90 | } else { 91 | // Service worker found. Proceed as normal. 92 | registerValidSW(swUrl); 93 | } 94 | }) 95 | .catch(() => { 96 | console.log( 97 | 'No internet connection found. App is running in offline mode.' 98 | ); 99 | }); 100 | } 101 | 102 | export function unregister() { 103 | if ('serviceWorker' in navigator) { 104 | navigator.serviceWorker.ready.then(registration => { 105 | registration.unregister(); 106 | }); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-cart", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.2.0", 7 | "react-dom": "^16.2.0", 8 | "react-router-dom": "^4.2.2", 9 | "react-scripts": "1.0.17" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 3-Code/Lesson 3-Code/my-cart-01/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.", "price": 4.5, "selected": false}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish", "price": 5.3, "selected": false}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle", "price": 4.0, "selected": false}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity", "price": 7.5, "selected": false} 6 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Cart App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CartItemList from './CartItemList'; 3 | 4 | class Cart extends React.Component { 5 | render() { 6 | return

    Cart

    ; 7 | } 8 | } 9 | 10 | export default Cart; 11 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class CartItem extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |
    • ; 8 | } 9 | } 10 | 11 | export default CartItem; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/CartItemList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } 5 | 6 | .cart-item { 7 | text-align: right; 8 | padding-right: 30px; 9 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/CartItemList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CartItemList.css'; 3 | import CartItem from './CartItem'; 4 | 5 | class CartItemList extends React.Component { 6 | render() { 7 | let items = []; 8 | 9 | for (let item of this.props.items) { 10 | items.push(); 11 | } 12 | 13 | return
      {items}
    ; 14 | } 15 | } 16 | 17 | export default CartItemList; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} 2 | 3 | .catalog { 4 | width: 70%; 5 | float: left; 6 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | import Cart from './Cart'; 5 | 6 | class Catalog extends React.Component { 7 | constructor() { 8 | super(); 9 | this.state = { products: [], cartItems: [] }; 10 | 11 | fetch("products.json") 12 | .then(response => response.json()) 13 | .then(json => {this.setState({products: json})}) 14 | .catch(error => console.log(error)); 15 | } 16 | 17 | render() { 18 | return
    19 |
    20 |

    Wine Catalog

    21 | 22 |
    23 | 24 |
    ; 25 | } 26 | } 27 | 28 | export default Catalog; 29 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/Product.css: -------------------------------------------------------------------------------- 1 | .selected {background-color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Product extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |

    {this.props.item.description}

    8 | 9 |
    10 |
    • ; 11 | } 12 | } 13 | 14 | export default Product; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-01/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-cart", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.2.0", 7 | "react-dom": "^16.2.0", 8 | "react-router-dom": "^4.2.2", 9 | "react-scripts": "1.0.17" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 3-Code/Lesson 3-Code/my-cart-02/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/public/items.json: -------------------------------------------------------------------------------- 1 | [ {"code":"P01", "name": "Traditional Merlot", "image": "", "price": 6.5}, 2 | {"code":"P02", "name": "Classic Chianti", "image": "", "price": 7.5} 3 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.", "price": 4.5, "selected": false}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish", "price": 5.3, "selected": false}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle", "price": 4.0, "selected": false}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity", "price": 7.5, "selected": false} 6 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Cart App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CartItemList from './CartItemList'; 3 | 4 | class Cart extends React.Component { 5 | render() { 6 | return

    Cart

    ; 7 | } 8 | } 9 | 10 | export default Cart; 11 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class CartItem extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |
    • ; 8 | } 9 | } 10 | 11 | export default CartItem; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/CartItemList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } 5 | 6 | .cart-item { 7 | text-align: right; 8 | padding-right: 30px; 9 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/CartItemList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CartItemList.css'; 3 | import CartItem from './CartItem'; 4 | 5 | class CartItemList extends React.Component { 6 | render() { 7 | let items = []; 8 | 9 | for (let item of this.props.items) { 10 | items.push(); 11 | } 12 | 13 | return
      {items}
    ; 14 | } 15 | } 16 | 17 | export default CartItemList; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} 2 | 3 | .catalog { 4 | width: 70%; 5 | float: left; 6 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | import Cart from './Cart'; 5 | 6 | class Catalog extends React.Component { 7 | constructor() { 8 | super(); 9 | this.state = { products: [], cartItems: [] }; 10 | this.addToCart = this.addToCart.bind(this); 11 | 12 | fetch("products.json") 13 | .then(response => response.json()) 14 | .then(json => {this.setState({products: json})}) 15 | .catch(error => console.log(error)); 16 | } 17 | 18 | addToCart(item) { 19 | this.setState({cartItems: [...this.state.cartItems, item]}); 20 | } 21 | 22 | render() { 23 | return
    24 |
    25 |

    Wine Catalog

    26 | 27 |
    28 | 29 |
    ; 30 | } 31 | } 32 | 33 | export default Catalog; 34 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/Product.css: -------------------------------------------------------------------------------- 1 | .selected {background-color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Product extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |

    {this.props.item.description}

    8 | 9 |
    10 |
    • ; 11 | } 12 | } 13 | 14 | export default Product; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-02/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-cart", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.2.0", 7 | "react-dom": "^16.2.0", 8 | "react-router-dom": "^4.2.2", 9 | "react-scripts": "1.0.17" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 3-Code/Lesson 3-Code/my-cart-03/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/public/items.json: -------------------------------------------------------------------------------- 1 | [ {"code":"P01", "name": "Traditional Merlot", "image": "", "price": 6.5}, 2 | {"code":"P02", "name": "Classic Chianti", "image": "", "price": 7.5} 3 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.", "price": 4.5, "selected": false}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish", "price": 5.3, "selected": false}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle", "price": 4.0, "selected": false}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity", "price": 7.5, "selected": false} 6 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Cart App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CartItemList from './CartItemList'; 3 | 4 | class Cart extends React.Component { 5 | constructor() { 6 | super(); 7 | this.state = { cartItems: [] }; 8 | } 9 | 10 | render() { 11 | return

    Cart

    ; 12 | } 13 | 14 | componentWillReceiveProps(nextProps) { 15 | let newCartItemList = []; 16 | 17 | for (let item of nextProps.items) { 18 | let foundItem = newCartItemList.find(x => x.code === item.code); 19 | if (foundItem) { 20 | foundItem.quantity = foundItem.quantity + 1; 21 | } else { 22 | item.quantity = 1; 23 | newCartItemList.push(item); 24 | } 25 | 26 | this.setState({ cartItems: [...newCartItemList] }); 27 | } 28 | } 29 | } 30 | 31 | export default Cart; 32 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class CartItem extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name} ({this.props.item.quantity})

    7 |
    • ; 8 | } 9 | } 10 | 11 | export default CartItem; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/CartItemList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } 5 | 6 | .cart-item { 7 | text-align: right; 8 | padding-right: 30px; 9 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/CartItemList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CartItemList.css'; 3 | import CartItem from './CartItem'; 4 | 5 | class CartItemList extends React.Component { 6 | render() { 7 | let items = []; 8 | 9 | for (let item of this.props.items) { 10 | items.push(); 11 | } 12 | 13 | return
      {items}
    ; 14 | } 15 | } 16 | 17 | export default CartItemList; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} 2 | 3 | .catalog { 4 | width: 70%; 5 | float: left; 6 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | import Cart from './Cart'; 5 | 6 | class Catalog extends React.Component { 7 | constructor() { 8 | super(); 9 | this.state = { products: [], cartItems: [] }; 10 | this.addToCart = this.addToCart.bind(this); 11 | 12 | fetch("products.json") 13 | .then(response => response.json()) 14 | .then(json => {this.setState({products: json})}) 15 | .catch(error => console.log(error)); 16 | } 17 | 18 | addToCart(item) { 19 | this.setState({cartItems: [...this.state.cartItems, item]}); 20 | } 21 | 22 | render() { 23 | return
    24 |
    25 |

    Wine Catalog

    26 | 27 |
    28 | 29 |
    ; 30 | } 31 | } 32 | 33 | export default Catalog; 34 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/Product.css: -------------------------------------------------------------------------------- 1 | .selected {background-color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Product extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |

    {this.props.item.description}

    8 | 9 |
    10 |
    • ; 11 | } 12 | } 13 | 14 | export default Product; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-03/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-cart", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.2.0", 7 | "react-dom": "^16.2.0", 8 | "react-router-dom": "^4.2.2", 9 | "react-scripts": "1.0.17" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 3-Code/Lesson 3-Code/my-cart-04/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/public/items.json: -------------------------------------------------------------------------------- 1 | [ {"code":"P01", "name": "Traditional Merlot", "image": "", "price": 6.5}, 2 | {"code":"P02", "name": "Classic Chianti", "image": "", "price": 7.5} 3 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.", "price": 4.5, "selected": false}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish", "price": 5.3, "selected": false}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle", "price": 4.0, "selected": false}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity", "price": 7.5, "selected": false} 6 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 70px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | 30 | nav li { 31 | display: inline-block; 32 | padding: 5px; 33 | } 34 | 35 | nav li a { 36 | color: white; 37 | } 38 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | import ShippingMethods from './ShippingMethods'; 5 | import { Switch, Route, Link } from 'react-router-dom'; 6 | 7 | class App extends Component { 8 | render() { 9 | return ( 10 |
    11 |
    12 |

    The Cart App

    13 | 19 |
    20 | 21 | 22 | 23 | 24 |
    25 | ); 26 | } 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/Cart.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CartItemList from './CartItemList'; 3 | 4 | class Cart extends React.Component { 5 | constructor() { 6 | super(); 7 | this.state = { cartItems: [] }; 8 | } 9 | 10 | render() { 11 | return

    Cart

    ; 12 | } 13 | 14 | componentWillReceiveProps(nextProps) { 15 | let newCartItemList = []; 16 | 17 | for (let item of nextProps.items) { 18 | let foundItem = newCartItemList.find(x => x.code === item.code); 19 | if (foundItem) { 20 | foundItem.quantity = foundItem.quantity + 1; 21 | } else { 22 | item.quantity = 1; 23 | newCartItemList.push(item); 24 | } 25 | 26 | this.setState({ cartItems: [...newCartItemList] }); 27 | } 28 | } 29 | } 30 | 31 | export default Cart; 32 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class CartItem extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name} ({this.props.item.quantity})

    7 |
    • ; 8 | } 9 | } 10 | 11 | export default CartItem; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/CartItemList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } 5 | 6 | .cart-item { 7 | text-align: right; 8 | padding-right: 30px; 9 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/CartItemList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './CartItemList.css'; 3 | import CartItem from './CartItem'; 4 | 5 | class CartItemList extends React.Component { 6 | render() { 7 | let items = []; 8 | 9 | for (let item of this.props.items) { 10 | items.push(); 11 | } 12 | 13 | return
      {items}
    ; 14 | } 15 | } 16 | 17 | export default CartItemList; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} 2 | 3 | .catalog { 4 | width: 70%; 5 | float: left; 6 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | import Cart from './Cart'; 5 | 6 | class Catalog extends React.Component { 7 | constructor() { 8 | super(); 9 | this.state = { products: [], cartItems: [] }; 10 | this.addToCart = this.addToCart.bind(this); 11 | 12 | fetch("products.json") 13 | .then(response => response.json()) 14 | .then(json => {this.setState({products: json})}) 15 | .catch(error => console.log(error)); 16 | } 17 | 18 | addToCart(item) { 19 | this.setState({cartItems: [...this.state.cartItems, item]}); 20 | } 21 | 22 | render() { 23 | return
    24 |
    25 |

    Wine Catalog

    26 | 27 |
    28 | 29 |
    ; 30 | } 31 | } 32 | 33 | export default Catalog; 34 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/Product.css: -------------------------------------------------------------------------------- 1 | .selected {background-color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Product extends React.Component { 4 | render() { 5 | return
  • 6 |

    {this.props.item.name}

    7 |

    {this.props.item.description}

    8 | 9 |
    10 |
    • ; 11 | } 12 | } 13 | 14 | export default Product; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/ShippingMethod.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class ShippingMethod extends React.Component { 4 | constructor() { 5 | super(); 6 | this.shippingMethods = [ 7 | {code: "ECO", name: "Economic delivery", description:"You will receive the goods in 5-6 days", price: 3.00}, 8 | {code: "STD", name: "Standard delivery", description:"You will receive the goods in 3-4 days", price: 5.00}, 9 | {code: "EXP", name: "Express delivery", description:"You will receive the goods in 1 day", price: 8.00} 10 | ]; 11 | } 12 | 13 | 14 | render() { 15 | let shippingMethod = this.shippingMethods.find(sm => sm.code === this.props.match.params.code); 16 | return
    17 |

    {shippingMethod.name}

    18 |

    {shippingMethod.description}

    19 |

    Price: {shippingMethod.price}

    20 |
    ; 21 | } 22 | } 23 | 24 | export default ShippingMethod; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/ShippingMethods.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ShippingMethod from './ShippingMethod'; 3 | import { Switch, Route, Link } from 'react-router-dom'; 4 | 5 | class ShippingMethods extends React.Component { 6 | renderShippingMethodList() { 7 | return
      8 |
    • Economic delivery
      • 9 |
    • Standard delivery
      • 10 |
    • Express delivery
      • 11 |
    ; 12 | } 13 | 14 | render() { 15 | return 16 | 17 | 18 | ; 19 | } 20 | } 21 | 22 | export default ShippingMethods; 23 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-cart-04/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 registerServiceWorker from './registerServiceWorker'; 6 | import { BrowserRouter } from 'react-router-dom' 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | , document.getElementById('root')); 13 | registerServiceWorker(); 14 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 3-Code/Lesson 3-Code/my-shop-01/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.", "price": 4.5}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish", "price": 5.3}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle", "price": 4.0}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity", "price": 7.5} 6 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 50px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Catalog App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | 5 | class Catalog extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { products: [] }; 9 | 10 | fetch("products.json") 11 | .then(response => response.json()) 12 | .then(json => {this.setState({products: json})}) 13 | .catch(error => console.log(error)); 14 | } 15 | 16 | render() { 17 | return

    Wine Catalog

    ; 18 | } 19 | } 20 | 21 | export default Catalog; 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Product extends React.Component { 4 | showPrice() { 5 | alert(this.props.item.price); 6 | } 7 | 8 | render() { 9 | return
  • this.showPrice()}> 10 |

    {this.props.item.name}

    11 |

    {this.props.item.description}

    12 |
    • ; 13 | } 14 | } 15 | 16 | export default Product; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-01/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 3-Code/Lesson 3-Code/my-shop-02/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.", "price": 4.5, "selected": false}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish", "price": 5.3, "selected": false}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle", "price": 4.0, "selected": false}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity", "price": 7.5, "selected": false} 6 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 50px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Catalog App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | 5 | class Catalog extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { products: [] }; 9 | 10 | fetch("products.json") 11 | .then(response => response.json()) 12 | .then(json => {this.setState({products: json})}) 13 | .catch(error => console.log(error)); 14 | } 15 | 16 | render() { 17 | return

    Wine Catalog

    ; 18 | } 19 | } 20 | 21 | export default Catalog; 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/Product.css: -------------------------------------------------------------------------------- 1 | .selected {background-color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Product.css' 3 | 4 | class Product extends React.Component { 5 | select() { 6 | this.props.item.selected = !this.props.item.selected; 7 | } 8 | 9 | render() { 10 | let classToApply = this.props.item.selected? "selected": ""; 11 | 12 | return
  • this.select()} className={classToApply}> 13 |

    {this.props.item.name}

    14 |

    {this.props.item.description}

    15 |
    • ; 16 | } 17 | } 18 | 19 | export default Product; 20 | 21 | //Not working as expected 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-02/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 3-Code/Lesson 3-Code/my-shop-03/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.", "price": 4.5, "selected": false}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish", "price": 5.3, "selected": false}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle", "price": 4.0, "selected": false}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity", "price": 7.5, "selected": false} 6 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 50px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    10 |

    The Catalog App

    11 |
    12 | 13 |
    14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | 5 | class Catalog extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { products: [] }; 9 | 10 | fetch("products.json") 11 | .then(response => response.json()) 12 | .then(json => {this.setState({products: json})}) 13 | .catch(error => console.log(error)); 14 | } 15 | 16 | select(productCode) { 17 | let productList = this.state.products.map(function(p) { 18 | if (p.code === productCode) { 19 | p.selected = (!p.selected); 20 | } 21 | return p; 22 | }); 23 | this.setState({products: productList}); 24 | } 25 | 26 | render() { 27 | return

    Wine Catalog

    ; 28 | } 29 | } 30 | 31 | export default Catalog; 32 | 33 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/Product.css: -------------------------------------------------------------------------------- 1 | .selected {background-color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Product.css' 3 | 4 | class Product extends React.Component { 5 | render() { 6 | let classToApply = this.props.item.selected? "selected": ""; 7 | 8 | return
  • this.props.selectHandler(this.props.item.code)} className={classToApply}> 9 |

    {this.props.item.name}

    10 |

    {this.props.item.description}

    11 |
    • ; 12 | } 13 | } 14 | 15 | export default Product; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-03/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 registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 3-Code/Lesson 3-Code/my-shop-04/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.", "price": 4.5, "selected": false}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish", "price": 5.3, "selected": false}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle", "price": 4.0, "selected": false}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity", "price": 7.5, "selected": false} 6 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/About.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class About extends Component { 4 | render() { 5 | return ( 6 |
    7 |

    This is a simple e-commerce application

    8 |
    9 | ); 10 | } 11 | } 12 | 13 | export default About; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 70px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | 30 | nav li { 31 | display: inline-block; 32 | padding: 5px; 33 | } 34 | 35 | nav li a { 36 | color: white; 37 | } 38 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | import About from './About'; 5 | import { Switch, Route, Link } from 'react-router-dom' 6 | 7 | class App extends Component { 8 | render() { 9 | return ( 10 |
    11 |
    12 |

    The Catalog App

    13 | 19 |
    20 | 21 | 22 | 23 | 24 |
    25 | ); 26 | } 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | 5 | class Catalog extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { products: [] }; 9 | 10 | fetch("products.json") 11 | .then(response => response.json()) 12 | .then(json => {this.setState({products: json})}) 13 | .catch(error => console.log(error)); 14 | } 15 | 16 | select(productCode) { 17 | let productList = this.state.products.map(function(p) { 18 | if (p.code === productCode) { 19 | p.selected = (!p.selected); 20 | } 21 | return p; 22 | }); 23 | this.setState({products: productList}); 24 | } 25 | 26 | render() { 27 | return

    Wine Catalog

    ; 28 | } 29 | } 30 | 31 | export default Catalog; 32 | 33 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/Product.css: -------------------------------------------------------------------------------- 1 | .selected {background-color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Product.css' 3 | 4 | class Product extends React.Component { 5 | render() { 6 | let classToApply = this.props.item.selected? "selected": ""; 7 | 8 | return
  • this.props.selectHandler(this.props.item.code)} className={classToApply}> 9 |

    {this.props.item.name}

    10 |

    {this.props.item.description}

    11 |
    • ; 12 | } 13 | } 14 | 15 | export default Product; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-04/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 registerServiceWorker from './registerServiceWorker'; 6 | import { BrowserRouter } from 'react-router-dom' 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | , document.getElementById('root')); 13 | registerServiceWorker(); 14 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.1.1", 7 | "react-dom": "^16.1.1", 8 | "react-scripts": "1.0.17" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TrainingByPackt/Beginning-React/c319d19323e2a4021e906f06d0ef94605ce9c4ce/Chapter 3-Code/Lesson 3-Code/my-shop-05/public/favicon.ico -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |
    29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/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 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | {"code":"P01", "name": "Traditional Merlot", "description": "A bottle of middle weight wine, lower in tannins (smoother), with a more red-fruited flavor profile.", "price": 4.5, "selected": false}, 3 | {"code":"P02", "name": "Classic Chianti", "description": "A medium-bodied wine characterized by a marvelous freshness with a lingering, fruity finish", "price": 5.3, "selected": false}, 4 | {"code":"P03", "name": "Chardonnay", "description": "A dry full-bodied white wine with spicy, bourbon-y notes in an elegant bottle", "price": 4.0, "selected": false}, 5 | {"code":"P04", "name": "Brunello di Montalcino", "description": "A bottle of red wine with exceptionally bold fruit flavors, high tannin, and high acidity", "price": 7.5, "selected": false} 6 | ] -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/About.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class About extends Component { 4 | render() { 5 | return ( 6 |
    7 |

    This is a simple e-commerce application

    8 |
    9 | ); 10 | } 11 | } 12 | 13 | export default About; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 70px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | 30 | nav li { 31 | display: inline-block; 32 | padding: 5px; 33 | } 34 | 35 | nav li a { 36 | color: white; 37 | } 38 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import Catalog from './Catalog'; 4 | import About from './About'; 5 | import WineMakers from './WineMakers'; 6 | import { Switch, Route, Link } from 'react-router-dom'; 7 | 8 | class App extends Component { 9 | render() { 10 | return ( 11 |
    12 |
    13 |

    The Catalog App

    14 | 21 |
    22 | 23 | 24 | 25 | 26 | 27 |
    28 | ); 29 | } 30 | } 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/Catalog.css: -------------------------------------------------------------------------------- 1 | h2 { color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/Catalog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Catalog.css'; 3 | import ProductList from './ProductList'; 4 | 5 | class Catalog extends React.Component { 6 | constructor() { 7 | super(); 8 | this.state = { products: [] }; 9 | 10 | fetch("products.json") 11 | .then(response => response.json()) 12 | .then(json => {this.setState({products: json})}) 13 | .catch(error => console.log(error)); 14 | } 15 | 16 | select(productCode) { 17 | let productList = this.state.products.map(function(p) { 18 | if (p.code === productCode) { 19 | p.selected = (!p.selected); 20 | } 21 | return p; 22 | }); 23 | this.setState({products: productList}); 24 | } 25 | 26 | render() { 27 | return

    Wine Catalog

    ; 28 | } 29 | } 30 | 31 | export default Catalog; 32 | 33 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/Product.css: -------------------------------------------------------------------------------- 1 | .selected {background-color: red} -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/Product.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Product.css' 3 | 4 | class Product extends React.Component { 5 | render() { 6 | let classToApply = this.props.item.selected? "selected": ""; 7 | 8 | return
  • this.props.selectHandler(this.props.item.code)} className={classToApply}> 9 |

    {this.props.item.name}

    10 |

    {this.props.item.description}

    11 |
    • ; 12 | } 13 | } 14 | 15 | export default Product; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/ProductList.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | text-align: left; 4 | } -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './ProductList.css'; 3 | import Product from './Product'; 4 | 5 | class ProductList extends React.Component { 6 | render() { 7 | let products = []; 8 | 9 | for (let product of this.props.items) { 10 | products.push(); 11 | } 12 | 13 | return
      {products}
    ; 14 | } 15 | } 16 | 17 | export default ProductList; 18 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/WineMaker.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class WineMaker extends React.Component { 4 | constructor() { 5 | super(); 6 | this.wineMakers = [ 7 | {code: "WM1", name: "Wine & Wine", country: "Italy", description:"Wine & Wine produces an excellent Italian wine..."}, 8 | {code: "WM2", name: "Wine & Co", country: "France", description:"Wine & Co is one of the most known producers of wine in France..."} 9 | ]; 10 | } 11 | 12 | 13 | render() { 14 | let wineMaker = this.wineMakers.find(wm => wm.code === this.props.match.params.code); 15 | return
    16 |

    {wineMaker.name}

    17 |

    {wineMaker.country}

    18 |

    {wineMaker.description}

    19 |
    ; 20 | } 21 | } 22 | 23 | export default WineMaker; -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/WineMakers.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import WineMaker from './WineMaker'; 3 | import { Switch, Route, Link } from 'react-router-dom'; 4 | 5 | class WineMakers extends React.Component { 6 | renderWineMakersList() { 7 | return
      8 |
    • Wine & Wine
      • 9 |
    • Wine & Co
      • 10 |
    ; 11 | } 12 | 13 | render() { 14 | return 15 | 16 | 17 | ; 18 | } 19 | } 20 | 21 | export default WineMakers; 22 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter 3-Code/Lesson 3-Code/my-shop-05/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 registerServiceWorker from './registerServiceWorker'; 6 | import { BrowserRouter } from 'react-router-dom' 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | , document.getElementById('root')); 13 | registerServiceWorker(); 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Training By Packt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![GitHub issues](https://img.shields.io/github/issues/TrainingByPackt/Beginning-React.svg)](https://github.com/TrainingByPackt/Beginning-React/issues) 2 | [![GitHub forks](https://img.shields.io/github/forks/TrainingByPackt/Beginning-React.svg)](https://github.com/TrainingByPackt/Beginning-React/network) 3 | [![GitHub stars](https://img.shields.io/github/stars/TrainingByPackt/Beginning-React.svg)](https://github.com/TrainingByPackt/Beginning-React/stargazers) 4 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/TrainingByPackt/Beginning-React/pulls) 5 | 6 | 7 | 8 | # Beginning React 9 | React Native is a game-changing approach to hybrid mobile development. Web developers can leverage their existing skills to write mobile applications in JavaScript that are truly native without using cross-compilation or web views. These applications have all of the advantages of those written in Objective-C or Java, combined with the rapid development cycle that JavaScript developers are accustomed to.Web developers who want to develop native mobile applications face a high barrier to entry, because they are forced to learn platform-specific languages and frameworks. Numerous hybrid technologies have tried to simplify this process, but have failed to achieve the performance and appearance that users expect.This book will show you all the advantages of true native development that React Native has without the steep learning curve, leveraging the knowledge you already have. We do this by getting you up and running quickly with a sample application. Next, we’ll introduce you to the fundamentals of creating components and explain how React Native works under the hood. Once you have established a solid foundation, you will dive headfirst into developing a real-world application from start to finish. Along the way, we will demonstrate how to create multiple screens and navigate between them,use layout and style native UI components, and access native APIs such as local storage and geolocation. Finally, we tackle the advanced topic of Native modules, which demonstrates that there are truly no limits to what you can do with React Native. 10 | 11 | 12 | ## What you will learn 13 | * Set up the React Native environment on both devices and emulators 14 | * Gain an in-depth understanding of how React Native works behind the scenes 15 | * Write your own custom native UI components 16 | * Learn the ins and outs of screen navigation 17 | * Master the art of layout and styles 18 | * Work with device-exclusive data such as geolocation 19 | * Develop native modules in Objective-C and Java that interact with JavaScript 20 | * Test and deploy your application for a production-ready environment 21 | 22 | 23 | ### Hardware requirements 24 | For an optimal student experience, we recommend the following hardware configuration: 25 | * **Processor**: 2.6 GHz or higher, preferably multi-core 26 | * **Memory**: 4GB RAM 27 | * **Hard disk**: 10GB or more 28 | * A projector 29 | * An Internet connection 30 | 31 | 32 | 33 | ### Software requirements 34 | You’ll also need the following software installed in advance: 35 | * Operating System: Windows (8 or higher). 36 | * Google Chrome 37 | * Node.js latest 38 | 39 | 40 | 41 | 42 | --------------------------------------------------------------------------------