├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── assets
    │   ├── limoenen.png
    │   ├── citroenen.jpeg
    │   ├── ijsblokjes.jpg
    │   ├── header-background.jpg
    │   ├── screenshot-eindresultaat.png
    │   └── winkelmandje.svg
    ├── App.js
    ├── setupTests.js
    ├── reportWebVitals.js
    ├── index.js
    └── App.css
├── .gitignore
├── package.json
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitpeut/frontend-react-fruit-perfection/master/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitpeut/frontend-react-fruit-perfection/master/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitpeut/frontend-react-fruit-perfection/master/public/logo512.png


--------------------------------------------------------------------------------
/src/assets/limoenen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitpeut/frontend-react-fruit-perfection/master/src/assets/limoenen.png


--------------------------------------------------------------------------------
/src/assets/citroenen.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitpeut/frontend-react-fruit-perfection/master/src/assets/citroenen.jpeg


--------------------------------------------------------------------------------
/src/assets/ijsblokjes.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitpeut/frontend-react-fruit-perfection/master/src/assets/ijsblokjes.jpg


--------------------------------------------------------------------------------
/src/assets/header-background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitpeut/frontend-react-fruit-perfection/master/src/assets/header-background.jpg


--------------------------------------------------------------------------------
/src/assets/screenshot-eindresultaat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitpeut/frontend-react-fruit-perfection/master/src/assets/screenshot-eindresultaat.png


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './App.css';
 3 | 
 4 | function App() {
 5 |   return (
 6 |     <div>
 7 |       Begin hier met de tutorial!
 8 |     </div>
 9 |   );
10 | }
11 | 
12 | export default App;
13 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.idea
 6 | /.pnp
 7 | .pnp.js
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # production
13 | /build
14 | 
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | import reportWebVitals from './reportWebVitals';
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root'),
11 | );
12 | 
13 | // If you want to start measuring performance in your app, pass a function
14 | // to log results (for example: reportWebVitals(console.log))
15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
16 | reportWebVitals();
17 | 


--------------------------------------------------------------------------------
/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/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="EdHub React tutorial: Fruit Perfection webpage"
10 |       content="Created for Novi Hogeschool"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
14 |     <title>EdHub React tutorial: Fruit Perfection webpage</title>
15 |   </head>
16 |   <body>
17 |     <noscript>You need to enable JavaScript to run this app.</noscript>
18 |     <div id="root"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "frontend-react-fruit-perfection",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.5",
 7 |     "@testing-library/react": "^11.1.2",
 8 |     "@testing-library/user-event": "^12.2.2",
 9 |     "react": "^17.0.1",
10 |     "react-dom": "^17.0.1",
11 |     "react-scripts": "4.0.0",
12 |     "web-vitals": "^0.2.4"
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 | 


--------------------------------------------------------------------------------
/src/assets/winkelmandje.svg:
--------------------------------------------------------------------------------
1 | <svg enable-background="new 0 0 511.343 511.343" viewBox="0 0 511.343 511.343" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="m490.334 106.668h-399.808l-5.943-66.207c-.972-10.827-10.046-19.123-20.916-19.123h-42.667c-11.598 0-21 9.402-21 21s9.402 21 21 21h23.468c12.825 142.882-20.321-226.415 24.153 269.089 1.714 19.394 12.193 40.439 30.245 54.739-32.547 41.564-2.809 102.839 50.134 102.839 43.942 0 74.935-43.826 59.866-85.334h114.936c-15.05 41.455 15.876 85.334 59.866 85.334 35.106 0 63.667-28.561 63.667-63.667s-28.561-63.667-63.667-63.667h-234.526c-15.952 0-29.853-9.624-35.853-23.646l335.608-19.724c9.162-.538 16.914-6.966 19.141-15.87l42.67-170.67c3.308-13.234-6.71-26.093-20.374-26.093zm-341.334 341.337c-11.946 0-21.666-9.72-21.666-21.667s9.72-21.667 21.666-21.667c11.947 0 21.667 9.72 21.667 21.667s-9.72 21.667-21.667 21.667zm234.667 0c-11.947 0-21.667-9.72-21.667-21.667s9.72-21.667 21.667-21.667 21.667 9.72 21.667 21.667-9.72 21.667-21.667 21.667zm47.366-169.726-323.397 19.005-13.34-148.617h369.142z"/>
3 | </svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Fruit Perfection Tutorial
 2 | 
 3 | Deze tutorial is ontwikkelt om je stapsgewijs wegwijs te maken in React, 
 4 | naar aanleiding van de content uit de cursus **React** op EdHub.
 5 | 
 6 | Het project is opgezet met [Create React App](https://github.com/facebook/create-react-app).
 7 | 
 8 | ## Eindresultaat
 9 | Wanneer je de tutorial afgerond hebt, zal de webpagina er zo uit komen te zien:
10 | 
11 | ![Screenshot eindresultaat](src/assets/screenshot-eindresultaat.png)
12 | 
13 | ## De applicatie starten
14 | Als je het project gecloned hebt naar jouw locale machine, installeer je eerst de node_modules 
15 | door het volgende commando in de terminal te runnen:
16 | 
17 | `npm install`
18 | 
19 | Wanneer dit klaar is, kun je de applicatie starten met behulp van:
20 | 
21 | `npm start`
22 | 
23 | of gebruik de WebStorm knop (npm start). Open [http://localhost:3000](http://localhost:3000) om 
24 | de pagina in de browser te bekijken. Begin met het maken van wijzigingen in `src/App.js`: 
25 | elke keer als je een bestand opslaat, zullen de wijzigingen te zien zijn op de webpagina.
26 | 
27 | 
28 | ## Tussenstappen bekijken
29 | De tutorial werkt in stapjes. Na elke stap kun je de bijbehorende branch bekijken om te zien hoe de 
30 | applicatie er op dat moment uit zou moeten zien:
31 | 1. Einde paragraaf [2.2](https://github.com/hogeschoolnovi/frontend-react-fruit-perfection/blob/stap-1/src/App.js)
32 | 2. Einde paragraaf [2.3](https://github.com/hogeschoolnovi/frontend-react-fruit-perfection/tree/stap-2/src)
33 | 3. Einde paragraaf [2.4](https://github.com/hogeschoolnovi/frontend-react-fruit-perfection/blob/stap-3/src/App.js)
34 | 4. Einde paragraaf [2.5](https://github.com/hogeschoolnovi/frontend-react-fruit-perfection/blob/stap-4/src/App.js)
35 | 5. Einde paragraaf [3.2](https://github.com/hogeschoolnovi/frontend-react-fruit-perfection/blob/stap-5/src/App.js)
36 | 6. Einde paragraaf [3.4](https://github.com/hogeschoolnovi/frontend-react-fruit-perfection/blob/stap-6/src/App.js)
37 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600&display=swap');
  2 | 
  3 | * {
  4 |   padding: 0;
  5 |   margin: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 |   font-family: "Poppins", sans-serif;
 11 | }
 12 | 
 13 | header {
 14 |   position: relative;
 15 |   width: 100%;
 16 |   height: 100vh;
 17 |   display: flex;
 18 |   flex-direction: column;
 19 |   justify-content: center;
 20 |   align-items: center;
 21 |   background: url('./assets/header-background.jpg') no-repeat center center fixed;
 22 |   background-size: cover;
 23 |   color: white;
 24 | }
 25 | 
 26 | header button {
 27 |   background-color: white;
 28 |   font-weight: 600;
 29 |   border: none;
 30 |   padding: 24px 48px;
 31 |   font-size: 20px;
 32 |   color: #df7c6d;
 33 | }
 34 | 
 35 | header button:hover {
 36 |   cursor: pointer;
 37 | }
 38 | 
 39 | header h1 {
 40 |   font-size: 72px;
 41 |   padding: 48px 0;
 42 |   color: white;
 43 | }
 44 | 
 45 | .shopping-cart-icon {
 46 |   width: 32px;
 47 |   height: 32px;
 48 | }
 49 | 
 50 | .shopping-cart-icon > path {
 51 |   fill: white;
 52 | }
 53 | 
 54 | nav {
 55 |   position: absolute;
 56 |   top: 0;
 57 |   left: 0;
 58 |   width: 100%;
 59 |   height: 120px;
 60 |   padding: 0 48px;
 61 |   z-index: 1;
 62 | 
 63 |   display: flex;
 64 |   flex-direction: row;
 65 |   justify-content: space-between;
 66 |   align-items: center;
 67 | }
 68 | 
 69 | nav ul {
 70 |   list-style: none;
 71 |   display: flex;
 72 |   flex-direction: row;
 73 |   justify-content: space-between;
 74 |   width: 200px;
 75 | }
 76 | 
 77 | nav a,
 78 | nav a:visited {
 79 |   color: white;
 80 |   text-decoration: none;
 81 | }
 82 | 
 83 | nav a:hover {
 84 |   text-decoration: underline;
 85 | }
 86 | 
 87 | footer {
 88 |   display: flex;
 89 |   justify-content: flex-start;
 90 |   background-color:#e9b716;
 91 |   padding: 100px;
 92 |   height: 400px;
 93 |   color: white;
 94 | }
 95 | 
 96 | footer input[type=text] {
 97 |   padding: 12px 4px;
 98 |   margin: 16px 0 0;
 99 |   width: 100%;
100 |   font-size: 18px;
101 |   outline: none;
102 | }
103 | 
104 | footer input[type=text].input-error {
105 |   border: 1px solid red;
106 | }
107 | 
108 | footer input[type=checkbox] {
109 |   margin: 16px 8px 16px 0;
110 | }
111 | 
112 | footer button {
113 |   background-color: white;
114 |   font-weight: 600;
115 |   border: none;
116 |   padding: 16px 32px;
117 |   margin: 16px 0;
118 |   font-size: 20px;
119 |   color: #df7c6d;
120 | }
121 | 
122 | footer button:disabled {
123 |   background-color: #ededed;
124 |   color: gray;
125 | }
126 | 
127 | 
128 | main {
129 |   display: flex;
130 |   flex-direction: row;
131 |   justify-content: space-between;
132 |   padding: 100px;
133 | }
134 | 
135 | .form-container {
136 |   width: 400px;
137 | }
138 | 
139 | .product {
140 |   display: flex;
141 |   flex-direction: column;
142 |   align-items: center;
143 |   color: #333333;
144 |   width: 30%;
145 | }
146 | 
147 | .product-name {
148 |   font-weight: 300;
149 |   color: #df7c6d;
150 |   margin: 20px 0;
151 | }
152 | 
153 | .product-description {
154 |   font-weight: 200;
155 |   font-size: 16px;
156 |   text-align: justify;
157 | }
158 | 
159 | .product img {
160 |   width: 300px;
161 | }
162 | 
163 | .error-message {
164 |   color: red;
165 |   font-size: 14px;
166 | }


--------------------------------------------------------------------------------