├── Chapter03 ├── hooks │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Hooks │ │ │ ├── Form.js │ │ │ └── index.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js └── layouts │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ └── layout │ │ ├── Content.jsx │ │ ├── Footer.jsx │ │ └── Header.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── Chapter04 ├── geolocation │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Geolocation │ │ │ ├── Geolocation.jsx │ │ │ ├── GeolocationContainer.jsx │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js └── higher-order-components │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ └── MyComponent │ │ ├── WithInnerWidth.jsx │ │ └── index.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── Chapter05 ├── context-api │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── List │ │ │ ├── ListContext.jsx │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── data-fetching │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── List │ │ │ ├── WithData.jsx │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── data-flow │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Counter │ │ │ ├── Buttons.jsx │ │ │ ├── Display.jsx │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js └── react-refetch │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ └── List │ │ ├── Gist.jsx │ │ └── index.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── Chapter06 ├── controlled-components │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Controlled │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── css-transition-group │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Transition │ │ │ ├── Transition.css │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── event-switch │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Button │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── json-schema │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── JSONSchemaForm │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── react-motion │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Transition │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── refs-dom │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Focus │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── refs-instance │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Reset │ │ │ ├── Input.jsx │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── svg │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Circles │ │ │ ├── Circle.jsx │ │ │ └── RedCircle.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js └── uncontrolled-components │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ └── Uncontrolled │ │ └── index.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── Chapter07 ├── css-modules │ ├── .gitignore │ ├── index.css │ ├── index.js │ ├── package-lock.json │ ├── package.json │ └── webpack.config.js ├── inline-styles │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── FontSize │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── radium │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Button │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js └── styled-components │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ └── Button │ │ └── index.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── Chapter08 ├── data-fetching │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── dist │ │ ├── public │ │ │ └── bundle.js │ │ └── server.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── client.js │ │ ├── index.css │ │ ├── logo.svg │ │ ├── server.js │ │ ├── serviceWorker.js │ │ └── template.js │ └── webpack.config.js ├── next │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ └── pages │ │ └── index.js └── server-side-rendering │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── dist │ ├── public │ │ └── bundle.js │ └── server.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── client.js │ ├── index.css │ ├── logo.svg │ ├── server.js │ ├── serviceWorker.js │ └── template.js │ └── webpack.config.js ├── Chapter09 ├── constants-props │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── List │ │ │ ├── Item.js │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── creating-functions │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── List │ │ │ ├── Item.js │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── good-design │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Todos │ │ │ ├── Form.jsx │ │ │ ├── List.jsx │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js └── keys │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ └── List │ │ └── index.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── Chapter10 ├── events │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── dist │ │ ├── public │ │ │ └── bundle.js │ │ └── server.js │ ├── jest │ │ └── setupTestFramework.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── client.js │ │ ├── components │ │ │ └── ShowInformation │ │ │ │ ├── index.js │ │ │ │ └── index.test.js │ │ ├── index.css │ │ ├── logo.svg │ │ ├── server.js │ │ ├── serviceWorker.js │ │ └── template.js │ └── webpack.config.js └── testing │ ├── .babelrc │ ├── .gitignore │ ├── README.md │ ├── dist │ ├── public │ │ └── bundle.js │ └── server.js │ ├── jest │ └── setupTestFramework.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ ├── src │ ├── App.css │ ├── App.js │ ├── client.js │ ├── components │ │ └── Hello │ │ │ ├── index.js │ │ │ └── index.test.js │ ├── index.css │ ├── logo.svg │ ├── server.js │ ├── serviceWorker.js │ └── template.js │ └── webpack.config.js ├── Chapter11 ├── react-router-with-params │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── components │ │ ├── About │ │ │ └── index.jsx │ │ ├── App.css │ │ ├── App.jsx │ │ ├── Contact │ │ │ └── index.jsx │ │ ├── Contacts │ │ │ ├── Contacts.css │ │ │ └── index.jsx │ │ ├── Error404 │ │ │ └── index.jsx │ │ └── Home │ │ │ └── index.jsx │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── routes.jsx └── react-router │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── components │ ├── About │ │ └── index.jsx │ ├── App.css │ ├── App.jsx │ ├── Contact │ │ └── index.jsx │ ├── Error404 │ │ └── index.jsx │ └── Home │ │ └── index.jsx │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── routes.jsx ├── Chapter12 ├── counter │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Counter │ │ │ └── index.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js ├── keys │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── manifest.json │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── components │ │ └── Counter │ │ │ ├── List.js │ │ │ └── index.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js └── mutating │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json │ └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── components │ └── Counter │ │ ├── List.js │ │ └── index.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── serviceWorker.js ├── LICENSE └── README.md /Chapter03/hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hooks", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-scripts": "2.1.5" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Chapter03/hooks/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter03/hooks/public/favicon.ico -------------------------------------------------------------------------------- /Chapter03/hooks/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter03/hooks/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter03/hooks/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | 4 | import Hooks from './components/Hooks'; 5 | import Form from './components/Hooks/Form'; 6 | import './App.css'; 7 | 8 | class App extends Component { 9 | render() { 10 | return ( 11 | <> 12 | 13 |
14 | 15 | ); 16 | } 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /Chapter03/hooks/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter03/hooks/src/components/Hooks/Form.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | function Form() { 4 | const [data, setData] = useState({ 5 | name: '', 6 | age: 0 7 | }); 8 | 9 | return ( 10 |
11 |

12 | setData({ 16 | name: e.target.value, 17 | age: data.age 18 | })} 19 | /> 20 |

21 | 22 |

23 | setData({ 27 | age: e.target.value, 28 | name: data.name 29 | })} 30 | /> 31 |

32 | 33 |

34 | Name: {data.name}
35 | Age: {data.age} 36 |

37 |
38 | ); 39 | } 40 | 41 | export default Form; 42 | -------------------------------------------------------------------------------- /Chapter03/hooks/src/components/Hooks/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | function Counter() { 4 | // times is our new state variable and setTimes the function to update that state. 5 | const [times, setTimes] = useState(0); 6 | 7 | return ( 8 |
9 |

Times clicked: {times}

10 | 11 |
12 | ); 13 | } 14 | 15 | export default Counter; 16 | -------------------------------------------------------------------------------- /Chapter03/hooks/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter03/hooks/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter03/layouts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "layouts", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.4", 7 | "react-dom": "^16.8.4", 8 | "react-scripts": "2.1.8" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Chapter03/layouts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter03/layouts/public/favicon.ico -------------------------------------------------------------------------------- /Chapter03/layouts/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter03/layouts/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: calc(10px + 2vmin); 18 | color: white; 19 | } 20 | 21 | .App-link { 22 | color: #61dafb; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Chapter03/layouts/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Header from './components/layout/Header'; 3 | import Content from './components/layout/Content'; 4 | import Footer from './components/layout/Footer'; 5 | import './App.css'; 6 | 7 | class App extends Component { 8 | render() { 9 | return ( 10 |
11 |
12 | 13 | 14 |

15 | This is our <Content /> component 16 |

17 | 18 | 19 |
22 |
23 | ); 24 | } 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /Chapter03/layouts/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter03/layouts/src/components/layout/Content.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { node } from 'prop-types'; 3 | 4 | const Content = ({ children }) => ( 5 |
6 | {children} 7 |
8 | ); 9 | 10 | Content.propTypes = { 11 | children: node.isRequired 12 | }; 13 | 14 | export default Content; 15 | -------------------------------------------------------------------------------- /Chapter03/layouts/src/components/layout/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { string } from 'prop-types'; 3 | 4 | const Footer = ({ copyright }) => ( 5 |
6 |

© {copyright}

7 |
8 | ); 9 | 10 | Footer.propTypes = { 11 | copyright: string.isRequired 12 | }; 13 | 14 | export default Footer; 15 | -------------------------------------------------------------------------------- /Chapter03/layouts/src/components/layout/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { string } from 'prop-types'; 3 | 4 | const Header = ({ title }) => ( 5 |
6 |

{title}

7 |
8 | ); 9 | 10 | Header.propTypes = { 11 | title: string.isRequired 12 | }; 13 | 14 | export default Header; 15 | -------------------------------------------------------------------------------- /Chapter03/layouts/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter03/layouts/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter04/geolocation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter04/geolocation/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter04/geolocation/public/favicon.ico -------------------------------------------------------------------------------- /Chapter04/geolocation/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Geolocation from './components/Geolocation'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter04/geolocation/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/components/Geolocation/Geolocation.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { number } from 'prop-types'; 3 | 4 | const Geolocation = ({ latitude, longitude }) => ( 5 |
6 |
Latitude: {latitude}
7 |
Longitude: {longitude}
8 |
9 | ); 10 | 11 | Geolocation.propTypes = { 12 | latitude: number, 13 | longitude: number 14 | }; 15 | 16 | export default Geolocation; 17 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/components/Geolocation/GeolocationContainer.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Geolocation from './Geolocation'; 3 | 4 | class GeolocationContainer extends Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | this.state = { 9 | latitude: null, 10 | longitude: null 11 | }; 12 | 13 | this.handleSuccess = this.handleSuccess.bind(this); 14 | } 15 | 16 | componentDidMount() { 17 | if (navigator.geolocation) { 18 | navigator.geolocation.getCurrentPosition(this.handleSuccess); 19 | } 20 | } 21 | 22 | handleSuccess({ coords: { latitude, longitude } }) { 23 | this.setState({ 24 | latitude, 25 | longitude 26 | }); 27 | } 28 | 29 | render() { 30 | return ; 31 | } 32 | } 33 | 34 | export default GeolocationContainer; 35 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/components/Geolocation/index.jsx: -------------------------------------------------------------------------------- 1 | export { default } from './GeolocationContainer'; 2 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter04/geolocation/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter04/higher-order-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter04/higher-order-components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter04/higher-order-components/public/favicon.ico -------------------------------------------------------------------------------- /Chapter04/higher-order-components/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter04/higher-order-components/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter04/higher-order-components/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import MyComponent from './components/MyComponent'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter04/higher-order-components/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter04/higher-order-components/src/components/MyComponent/WithInnerWidth.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const withInnerWidth = Component => ( 4 | class extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | this.state = { 9 | innerWidth: window.innerWidth 10 | }; 11 | 12 | this.handleResize = this.handleResize.bind(this); 13 | } 14 | 15 | componentDidMount() { 16 | window.addEventListener('resize', this.handleResize); 17 | } 18 | 19 | componentWillUnmount() { 20 | window.removeEventListener('resize', this.handleResize); 21 | } 22 | 23 | handleResize() { 24 | this.setState({ 25 | innerWidth: window.innerWidth 26 | }); 27 | } 28 | 29 | render() { 30 | return ; 31 | } 32 | } 33 | ) 34 | 35 | export default withInnerWidth; 36 | -------------------------------------------------------------------------------- /Chapter04/higher-order-components/src/components/MyComponent/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { number } from 'prop-types'; 3 | 4 | import withInnerWidth from './WithInnerWidth'; 5 | 6 | const MyComponent = ({ innerWidth }) =>
innerWidth: {innerWidth}
; 7 | 8 | MyComponent.propTypes = { 9 | innerWidth: number 10 | }; 11 | 12 | export default withInnerWidth(MyComponent); 13 | -------------------------------------------------------------------------------- /Chapter04/higher-order-components/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter04/higher-order-components/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter05/context-api/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter05/context-api/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter05/context-api/public/favicon.ico -------------------------------------------------------------------------------- /Chapter05/context-api/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter05/context-api/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter05/context-api/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import List from './components/List'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter05/context-api/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter05/context-api/src/components/List/index.jsx: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React from 'react'; 3 | import { array } from 'prop-types'; 4 | 5 | // Providers 6 | import { ListProvider, ListContext } from './ListContext'; 7 | 8 | const List = () => ( 9 | 10 | 11 | {/* These props are comming from the Provider's value*/} 12 | {({ gists, myLogAction }) => ( 13 |
    14 | {myLogAction()} 15 | {gists.map(gist => ( 16 |
  • {gist.description}
    • 17 | ))} 18 |
19 | )} 20 | 21 | 22 | ); 23 | 24 | List.propTypes = { 25 | data: array 26 | }; 27 | 28 | export default List; 29 | -------------------------------------------------------------------------------- /Chapter05/context-api/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter05/context-api/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter05/data-fetching/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter05/data-fetching/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter05/data-fetching/public/favicon.ico -------------------------------------------------------------------------------- /Chapter05/data-fetching/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter05/data-fetching/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter05/data-fetching/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import List from './components/List'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter05/data-fetching/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter05/data-fetching/src/components/List/WithData.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const withData = url => Component => ( 4 | class extends React.Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | this.state = { 9 | data: [] 10 | }; 11 | } 12 | 13 | componentDidMount() { 14 | const endpoint = typeof url === 'function' ? url(this.props) : url; 15 | 16 | fetch(endpoint) 17 | .then(response => response.json()) 18 | .then(data => this.setState({ data })); 19 | } 20 | 21 | render() { 22 | return ; 23 | } 24 | } 25 | ) 26 | 27 | export default withData; 28 | -------------------------------------------------------------------------------- /Chapter05/data-fetching/src/components/List/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { array } from 'prop-types'; 3 | import withData from './WithData'; 4 | 5 | const List = ({ data: gists }) => ( 6 |
    7 | {gists.map(gist => ( 8 |
  • {gist.description}
    • 9 | ))} 10 |
11 | ); 12 | 13 | List.propTypes = { 14 | data: array 15 | }; 16 | 17 | const withGists = withData(() => `https://api.github.com/users/gaearon/gists`); 18 | 19 | export default withGists(List); 20 | -------------------------------------------------------------------------------- /Chapter05/data-fetching/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter05/data-fetching/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter05/data-flow/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter05/data-flow/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter05/data-flow/public/favicon.ico -------------------------------------------------------------------------------- /Chapter05/data-flow/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter05/data-flow/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter05/data-flow/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Counter from './components/Counter'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter05/data-flow/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter05/data-flow/src/components/Counter/Buttons.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { func } from 'prop-types'; 3 | 4 | const Buttons = ({ onDecrement, onIncrement }) => ( 5 |
6 | 7 | 8 |
9 | ); 10 | 11 | Buttons.propTypes = { 12 | onDecrement: func, 13 | onIncrement: func 14 | }; 15 | 16 | export default Buttons; 17 | -------------------------------------------------------------------------------- /Chapter05/data-flow/src/components/Counter/Display.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { number } from 'prop-types'; 3 | 4 | const Display = ({ counter }) =>

{counter}

; 5 | 6 | Display.propTypes = { 7 | counter: number 8 | }; 9 | 10 | export default Display; 11 | -------------------------------------------------------------------------------- /Chapter05/data-flow/src/components/Counter/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Display from './Display'; 3 | import Buttons from './Buttons'; 4 | 5 | class Counter extends Component { 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | counter: 0 11 | }; 12 | 13 | this.handleIncrement = this.handleIncrement.bind(this); 14 | this.handleDecrement = this.handleDecrement.bind(this); 15 | } 16 | 17 | handleIncrement() { 18 | this.setState({ 19 | counter: this.state.counter + 1 20 | }); 21 | } 22 | 23 | handleDecrement() { 24 | this.setState({ 25 | counter: this.state.counter - 1 26 | }); 27 | } 28 | 29 | render() { 30 | return ( 31 |
32 | 33 | 37 |
38 | ); 39 | } 40 | } 41 | 42 | export default Counter; 43 | -------------------------------------------------------------------------------- /Chapter05/data-flow/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter05/data-flow/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter05/react-refetch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-refetch": "^2.0.3", 10 | "react-scripts": "2.1.5" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /Chapter05/react-refetch/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter05/react-refetch/public/favicon.ico -------------------------------------------------------------------------------- /Chapter05/react-refetch/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter05/react-refetch/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter05/react-refetch/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import List from './components/List'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 | 10 |
11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter05/react-refetch/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter05/react-refetch/src/components/List/Gist.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { func, string } from 'prop-types'; 3 | import { connect } from 'react-refetch'; 4 | 5 | const Gist = ({ description, star }) => ( 6 |
  • 7 | {description} 8 | 9 |
    • 10 | ); 11 | 12 | Gist.propTypes = { 13 | description: string, 14 | star: func 15 | }; 16 | 17 | const token = 'access_token=123'; 18 | 19 | const connectWithStar = connect(({ id }) => ({ 20 | star: () => ({ 21 | starResponse: { 22 | url: `https://api.github.com/gists/${id}/star?${token}`, 23 | method: 'PUT' 24 | } 25 | }) 26 | })); 27 | 28 | export default connectWithStar(Gist); 29 | -------------------------------------------------------------------------------- /Chapter05/react-refetch/src/components/List/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { object } from 'prop-types'; 3 | import { connect } from 'react-refetch'; 4 | import Gist from './Gist'; 5 | 6 | const List = ({ gists }) => ( 7 | gists.fulfilled && ( 8 |
      9 | {gists.value.map(gist => ( 10 | 11 | ))} 12 |
    13 | ) 14 | ); 15 | 16 | List.propTypes = { 17 | gists: object 18 | }; 19 | 20 | const connectWithGists = connect(({ username }) => ({ 21 | gists: `https://api.github.com/users/${username}/gists`, 22 | })); 23 | 24 | export default connectWithGists(List); 25 | -------------------------------------------------------------------------------- /Chapter05/react-refetch/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter05/react-refetch/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter06/controlled-components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/controlled-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter06/controlled-components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter06/controlled-components/public/favicon.ico -------------------------------------------------------------------------------- /Chapter06/controlled-components/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/controlled-components/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter06/controlled-components/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Controlled from './components/Controlled' 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter06/controlled-components/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter06/controlled-components/src/components/Controlled/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Controlled extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | firstName: 'Dan', 9 | lastName: 'Abramov' 10 | }; 11 | 12 | this.handleChange = this.handleChange.bind(this); 13 | this.handleSubmit = this.handleSubmit.bind(this); 14 | } 15 | 16 | handleChange({ target }) { 17 | this.setState({ 18 | [target.name]: target.value 19 | }); 20 | } 21 | 22 | handleSubmit(e) { 23 | e.preventDefault(); 24 | 25 | console.log(`${this.state.firstName} ${this.state.lastName}`); 26 | } 27 | 28 | render() { 29 | return ( 30 | 31 | 37 | 43 | 44 | 45 | ); 46 | } 47 | } 48 | 49 | export default Controlled; 50 | -------------------------------------------------------------------------------- /Chapter06/controlled-components/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter06/controlled-components/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-addons-css-transition-group": "^15.6.2", 9 | "react-dom": "^16.8.3", 10 | "react-scripts": "2.1.5" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter06/css-transition-group/public/favicon.ico -------------------------------------------------------------------------------- /Chapter06/css-transition-group/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Transition from './components/Transition' 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/src/components/Transition/Transition.css: -------------------------------------------------------------------------------- 1 | .fade-enter { 2 | opacity: 0.01; 3 | } 4 | 5 | .fade-enter.fade-appear-active { 6 | opacity: 1; 7 | transition: opacity .5s ease-in; 8 | } 9 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/src/components/Transition/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 3 | import './Transition.css'; 4 | 5 | const Transition = () => ( 6 | 11 |

    Hello React

    12 |     13 | ); 14 | 15 | export default Transition; 16 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter06/css-transition-group/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter06/event-switch/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/event-switch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter06/event-switch/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter06/event-switch/public/favicon.ico -------------------------------------------------------------------------------- /Chapter06/event-switch/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/event-switch/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter06/event-switch/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Button from './components/Button' 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter06/event-switch/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter06/event-switch/src/components/Button/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Button extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.handleEvent = this.handleEvent.bind(this); 8 | } 9 | 10 | handleEvent(event) { 11 | switch (event.type) { 12 | case 'click': 13 | console.log('clicked'); 14 | break; 15 | 16 | case 'dblclick': 17 | console.log('double clicked'); 18 | break; 19 | 20 | default: 21 | console.log('unhandled', event.type); 22 | } 23 | } 24 | 25 | render() { 26 | return ( 27 | 28 | ); 29 | } 30 | 31 | } 32 | 33 | export default Button; 34 | -------------------------------------------------------------------------------- /Chapter06/event-switch/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter06/event-switch/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter06/json-schema/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/json-schema/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-jsonschema-form": "^1.2.1", 10 | "react-scripts": "2.1.5" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /Chapter06/json-schema/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter06/json-schema/public/favicon.ico -------------------------------------------------------------------------------- /Chapter06/json-schema/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/json-schema/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter06/json-schema/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import JSONSchemaForm from './components/JSONSchemaForm' 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter06/json-schema/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter06/json-schema/src/components/JSONSchemaForm/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Form from 'react-jsonschema-form'; 3 | 4 | const schema = { 5 | type: 'object', 6 | properties: { 7 | firstName: { type: 'string', default: 'Dan' }, 8 | lastName: { type: 'string', default: 'Abramov' } 9 | } 10 | }; 11 | 12 | class JSONSchemaForm extends React.Component { 13 | constructor(props) { 14 | super(props); 15 | 16 | this.handleSubmit = this.handleSubmit.bind(this); 17 | } 18 | 19 | handleSubmit({ formData }) { 20 | console.log(formData); 21 | } 22 | 23 | render() { 24 | return ( 25 |
    26 | ); 27 | } 28 | } 29 | 30 | export default JSONSchemaForm; 31 | -------------------------------------------------------------------------------- /Chapter06/json-schema/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter06/json-schema/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter06/react-motion/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/react-motion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-motion": "^0.5.2", 10 | "react-scripts": "2.1.5" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /Chapter06/react-motion/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter06/react-motion/public/favicon.ico -------------------------------------------------------------------------------- /Chapter06/react-motion/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/react-motion/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter06/react-motion/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Transition from './components/Transition' 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter06/react-motion/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter06/react-motion/src/components/Transition/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Motion, spring } from 'react-motion'; 3 | 4 | const Transition = () => ( 5 | 6 | {interpolatingStyle => ( 7 |

    Hello React

    8 | )} 9 |     10 | ); 11 | 12 | export default Transition; 13 | -------------------------------------------------------------------------------- /Chapter06/react-motion/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter06/react-motion/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter06/refs-dom/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/refs-dom/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter06/refs-dom/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter06/refs-dom/public/favicon.ico -------------------------------------------------------------------------------- /Chapter06/refs-dom/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/refs-dom/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter06/refs-dom/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Focus from './components/Focus' 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter06/refs-dom/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter06/refs-dom/src/components/Focus/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Focus extends React.Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.handleClick = this.handleClick.bind(this); 8 | } 9 | 10 | handleClick() { 11 | this.element.focus(); 12 | } 13 | 14 | render() { 15 | return ( 16 |
    17 | (this.element = element)} /> 18 | 19 |
    20 | ); 21 | } 22 | } 23 | 24 | export default Focus; 25 | -------------------------------------------------------------------------------- /Chapter06/refs-dom/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter06/refs-dom/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter06/refs-instance/public/favicon.ico -------------------------------------------------------------------------------- /Chapter06/refs-instance/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Reset from './components/Reset' 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/src/components/Reset/Input.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Input extends Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | value: '' 9 | }; 10 | 11 | this.reset = this.reset.bind(this); 12 | this.handleChange = this.handleChange.bind(this); 13 | } 14 | 15 | reset() { 16 | this.setState({ 17 | value: '' 18 | }); 19 | } 20 | 21 | handleChange({ target }) { 22 | this.setState({ 23 | value: target.value 24 | }); 25 | } 26 | 27 | render() { 28 | return ( 29 | 30 | ); 31 | } 32 | } 33 | 34 | export default Input; 35 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/src/components/Reset/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Input from './Input'; 3 | 4 | class Reset extends Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | this.handleClick = this.handleClick.bind(this); 9 | } 10 | 11 | handleClick(e) { 12 | e.preventDefault(); 13 | 14 | this.element.reset(); 15 | } 16 | 17 | render() { 18 | return ( 19 | 20 | (this.element = element)} /> 21 | 22 | 23 | ); 24 | } 25 | } 26 | 27 | export default Reset; 28 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter06/refs-instance/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter06/svg/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/svg/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter06/svg/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter06/svg/public/favicon.ico -------------------------------------------------------------------------------- /Chapter06/svg/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/svg/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter06/svg/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Circle from './components/Circles/Circle'; 3 | import RedCircle from './components/Circles/RedCircle'; 4 | import './App.css'; 5 | 6 | class App extends Component { 7 | render() { 8 | return ( 9 |
    10 | 11 | 12 |
    13 | ); 14 | } 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /Chapter06/svg/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter06/svg/src/components/Circles/Circle.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { number, string } from 'prop-types'; 3 | 4 | const Circle = ({ x, y, radius, fill }) => ( 5 | 6 | 7 | 8 | ); 9 | 10 | Circle.propTypes = { 11 | x: number, 12 | y: number, 13 | radius: number, 14 | fill: string 15 | }; 16 | 17 | export default Circle; 18 | -------------------------------------------------------------------------------- /Chapter06/svg/src/components/Circles/RedCircle.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { number } from 'prop-types' 3 | import Circle from './Circle'; 4 | 5 | const RedCircle = ({ x, y, radius }) => ( 6 | 7 | ); 8 | 9 | RedCircle.propTypes = { 10 | x: number, 11 | y: number, 12 | radius: number 13 | } 14 | 15 | export default RedCircle 16 | -------------------------------------------------------------------------------- /Chapter06/svg/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter06/svg/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter06/uncontrolled-components/public/favicon.ico -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Uncontrolled from './components/Uncontrolled' 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/src/components/Uncontrolled/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Uncontrolled extends Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | firstName: '', 9 | lastName: '' 10 | }; 11 | 12 | this.handleChange = this.handleChange.bind(this); 13 | this.handleSubmit = this.handleSubmit.bind(this); 14 | } 15 | 16 | handleChange({ target }) { 17 | this.setState({ 18 | [target.name]: target.value 19 | }); 20 | } 21 | 22 | handleSubmit(e) { 23 | e.preventDefault(); 24 | 25 | console.log(`${this.state.firstName} ${this.state.lastName}`); 26 | } 27 | 28 | render() { 29 | return ( 30 |
    31 | 32 | 33 | 34 |
    35 | ); 36 | } 37 | } 38 | 39 | export default Uncontrolled; 40 | -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter06/uncontrolled-components/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter07/css-modules/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /Chapter07/css-modules/index.css: -------------------------------------------------------------------------------- 1 | .background-red { 2 | background-color: #ff0000; 3 | } 4 | 5 | .button { 6 | composes: background-red; 7 | width: 320px; 8 | padding: 20px; 9 | border-radius: 5px; 10 | border: none; 11 | outline: none; 12 | } 13 | 14 | .button:hover { 15 | color: #fff; 16 | } 17 | 18 | .button:active { 19 | position: relative; 20 | top: 2px; 21 | } 22 | 23 | @media (max-width: 480px) { 24 | .button { 25 | width: 160px 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Chapter07/css-modules/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import cssModules from 'react-css-modules'; 4 | import styles from './index.css'; 5 | 6 | const Button = () => ; 7 | 8 | const EnhancedButton = cssModules(Button, styles); 9 | 10 | ReactDOM.render(, document.body); 11 | -------------------------------------------------------------------------------- /Chapter07/css-modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-modules", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@babel/core": "^7.3.4", 13 | "@babel/preset-env": "^7.3.4", 14 | "@babel/preset-react": "^7.0.0", 15 | "css-loader": "^2.1.0", 16 | "html-webpack-plugin": "^3.2.0", 17 | "react": "^16.8.3", 18 | "react-css-modules": "^4.7.9", 19 | "react-dom": "^16.8.3", 20 | "style-loader": "^0.23.1", 21 | "webpack": "^4.29.5", 22 | "webpack-dev-server": "^3.2.1" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Chapter07/css-modules/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 2 | 3 | module.exports = { 4 | entry: './index.js', 5 | module: { 6 | loaders: [ 7 | { 8 | test: /\.js$/, 9 | exclude: /(node_modules|bower_components)/, 10 | loader: 'babel', 11 | query: { 12 | presets: ['es2015', 'react'], 13 | }, 14 | }, 15 | { 16 | test: /\.css$/, 17 | loader: 'style!css?modules&localIdentName=[local]--[hash:base64:5]' 18 | } 19 | ] 20 | }, 21 | plugins: [new HtmlWebpackPlugin()] 22 | }; 23 | -------------------------------------------------------------------------------- /Chapter07/inline-styles/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter07/inline-styles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "react": "^16.8.3", 8 | "react-dom": "^16.8.3", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter07/inline-styles/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter07/inline-styles/public/favicon.ico -------------------------------------------------------------------------------- /Chapter07/inline-styles/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter07/inline-styles/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter07/inline-styles/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import FontSize from './components/FontSize' 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter07/inline-styles/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter07/inline-styles/src/components/FontSize/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class FontSize extends Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | value: 16 9 | }; 10 | 11 | this.handleChange = this.handleChange.bind(this); 12 | } 13 | 14 | handleChange({ target }) { 15 | this.setState({ 16 | value: Number(target.value) 17 | }); 18 | } 19 | 20 | render() { 21 | return ( 22 | 28 | ); 29 | } 30 | } 31 | 32 | export default FontSize; 33 | -------------------------------------------------------------------------------- /Chapter07/inline-styles/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter07/inline-styles/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter07/radium/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter07/radium/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "radium": "^0.25.1", 8 | "react": "^16.8.3", 9 | "react-dom": "^16.8.3", 10 | "react-scripts": "2.1.5" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /Chapter07/radium/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter07/radium/public/favicon.ico -------------------------------------------------------------------------------- /Chapter07/radium/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter07/radium/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter07/radium/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { StyleRoot } from 'radium'; 3 | import Button from './components/Button'; 4 | import './App.css'; 5 | 6 | class App extends Component { 7 | render() { 8 | return ( 9 | 10 |
    11 |
    13 |     14 | ); 15 | } 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /Chapter07/radium/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter07/radium/src/components/Button/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import radium from 'radium'; 3 | 4 | const styles = { 5 | backgroundColor: '#ff0000', 6 | width: 320, 7 | padding: 20, 8 | borderRadius: 5, 9 | border: 'none', 10 | outline: 'none', 11 | ':hover': { 12 | color: '#fff', 13 | }, 14 | ':active': { 15 | position: 'relative', 16 | top: 2, 17 | }, 18 | '@media (max-width: 480px)': { 19 | width: 160, 20 | } 21 | }; 22 | 23 | const Button = () => ; 24 | 25 | export default radium(Button); 26 | -------------------------------------------------------------------------------- /Chapter07/radium/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter07/radium/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter07/styled-components/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter07/styled-components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "radium": "^0.25.1", 8 | "react": "^16.8.3", 9 | "react-dom": "^16.8.3", 10 | "react-scripts": "2.1.5", 11 | "styled-components": "^4.1.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": [ 23 | ">0.2%", 24 | "not dead", 25 | "not ie <= 11", 26 | "not op_mini all" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /Chapter07/styled-components/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter07/styled-components/public/favicon.ico -------------------------------------------------------------------------------- /Chapter07/styled-components/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter07/styled-components/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter07/styled-components/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Button from './components/Button'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter07/styled-components/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter07/styled-components/src/components/Button/index.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Button = styled.button` 4 | background-color: #ff0000; 5 | width: 320px; 6 | padding: 20px; 7 | border-radius: 5px; 8 | border: none; 9 | outline: none; 10 | &:hover { 11 | color: #fff; 12 | } 13 | &:active { 14 | position: relative; 15 | top: 2px; 16 | } 17 | @media (max-width: 480px) { 18 | width: 160px; 19 | }`; 20 | 21 | export default Button; 22 | -------------------------------------------------------------------------------- /Chapter07/styled-components/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter07/styled-components/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@babel/core": "^7.3.4", 7 | "@babel/preset-env": "^7.3.4", 8 | "@babel/preset-react": "^7.0.0", 9 | "babel-loader": "^8.0.5", 10 | "express": "^4.16.4", 11 | "isomorphic-fetch": "^2.2.1", 12 | "prop-types": "^15.7.2", 13 | "radium": "^0.25.1", 14 | "react": "^16.8.3", 15 | "react-dom": "^16.8.3", 16 | "styled-components": "^4.1.3", 17 | "webpack": "^4.29.6", 18 | "webpack-node-externals": "^1.7.2" 19 | }, 20 | "scripts": { 21 | "build": "webpack", 22 | "start": "node ./dist/server" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ], 30 | "devDependencies": { 31 | "webpack-cli": "^3.2.3" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter08/data-fetching/public/favicon.ico -------------------------------------------------------------------------------- /Chapter08/data-fetching/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { array } from 'prop-types'; 3 | 4 | const App = ({ gists }) => ( 5 |
      6 | {gists.map(gist => ( 7 |
    • {gist.description}
      • 8 | ))} 9 |
    10 | ); 11 | 12 | App.propTypes = { 13 | gists: array 14 | }; 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/src/client.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './app'; 4 | 5 | ReactDOM.hydrate( 6 | , 7 | document.getElementById('app') 8 | ); 9 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/src/server.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom/server'; 4 | import fetch from 'isomorphic-fetch'; 5 | import App from './App'; 6 | import Template from './template'; 7 | 8 | const app = express(); 9 | 10 | app.use(express.static('dist/public')); 11 | 12 | app.get('/', (req, res) => { 13 | fetch('https://api.github.com/users/gaearon/gists') 14 | .then(response => response.json()) 15 | .then(gists => { 16 | const body = ReactDOM.renderToString(); 17 | const html = Template(body, gists); 18 | 19 | res.send(html); 20 | }); 21 | }) 22 | 23 | app.listen(3000, () => { 24 | console.log('Listening on port 3000'); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/src/template.js: -------------------------------------------------------------------------------- 1 | export default (body, gists) => ` 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    ${body}
    9 | 10 | 11 | 12 | 13 | ` 14 | -------------------------------------------------------------------------------- /Chapter08/data-fetching/webpack.config.js: -------------------------------------------------------------------------------- 1 | const nodeExternals = require('webpack-node-externals'); 2 | const path = require('path'); 3 | 4 | const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development'; 5 | 6 | const rules = [{ 7 | test: /\.(jsx|js)$/, 8 | use: 'babel-loader', 9 | exclude: /node_modules/ 10 | }]; 11 | 12 | const client = { 13 | mode, 14 | entry: './src/client.js', 15 | output: { 16 | path: path.resolve(__dirname, './dist/public'), 17 | filename: 'bundle.js', 18 | }, 19 | module: { 20 | rules 21 | } 22 | }; 23 | 24 | const server = { 25 | mode, 26 | entry: './src/server.js', 27 | output: { 28 | path: path.resolve(__dirname, './dist'), 29 | filename: 'server.js', 30 | }, 31 | module: { 32 | rules 33 | }, 34 | target: 'node', 35 | externals: [nodeExternals()] 36 | }; 37 | 38 | module.exports = [client, server]; 39 | -------------------------------------------------------------------------------- /Chapter08/next/.gitignore: -------------------------------------------------------------------------------- 1 | .next 2 | node_modules 3 | -------------------------------------------------------------------------------- /Chapter08/next/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "next" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "isomorphic-fetch": "^2.2.1", 13 | "next": "^8.0.3", 14 | "prop-types": "^15.7.2", 15 | "react": "^16.8.3", 16 | "react-dom": "^16.8.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Chapter08/next/pages/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { array } from 'prop-types'; 3 | import fetch from 'isomorphic-fetch'; 4 | 5 | class App extends Component { 6 | static async getInitialProps() { 7 | const response = await fetch('https://api.github.com/users/gaearon/gists'); 8 | const gists = await response.json(); 9 | return { 10 | gists 11 | }; 12 | } 13 | 14 | render() { 15 | return ( 16 |
      17 | {this.props.gists.map(gist => ( 18 |
    • {gist.description}
      • 19 | ))} 20 |
    21 | ); 22 | } 23 | } 24 | 25 | App.propTypes = { 26 | gists: array 27 | }; 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@babel/core": "^7.3.4", 7 | "@babel/preset-env": "^7.3.4", 8 | "@babel/preset-react": "^7.0.0", 9 | "babel-loader": "^8.0.5", 10 | "express": "^4.16.4", 11 | "isomorphic-fetch": "^2.2.1", 12 | "prop-types": "^15.7.2", 13 | "radium": "^0.25.1", 14 | "react": "^16.8.3", 15 | "react-dom": "^16.8.3", 16 | "styled-components": "^4.1.3", 17 | "webpack": "^4.29.6", 18 | "webpack-node-externals": "^1.7.2" 19 | }, 20 | "scripts": { 21 | "build": "webpack", 22 | "start": "node ./dist/server" 23 | }, 24 | "browserslist": [ 25 | ">0.2%", 26 | "not dead", 27 | "not ie <= 11", 28 | "not op_mini all" 29 | ], 30 | "devDependencies": { 31 | "webpack-cli": "^3.2.3" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter08/server-side-rendering/public/favicon.ico -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const App = () =>
    Hello React
    ; 4 | 5 | export default App; 6 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/src/client.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('app')); 6 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/src/server.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom/server'; 4 | import path from 'path'; 5 | import App from './App'; 6 | import template from './template'; 7 | 8 | const app = express(); 9 | 10 | app.use(express.static(path.resolve(__dirname, './dist/public'))); 11 | 12 | app.get('/', (req, res) => { 13 | const body = ReactDOM.renderToString(); 14 | const html = template(body); 15 | res.send(html); 16 | }); 17 | 18 | app.listen(3000, () => { 19 | console.log('Listening on port 3000'); 20 | }); 21 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/src/template.js: -------------------------------------------------------------------------------- 1 | export default (body, gists) => ` 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    ${body}
    9 | 10 | 11 | 12 | ` 13 | -------------------------------------------------------------------------------- /Chapter08/server-side-rendering/webpack.config.js: -------------------------------------------------------------------------------- 1 | const nodeExternals = require('webpack-node-externals'); 2 | const path = require('path'); 3 | 4 | const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development'; 5 | 6 | const rules = [{ 7 | test: /\.(jsx|js)$/, 8 | use: 'babel-loader', 9 | exclude: /node_modules/ 10 | }]; 11 | 12 | const client = { 13 | mode, 14 | entry: './src/client.js', 15 | output: { 16 | path: path.resolve(__dirname, './dist/public'), 17 | filename: 'bundle.js', 18 | }, 19 | module: { 20 | rules 21 | } 22 | }; 23 | 24 | const server = { 25 | mode, 26 | entry: './src/server.js', 27 | output: { 28 | path: path.resolve(__dirname, './dist'), 29 | filename: 'server.js', 30 | }, 31 | module: { 32 | rules 33 | }, 34 | target: 'node', 35 | externals: [nodeExternals()] 36 | }; 37 | 38 | module.exports = [client, server]; 39 | -------------------------------------------------------------------------------- /Chapter09/constants-props/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter09/constants-props/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "radium": "^0.25.1", 8 | "react": "^16.8.3", 9 | "react-dom": "^16.8.3", 10 | "react-scripts": "2.1.5", 11 | "styled-components": "^4.1.3", 12 | "why-did-you-update": "^1.0.6" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /Chapter09/constants-props/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter09/constants-props/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/constants-props/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter09/constants-props/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter09/constants-props/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import List from './components/List'; 3 | import './App.css'; 4 | 5 | if (process.env.NODE_ENV !== 'production') { 6 | const { whyDidYouUpdate } = require('why-did-you-update'); 7 | whyDidYouUpdate(React); 8 | } 9 | 10 | class App extends Component { 11 | render() { 12 | return ( 13 |
    14 | 15 |
    16 | ); 17 | } 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /Chapter09/constants-props/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter09/constants-props/src/components/List/Item.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | class Item extends PureComponent { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.handleClick = this.handleClick.bind(this); 8 | } 9 | 10 | handleClick() { 11 | this.props.onClick(this.props.item); 12 | } 13 | 14 | render() { 15 | return ( 16 |
  • 17 | {this.props.item} 18 |
    • 19 | ); 20 | } 21 | } 22 | 23 | export default Item; 24 | -------------------------------------------------------------------------------- /Chapter09/constants-props/src/components/List/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Item from './Item'; 3 | 4 | const statuses = ['open', 'close']; 5 | 6 | class List extends Component { 7 | constructor(props) { 8 | super(props); 9 | 10 | this.state = { 11 | items: ['foo', 'bar'] 12 | }; 13 | 14 | this.handleClick = this.handleClick.bind(this); 15 | } 16 | 17 | handleClick() { 18 | const items = this.state.items.slice(); 19 | items.unshift('baz'); 20 | 21 | this.setState({ 22 | items 23 | }); 24 | } 25 | 26 | render() { 27 | return ( 28 |
    29 |
      30 | {this.state.items.map(item => ( 31 | 37 | ))} 38 |
    39 | 40 |
    41 | ); 42 | } 43 | } 44 | 45 | export default List; 46 | -------------------------------------------------------------------------------- /Chapter09/constants-props/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter09/constants-props/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "radium": "^0.25.1", 8 | "react": "^16.8.3", 9 | "react-dom": "^16.8.3", 10 | "react-scripts": "2.1.5", 11 | "styled-components": "^4.1.3", 12 | "why-did-you-update": "^1.0.6" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter09/creating-functions/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/creating-functions/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import List from './components/List'; 3 | import './App.css'; 4 | 5 | if (process.env.NODE_ENV !== 'production') { 6 | const { whyDidYouUpdate } = require('why-did-you-update'); 7 | whyDidYouUpdate(React); 8 | } 9 | 10 | class App extends Component { 11 | render() { 12 | return ( 13 |
    14 | 15 |
    16 | ); 17 | } 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/src/components/List/Item.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | class Item extends PureComponent { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.handleClick = this.handleClick.bind(this); 8 | } 9 | 10 | handleClick() { 11 | this.props.onClick(this.props.item); 12 | } 13 | 14 | render() { 15 | return ( 16 |
  • 17 | {this.props.item} 18 |
    • 19 | ); 20 | } 21 | } 22 | 23 | export default Item; 24 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/src/components/List/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Item from './Item'; 3 | 4 | const statuses = ['open', 'close']; 5 | 6 | class List extends Component { 7 | constructor(props) { 8 | super(props); 9 | 10 | this.state = { 11 | items: ['foo', 'bar'] 12 | }; 13 | 14 | this.handleClick = this.handleClick.bind(this); 15 | } 16 | 17 | handleClick() { 18 | const items = this.state.items.slice(); 19 | items.unshift('baz'); 20 | 21 | this.setState({ 22 | items 23 | }); 24 | } 25 | 26 | render() { 27 | return ( 28 |
    29 |
      30 | {this.state.items.map(item => ( 31 | 37 | ))} 38 |
    39 | 40 |
    41 | ); 42 | } 43 | } 44 | 45 | export default List; 46 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter09/creating-functions/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter09/good-design/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter09/good-design/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "radium": "^0.25.1", 8 | "react": "^16.8.3", 9 | "react-dom": "^16.8.3", 10 | "react-scripts": "2.1.5", 11 | "styled-components": "^4.1.3", 12 | "why-did-you-update": "^1.0.6" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /Chapter09/good-design/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter09/good-design/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/good-design/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter09/good-design/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter09/good-design/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Todos from './components/Todos'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter09/good-design/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter09/good-design/src/components/Todos/Form.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | class Form extends PureComponent { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | value: '' 9 | }; 10 | 11 | this.handleChange = this.handleChange.bind(this); 12 | } 13 | 14 | handleChange({ target }) { 15 | this.setState({ 16 | value: target.value 17 | }); 18 | } 19 | 20 | render() { 21 | return ( 22 |
    23 | 24 | 25 |
    26 | ); 27 | } 28 | } 29 | 30 | export default Form; 31 | -------------------------------------------------------------------------------- /Chapter09/good-design/src/components/Todos/List.jsx: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | class List extends PureComponent { 4 | render() { 5 | return ( 6 |
      7 | {this.props.items.map(item =>
    • {item}
      • )} 8 |
    9 | ); 10 | } 11 | } 12 | 13 | export default List; 14 | -------------------------------------------------------------------------------- /Chapter09/good-design/src/components/Todos/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import List from './List'; 3 | import Form from './Form'; 4 | 5 | class Todos extends Component { 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | items: ['foo', 'bar'] 11 | }; 12 | 13 | this.handleSubmit = this.handleSubmit.bind(this); 14 | } 15 | 16 | handleSubmit(value) { 17 | const items = this.state.items.slice(); 18 | items.unshift(value); 19 | 20 | this.setState({ 21 | items 22 | }); 23 | } 24 | 25 | render() { 26 | return ( 27 |
    28 | 29 |
    30 |
    31 | ); 32 | } 33 | } 34 | 35 | export default Todos; 36 | -------------------------------------------------------------------------------- /Chapter09/good-design/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter09/good-design/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter09/keys/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter09/keys/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "prop-types": "^15.7.2", 7 | "radium": "^0.25.1", 8 | "react": "^16.8.3", 9 | "react-dom": "^16.8.3", 10 | "react-scripts": "2.1.5", 11 | "styled-components": "^4.1.3", 12 | "why-did-you-update": "^1.0.6" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /Chapter09/keys/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter09/keys/public/favicon.ico -------------------------------------------------------------------------------- /Chapter09/keys/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter09/keys/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter09/keys/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import List from './components/List'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
    9 | 10 |
    11 | ); 12 | } 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter09/keys/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter09/keys/src/components/List/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class List extends Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | items: ['foo', 'bar'] 9 | }; 10 | 11 | this.handleClick = this.handleClick.bind(this); 12 | } 13 | 14 | handleClick() { 15 | const items = this.state.items.slice(); 16 | items.unshift('baz'); 17 | 18 | this.setState({ 19 | items 20 | }); 21 | } 22 | 23 | render() { 24 | return ( 25 |
    26 |
      27 | {this.state.items.map(item =>
    • {item}
      • )} 28 |
    29 | 30 |
    31 | ); 32 | } 33 | } 34 | 35 | export default List; 36 | -------------------------------------------------------------------------------- /Chapter09/keys/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter09/keys/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter10/events/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ], 6 | "plugins": ["@babel/plugin-proposal-class-properties"] 7 | } 8 | -------------------------------------------------------------------------------- /Chapter10/events/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter10/events/jest/setupTestFramework.js: -------------------------------------------------------------------------------- 1 | import { configure } from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16.3'; 3 | 4 | configure({ adapter: new Adapter() }); 5 | -------------------------------------------------------------------------------- /Chapter10/events/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@babel/core": "^7.3.4", 7 | "@babel/plugin-proposal-class-properties": "^7.3.4", 8 | "@babel/preset-env": "^7.3.4", 9 | "@babel/preset-react": "^7.0.0", 10 | "babel-loader": "^8.0.5", 11 | "enzyme": "^3.9.0", 12 | "enzyme-adapter-react-16.3": "^1.6.1", 13 | "express": "^4.16.4", 14 | "isomorphic-fetch": "^2.2.1", 15 | "jest": "^24.1.0", 16 | "prop-types": "^15.7.2", 17 | "radium": "^0.25.1", 18 | "react": "^16.8.3", 19 | "react-dom": "^16.8.3", 20 | "styled-components": "^4.1.3", 21 | "webpack": "^4.29.6", 22 | "webpack-node-externals": "^1.7.2" 23 | }, 24 | "scripts": { 25 | "build": "webpack", 26 | "start": "node ./dist/server", 27 | "test": "jest", 28 | "test:coverage": "jest --coverage" 29 | }, 30 | "jest": { 31 | "setupFilesAfterEnv": [ 32 | "/jest/setupTestFramework.js" 33 | ], 34 | "collectCoverageFrom": [ 35 | "src/**/*.{js,jsx}" 36 | ] 37 | }, 38 | "devDependencies": { 39 | "webpack-cli": "^3.2.3" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /Chapter10/events/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter10/events/public/favicon.ico -------------------------------------------------------------------------------- /Chapter10/events/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter10/events/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter10/events/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ShowInformation from './components/ShowInformation'; 3 | 4 | const App = () => ; 5 | 6 | export default App; 7 | -------------------------------------------------------------------------------- /Chapter10/events/src/client.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('app')); 6 | -------------------------------------------------------------------------------- /Chapter10/events/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter10/events/src/server.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom/server'; 4 | import App from './App'; 5 | import template from './template'; 6 | 7 | const app = express(); 8 | 9 | app.use(express.static('dist/public')); 10 | 11 | app.get('/', (req, res) => { 12 | const body = ReactDOM.renderToString(); 13 | const html = template(body); 14 | res.send(html); 15 | }); 16 | 17 | app.listen(3000, () => { 18 | console.log('Listening on port 3000'); 19 | }); 20 | -------------------------------------------------------------------------------- /Chapter10/events/src/template.js: -------------------------------------------------------------------------------- 1 | export default (body, gists) => ` 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    ${body}
    9 | 10 | 11 | 12 | ` 13 | -------------------------------------------------------------------------------- /Chapter10/events/webpack.config.js: -------------------------------------------------------------------------------- 1 | const nodeExternals = require('webpack-node-externals'); 2 | const path = require('path'); 3 | 4 | const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development'; 5 | 6 | const rules = [{ 7 | test: /\.(jsx|js)$/, 8 | use: 'babel-loader', 9 | exclude: /node_modules/ 10 | }]; 11 | 12 | const client = { 13 | mode, 14 | entry: './src/client.js', 15 | output: { 16 | path: path.resolve(__dirname, './dist/public'), 17 | filename: 'bundle.js', 18 | }, 19 | module: { 20 | rules 21 | } 22 | }; 23 | 24 | const server = { 25 | mode, 26 | entry: './src/server.js', 27 | output: { 28 | path: path.resolve(__dirname, './dist'), 29 | filename: 'server.js', 30 | }, 31 | module: { 32 | rules 33 | }, 34 | target: 'node', 35 | externals: [nodeExternals()] 36 | }; 37 | 38 | module.exports = [client, server]; 39 | -------------------------------------------------------------------------------- /Chapter10/testing/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /Chapter10/testing/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter10/testing/jest/setupTestFramework.js: -------------------------------------------------------------------------------- 1 | import { configure } from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16.3'; 3 | 4 | configure({ adapter: new Adapter() }); 5 | -------------------------------------------------------------------------------- /Chapter10/testing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "geolocation", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@babel/core": "^7.3.4", 7 | "@babel/preset-env": "^7.3.4", 8 | "@babel/preset-react": "^7.0.0", 9 | "babel-loader": "^8.0.5", 10 | "enzyme": "^3.9.0", 11 | "enzyme-adapter-react-16.3": "^1.6.1", 12 | "express": "^4.16.4", 13 | "isomorphic-fetch": "^2.2.1", 14 | "jest": "^24.1.0", 15 | "prop-types": "^15.7.2", 16 | "radium": "^0.25.1", 17 | "react": "^16.8.3", 18 | "react-dom": "^16.8.3", 19 | "styled-components": "^4.1.3", 20 | "webpack": "^4.29.6", 21 | "webpack-node-externals": "^1.7.2" 22 | }, 23 | "scripts": { 24 | "build": "webpack", 25 | "start": "node ./dist/server", 26 | "test": "jest", 27 | "test:coverage": "jest --coverage" 28 | }, 29 | "jest": { 30 | "setupFilesAfterEnv": [ 31 | "/jest/setupTestFramework.js" 32 | ], 33 | "collectCoverageFrom": [ 34 | "src/**/*.{js,jsx}" 35 | ] 36 | }, 37 | "devDependencies": { 38 | "webpack-cli": "^3.2.3" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /Chapter10/testing/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter10/testing/public/favicon.ico -------------------------------------------------------------------------------- /Chapter10/testing/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter10/testing/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter10/testing/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const App = () =>
    Hello React
    ; 4 | 5 | export default App; 6 | -------------------------------------------------------------------------------- /Chapter10/testing/src/client.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('app')); 6 | -------------------------------------------------------------------------------- /Chapter10/testing/src/components/Hello/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const HelloWorld = props => ( 4 |

    Hello {props.name || 'World'}

    5 | ); 6 | 7 | export default HelloWorld; 8 | -------------------------------------------------------------------------------- /Chapter10/testing/src/components/Hello/index.test.js: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React from 'react'; 3 | import { shallow } from 'enzyme'; 4 | 5 | // Component to test... 6 | import Hello from './index'; 7 | 8 | describe('Hello', () => { 9 | const wrapper = shallow(); 10 | const wrapperWithProps = shallow(); 11 | 12 | it('should render Home component', () => { 13 | expect(wrapper.length).toBe(1); 14 | }); 15 | 16 | it('should render by default Hello World', () => { 17 | expect(wrapper.text()).toBe('Hello World'); 18 | }); 19 | 20 | it('should render the name prop', () => { 21 | expect(wrapperWithProps.text()).toBe('Hello Carlos'); 22 | }); 23 | 24 | it('should has .Home class', () => { 25 | expect(wrapper.find('h1').hasClass('Hello')).toBe(true); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /Chapter10/testing/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter10/testing/src/server.js: -------------------------------------------------------------------------------- 1 | import express from 'express'; 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom/server'; 4 | import App from './App'; 5 | import template from './template'; 6 | 7 | const app = express(); 8 | 9 | app.use(express.static('dist/public')); 10 | 11 | app.get('/', (req, res) => { 12 | const body = ReactDOM.renderToString(); 13 | const html = template(body); 14 | res.send(html); 15 | }); 16 | 17 | app.listen(3000, () => { 18 | console.log('Listening on port 3000'); 19 | }); 20 | -------------------------------------------------------------------------------- /Chapter10/testing/src/template.js: -------------------------------------------------------------------------------- 1 | export default (body, gists) => ` 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    ${body}
    9 | 10 | 11 | 12 | ` 13 | -------------------------------------------------------------------------------- /Chapter10/testing/webpack.config.js: -------------------------------------------------------------------------------- 1 | const nodeExternals = require('webpack-node-externals'); 2 | const path = require('path'); 3 | 4 | const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development'; 5 | 6 | const rules = [{ 7 | test: /\.(jsx|js)$/, 8 | use: 'babel-loader', 9 | exclude: /node_modules/ 10 | }]; 11 | 12 | const client = { 13 | mode, 14 | entry: './src/client.js', 15 | output: { 16 | path: path.resolve(__dirname, './dist/public'), 17 | filename: 'bundle.js', 18 | }, 19 | module: { 20 | rules 21 | } 22 | }; 23 | 24 | const server = { 25 | mode, 26 | entry: './src/server.js', 27 | output: { 28 | path: path.resolve(__dirname, './dist'), 29 | filename: 'server.js', 30 | }, 31 | module: { 32 | rules 33 | }, 34 | target: 'node', 35 | externals: [nodeExternals()] 36 | }; 37 | 38 | module.exports = [client, server]; 39 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-router-dom": "^4.3.1", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter11/react-router-with-params/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/components/About/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const About = () => ( 4 |
    5 |

    About

    6 |
    7 | ); 8 | 9 | export default About; 10 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/components/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App ul.menu { 6 | margin: 50px; 7 | padding: 0; 8 | list-style: none; 9 | } 10 | 11 | .App ul.menu li { 12 | display: inline-block; 13 | padding: 0 10px; 14 | } 15 | 16 | .App ul.menu li a { 17 | color: #333; 18 | text-decoration: none; 19 | } 20 | 21 | .App ul.menu li a:hover { 22 | color: #ccc; 23 | } 24 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { element } from 'prop-types'; 3 | import { Link } from 'react-router-dom'; 4 | import './App.css'; 5 | 6 | const App = ({ children }) => ( 7 |
    8 |
      9 |
    • Home
      • 10 |
    • About
      • 11 |
    • Contacts
      • 12 |
    • Contact
      • 13 |
    14 | 15 | {children} 16 |
    17 | ); 18 | 19 | App.propTypes = { 20 | children: element 21 | }; 22 | 23 | export default App; 24 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/components/Contact/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Contact = () => ( 4 |
    5 |

    Contact

    6 |
    7 | ); 8 | 9 | export default Contact; 10 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/components/Contacts/Contacts.css: -------------------------------------------------------------------------------- 1 | .Contacts ul { 2 | list-style: none; 3 | margin: 0; 4 | margin-bottom: 20px; 5 | padding: 0; 6 | } 7 | 8 | .Contacts ul li { 9 | padding: 10px; 10 | } 11 | 12 | .Contacts a { 13 | color: #555; 14 | text-decoration: none; 15 | } 16 | 17 | .Contacts a:hover { 18 | color: #ccc; 19 | text-decoration: none; 20 | } 21 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/components/Error404/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Error404 = () => ( 4 |
    5 |

    Error404

    6 |
    7 | ); 8 | 9 | export default Error404; 10 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/components/Home/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Home = () => ( 4 |
    5 |

    Home

    6 |
    7 | ); 8 | 9 | export default Home; 10 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/index.js: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import { BrowserRouter as Router } from 'react-router-dom'; 5 | 6 | // Styles 7 | import './index.css'; 8 | 9 | // Routes 10 | import AppRoutes from './routes'; 11 | 12 | render( 13 | 14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | -------------------------------------------------------------------------------- /Chapter11/react-router-with-params/src/routes.jsx: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React from 'react'; 3 | import { Route, Switch } from 'react-router-dom'; 4 | 5 | // Components 6 | import App from './components/App'; 7 | import About from './components/About'; 8 | import Contact from './components/Contact'; 9 | import Home from './components/Home'; 10 | import Error404 from './components/Error404'; 11 | import Contacts from './components/Contacts'; 12 | 13 | const AppRoutes = () => ( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | 26 | export default AppRoutes; 27 | -------------------------------------------------------------------------------- /Chapter11/react-router/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter11/react-router/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-router-dom": "^4.3.1", 9 | "react-scripts": "2.1.5" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /Chapter11/react-router/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter11/react-router/public/favicon.ico -------------------------------------------------------------------------------- /Chapter11/react-router/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter11/react-router/src/components/About/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const About = () => ( 4 |
    5 |

    About

    6 |
    7 | ); 8 | 9 | export default About; 10 | -------------------------------------------------------------------------------- /Chapter11/react-router/src/components/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Chapter11/react-router/src/components/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { element } from 'prop-types'; 3 | import './App.css'; 4 | 5 | const App = ({ children }) => ( 6 |
    7 | {children} 8 |
    9 | ); 10 | 11 | App.propTypes = { 12 | children: element 13 | }; 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /Chapter11/react-router/src/components/Contact/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Contact = () => ( 4 |
    5 |

    Contact

    6 |
    7 | ); 8 | 9 | export default Contact; 10 | -------------------------------------------------------------------------------- /Chapter11/react-router/src/components/Error404/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Error404 = () => ( 4 |
    5 |

    Error404

    6 |
    7 | ); 8 | 9 | export default Error404; 10 | -------------------------------------------------------------------------------- /Chapter11/react-router/src/components/Home/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Home = () => ( 4 |
    5 |

    Home

    6 |
    7 | ); 8 | 9 | export default Home; 10 | -------------------------------------------------------------------------------- /Chapter11/react-router/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter11/react-router/src/index.js: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React from 'react'; 3 | import { render } from 'react-dom'; 4 | import { BrowserRouter as Router } from 'react-router-dom'; 5 | 6 | // Styles 7 | import './index.css'; 8 | 9 | // Routes 10 | import AppRoutes from './routes'; 11 | 12 | render( 13 | 14 | 15 | , 16 | document.getElementById('root') 17 | ); 18 | -------------------------------------------------------------------------------- /Chapter11/react-router/src/routes.jsx: -------------------------------------------------------------------------------- 1 | // Dependencies 2 | import React from 'react'; 3 | import { Route, Switch } from 'react-router-dom'; 4 | 5 | // Components 6 | import App from './components/App'; 7 | import About from './components/About'; 8 | import Contact from './components/Contact'; 9 | import Home from './components/Home'; 10 | import Error404 from './components/Error404'; 11 | 12 | const AppRoutes = () => ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | 23 | export default AppRoutes; 24 | -------------------------------------------------------------------------------- /Chapter12/counter/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter12/counter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "counter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.5", 7 | "react-dom": "^16.8.5", 8 | "react-scripts": "2.1.8" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Chapter12/counter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter12/counter/public/favicon.ico -------------------------------------------------------------------------------- /Chapter12/counter/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter12/counter/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: calc(10px + 2vmin); 18 | color: white; 19 | } 20 | 21 | .App-link { 22 | color: #61dafb; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Chapter12/counter/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import Counter from './components/Counter'; 4 | import './App.css'; 5 | 6 | class App extends Component { 7 | render() { 8 | return ( 9 |
    10 |
    11 | logo 12 |
    13 | 14 | 15 |
    16 | ); 17 | } 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /Chapter12/counter/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter12/counter/src/components/Counter/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Counter extends Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | count: props.initialCount 9 | }; 10 | 11 | this.handleClick = this.handleClick.bind(this); 12 | } 13 | 14 | handleClick() { 15 | this.setState({ 16 | count: this.state.count + 1 17 | }); 18 | } 19 | 20 | render() { 21 | return ( 22 |
    23 | {this.state.count} 24 | 25 |
    26 | ); 27 | } 28 | } 29 | 30 | export default Counter; 31 | -------------------------------------------------------------------------------- /Chapter12/counter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter12/counter/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter12/keys/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter12/keys/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "counter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.5", 7 | "react-dom": "^16.8.5", 8 | "react-scripts": "2.1.8" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Chapter12/keys/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter12/keys/public/favicon.ico -------------------------------------------------------------------------------- /Chapter12/keys/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter12/keys/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: calc(10px + 2vmin); 18 | color: white; 19 | } 20 | 21 | .App-link { 22 | color: #61dafb; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Chapter12/keys/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import List from './components/Counter/List'; 4 | import './App.css'; 5 | 6 | class App extends Component { 7 | render() { 8 | return ( 9 |
    10 |
    11 | logo 12 |
    13 | 14 | 15 |
    16 | ); 17 | } 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /Chapter12/keys/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter12/keys/src/components/Counter/List.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | class List extends PureComponent { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | items: ['foo', 'bar'] 9 | }; 10 | 11 | this.handleClick = this.handleClick.bind(this); 12 | } 13 | 14 | handleClick() { 15 | const items = this.state.items.slice(); 16 | 17 | items.unshift('baz'); 18 | 19 | this.setState({ 20 | items 21 | }); 22 | } 23 | 24 | render() { 25 | return ( 26 |
    27 |
      28 | {this.state.items.map((item, index) => ( 29 |
    • 30 | {item} 31 | 32 |
      • 33 | ))} 34 |
    35 | 36 | 37 |
    38 | ); 39 | } 40 | } 41 | 42 | export default List; 43 | -------------------------------------------------------------------------------- /Chapter12/keys/src/components/Counter/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Counter extends Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | count: props.initialCount 9 | }; 10 | 11 | this.handleClick = this.handleClick.bind(this); 12 | } 13 | 14 | handleClick() { 15 | this.setState({ 16 | count: this.state.count + 1 17 | }); 18 | } 19 | 20 | render() { 21 | return ( 22 |
    23 | {this.state.count} 24 | 25 |
    26 | ); 27 | } 28 | } 29 | 30 | export default Counter; 31 | -------------------------------------------------------------------------------- /Chapter12/keys/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter12/keys/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Chapter12/mutating/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Chapter12/mutating/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "counter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.5", 7 | "react-dom": "^16.8.5", 8 | "react-scripts": "2.1.8" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Chapter12/mutating/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/React-Design-Patterns-and-Best-Practices-Second-Edition/d84598cd731335854dfc202d0f0a10f83768f04e/Chapter12/mutating/public/favicon.ico -------------------------------------------------------------------------------- /Chapter12/mutating/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": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Chapter12/mutating/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: calc(10px + 2vmin); 18 | color: white; 19 | } 20 | 21 | .App-link { 22 | color: #61dafb; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Chapter12/mutating/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import List from './components/Counter/List'; 4 | import './App.css'; 5 | 6 | class App extends Component { 7 | render() { 8 | return ( 9 |
    10 |
    11 | logo 12 |
    13 | 14 | 15 |
    16 | ); 17 | } 18 | } 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /Chapter12/mutating/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 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Chapter12/mutating/src/components/Counter/List.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | class List extends PureComponent { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | items: ['foo', 'bar'] 9 | }; 10 | 11 | this.handleClick = this.handleClick.bind(this); 12 | } 13 | 14 | handleClick() { 15 | this.setState({ 16 | items: this.state.items.concat('baz') 17 | }); 18 | } 19 | 20 | render() { 21 | return ( 22 |
    23 | {this.state.items.length} 24 | 25 |
    26 | ); 27 | } 28 | } 29 | 30 | export default List; 31 | -------------------------------------------------------------------------------- /Chapter12/mutating/src/components/Counter/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Counter extends Component { 4 | constructor(props) { 5 | super(props); 6 | 7 | this.state = { 8 | count: props.initialCount 9 | }; 10 | 11 | this.handleClick = this.handleClick.bind(this); 12 | } 13 | 14 | handleClick() { 15 | this.setState({ 16 | count: this.state.count + 1 17 | }); 18 | } 19 | 20 | render() { 21 | return ( 22 |
    23 | {this.state.count} 24 | 25 |
    26 | ); 27 | } 28 | } 29 | 30 | export default Counter; 31 | -------------------------------------------------------------------------------- /Chapter12/mutating/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Chapter12/mutating/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 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 | --------------------------------------------------------------------------------