├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── Components └── Modal │ ├── Modal.css │ └── Modal.js ├── index.css └── index.js /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | 48 | ### Code Splitting 49 | 50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 51 | 52 | ### Analyzing the Bundle Size 53 | 54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 55 | 56 | ### Making a Progressive Web App 57 | 58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 59 | 60 | ### Advanced Configuration 61 | 62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 63 | 64 | ### Deployment 65 | 66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 67 | 68 | ### `npm run build` fails to minify 69 | 70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-advanced", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.9", 7 | "@testing-library/react": "^11.2.5", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.1.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecole-du-web/react-modal/984ff4e574754bae52e70346d259ab42350a9191/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecole-du-web/react-modal/984ff4e574754bae52e70346d259ab42350a9191/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ecole-du-web/react-modal/984ff4e574754bae52e70346d259ab42350a9191/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Modal from './Components/Modal/Modal' 3 | 4 | function App() { 5 | 6 | 7 | return ( 8 | <> 9 | 10 | 11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/Components/Modal/Modal.css: -------------------------------------------------------------------------------- 1 | body.active-modal { 2 | overflow-y: hidden; 3 | } 4 | 5 | .btn-modal { 6 | padding: 10px 20px; 7 | display: block; 8 | margin: 100px auto 0; 9 | font-size: 18px; 10 | } 11 | 12 | .modal, .overlay { 13 | width: 100vw; 14 | height: 100vh; 15 | top: 0; 16 | left: 0; 17 | right: 0; 18 | bottom: 0; 19 | position: fixed; 20 | } 21 | 22 | .overlay { 23 | background: rgba(49,49,49,0.8); 24 | } 25 | .modal-content { 26 | position: absolute; 27 | top: 40%; 28 | left: 50%; 29 | transform: translate(-50%, -50%); 30 | line-height: 1.4; 31 | background: #f1f1f1; 32 | padding: 14px 28px; 33 | border-radius: 3px; 34 | max-width: 600px; 35 | min-width: 300px; 36 | } 37 | 38 | .close-modal { 39 | position: absolute; 40 | top: 10px; 41 | right: 10px; 42 | padding: 5px 7px; 43 | } -------------------------------------------------------------------------------- /src/Components/Modal/Modal.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./Modal.css"; 3 | 4 | export default function Modal() { 5 | const [modal, setModal] = useState(false); 6 | 7 | const toggleModal = () => { 8 | setModal(!modal); 9 | }; 10 | 11 | if(modal) { 12 | document.body.classList.add('active-modal') 13 | } else { 14 | document.body.classList.remove('active-modal') 15 | } 16 | 17 | return ( 18 | <> 19 | 22 | 23 | {modal && ( 24 |
25 |
26 |
27 |

Hello Modal

28 |

29 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident 30 | perferendis suscipit officia recusandae, eveniet quaerat assumenda 31 | id fugit, dignissimos maxime non natus placeat illo iusto! 32 | Sapiente dolorum id maiores dolores? Illum pariatur possimus 33 | quaerat ipsum quos molestiae rem aspernatur dicta tenetur. Sunt 34 | placeat tempora vitae enim incidunt porro fuga ea. 35 |

36 | 39 |
40 |
41 | )} 42 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam excepturi corrupti doloremque accusantium id ratione ipsa veniam eum magnam soluta molestias accusamus, maiores tenetur quae temporibus aperiam, sint expedita illum, libero error deserunt maxime omnis vero. Quis, iste. Dignissimos quidem repellat architecto expedita atque, nam fuga nihil maxime ducimus dolorem magnam in quae cum animi exercitationem et velit? Est vitae repellat, ratione, necessitatibus facilis veritatis, saepe tempore accusamus magni deleniti itaque aliquid rem! Ea laborum soluta et minima animi maiores unde aliquid modi quod quasi minus quae exercitationem earum pariatur iste, quisquam dolores magnam possimus sapiente excepturi nihil quibusdam, labore eius nam. Iure, repellendus! Voluptates eveniet, doloribus voluptatibus enim non rerum provident modi fuga possimus cumque quis. Ea laudantium eaque vitae, neque consequatur mollitia tempore numquam nam rerum amet porro aspernatur. Quam officiis sint atque placeat amet repudiandae corrupti totam ab vel perferendis cum dicta, sunt id autem tempore earum tenetur quas, blanditiis, dignissimos minima. Harum inventore, fuga placeat deleniti animi nulla repellat ducimus, ipsa eius mollitia magni atque sint, nesciunt deserunt iure quaerat? Doloremque earum culpa aliquid maiores. Quis odit, eius exercitationem et in praesentium obcaecati ex doloribus, nostrum dolorum totam harum, reprehenderit autem nobis vitae molestias explicabo. Id cupiditate dolore soluta, reiciendis unde doloremque perspiciatis nemo sapiente laudantium ratione impedit voluptatibus delectus, eligendi corrupti exercitationem, adipisci eum! Quae aliquid hic tempora consequatur, debitis exercitationem ut natus! A, corrupti aut. Eos tempore veniam sunt? Aliquam praesentium, unde illum laboriosam, facere numquam consectetur sint ducimus in neque distinctio fugit accusantium nisi cumque suscipit, rem beatae aliquid quas dolorum doloribus esse error ut dolores? Laboriosam neque ducimus vero nisi quos expedita error distinctio itaque accusantium. Accusantium architecto ab maiores facilis est? Perferendis obcaecati aliquid eaque, vitae nam minus officia laudantium ullam, autem aut culpa expedita itaque dolor dolorem, asperiores voluptas repellat eveniet quas ea impedit quisquam? Aspernatur, quod! Corrupti quis nulla voluptatem assumenda necessitatibus. Neque, minima? Quidem nisi voluptas aliquid reprehenderit aspernatur doloremque minima ab quasi veniam unde optio, ut quo vel accusantium quisquam inventore! Atque dolorum delectus quis quisquam? At dicta corrupti dolorum mollitia suscipit amet perferendis dolor nobis, error provident dolorem reprehenderit quis odit perspiciatis nihil doloribus, nostrum vero ad nam, praesentium libero natus. Molestias vel in adipisci eius quidem pariatur at, provident modi facere assumenda quisquam repudiandae accusamus, corrupti ullam impedit harum odio ex ipsa. Repellat iste, voluptas saepe eius omnis ullam. Rem saepe, officia, adipisci magnam minima accusamus voluptatibus aliquid illum molestias ab autem quis rerum mollitia corrupti! Soluta aliquid doloribus repudiandae non odit voluptas error impedit, quod repellendus fugiat, esse distinctio quaerat cum animi excepturi qui! Vel porro quod non dolore exercitationem repellendus illum, quisquam architecto cum autem? Fuga ab perferendis et ut deserunt laboriosam ipsam perspiciatis consequuntur, modi molestias sint, adipisci nam, sit labore voluptatem quibusdam. Similique neque eum vel officiis sed perferendis corrupti saepe eaque fuga, nostrum inventore expedita consequatur libero animi quae velit nobis voluptatum, et omnis. Ipsam impedit, deserunt pariatur ab numquam animi adipisci, culpa quia repellendus rem optio ullam temporibus, est cumque placeat? Atque dolore maxime amet incidunt quod, ullam voluptatibus laborum, harum dolor recusandae velit molestias? Non, nemo vitae. Dicta quas cumque praesentium maiores magni, distinctio nesciunt dolor doloribus rem consequuntur excepturi consequatur aspernatur earum nobis nihil iure ipsam autem laudantium doloremque ex at! Fuga libero voluptatibus voluptates consequuntur provident consequatur, nesciunt itaque. At natus a fuga atque culpa officia necessitatibus eaque soluta eligendi omnis esse assumenda, unde adipisci fugit cupiditate facere delectus id maiores est vero sed in architecto aspernatur consequatur. Debitis eius numquam magnam veritatis in expedita quia, natus cum impedit beatae iusto blanditiis reprehenderit ipsam illo distinctio laboriosam laudantium voluptates pariatur culpa rerum dolores? Consectetur suscipit labore optio dolor mollitia? Dolor accusantium qui natus sit quam, architecto aut molestias ea eos! Quas eaque ut fuga, dicta officiis ullam autem iure adipisci voluptate quibusdam fugit assumenda quo, consequatur magnam dolor tempore, rem reprehenderit numquam? Ipsum, eos reprehenderit! Ab facilis, labore voluptates perferendis dignissimos nesciunt veritatis eaque magni eveniet? Beatae maiores, vitae illo velit tenetur ducimus itaque. Sed nobis libero voluptate facere accusamus modi, magnam impedit excepturi, exercitationem a eum tempore repellendus? Placeat natus ducimus molestias totam. Perspiciatis ut fuga, repellendus eos, excepturi minima recusandae eveniet impedit nihil, animi atque hic sapiente doloremque velit beatae ab aliquam vel ipsa! Mollitia molestiae maiores numquam! Veniam pariatur doloribus dicta repellat voluptas totam minus eos ab corrupti doloremque odio aperiam iusto repellendus tenetur nisi, ad obcaecati eum eligendi. Vitae aspernatur quas accusantium quasi consectetur quos quae voluptate aliquam neque ea dolores nisi earum qui quibusdam tenetur ducimus, officiis autem ratione modi cumque, excepturi suscipit perferendis itaque. Necessitatibus voluptates optio sit ex illum libero amet maiores. Voluptate unde quam deserunt itaque, eum alias! Numquam porro cum, cumque ex perspiciatis possimus ducimus eveniet quasi. Hic minima ratione nesciunt delectus, soluta explicabo at sunt ipsa aliquid numquam ut corrupti sapiente placeat officiis cupiditate esse sit perferendis. Cupiditate molestias eos quis sapiente, rem nobis eveniet quisquam? Aut molestias, autem cumque rem itaque commodi, exercitationem porro et ad odio, illum tenetur? Accusantium sequi vitae assumenda eius doloribus, ducimus, debitis enim perferendis hic tempora blanditiis, soluta repudiandae molestiae iure esse illum nulla eveniet quos deserunt pariatur voluptatem adipisci. Ipsa praesentium laudantium distinctio repellat tenetur facere quia dignissimos similique dolores odit quis hic reiciendis aperiam impedit veritatis non eum magni dolorem, fuga vel, corporis officiis nam quas voluptas. Reiciendis temporibus ipsum atque soluta nesciunt ipsa rem rerum sint laborum. Dolorum a mollitia facilis reiciendis. Rerum maxime expedita sit nemo, distinctio porro quidem dolore aliquam doloribus illo tenetur architecto laborum sint unde cumque dignissimos quas corporis amet? Velit tenetur sit illum molestias. Maxime quae ex aspernatur. Harum temporibus quasi quod nihil culpa ullam facere, autem voluptatem sapiente perspiciatis dolorum, tenetur vitae laudantium alias tempora amet impedit, aliquam voluptatibus dignissimos eum totam accusamus quas officia. Consequuntur laudantium necessitatibus quam labore, expedita corporis nesciunt cupiditate assumenda eos asperiores aperiam doloribus quae voluptatum, autem, quisquam velit voluptatibus voluptate ex illo! Sequi perferendis a ea autem libero itaque ipsam suscipit harum, quis ex ut voluptatibus molestiae vero deleniti expedita id nisi incidunt maxime accusantium nihil aliquid praesentium ab eligendi illum. Recusandae rerum laborum quae enim, doloremque, ut perferendis, debitis provident officiis minus consectetur maxime inventore natus. Rerum officiis, beatae dolorum consequuntur recusandae exercitationem atque placeat eos aliquam autem. Magni neque, saepe, in architecto sunt adipisci incidunt iste asperiores consectetur quos officiis quisquam! Vitae explicabo fugiat corrupti id dicta? Sint pariatur eum, aut, laboriosam asperiores voluptatem deleniti accusantium laudantium possimus quos velit quo quis! Commodi quo magnam eius modi eligendi corporis cum, quisquam, accusamus natus autem sunt quia vitae necessitatibus beatae iusto maxime voluptatum perspiciatis porro error praesentium quaerat deserunt doloribus libero. Impedit neque atque animi recusandae. Ab sed tempore ipsa quae at. Magni praesentium impedit consequatur vitae exercitationem! Non quam esse cum quia assumenda commodi iure! Minima cum similique, voluptate iure animi laboriosam excepturi consequuntur aperiam quibusdam. Mollitia laborum quaerat ea assumenda accusantium necessitatibus id ex dolore commodi deserunt totam, quidem voluptatibus sed esse reiciendis perferendis ad quae. Hic aliquam nobis officia commodi aspernatur cupiditate tempora ab nihil minima, distinctio perspiciatis fugit at praesentium repellat illum accusamus? Porro necessitatibus cumque voluptatibus itaque facilis dolorem esse quidem perspiciatis, ad voluptatum facere voluptas nemo libero, dolorum recusandae laborum vero praesentium minima tempore unde totam ipsum. Repellat iste animi amet hic deleniti, error maxime unde qui nesciunt, quisquam sit repellendus laudantium totam consectetur iusto ex tenetur, deserunt a. Quasi voluptate cupiditate soluta ullam ad dolore! Illo recusandae reiciendis quos assumenda non quod possimus autem, aliquam saepe deleniti distinctio, eos necessitatibus tenetur. Doloribus, dolore necessitatibus. Iure vero, laboriosam aliquid veritatis voluptate nemo ab perferendis adipisci. Architecto nam doloremque eum quaerat non nulla suscipit molestias, soluta, voluptatum natus, fugiat qui. Ipsa sit, quis eveniet vero eligendi labore perferendis repellat expedita nisi, necessitatibus quaerat inventore laborum commodi, quam soluta ullam libero. Reprehenderit, nobis asperiores quasi eos dolorem blanditiis aliquam ipsum iste dolorum inventore praesentium sed. Adipisci non tempora maiores. Deleniti laudantium amet praesentium vero modi et iste ut officia itaque quos minus, vitae dolorem quasi? Quisquam nemo veniam quis officiis, fugiat inventore obcaecati, commodi dicta labore in dolorem. Sint ad illo voluptate cupiditate, error dignissimos iure doloremque sunt placeat corrupti. Veritatis labore quaerat fuga, non beatae veniam magni laudantium vitae deserunt ipsa, sit nobis reiciendis quo atque aspernatur! Ducimus repellat laboriosam dolor veniam, numquam rem iure suscipit eum doloremque maiores aliquam adipisci molestias perspiciatis quasi iusto deserunt laborum fugiat dolore corporis velit neque nisi. Pariatur in nam dolor maiores nihil ipsum praesentium, magnam eveniet sapiente necessitatibus vitae soluta dolorem dolorum. Ullam consectetur cupiditate quod iure consequuntur neque beatae harum delectus rem nihil culpa alias quo voluptates debitis optio sint tempore, aliquid exercitationem ea doloremque laudantium vel nisi placeat. Similique tempora ad possimus delectus minima. In, sint sapiente dolor sunt placeat enim nulla cupiditate exercitationem nemo, excepturi dolores ullam. Exercitationem voluptate repellat incidunt nulla eius nisi, vero et magni provident? Impedit dolorum eveniet neque ducimus soluta, quo possimus magnam veniam excepturi doloremque ipsum, eius debitis vel delectus similique officiis! Vitae alias et odio veritatis libero, nobis obcaecati iste voluptas dolore velit culpa iusto at. A in non quasi obcaecati impedit ad facere laboriosam, veritatis debitis adipisci magnam culpa voluptatum atque doloribus doloremque possimus inventore asperiores quibusdam deserunt enim. Aspernatur iusto corporis, dolorum ullam sunt repudiandae debitis nulla. Iste excepturi commodi sequi voluptates iure, possimus corporis fuga, harum pariatur beatae vero ut voluptatum facilis cumque totam quas mollitia eveniet debitis blanditiis! Nulla eligendi soluta inventore veniam odio possimus error incidunt dolores quis odit, illum sed illo minima accusantium ex molestias deserunt voluptate facere! Iste est, nostrum doloribus similique amet nobis saepe. Neque iste eveniet rerum cupiditate laudantium autem voluptatum ipsa quas vero dicta, amet qui voluptatibus illum sint aperiam reprehenderit itaque! Corrupti, ducimus facere adipisci eaque laboriosam nam quaerat voluptate quae voluptatibus explicabo quas reiciendis quisquam veniam expedita. Porro praesentium placeat deleniti dolores maiores odio quaerat voluptate nemo, sit officia neque sapiente magni ducimus earum, tempora repellat corrupti accusamus! Velit alias saepe reprehenderit ratione placeat delectus quisquam accusamus, temporibus quis sed, ducimus tenetur ullam magnam. Architecto qui harum itaque impedit quaerat. Aperiam qui quisquam voluptatibus ea? Quae mollitia harum natus nulla corporis suscipit a cum perspiciatis assumenda necessitatibus ipsa ex optio unde sed laboriosam blanditiis culpa reprehenderit ipsum beatae, soluta ullam quasi, expedita dicta? Id sapiente optio, provident quasi quidem eos adipisci autem dolorum omnis molestiae doloribus sit, et maiores ea, nesciunt similique aperiam corrupti fugit repellendus? Illum maxime obcaecati, animi tenetur eos totam. Sint iure omnis velit aspernatur quibusdam eveniet, in dicta inventore vitae, pariatur illo. Illo modi esse ad nihil asperiores fugit suscipit, mollitia voluptatem at minus facere enim rem commodi deleniti fugiat placeat aut eius voluptas? Id ut dolorum distinctio, eum veniam quo odit sit est repellendus sequi, quisquam quis quam consequuntur vero error praesentium quas officia odio illo consectetur similique ab? Corrupti nisi accusamus tempora ullam quasi ipsa molestiae illum cum et, repellat quis eveniet sequi optio fuga eius atque quaerat quo. Maxime, ex adipisci minima porro, ipsam quae aliquam iste aperiam debitis architecto nemo ullam quo dolorum reiciendis. Omnis consequatur vero aut dolor obcaecati, est nobis perferendis sed sequi dignissimos voluptatibus praesentium fugit non ipsam id! Omnis officia quam maxime accusantium, ipsam praesentium magni aspernatur ducimus esse magnam ea quibusdam deserunt. Repellendus dolores vero esse autem natus labore officiis omnis quasi dolore recusandae, nesciunt cum? Odio sapiente ut tenetur accusamus in, modi quam a ea aperiam dolor dolorem tempore, possimus deleniti nobis officiis! Harum similique voluptatibus placeat nulla, provident illum ipsam fuga beatae vitae possimus odio suscipit sed eaque eveniet libero iusto voluptates quod labore, quas optio iure unde? Quos blanditiis similique optio reiciendis ullam molestiae cum, quis ducimus nisi labore, consequuntur est soluta illum tempora, doloremque itaque non nesciunt saepe minus necessitatibus ex! Voluptatum, modi distinctio ullam unde neque quisquam excepturi impedit quae harum eum sit corporis assumenda dignissimos fuga sunt alias illum doloribus voluptatem, aliquid quia! Id sunt facilis odio soluta, accusamus vel voluptatum aut deserunt rerum laborum placeat adipisci doloribus! Deserunt, quisquam molestiae.

43 | 44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | 15 | .content { 16 | padding: 12px 15px; 17 | border: 1px solid #222; 18 | max-width: 400px; 19 | margin: 0 auto; 20 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | 15 | --------------------------------------------------------------------------------