{"version":3,"sources":["img/nl.png","img/us.png","img/1280px-React-icon.svg.png","assets/Course summary React Fundamentals.pdf","assets/Course summary React Fundamentals-NL.pdf","img/reacttraining-code-bg1.nl.png","img/reacttraining-code-bg2.nl.png","data/NavigationLinks.js","components/navigation/FooterNavigation.js","components/navigation/MainNavigation.js","components/home/HomeAbout.js","components/home/HomeHero.js","components/GoogleMaps/GoogleMaps.js","components/home/ContactPlusAddress.js","components/home/HomeParallax.js","components/home/HomeFeatures.js","components/home/index.js","data/content-fundamentals.js","components/training/Content.js","data/prerequisites.js","components/training/Prereq.js","data/content-abstract.js","components/training/More.js","components/training/index.js","components/dates/index.js","components/information/index.js","components/contact/index.js","components/App.js","index.js"],"names":["module","exports","navLinks","path","text","FooterNavigation","className","href","target","rel","map","link","index","key","to","Date","getFullYear","MainNavigation","type","data-toggle","data-target","aria-controls","aria-expanded","aria-label","id","exact","activeClassName","Component","HomeAbout","sectionStyle","margin","padding","HomeHero","style","bgImage","require","bgImageAlt","strength","blur","alt","src","ReactLogo","GOOGLE_MAP_API_KEY","myLocation","lat","lng","mapStyles","width","height","GoogleMaps","props","googleMapRef","React","createRef","googleMap","useRef","marker","useEffect","googleMapScript","document","createElement","window","body","appendChild","addEventListener","current","google","maps","Map","zoom","center","Marker","position","ref","ContactPlusAddress","HomeParallax","HomeFeatures","HomePage","contentFundamentals","header","Content","content","item","i","j","paddingLeft","prerequisites","Prereq","contentAbstract","pStyles","marginBottom","lineHeight","More","more","TrainingPage","useRouteMatch","url","scrollTo","courseSummaryUS","flagUs","courseSummaryNL","flagNl","Dates","useState","dates","setDates","axios","get","then","response","validDates","data","filter","date","parse","startDate","toUTCString","length","dateText","subject","duration","colSpan","lang","title","border","frameBorder","scrolling","Information","Contact","action","method","name","required","placeholder","rows","App","ReactDOM","render","getElementById"],"mappings":"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","file":"static/js/main.d2fe2cc4.chunk.js","sourcesContent":["module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFXSURBVHjaYvzPgAD/UNlYEUAAkuTgCAAIBgJggq5VoAs1qM0vdzmMz362vezjokxPGimkEQ5WoAQEKuK71zwCCKyB4c//J8+BShn+/vv/+w/D399AEox+//8FJH/9/wUU+cUoKw20ASCAWBhEDf/LyDOw84BU//kDtgGI/oARmAHRDJQSFwVqAAggxo8fP/Ly8oKc9P8/AxjiAoyMjA8ePAAIIJZ///5BVIM0MOBWDpRlZPzz5w9AALH8gyvCbz7QBrCJAAHEyKDYX15r/+j1199//v35++/Xn7+///77DST/wMl/f4Dk378K4jx7O2cABBALw7NP77/+ev3xB0gOpOHfr99AdX9/gTVASKCGP//+8XCyMjC8AwggFoZfIHWSwpwQk4CW/AYjsKlA8u+ff////v33998/YPgBnQQQQIzAaGNg+AVGf5AYf5BE/oCjGEIyAQQYAGvKZ4C6+xXRAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHzSURBVHjaYkxOP8IAB//+Mfz7w8Dwi4HhP5CcJb/n/7evb16/APL/gRFQDiAAw3JuAgAIBEDQ/iswEERjGzBQLEru97ll0g0+3HvqMn1SpqlqGsZMsZsIe0SICA5gt5a/AGIEarCPtFh+6N/ffwxA9OvP/7//QYwff/6fZahmePeB4dNHhi+fGb59Y4zyvHHmCEAAAW3YDzQYaJJ93a+vX79aVf58//69fvEPlpIfnz59+vDhw7t37968efP3b/SXL59OnjwIEEAsDP+YgY53b2b89++/awvLn98MDi2cVxl+/vl6mituCtBghi9f/v/48e/XL86krj9XzwEEEENy8g6gu22rfn78+NGs5Ofr16+ZC58+fvyYwX8rxOxXr169fPny+fPn1//93bJlBUAAsQADZMEBxj9/GBxb2P/9+S/R8u3vzxuyaX8ZHv3j8/YGms3w8ycQARmi2eE37t4ACCDGR4/uSkrKAS35B3TT////wADOgLOBIaXIyjBlwxKAAGKRXjCB0SOEaeu+/y9fMnz4AHQxCP348R/o+l+//sMZQBNLEvif3AcIIMZbty7Ly6t9ZmXl+fXj/38GoHH/UcGfP79//BBiYHjy9+8/oUkNAAHEwt1V/vI/KBY/QSISFqM/GBg+MzB8A6PfYC5EFiDAABqgW776MP0rAAAAAElFTkSuQmCC\"","module.exports = __webpack_public_path__ + \"static/media/1280px-React-icon.svg.638be909.png\";","module.exports = __webpack_public_path__ + \"static/media/Course summary React Fundamentals.0dee507e.pdf\";","module.exports = __webpack_public_path__ + \"static/media/Course summary React Fundamentals-NL.34a1a378.pdf\";","module.exports = __webpack_public_path__ + \"static/media/reacttraining-code-bg1.nl.40f22628.png\";","module.exports = __webpack_public_path__ + \"static/media/reacttraining-code-bg2.nl.3dc54967.png\";","const navLinks=[\r\n    {\r\n        path: '/',\r\n        text: 'Home'\r\n    },\r\n    {\r\n        path: '/training',\r\n        text: 'Training'\r\n    },\r\n    {\r\n        path: '/dates',\r\n        text: 'Dates'\r\n    },\r\n    {\r\n        path: '/information',\r\n        text: 'Information'\r\n    },\r\n    {\r\n        path: '/contact',\r\n        text: 'Contact'\r\n    }\r\n];\r\n\r\nexport default navLinks\r\n","import React from 'react';\r\nimport {Link} from \"react-router-dom\";\r\nimport navLinks from '../../data/NavigationLinks'\r\n\r\nfunction FooterNavigation() {\r\n\r\n    return (\r\n        <div>\r\n            <footer className=\"site-footer\">\r\n                <div className=\"bottom\">\r\n                    <div className=\"container\">\r\n                        <div className=\"row\">\r\n\r\n                            <div className=\"col-lg-6 col-xs-12 text-lg-left text-center\">\r\n                                <p className=\"copyright-text\">\r\n                                    &copy; BELL Theme\r\n                                </p>\r\n                                <div className=\"credits\">\r\n\r\n                                    {/*<!--*/}\r\n                                    {/*  All the links in the footer should remain intact.*/}\r\n                                    {/*  You can delete the links only if you purchased the pro version.*/}\r\n                                    {/*  Licensing information: https://bootstrapmade.com/license/*/}\r\n                                    {/*  Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Bell*/}\r\n                                    {/*-->*/}\r\n\r\n                                    Designed by <a href=\"https://bootstrapmade.com/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                                        BootstrapMade\r\n                                    </a>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div className=\"col-lg-6 col-xs-12 text-lg-right text-center\">\r\n                                <ul className=\"list-inline\">\r\n                                    {navLinks.map((link, index) => {\r\n                                        return (\r\n                                            <li className=\"list-inline-item\" key={index}>\r\n                                                <Link to={link.path}>\r\n                                                    {link.text}\r\n                                                </Link>\r\n                                            </li>\r\n                                        )\r\n                                    })}\r\n                                </ul>\r\n                                <hr className=\"bg-white\"/>\r\n                                <p className=\"credits\">\r\n                                    Reacttraining.nl is part of <a href=\"https://kassenaar.com/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\n                                        Kassenaar IT Services\r\n                                    </a> - &copy; {new Date().getFullYear()}\r\n                                </p>\r\n                            </div>\r\n\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </footer>\r\n            <a className=\"scrolltop\" href=\"/#\">\r\n                <span className=\"fa fa-angle-up\" /></a>\r\n        </div>\r\n    );\r\n}\r\n\r\nexport default FooterNavigation;\r\n","import React, {Component} from 'react';\r\nimport {Link, NavLink} from \"react-router-dom\";\r\nimport navLinks from \"../../data/NavigationLinks\";\r\n\r\nclass MainNavigation extends Component {\r\n    render() {\r\n        return (\r\n            <nav className=\"navbar navbar-expand-lg sticky-top navbar-dark bg-primary\">\r\n                <Link to=\"/\" className=\"navbar-brand\">ReactTraining.nl</Link>\r\n                <button className=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\"\r\n                        data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\"\r\n                        aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n                    <span className=\"navbar-toggler-icon\"/>\r\n                </button>\r\n                <div className=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\r\n                    <ul className=\"navbar-nav mr-auto\">\r\n                        {\r\n                            navLinks.map((link, index) => {\r\n                                    // Home page should not be styled differently if not an exact match\r\n                                    if (link.path === '/') {\r\n                                        return <li className=\"nav-item\" key={index}>\r\n                                            <NavLink to={link.path} exact={true} activeClassName=\"router-link-active\"\r\n                                                     className=\"nav-link\">\r\n                                                {link.text}\r\n                                            </NavLink>\r\n                                        </li>\r\n                                    } else {\r\n                                        // all other routes\r\n                                        return <li className=\"nav-item\" key={index}>\r\n                                            <NavLink to={link.path}\r\n                                                     activeClassName=\"router-link-active\"\r\n                                                     className=\"nav-link\">\r\n                                                {link.text}\r\n                                            </NavLink>\r\n                                        </li>\r\n                                    }\r\n                                }\r\n                            )\r\n                        }\r\n                    </ul>\r\n                </div>\r\n            </nav>\r\n        );\r\n    }\r\n}\r\n\r\nexport default MainNavigation;\r\n","import React from 'react';\r\n\r\nfunction HomeAbout() {\r\n\r\n    return (\r\n\r\n        <section className=\"about\">\r\n            <div className=\"container text-center\">\r\n\r\n                <h2>\r\n                    We teach React\r\n                </h2>\r\n\r\n                <p>\r\n                    React is a JavaScript library created by Facebook. It is currently one of the most popular\r\n                    libraries for building web applications.\r\n                    It is used by many Fortune-500 companies including Instagram, Airbnb, BBC and Dropbox.\r\n                    We know React inside out. Want to learn React in a real life classroom? Come and follow a\r\n                    training with us!\r\n                </p>\r\n\r\n                <div className=\"row stats-row\">\r\n                    <div className=\"stats-col text-center col-md-4 col-sm-6\">\r\n                        <div className=\"circle\">\r\n                            <span className=\"stats-no\" data-toggle=\"counter-up\">4.8</span>\r\n                            Average rating<br />\r\n                            4.8****/5\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div className=\"stats-col text-center col-md-4 col-sm-6\">\r\n                        <div className=\"circle\">\r\n                            <span className=\"stats-no\" data-toggle=\"counter-up\">3000+</span>\r\n                            Students since 1996\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div className=\"stats-col text-center col-md-4 col-sm-6\">\r\n                        <div className=\"circle\">\r\n                            <span className=\"stats-no\" data-toggle=\"counter-up\">7</span>\r\n                            Countries since 2019\r\n                        </div>\r\n                    </div>\r\n\r\n\r\n                </div>\r\n            </div>\r\n        </section>\r\n\r\n    );\r\n}\r\n\r\nexport default HomeAbout;\r\n","import React from 'react';\r\nimport ReactLogo from \"../../img/1280px-React-icon.svg.png\";\r\nimport {Link} from \"react-router-dom\";\r\nimport {Parallax} from \"react-parallax\";\r\n\r\n// hack, to override default section style in Bell style.css\r\nconst sectionStyle = {\r\n    margin: 0,\r\n    padding: 0\r\n};\r\n\r\nfunction HomeHero() {\r\n\r\n    return (\r\n        <section style={sectionStyle}>\r\n            <Parallax\r\n                bgImage={require('../../img/reacttraining-code-bg1.nl.png')}\r\n                bgImageAlt=\"Parallax background image\"\r\n                strength={500}\r\n                blur={2}\r\n            >\r\n                <div className=\"container text-center my-5\">\r\n                    <div className=\"row\">\r\n                        <div className=\"col-md-12\">\r\n                            <img alt=\"React Logo\"\r\n                                 className=\"reactLogo\"\r\n                                 src={ReactLogo}/>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div className=\"col-md-12\">\r\n                        <h1 className=\"text-white\">\r\n                            We have switched gears\r\n                        </h1>\r\n\r\n                        <p className=\"tagline\">\r\n                            Currently no trainings are provided.\r\n                            Read the <a href=\"https://www.kassenaar.com/blog/post/2023/03/06/Veranderingen.aspx\"\r\n                                        target=\"_blank\">full statement</a> here.\r\n                        </p>\r\n                        <a href=\"https://www.kassenaar.com/blog/post/2023/03/06/Veranderingen.aspx\" target=\"_blank\"\r\n                           className=\"btn\">Full statement</a>\r\n                    </div>\r\n                </div>\r\n            </Parallax>\r\n        </section>\r\n    );\r\n}\r\n\r\nexport default HomeHero;\r\n","import React, {useEffect, useRef} from 'react';\r\n\r\n// Creating a Google Map from scratch in React.\r\n// Credits: https://engineering.universe.com/building-a-google-map-in-react-b103b4ee97f1\r\n// Other Article, using the google-maps-react library from fullstack.io ( but decided not\r\n// to use in this case): https://dev.to/jessicabetts/how-to-use-google-maps-api-and-react-js-26c2\r\n\r\n// My variables\r\nconst GOOGLE_MAP_API_KEY = 'AIzaSyAWh-P7BQdfppx4zmtS8Mjd8UP0ZyqQwUY';\r\nconst myLocation = { // Laarstraat 47, Zutphen, NL\r\n    lat: 52.141328,\r\n    lng: 6.201374\r\n};\r\n// styles\r\nconst mapStyles = {\r\n    width: '100%',\r\n    height: '400px',\r\n};\r\n\r\nfunction GoogleMaps(props) {\r\n    // refs\r\n    const googleMapRef = React.createRef();\r\n    const googleMap = useRef(null);\r\n    const marker = useRef(null);\r\n\r\n    // helper functions\r\n    const createGoogleMap = () =>\r\n        new window.google.maps.Map(googleMapRef.current, {\r\n            zoom: 14,\r\n            center: {\r\n                lat: myLocation.lat,\r\n                lng: myLocation.lng\r\n            }\r\n        });\r\n\r\n    const createMarker = () =>\r\n        new window.google.maps.Marker({\r\n            position: {\r\n                lat: myLocation.lat,\r\n                lng: myLocation.lng\r\n            },\r\n            map: googleMap.current\r\n        });\r\n\r\n    // useEffect Hook\r\n    useEffect(() => {\r\n        const googleMapScript = document.createElement('script');\r\n        googleMapScript.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API_KEY}&libraries=places`;\r\n        window.document.body.appendChild(googleMapScript);\r\n\r\n        googleMapScript.addEventListener('load', () => {\r\n            googleMap.current = createGoogleMap();\r\n            marker.current = createMarker()\r\n        });\r\n\r\n        // componentWillUnmount(), reset Google Maps to prevent errors on subsequent load.\r\n        return () => {\r\n           window.google = {}\r\n        }\r\n    });\r\n\r\n    // UI\r\n    return (\r\n        <div\r\n            id=\"google-map\"\r\n            ref={googleMapRef}\r\n            style={mapStyles}\r\n        />\r\n    )\r\n}\r\n\r\nexport default GoogleMaps\r\n","import React from 'react';\r\nimport GoogleMaps from \"../GoogleMaps/GoogleMaps\";\r\n\r\nfunction ContactPlusAddress () {\r\n\r\n  return (\r\n      <section className=\"contact\">\r\n          <div className=\"container text-center\">\r\n              <div className=\"row\">\r\n                  <div className=\"col-md-8\">\r\n                      <GoogleMaps/>\r\n                  </div>\r\n                  <div className=\"col-md-4\">\r\n                      <div className=\"card\">\r\n                          <div className=\"card-body\">\r\n                              <h2 className=\"card-title\">Contact us</h2>\r\n                              <address>\r\n                                  <p>\r\n                                      <i className=\"fa fa-3x fa-map-marker\"/><br/>\r\n                                      Laarstraat 47a <br/>\r\n                                      7201 CB Zutphen <br/>\r\n                                      Netherlands\r\n                                  </p>\r\n                              </address>\r\n                              <p>\r\n                                  <i className=\"fa fa-3x fa-phone\"/><br/>\r\n                                  +31-(0)6 233 371 65\r\n                              </p>\r\n                              <p>\r\n                                  <i className=\"fa fa-3x fa-envelope\"/><br/>\r\n                                  <a href=\"mailto:info@reacttraining.nl\">info@reacttraining.nl</a>\r\n                              </p>\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n          </div>\r\n      </section>\r\n  );\r\n}\r\n\r\nexport default ContactPlusAddress;\r\n","import React from 'react';\r\nimport {Parallax} from \"react-parallax\";\r\nimport {Link} from \"react-router-dom\";\r\n\r\nfunction HomeParallax() {\r\n\r\n    return (\r\n        <section className='parallax'>\r\n            <Parallax\r\n                bgImage={require('../../img/reacttraining-code-bg2.nl.png')}\r\n                bgImageAlt=\"Parallax background image\"\r\n                strength={500}\r\n                blur={2}\r\n            >\r\n                <div className=\"container text-white text-center\">\r\n                    <div className=\"row\" style={{padding: '40px 0'}}>\r\n                        <div className=\"col\">\r\n                            <h2>Learn React with us!</h2>\r\n                            <p className=\"tagline\">Kickstart your React knowledge today.</p>\r\n                            <Link to=\"/training\" className=\"btn\">\r\n                                Learn More\r\n                            </Link>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </Parallax>\r\n        </section>\r\n    );\r\n}\r\n\r\nexport default HomeParallax;\r\n","import React from 'react';\r\n\r\nfunction HomeFeatures() {\r\n\r\n    return (\r\n        <section className=\"features\" id=\"features\">\r\n            <div className=\"container\">\r\n\r\n                <h2 className=\"text-center\">What others say...</h2>\r\n                <div className=\"row\">\r\n                    {/*Testimonials #1 */}\r\n                    <div className=\"feature-col col-lg-4 col-xs-12\">\r\n                        <div className=\"card card-block text-center\">\r\n                            <div>\r\n                                <div className=\"feature-icon\">\r\n                                    <span className=\"fa fa-rocket\"/>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div>\r\n                                <h3>\r\n                                    \"Excellent teacher\"\r\n                                </h3>\r\n\r\n                                <p>\r\n                                    \"Teacher with excellent knowledge. There was enough time for questions, but also the\r\n                                    opportunity to anticipate to excersises in advance.\"\r\n                                </p>\r\n                                <p className=\"text-muted\">\r\n                                    - Johan Helmus, ATOS\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/*Testimonials #2 */}\r\n                    <div className=\"feature-col col-lg-4 col-xs-12\">\r\n                        <div className=\"card card-block text-center\">\r\n                            <div>\r\n                                <div className=\"feature-icon\">\r\n                                    <span className=\"fa fa-exclamation\"/>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div>\r\n                                <h3>\r\n                                    \"Great course\"\r\n                                </h3>\r\n\r\n                                <p>\r\n                                    \"Good course, good explanation. You could do the exercises from scratch, or based on\r\n                                    available front-end code. Good examples.\"\r\n                                </p>\r\n                                <p className=\"text-muted\">\r\n                                    - Mona-Marie Kolff, SVB\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    {/*Testimonials #3 */}\r\n                    <div className=\"feature-col col-lg-4 col-xs-12\">\r\n                        <div className=\"card card-block text-center\">\r\n                            <div>\r\n                                <div className=\"feature-icon\">\r\n                                    <span className=\"fa fa-bolt\"/>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div>\r\n                                <h3>\r\n                                    \"Learned so much\"\r\n                                </h3>\r\n\r\n                                <p>\r\n                                    \"I really learned a lot, and the explanations during the course were very clear.\"\r\n                                </p>\r\n                                <p className=\"text-muted\">\r\n                                    - Johan Smits, Saxion\r\n                                </p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n        </section>\r\n    );\r\n}\r\n\r\nexport default HomeFeatures;\r\n","import React from 'react';\r\n\r\n// Components on home page\r\nimport HomeAbout from \"./HomeAbout\";\r\nimport HomeHero from \"./HomeHero\";\r\nimport ContactPlusAddress from \"./ContactPlusAddress\";\r\nimport HomeParallax from \"./HomeParallax\";\r\nimport HomeFeatures from \"./HomeFeatures\";\r\n\r\nfunction HomePage() {\r\n    return (\r\n        <>\r\n            {/************ Hero *****************/}\r\n            <HomeHero/>\r\n\r\n            {/**************** About *****************/}\r\n            <HomeAbout/>\r\n\r\n            {/**************** Parallax *****************/}\r\n            <HomeParallax />\r\n\r\n            {/**************** Features *****************/}\r\n            <HomeFeatures/>\r\n\r\n            {/**************** Map/Contact *****************/}\r\n            <ContactPlusAddress/>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default HomePage\r\n","const contentFundamentals = [\r\n    {\r\n        header: 'What is React, overview of the React landscape',\r\n        text: [\r\n            'What a React application looks like',\r\n            'Tooling - working with Create-React-App, React Devtools, Node.js and browser',\r\n            'Your first React Project'\r\n        ]\r\n    },\r\n    {\r\n        header: 'Setting up the environment',\r\n        text: [\r\n            'Creating a project with Create React App',\r\n            'Starting the project',\r\n            'Customizing the home page'\r\n        ]\r\n    },\r\n    {\r\n        header: 'React Components and composition',\r\n        text: [\r\n            'Class based components vs Function based Components',\r\n            'Data and state in components',\r\n            'One-way dataflow principle',\r\n            'Nesting components',\r\n            'Passing props to components',\r\n            '\"Lifting state up\"',\r\n            'Short introduction in React Hooks'\r\n        ]\r\n    },\r\n    {\r\n        header: 'Working with data',\r\n        text: [\r\n            'Loading and showing external data',\r\n            'Showing details',\r\n            'Reacting to events'\r\n        ]\r\n    },\r\n    {\r\n        header: 'Class based lifecycle hooks',\r\n        text: [\r\n            'What are lifecycle hooks?',\r\n            'ComponentDidMount()',\r\n            'ComponentDidUpdate()',\r\n            'ComponentWillUnmount()',\r\n            'Deprecated lifecycle hooks'\r\n        ]\r\n    },\r\n    {\r\n        header: 'Styling React Components',\r\n        text: [\r\n            'Global and local CSS',\r\n            'Working with CSS modules',\r\n            'Working with CSS preprocessors like SASS',\r\n            'Definining inline styles as constants'\r\n        ]\r\n    },\r\n    {\r\n        header: 'Handling User Input',\r\n        text: [\r\n            'Working with form input textfields',\r\n            'More fields: radio buttons, checkboxes, textareas',\r\n            'Selecting user input from dropdown lists'\r\n        ]\r\n    },\r\n    {\r\n        header: 'Communicating with external API\\'s',\r\n        text: [\r\n            'How does React handle external data?',\r\n            'Working with axios',\r\n            'Creating and firing AJAX-requests',\r\n            'Processing AJAX-responses',\r\n            'Creating loading indicator (aka Spinner) components'\r\n        ]\r\n    },\r\n    {\r\n        header: 'Working with React Router',\r\n        text: [\r\n            'What is routing in webapplications?',\r\n            'An alternative: Reach Router',\r\n            'Routing Basics - installation, linking to routes',\r\n            'Styling the active link',\r\n            'Routing parameters',\r\n            'Navigating via code'\r\n        ]\r\n    },\r\n    {\r\n        header: 'React Hooks in depth',\r\n        text: [\r\n            'Functional components revisited',\r\n            'The useState() Hook',\r\n            'The useEffect() Hook',\r\n            'ES6 destructuring syntax',\r\n            'Creating your own Hooks',\r\n        ]\r\n    },\r\n    {\r\n        header: 'A short introduction to Redux',\r\n        text: [\r\n            'What is state management?',\r\n            'Why Redux',\r\n            'The basics of Store, Actions, Reducers and Dispatchers',\r\n            'Next steps'\r\n        ]\r\n    },\r\n    {\r\n        header: 'Deployment',\r\n        text: [\r\n            'Deploying your React app to a production server',\r\n            'Deploying to a local webserver',\r\n            'Deploying to a free online hosting provider',\r\n        ]\r\n    }\r\n];\r\nexport default contentFundamentals\r\n","import React from 'react';\r\n\r\n// data\r\nimport content from '../../data/content-fundamentals'\r\n\r\nfunction Content() {\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<ul className=\"list-group list-group-flush\">\r\n\t\t\t\t{\r\n\t\t\t\t\t// looping over the main items in content-fundamentals.js\r\n\t\t\t\t\tcontent.map((item, i) =>\r\n\t\t\t\t\t\t<li className=\"list-group-item\"\r\n\t\t\t\t\t\t\tkey={i}>\r\n\t\t\t\t\t\t\t<h3>Module {i + 1}: {item.header}</h3>\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t// looping over the nested (text) items\r\n\t\t\t\t\t\t\t\titem.text.map((text, j) =>\r\n\t\t\t\t\t\t\t\t\t<p key={j}\r\n\t\t\t\t\t\t\t\t\t   style={{paddingLeft: '20px'}}>\r\n\t\t\t\t\t\t\t\t\t\t{text}\r\n\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t)\r\n\t\t\t\t}\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport default Content;\r\n","const prerequisites = [\r\n    {\r\n        header: 'HTML',\r\n        text: 'Some knowledge of HTML and CSS.'\r\n    },\r\n    {\r\n        header: 'JavaScript',\r\n        text: 'Thorough knowledge of JavaScript (functions, arrays, objects, functional programming).'\r\n    },\r\n    {\r\n        header: 'Debugging',\r\n        text: 'Experience with debugging web applications in Google Chrome.'\r\n    },\r\n    {\r\n        header: 'MVC',\r\n        text: 'Experience with an MVC-framework like .NET MVC, Java Spring Boot or PHP Laravel, or a frontend framework like Angular of React may come in handy, but is not absolutely necessary.'\r\n    },\r\n    {\r\n        header: 'NodeJS',\r\n        text: 'NodeJS 10.x or higher installed on your laptop. Some knowledge of  NodeJS, working in a command line environment (DOS-prompt) and installing NPM-packages.'\r\n    },\r\n    {\r\n        header: 'English',\r\n        text: 'Some knowledge of the English language. Many websites, documentation and background information are only available in English.'\r\n    }\r\n];\r\nexport default prerequisites;\r\n","import React from 'react';\r\n\r\n// data\r\nimport prerequisites from '../../data/prerequisites'\r\n\r\nfunction Prereq() {\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<ul className=\"list-group list-group-flush\">\r\n\t\t\t\t{\r\n\t\t\t\t\t// looping over the main prerequisites\r\n\t\t\t\t\tprerequisites.map((item, i) =>\r\n\t\t\t\t\t\t<li className=\"list-group-item\"\r\n\t\t\t\t\t\t\tkey={i}>\r\n\t\t\t\t\t\t\t<h3>{item.header}</h3>\r\n\t\t\t\t\t\t\t<p\r\n\t\t\t\t\t\t\t\tstyle={{paddingLeft: '20px'}}>\r\n\t\t\t\t\t\t\t\t{item.text}\r\n\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t)\r\n\t\t\t\t}\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport default Prereq;\r\n","const contentAbstract = [\r\n    {\r\n        header: 'Abstract',\r\n        text:[\r\n            'React is probably the most popular front-end library for creating web applications. Originally, React was created by Facebook, but in 2013 the library was made available as open source. Anyone can work with the source code. React is used by Instagram, Airbnb, Uber, Netflix, Slack and many other companies and organizations, among others.',\r\n            'The React Fundamentals course teaches you the basics of React applications and explains the structure and architecture of React projects. The underlying ideas and concepts of React are discussed in detail. Of course, you will then start working with your own code.',\r\n            'You will learn all about components, the JSX syntax and working with props, state and events. More advanced topics such as communicating with external APIs, working with React Router and the new addition React Hooks will also be discussed. At the end of the training, you can independently create and maintain React applications, or get started with applications developed by others.',\r\n        ]\r\n    },\r\n    {\r\n        header: 'Target audience',\r\n        text: [\r\n            'The React Fundamentals training course is intended for web developers who want to work with this library and have a thorough basic knowledge of JavaScript. In addition, knowledge of HTML and CSS is indispensable',\r\n            'Developers who have a background in Java or C# can usually also quickly get on with React. The most important thing, however, is that your JavaScript knowledge is up to date, including the new ES6 expansions, because this is the language in which programming will eventually take place.'\r\n        ]\r\n    },\r\n    {\r\n        header: 'Training goal',\r\n        text:[\r\n            'After this training, you are familiar with the React ecosystem and you will be able to set up React applications yourself, maintain, expand and roll out other people\\'s applications to production.'\r\n        ]\r\n    }\r\n];\r\n\r\nexport default contentAbstract\r\n","import React from 'react';\r\n\r\n// data\r\nimport more from '../../data/content-abstract'\r\n\r\n// some local styles\r\nconst pStyles = {\r\n\tpaddingLeft: '20px',\r\n\tmarginBottom: '12px',\r\n\tlineHeight: '24px'\r\n};\r\n\r\nfunction More() {\r\n\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<ul className=\"list-group list-group-flush\">\r\n\t\t\t\t{\r\n\t\t\t\t\t// looping over the main items in content-fundamentals.js\r\n\t\t\t\t\tmore.map((item, i) =>\r\n\t\t\t\t\t\t<li className=\"list-group-item\"\r\n\t\t\t\t\t\t\tkey={i}>\r\n\t\t\t\t\t\t\t<h3>{item.header}</h3>\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t// looping over the nested (text) items\r\n\t\t\t\t\t\t\t\titem.text.map((text, j) =>\r\n\t\t\t\t\t\t\t\t\t<p key={j}\r\n\t\t\t\t\t\t\t\t\t   style={pStyles}>\r\n\t\t\t\t\t\t\t\t\t\t{text}\r\n\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t)\r\n\t\t\t\t}\r\n\t\t\t</ul>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport default More;\r\n","import React, {useEffect} from 'react';\r\nimport flagNl from '../../img/nl.png';\r\nimport flagUs from '../../img/us.png';\r\n\r\nimport courseSummaryUS from '../../assets/Course summary React Fundamentals.pdf';\r\nimport courseSummaryNL from '../../assets/Course summary React Fundamentals-NL.pdf';\r\n\r\n// Routing stuff\r\nimport {Link, NavLink, Redirect, Route, Switch, useRouteMatch} from \"react-router-dom\";\r\n\r\n// Components\r\nimport Content from \"./Content\";\r\nimport Prereq from \"./Prereq\";\r\nimport More from \"./More\";\r\n\r\nfunction TrainingPage() {\r\n    // destructure the routes to be used in nested navigation\r\n    let {path, url} = useRouteMatch();\r\n\r\n    // Scroll to top when the user enters the page, but only when the\r\n    // path has changed (so not on internal, nested routing)\r\n    useEffect(()=>{\r\n        window.scrollTo(0,0);\r\n    }, [path]);\r\n\r\n    return (\r\n        <div className=\"container\">\r\n            <div className=\"row\">\r\n                <div className=\"col\">\r\n                    {/***************************************************/}\r\n                    {/* Jumbotron */}\r\n                    {/***************************************************/}\r\n                    <div className=\"jumbotron\">\r\n                        <h1>What's in the training?</h1>\r\n                       <p>\r\n                            <a href={courseSummaryUS}>Extensive course summary (English, PDF, 121 KB)</a>\r\n                            <img src={flagUs} alt=\"Flag USA\"/>\r\n                        </p>\r\n                        <p>\r\n                            <a href={courseSummaryNL}>Uitgebreide samenvating (Nederlands, PDF, 124 KB)</a>\r\n                            <img src={flagNl} alt=\"Flag Netherlands\"/>\r\n                        </p>\r\n                        <p className=\"text-right\">\r\n                            <Link className=\"btn\" to=\"/contact\">Sign up!</Link>\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div className=\"row\">\r\n                <div className=\"col\">\r\n                    {/***************************************************/}\r\n                    {/*Navigation links for training hardcoded...*/}\r\n                    {/***************************************************/}\r\n                    <ul className=\"nav nav-pills\">\r\n                        <li className=\"nav-item\">\r\n                            <NavLink to={`${url}/content`}\r\n                                     activeClassName=\"router-link-active\"\r\n                                     className=\"nav-link\">\r\n                                Content\r\n                            </NavLink>\r\n                        </li>\r\n                        <li className=\"nav-item\">\r\n                            <NavLink to={`${url}/prereq`}\r\n                                     activeClassName=\"router-link-active\"\r\n                                     className=\"nav-link\">\r\n                                Prerequisites\r\n                            </NavLink>\r\n                        </li>\r\n                        <li className=\"nav-item\">\r\n                            <NavLink to={`${url}/more`}\r\n                                     activeClassName=\"router-link-active\"\r\n                                     className=\"nav-link\">\r\n                                More...\r\n                            </NavLink>\r\n                        </li>\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n            <div className=\"row\">\r\n                <div className=\"col\">\r\n                    {/***************************************************/}\r\n                    {/* Content of the tabs */}\r\n                    {/***************************************************/}\r\n                    <Switch>\r\n                        <Route path={`${path}/content`}>\r\n                            <Content/>\r\n                        </Route>\r\n                        <Route path={`${path}/prereq`}>\r\n                            <Prereq/>\r\n                        </Route>\r\n                        <Route path={`${path}/more`}>\r\n                            <More/>\r\n                        </Route>\r\n                        <Route>\r\n                            {/*Default route*/}\r\n                            <Redirect to={`${path}/content`} />\r\n                        </Route>\r\n                    </Switch>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n\r\nexport default TrainingPage;\r\n","import React, {useState, useEffect} from 'react';\r\nimport {Link} from \"react-router-dom\";\r\nimport axios from 'axios'\r\n\r\n// flags\r\nimport flagNl from '../../img/nl.png';\r\nimport flagUs from '../../img/us.png';\r\n\r\nfunction Dates() {\r\n\tconst apiUrl = 'https://www.reacttraining.nl/api/dates.json';\r\n\tconst [dates, setDates] = useState([]);\r\n\tuseEffect(() => {\r\n\t\t// componentDidMount()\r\n\t\taxios.get(apiUrl)\r\n\t\t\t.then(response => {\r\n\t\t\t\t// only include course dates that are in the future\r\n\t\t\t\tconst validDates = response.data.filter(date =>{\r\n\t\t\t\t\treturn Date.parse(date.startDate) > Date.parse(new Date().toUTCString())\r\n\t\t\t\t});\r\n\t\t\t\tsetDates(validDates)\r\n\t\t\t});\r\n\t\t// componentWillUnmount()\r\n\t\treturn () => {\r\n\t\t};\r\n\t}, /*deps*/ []);\r\n\r\n\r\n\treturn (\r\n\t\t<div className=\"container\">\r\n\t\t\t{/* Row - table */}\r\n\t\t\t<div className=\"row my-3\">\r\n\t\t\t\t<div className=\"col-md-8\">\r\n\t\t\t\t\t<h3>Public class dates</h3>\r\n\t\t\t\t\t<p>In person, live, instructor-led classes.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<table className=\"table table-striped\">\r\n\t\t\t\t\t\t<tbody>\r\n\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t<th>Date</th>\r\n\t\t\t\t\t\t\t<th>Subject</th>\r\n\t\t\t\t\t\t\t<th>Duration</th>\r\n\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\tdates.length ?\r\n\t\t\t\t\t\t\tdates.map(date => <tr key={date.id}>\r\n\t\t\t\t\t\t\t\t<td>{date.dateText}</td>\r\n\t\t\t\t\t\t\t\t<td>{date.subject}</td>\r\n\t\t\t\t\t\t\t\t<td>{date.duration}</td>\r\n\t\t\t\t\t\t\t</tr>)\r\n\t\t\t\t\t\t\t\t:\r\n\t\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t\t<td colSpan={2}><em>Due to heavy demand for private classes,\r\n\t\t\t\t\t\t\t\t\t\tcurrently no public classes planned.\r\n\t\t\t\t\t\t\t\t\t\tSee the Calendar below for availability.</em>\r\n\t\t\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t\t\t\t<td>&nbsp;</td>\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t<td colSpan={2}><strong>As always: contact us for a private class at your date, your location</strong>.</td>\r\n\t\t\t\t\t\t\t<td><i>\r\n\t\t\t\t\t\t\t\t<Link to=\"/contact\">\r\n\t\t\t\t\t\t\t\t\tContact us\r\n\t\t\t\t\t\t\t\t</Link></i>\r\n\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t</tbody>\r\n\t\t\t\t\t</table>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"col-md-4\">\r\n\t\t\t\t\t<h3>Class information</h3>\r\n\t\t\t\t\t<p>Classes start with a <strong>minimum of 3</strong> students and have a\r\n\t\t\t\t\t\t&nbsp;<strong>maximum of 10</strong> students.</p>\r\n\t\t\t\t\t<p>Want to know more? See our FAQ in the <Link to=\"/information\">\r\n\t\t\t\t\t\tinformation page.\r\n\t\t\t\t\t</Link>.</p>\r\n\t\t\t\t\t<Link className=\"btn\" to=\"/contact\">Sign up!</Link>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\r\n\t\t\t{/* Row - Calendar legend*/}\r\n\t\t\t<div className=\"row\">\r\n\t\t\t\t<div className=\"col text-center\">\r\n\t\t\t\t\t<hr style={{width: '50%'}}/>\r\n\t\t\t\t\t<h2>Calendar</h2>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div className=\"row\">\r\n\t\t\t\t<div className=\"col-md-6\" lang=\"en\">\r\n\t\t\t\t\t<h2>\r\n\t\t\t\t\t\tBooking a private class?&nbsp;\r\n\t\t\t\t\t\t<img src={flagUs} alt=\"Flag English text\"/>\r\n\t\t\t\t\t</h2>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\tWant to book a class? Avoid disappointments and first check wether your date is available.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<p>Next, please contact <a href=\"mailto:info@reacttraining.nl\">info@reacttraining.nl</a> or use the\r\n\t\t\t\t\t\t&nbsp;<Link to=\"/contact\">Contact Form</Link> to discuss options.</p>\r\n\t\t\t\t\t<hr/>\r\n\t\t\t\t\t<h3>Legend:</h3>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><strong>Bezet</strong> - Date is booked. Contact us for waiting list opportunities.</li>\r\n\t\t\t\t\t\t<li><strong>Optie</strong> - Date has been booked as an option. You can also take an option on\r\n\t\t\t\t\t\t\tthese dates.\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t</ul>\r\n\t\t\t\t\t<p><em>Please note: No rights can be derived from calendar below.</em></p>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"col-md-6\" lang=\"nl\">\r\n\t\t\t\t\t<h2>\r\n\t\t\t\t\t\tIn-company training boeken?&nbsp;\r\n\t\t\t\t\t\t<img src={flagNl} alt=\"vlag Nederlandse tekst\"/>\r\n\t\t\t\t\t</h2>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\tEen training boeken? Voorkom teleurstellingen en check eerst of uw gewenste datum beschikbaar\r\n\t\t\t\t\t\tis.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\tNeem vervolgens contact op via <a\r\n\t\t\t\t\t\thref=\"mailto:info@reacttraining.nl\">info@reacttraining.nl</a> of via het\r\n\t\t\t\t\t\t&nbsp;\r\n\t\t\t\t\t\t<Link to=\"/contact\">Contactformulier</Link> om verdere mogelijkheden te bespreken.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<hr/>\r\n\t\t\t\t\t<h3>Legenda:</h3>\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><strong>Bezet</strong> - datum is definitief geboekt en kan niet worden afgenomen. Neem\r\n\t\t\t\t\t\t\tcontact op voor wachtlijst-mogelijkheden.\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t<li><strong>Optie</strong> - datum is in optie genomen. U kunt ook een optie nemen op deze\r\n\t\t\t\t\t\t\tdagen.\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t</ul>\r\n\t\t\t\t\t<p><em>Let op: aan onderstaande agenda kunnen geen rechten worden ontleend.</em></p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\r\n\t\t\t{/*Row with Google Calendar*/}\r\n\t\t\t<div className=\"row\">\r\n\t\t\t\t<div className=\"col text-center\">\r\n\t\t\t\t\t<iframe\r\n\t\t\t\t\t\ttitle=\"calendar\"\r\n\t\t\t\t\t\tsrc=\"https://calendar.google.com/calendar/embed?showCalendars=0&amp;height=600&amp;wkst=1&amp;bgcolor=%23cccccc&amp;src=ujd2afe5i9mscgr49dbhd8vnjc%40group.calendar.google.com&amp;color=%23A32929&amp;src=nl.dutch%23holiday%40group.v.calendar.google.com&amp;color=%230F4B38&amp;ctz=Europe%2FAmsterdam\"\r\n\t\t\t\t\t\tstyle={{border: \"solid 1px #777\"}} width=\"800\" height=\"600\" frameBorder=\"0\" scrolling=\"no\"/>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport default Dates;\r\n","import React, {useEffect} from 'react';\r\nimport {Link} from \"react-router-dom\";\r\n\r\nfunction Information() {\r\n\r\n\t// scroll to top on enter\r\n\tuseEffect(() => {\r\n\t\twindow.scrollTo(0, 0)\r\n\t}, []);\r\n\r\n\r\n\treturn (\r\n\t\t<div className=\"container\">\r\n\t\t\t<h2 className=\"text-center my-3\">Information, Equipment and FAQ</h2>\r\n\t\t\t<div className=\"row\">\r\n\t\t\t\t{/* left column*/}\r\n\t\t\t\t<div className=\"col-md-6\">\r\n\t\t\t\t\t<h3>Information</h3>\r\n\t\t\t\t\t<p>All public classes are held in our classroom in Zutphen, NL,\r\n\t\t\t\t\t\tnear the centre of this historic town. </p>\r\n\r\n\t\t\t\t\t<h3>Equipment</h3>\r\n\t\t\t\t\t<p>Students should bring their own laptop (Mac, Linux or Windows) with\r\n\t\t\t\t\t\t&nbsp;<a\r\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\r\n\t\t\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\t\t\thref=\"https://www.google.com/chrome/browser/desktop/index.html\">Chrome</a> installed as a\r\n\t\t\t\t\t\tbrowser.\r\n\t\t\t\t\t\tYou can use your preferred editor. We recommend using <a\r\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\r\n\t\t\t\t\t\t\thref=\"http://www.jetbrains.com/webstorm/download/\"\r\n\t\t\t\t\t\t\ttarget=\"_blank\">WebStorm</a> or\r\n\t\t\t\t\t\t&nbsp;<a\r\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\r\n\t\t\t\t\t\t\thref=\"https://code.visualstudio.com/\"\r\n\t\t\t\t\t\t\ttarget=\"_blank\">Visual Studio Code.</a></p>\r\n\t\t\t\t\t<p>Wifi is available at our location, as well as coffee, tea, soft drinks, snacks and beverages.</p>\r\n\r\n\t\t\t\t\t<h3>FAQs</h3>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<strong>Q: What language are the public classes held in?</strong></p>\r\n\t\t\t\t\t<p>A: Public classes are typically held in Dutch, but English is definitely an option.\r\n\t\t\t\t\t\tLet your preferred language know when signing up.</p>\r\n\t\t\t\t\t<p>Private classes are held in the preferred language of the client. We discuss that prior to the\r\n\t\t\t\t\t\tstart of\r\n\t\t\t\t\t\tthe training.</p>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\t<strong>Q: Do I receive a certificate of completion?</strong></p>\r\n\t\t\t\t\t<p>A: Yes, if desired, you can obtain a Certificate of completion after the course. Just let us know\r\n\t\t\t\t\t\tonce you're there, so we can issue the certificate via email afterwards.</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: How should the course be payed?</strong></p>\r\n\t\t\t\t\t<p>A: After signing up, you or your company will receive an invoice for the amount due. You\r\n\t\t\t\t\t\t<strong>only</strong> receive an invoice if the class is guaranteed to start.\r\n\t\t\t\t\t\tAfter receiving, just pay the invoice within a due date of 30 days.</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: Zutphen doesn't work for us. Can you teach at our location?</strong></p>\r\n\t\t\t\t\t<p>A: Yes, absolutely. Typically classes at your location are given at a fixed daily price,\r\n\t\t\t\t\t\tunrelated to the number of students. Contact us for information on availablity, dates and\r\n\t\t\t\t\t\tprices.</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: What are the training hours?</strong></p>\r\n\t\t\t\t\t<p>A: Classes are from 9:00 - ca. 16:30hr.</p>\r\n\t\t\t\t\t<p>At request we can also organize afternoon/evening courses (13:00-20:30hr) or in weekends, if this\r\n\t\t\t\t\t\tbetter suits your needs. There is an additional fee for evening or weekend classes.</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: Do I need to know about JavaScript?</strong></p>\r\n\t\t\t\t\t<p>Yes, definitely. React is built on top of JavaScript and working with it assumes thorough\r\n\t\t\t\t\t\tJavaScript knowledge. It is <strong>not</strong> and extension to HTML, as its counterparts\r\n\t\t\t\t\t\tAngular and\r\n\t\t\t\t\t\tVue are.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\tIf you feel your JavaScript knowledge can use a little refresher, contact us for\r\n\t\t\t\t\t\tteaching opportunities. We can create a custom course that teaches both JavaScript and React.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</div>\r\n\t\t\t\t{/* right column */}\r\n\t\t\t\t<div className=\"col-md-6\">\r\n\t\t\t\t\t<p><strong>Q: Can I receive a discount?</strong></p>\r\n\t\t\t\t\t<p>A: Sure! Just make sure to bring one or more colleagues with you. If two or more students can be\r\n\t\t\t\t\t\tbilled\r\n\t\t\t\t\t\ton the same invoice, a discount can be applied. Contact us for details.</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: When is the class guaranteed to start?</strong></p>\r\n\t\t\t\t\t<p>A: The class is guaranteed to start if 3 or more students are enrolled. See the\r\n\t\t\t\t\t\t<Link to=\"/dates\">Dates</Link> page for more information. Otherwise you can rebook your\r\n\t\t\t\t\t\ttraining to another date at no cost.\r\n\t\t\t\t\t</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: What about the instructors?</strong></p>\r\n\t\t\t\t\t<p>A: Your main instructor is <a\r\n\t\t\t\t\t\trel=\"noreferrer noopener\"\r\n\t\t\t\t\t\thref=\"https://www.linkedin.com/in/peterkassenaar/\"\r\n\t\t\t\t\t\ttarget=\"_blank\">\r\n\t\t\t\t\t\tPeter Kassenaar\r\n\t\t\t\t\t</a>. Peter has 20+ years of experience in (web)development and is\r\n\t\t\t\t\t\tthe author of over 100 IT-books. He has taught thousands of students over the years and provided\r\n\t\t\t\t\t\tclasses\r\n\t\t\t\t\t\tfor companies based in The Netherlands, Belgium, United Kingdom, United States of America and\r\n\t\t\t\t\t\tSaudi\r\n\t\t\t\t\t\tArabia. Learn more about Peter on his personal website at\r\n\t\t\t\t\t\t&nbsp;<a href=\"https://kassenaar.com/over/\"\r\n\t\t\t\t\t\t\t\t rel=\"noopener noreferrer\"\r\n\t\t\t\t\t\t\t\t target=\"_blank\">kassenaar.com</a>. In large classes, we\r\n\t\t\t\t\t\tinvite assistant instructors who ensure the hands-on workshop run smoothly. They may also teach\r\n\t\t\t\t\t\tsome topics.\r\n\t\t\t\t\t</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: Do the classes cover server-sided APIs and data services?</strong></p>\r\n\t\t\t\t\t<p>A: We use server-sided APIs extensively (in the examples we use pre-built, open APIs), but the\r\n\t\t\t\t\t\tclass does not touch on development of such data services. This would require to\r\n\t\t\t\t\t\tinclude Java, C# or PHP in the class and the days are allready chock full of front-end code. As\r\n\t\t\t\t\t\tfar as React is concerned, it doesn't matter on which platform the backend is built so we don't\r\n\t\t\t\t\t\tgo\r\n\t\t\t\t\t\tinto that topic to deeply.</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: Do I need to know about NodeJS?</strong></p>\r\n\t\t\t\t\t<p>A: We discuss using NodeJS and NPM (and assist you installing it, if necessary), but the core\r\n\t\t\t\t\t\tconcepts of NodeJS are outside the scope of this class. NodeJS is discussed and used as a\r\n\t\t\t\t\t\tdevelopment tool for React applications. However, it is absolutely not required in production\r\n\t\t\t\t\t\tenvironments. The pros and cons of this approach are discussed in the training.</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: Do I need to know about HTML and CSS?</strong></p>\r\n\t\t\t\t\t<p>A: We assume you are at least a little bit familiar with HTML and CSS, but you don't have to be a\r\n\t\t\t\t\t\twizard or guru in either technique. These are classes about code, not about design. For example,\r\n\t\t\t\t\t\twe use\r\n\t\t\t\t\t\tBootstrap as a CSS framework (though we touch on other, React specific design frameworks) for\r\n\t\t\t\t\t\tsimple design of our applications.</p>\r\n\r\n\t\t\t\t\t<p><strong>Q: Can I stay in Zutphen during the course?</strong></p>\r\n\t\t\t\t\t<p>A: Sure, why not? Zutphen is a small town with a historic background that goes back to the 11th\r\n\t\t\t\t\t\tcentury. It has lots of restaurants, museums, sightseeing opportunities and nice hotels or\r\n\t\t\t\t\t\tBed &amp; Breakfasts. We recommend staying at the <a\r\n\t\t\t\t\t\t\thref=\"https://www.hampshirehotelsgravenhofzutphen.com/\"\r\n\t\t\t\t\t\t\trel=\"noreferrer noopener\"\r\n\t\t\t\t\t\t\ttarget=\"_blank\">Hampshire\r\n\t\t\t\t\t\t\tHotel 's Gravenhof</a> which is only a 10 minute walk from the training location.</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport default Information;\r\n","import React, {useEffect} from 'react';\r\nimport {Link} from \"react-router-dom\";\r\nimport ContactPlusAddress from \"../home/ContactPlusAddress\";\r\n\r\n// Check: https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f\r\n\r\n\r\nfunction Contact() {\r\n\r\n    // scroll to top on enter\r\n\tuseEffect(() => {\r\n\t\twindow.scrollTo(0, 0)\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<div className=\"container\">\r\n\t\t\t{/*Row - form + Text*/}\r\n\t\t\t<div className=\"row my-3\">\r\n\t\t\t\t<div className=\"col-md-8\">\r\n\t\t\t\t\t<div className=\"contact-form\">\r\n\t\t\t\t\t\t<h2 className=\"text-center my-3\">Contact us</h2>\r\n\t\t\t\t\t\t{/*Start of the form */}\r\n\t\t\t\t\t\t<form action=\"https://formspree.io/info@kassenaar.com\" method=\"post\">\r\n\t\t\t\t\t\t\t<div className=\"form-group\">\r\n\t\t\t\t\t\t\t\t<input type=\"text\"\r\n\t\t\t\t\t\t\t\t\t   name=\"name\"\r\n\t\t\t\t\t\t\t\t\t   className=\"form-control\"\r\n\t\t\t\t\t\t\t\t\t   id=\"name\"\r\n\t\t\t\t\t\t\t\t\t   required\r\n\t\t\t\t\t\t\t\t\t   placeholder=\"Name *\"/>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div className=\"form-group\">\r\n\t\t\t\t\t\t\t\t<input type=\"email\"\r\n\t\t\t\t\t\t\t\t\t   className=\"form-control\"\r\n\t\t\t\t\t\t\t\t\t   name=\"_replyto\"\r\n\t\t\t\t\t\t\t\t\t   id=\"email\"\r\n\t\t\t\t\t\t\t\t\t   required\r\n\t\t\t\t\t\t\t\t\t   placeholder=\"Email * \"/>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div className=\"form-group\">\r\n\t\t\t\t\t\t\t\t<div className=\"validation\"/>\r\n\t\t\t\t\t\t\t\t<input type=\"text\"\r\n\t\t\t\t\t\t\t\t\t   className=\"form-control\"\r\n\t\t\t\t\t\t\t\t\t   name=\"subject\"\r\n\t\t\t\t\t\t\t\t\t   id=\"subject\"\r\n\t\t\t\t\t\t\t\t\t   required\r\n\t\t\t\t\t\t\t\t\t   placeholder=\"Subject *\"/>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div className=\"form-group\">\r\n\t\t\t\t\t\t\t\t<textarea className=\"form-control\"\r\n\t\t\t\t\t\t\t\t\t\t  name=\"message\"\r\n\t\t\t\t\t\t\t\t\t\t  rows=\"5\"\r\n\t\t\t\t\t\t\t\t\t\t  placeholder=\"Message\"/>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div className=\"text-center\">\r\n\t\t\t\t\t\t\t\t<button type=\"submit\" className=\"btn\">Send Message</button>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</form>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<hr/>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"col-md-4\">\r\n\t\t\t\t\t<h3>Booking a class?</h3>\r\n\t\t\t\t\t<p>Make sure to check the <Link to=\"/dates\">dates</Link> page and include\r\n\t\t\t\t\t\tthe name and date of the class of the class you want to attend in your message.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<p>Also make sure we can reach you by including your\r\n\t\t\t\t\t\temail address and/or phone number.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<p>Prefer to talk to us via mail?\r\n\t\t\t\t\t\tSend your email to <a href=\"mailto:info@reacttraining.nl\">info@reacttraining.nl</a>.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<p><strong>No need to pay yet.</strong> We will contact you on invoicing options.</p>\r\n\t\t\t\t\t<p>\r\n\t\t\t\t\t\tUsually we reply within 1 business day.\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t<hr/>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\r\n\t\t\t{/*Row - Google maps + address*/}\r\n\t\t\t<div className=\"row my-3\">\r\n\t\t\t\t<div className=\"col\">\r\n\t\t\t\t\t<ContactPlusAddress/>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nexport default Contact;\r\n","import React from 'react';\r\n\r\n// Router Stuff\r\nimport {BrowserRouter, Route, Switch} from \"react-router-dom\";\r\n\r\n// Navigation\r\nimport FooterNavigation from \"./navigation/FooterNavigation\";\r\nimport MainNavigation from \"./navigation/MainNavigation\";\r\n\r\n// Pages\r\nimport Home from \"./home\";\r\nimport Training from \"./training\";\r\nimport Dates from \"./dates\";\r\nimport Information from \"./information\";\r\nimport Contact from \"./contact\";\r\n\r\nfunction App() {\r\n    return (\r\n        <BrowserRouter>\r\n            <MainNavigation/>\r\n            <Switch>\r\n                <Route path=\"/\" exact>\r\n                    <Home/>\r\n                </Route>\r\n                <Route path=\"/training\">\r\n                    <Training/>\r\n                </Route>\r\n                <Route path=\"/dates\">\r\n                    <Dates/>\r\n                </Route>\r\n                <Route path=\"/information\">\r\n                    <Information/>\r\n                </Route>\r\n                <Route path=\"/contact\">\r\n                    <Contact/>\r\n                </Route>\r\n            </Switch>\r\n            {/*<HomePageBell/>*/}\r\n            {/**************** Footer *****************/}\r\n            <FooterNavigation/>\r\n\r\n        </BrowserRouter>\r\n    )\r\n}\r\n\r\nexport default App;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from './components/App';\r\n\r\n// styles\r\n// import \"bootstrap/dist/css/bootstrap.min.css\"\r\n// https://bootswatch.com/flatly/\r\nimport 'bootstrap/dist/js/bootstrap.min'\r\nimport './css/bootstrap.flatly-theme.min.css'\r\nimport \"font-awesome/css/font-awesome.min.css\"\r\nimport \"./css/style.css\"\r\nimport \"./css/pk-styles.css\"\r\n\r\nReactDOM.render(<App/>,\r\n    document.getElementById('root'));\r\n"],"sourceRoot":""}