[
  {
    "path": ".gitignore",
    "content": "node_modules\ndist\nlib\n*.log\n.DS_Store\ntmp.json\n"
  },
  {
    "path": ".vscode/extensions.json",
    "content": "{\n  // See http://go.microsoft.com/fwlink/?LinkId=827846\n  // for the documentation about the extensions.json format\n  \"recommendations\": [\n    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp\n    \"esbenp.prettier-vscode\"\n  ]\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"prettier.printWidth\": 140,\n  \"prettier.tabWidth\": 2,\n  \"prettier.singleQuote\": true,\n  \"editor.tabSize\": 2,\n  \"editor.formatOnSave\": true\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "Attribution 4.0 International\n\n=======================================================================\n\nCreative Commons Corporation (\"Creative Commons\") is not a law firm and\ndoes not provide legal services or legal advice. Distribution of\nCreative Commons public licenses does not create a lawyer-client or\nother relationship. Creative Commons makes its licenses and related\ninformation available on an \"as-is\" basis. Creative Commons gives no\nwarranties regarding its licenses, any material licensed under their\nterms and conditions, or any related information. Creative Commons\ndisclaims all liability for damages resulting from their use to the\nfullest extent possible.\n\nUsing Creative Commons Public Licenses\n\nCreative Commons public licenses provide a standard set of terms and\nconditions that creators and other rights holders may use to share\noriginal works of authorship and other material subject to copyright\nand certain other rights specified in the public license below. The\nfollowing considerations are for informational purposes only, are not\nexhaustive, and do not form part of our licenses.\n\n     Considerations for licensors: Our public licenses are\n     intended for use by those authorized to give the public\n     permission to use material in ways otherwise restricted by\n     copyright and certain other rights. Our licenses are\n     irrevocable. Licensors should read and understand the terms\n     and conditions of the license they choose before applying it.\n     Licensors should also secure all rights necessary before\n     applying our licenses so that the public can reuse the\n     material as expected. Licensors should clearly mark any\n     material not subject to the license. This includes other CC-\n     licensed material, or material used under an exception or\n     limitation to copyright. More considerations for licensors:\n\twiki.creativecommons.org/Considerations_for_licensors\n\n     Considerations for the public: By using one of our public\n     licenses, a licensor grants the public permission to use the\n     licensed material under specified terms and conditions. If\n     the licensor's permission is not necessary for any reason--for\n     example, because of any applicable exception or limitation to\n     copyright--then that use is not regulated by the license. Our\n     licenses grant only permissions under copyright and certain\n     other rights that a licensor has authority to grant. Use of\n     the licensed material may still be restricted for other\n     reasons, including because others have copyright or other\n     rights in the material. A licensor may make special requests,\n     such as asking that all changes be marked or described.\n     Although not required by our licenses, you are encouraged to\n     respect those requests where reasonable. More_considerations\n     for the public: \n\twiki.creativecommons.org/Considerations_for_licensees\n\n=======================================================================\n\nCreative Commons Attribution 4.0 International Public License\n\nBy exercising the Licensed Rights (defined below), You accept and agree\nto be bound by the terms and conditions of this Creative Commons\nAttribution 4.0 International Public License (\"Public License\"). To the\nextent this Public License may be interpreted as a contract, You are\ngranted the Licensed Rights in consideration of Your acceptance of\nthese terms and conditions, and the Licensor grants You such rights in\nconsideration of benefits the Licensor receives from making the\nLicensed Material available under these terms and conditions.\n\n\nSection 1 -- Definitions.\n\n  a. Adapted Material means material subject to Copyright and Similar\n     Rights that is derived from or based upon the Licensed Material\n     and in which the Licensed Material is translated, altered,\n     arranged, transformed, or otherwise modified in a manner requiring\n     permission under the Copyright and Similar Rights held by the\n     Licensor. For purposes of this Public License, where the Licensed\n     Material is a musical work, performance, or sound recording,\n     Adapted Material is always produced where the Licensed Material is\n     synched in timed relation with a moving image.\n\n  b. Adapter's License means the license You apply to Your Copyright\n     and Similar Rights in Your contributions to Adapted Material in\n     accordance with the terms and conditions of this Public License.\n\n  c. Copyright and Similar Rights means copyright and/or similar rights\n     closely related to copyright including, without limitation,\n     performance, broadcast, sound recording, and Sui Generis Database\n     Rights, without regard to how the rights are labeled or\n     categorized. For purposes of this Public License, the rights\n     specified in Section 2(b)(1)-(2) are not Copyright and Similar\n     Rights.\n\n  d. Effective Technological Measures means those measures that, in the\n     absence of proper authority, may not be circumvented under laws\n     fulfilling obligations under Article 11 of the WIPO Copyright\n     Treaty adopted on December 20, 1996, and/or similar international\n     agreements.\n\n  e. Exceptions and Limitations means fair use, fair dealing, and/or\n     any other exception or limitation to Copyright and Similar Rights\n     that applies to Your use of the Licensed Material.\n\n  f. Licensed Material means the artistic or literary work, database,\n     or other material to which the Licensor applied this Public\n     License.\n\n  g. Licensed Rights means the rights granted to You subject to the\n     terms and conditions of this Public License, which are limited to\n     all Copyright and Similar Rights that apply to Your use of the\n     Licensed Material and that the Licensor has authority to license.\n\n  h. Licensor means the individual(s) or entity(ies) granting rights\n     under this Public License.\n\n  i. Share means to provide material to the public by any means or\n     process that requires permission under the Licensed Rights, such\n     as reproduction, public display, public performance, distribution,\n     dissemination, communication, or importation, and to make material\n     available to the public including in ways that members of the\n     public may access the material from a place and at a time\n     individually chosen by them.\n\n  j. Sui Generis Database Rights means rights other than copyright\n     resulting from Directive 96/9/EC of the European Parliament and of\n     the Council of 11 March 1996 on the legal protection of databases,\n     as amended and/or succeeded, as well as other essentially\n     equivalent rights anywhere in the world.\n\n  k. You means the individual or entity exercising the Licensed Rights\n     under this Public License. Your has a corresponding meaning.\n\n\nSection 2 -- Scope.\n\n  a. License grant.\n\n       1. Subject to the terms and conditions of this Public License,\n          the Licensor hereby grants You a worldwide, royalty-free,\n          non-sublicensable, non-exclusive, irrevocable license to\n          exercise the Licensed Rights in the Licensed Material to:\n\n            a. reproduce and Share the Licensed Material, in whole or\n               in part; and\n\n            b. produce, reproduce, and Share Adapted Material.\n\n       2. Exceptions and Limitations. For the avoidance of doubt, where\n          Exceptions and Limitations apply to Your use, this Public\n          License does not apply, and You do not need to comply with\n          its terms and conditions.\n\n       3. Term. The term of this Public License is specified in Section\n          6(a).\n\n       4. Media and formats; technical modifications allowed. The\n          Licensor authorizes You to exercise the Licensed Rights in\n          all media and formats whether now known or hereafter created,\n          and to make technical modifications necessary to do so. The\n          Licensor waives and/or agrees not to assert any right or\n          authority to forbid You from making technical modifications\n          necessary to exercise the Licensed Rights, including\n          technical modifications necessary to circumvent Effective\n          Technological Measures. For purposes of this Public License,\n          simply making modifications authorized by this Section 2(a)\n          (4) never produces Adapted Material.\n\n       5. Downstream recipients.\n\n            a. Offer from the Licensor -- Licensed Material. Every\n               recipient of the Licensed Material automatically\n               receives an offer from the Licensor to exercise the\n               Licensed Rights under the terms and conditions of this\n               Public License.\n\n            b. No downstream restrictions. You may not offer or impose\n               any additional or different terms or conditions on, or\n               apply any Effective Technological Measures to, the\n               Licensed Material if doing so restricts exercise of the\n               Licensed Rights by any recipient of the Licensed\n               Material.\n\n       6. No endorsement. Nothing in this Public License constitutes or\n          may be construed as permission to assert or imply that You\n          are, or that Your use of the Licensed Material is, connected\n          with, or sponsored, endorsed, or granted official status by,\n          the Licensor or others designated to receive attribution as\n          provided in Section 3(a)(1)(A)(i).\n\n  b. Other rights.\n\n       1. Moral rights, such as the right of integrity, are not\n          licensed under this Public License, nor are publicity,\n          privacy, and/or other similar personality rights; however, to\n          the extent possible, the Licensor waives and/or agrees not to\n          assert any such rights held by the Licensor to the limited\n          extent necessary to allow You to exercise the Licensed\n          Rights, but not otherwise.\n\n       2. Patent and trademark rights are not licensed under this\n          Public License.\n\n       3. To the extent possible, the Licensor waives any right to\n          collect royalties from You for the exercise of the Licensed\n          Rights, whether directly or through a collecting society\n          under any voluntary or waivable statutory or compulsory\n          licensing scheme. In all other cases the Licensor expressly\n          reserves any right to collect such royalties.\n\n\nSection 3 -- License Conditions.\n\nYour exercise of the Licensed Rights is expressly made subject to the\nfollowing conditions.\n\n  a. Attribution.\n\n       1. If You Share the Licensed Material (including in modified\n          form), You must:\n\n            a. retain the following if it is supplied by the Licensor\n               with the Licensed Material:\n\n                 i. identification of the creator(s) of the Licensed\n                    Material and any others designated to receive\n                    attribution, in any reasonable manner requested by\n                    the Licensor (including by pseudonym if\n                    designated);\n\n                ii. a copyright notice;\n\n               iii. a notice that refers to this Public License;\n\n                iv. a notice that refers to the disclaimer of\n                    warranties;\n\n                 v. a URI or hyperlink to the Licensed Material to the\n                    extent reasonably practicable;\n\n            b. indicate if You modified the Licensed Material and\n               retain an indication of any previous modifications; and\n\n            c. indicate the Licensed Material is licensed under this\n               Public License, and include the text of, or the URI or\n               hyperlink to, this Public License.\n\n       2. You may satisfy the conditions in Section 3(a)(1) in any\n          reasonable manner based on the medium, means, and context in\n          which You Share the Licensed Material. For example, it may be\n          reasonable to satisfy the conditions by providing a URI or\n          hyperlink to a resource that includes the required\n          information.\n\n       3. If requested by the Licensor, You must remove any of the\n          information required by Section 3(a)(1)(A) to the extent\n          reasonably practicable.\n\n       4. If You Share Adapted Material You produce, the Adapter's\n          License You apply must not prevent recipients of the Adapted\n          Material from complying with this Public License.\n\n\nSection 4 -- Sui Generis Database Rights.\n\nWhere the Licensed Rights include Sui Generis Database Rights that\napply to Your use of the Licensed Material:\n\n  a. for the avoidance of doubt, Section 2(a)(1) grants You the right\n     to extract, reuse, reproduce, and Share all or a substantial\n     portion of the contents of the database;\n\n  b. if You include all or a substantial portion of the database\n     contents in a database in which You have Sui Generis Database\n     Rights, then the database in which You have Sui Generis Database\n     Rights (but not its individual contents) is Adapted Material; and\n\n  c. You must comply with the conditions in Section 3(a) if You Share\n     all or a substantial portion of the contents of the database.\n\nFor the avoidance of doubt, this Section 4 supplements and does not\nreplace Your obligations under this Public License where the Licensed\nRights include other Copyright and Similar Rights.\n\n\nSection 5 -- Disclaimer of Warranties and Limitation of Liability.\n\n  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE\n     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS\n     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF\n     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,\n     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,\n     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR\n     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,\n     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT\n     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT\n     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.\n\n  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE\n     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,\n     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,\n     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,\n     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR\n     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN\n     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR\n     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR\n     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.\n\n  c. The disclaimer of warranties and limitation of liability provided\n     above shall be interpreted in a manner that, to the extent\n     possible, most closely approximates an absolute disclaimer and\n     waiver of all liability.\n\n\nSection 6 -- Term and Termination.\n\n  a. This Public License applies for the term of the Copyright and\n     Similar Rights licensed here. However, if You fail to comply with\n     this Public License, then Your rights under this Public License\n     terminate automatically.\n\n  b. Where Your right to use the Licensed Material has terminated under\n     Section 6(a), it reinstates:\n\n       1. automatically as of the date the violation is cured, provided\n          it is cured within 30 days of Your discovery of the\n          violation; or\n\n       2. upon express reinstatement by the Licensor.\n\n     For the avoidance of doubt, this Section 6(b) does not affect any\n     right the Licensor may have to seek remedies for Your violations\n     of this Public License.\n\n  c. For the avoidance of doubt, the Licensor may also offer the\n     Licensed Material under separate terms or conditions or stop\n     distributing the Licensed Material at any time; however, doing so\n     will not terminate this Public License.\n\n  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public\n     License.\n\n\nSection 7 -- Other Terms and Conditions.\n\n  a. The Licensor shall not be bound by any additional or different\n     terms or conditions communicated by You unless expressly agreed.\n\n  b. Any arrangements, understandings, or agreements regarding the\n     Licensed Material not stated herein are separate from and\n     independent of the terms and conditions of this Public License.\n\n\nSection 8 -- Interpretation.\n\n  a. For the avoidance of doubt, this Public License does not, and\n     shall not be interpreted to, reduce, limit, restrict, or impose\n     conditions on any use of the Licensed Material that could lawfully\n     be made without permission under this Public License.\n\n  b. To the extent possible, if any provision of this Public License is\n     deemed unenforceable, it shall be automatically reformed to the\n     minimum extent necessary to make it enforceable. If the provision\n     cannot be reformed, it shall be severed from this Public License\n     without affecting the enforceability of the remaining terms and\n     conditions.\n\n  c. No term or condition of this Public License will be waived and no\n     failure to comply consented to unless expressly agreed to by the\n     Licensor.\n\n  d. Nothing in this Public License constitutes or may be interpreted\n     as a limitation upon, or waiver of, any privileges and immunities\n     that apply to the Licensor or You, including from the legal\n     processes of any jurisdiction or authority.\n\n\n=======================================================================\n\nCreative Commons is not a party to its public\nlicenses. Notwithstanding, Creative Commons may elect to apply one of\nits public licenses to material it publishes and in those instances\nwill be considered the “Licensor.” The text of the Creative Commons\npublic licenses is dedicated to the public domain under the CC0 Public\nDomain Dedication. Except for the limited purpose of indicating that\nmaterial is shared under a Creative Commons public license or as\notherwise permitted by the Creative Commons policies published at\ncreativecommons.org/policies, Creative Commons does not authorize the\nuse of the trademark \"Creative Commons\" or any other trademark or logo\nof Creative Commons without its prior written consent including,\nwithout limitation, in connection with any unauthorized modifications\nto any of its public licenses or any other arrangements,\nunderstandings, or agreements concerning use of licensed material. For\nthe avoidance of doubt, this paragraph does not form part of the\npublic licenses.\n\nCreative Commons may be contacted at creativecommons.org."
  },
  {
    "path": "LICENSE-CODE",
    "content": "MIT License\n\nCopyright (c) 2019-present Microsoft Corporation\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "README.md",
    "content": "# Frontend Bootcamp / Days in the Web\n\n## Welcome\n\nIn this two-day workshop you'll learn the basics of frontend development while building a working web app.\n\nThe first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript. This is targeted at new and experienced developers alike. On the second day we'll dive into more advanced topics like TypeScript, state management, and testing. While the examples should be accessible to anyone, you'll get the most out of it if you have some prior experience with programming and web technologies.\n\n## Getting set up\n\n### 1. Required software\n\nBefore starting, make sure your computer has up-to-date versions of the following installed:\n\n- [Node/NPM](https://nodejs.org/en/) (choose the **LTS** option, which should be version 10)\n- [Git](https://git-scm.com/downloads)\n- [Visual Studio Code](https://code.visualstudio.com)\n  - If using a Mac, also follow [these steps](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) to install the `code` terminal command.\n  - If you already had VS Code installed, check for updates!\n- React Developer Tools for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)\n\n### 2. Installing and opening the project\n\n- Open VS Code and then press ```ctrl + ` ``` (backtick, in top left corner of keyboard) to open the built-in terminal\n- Use the `cd` (change directory) command to find an appropriate place for your code\n- Type `git clone https://github.com/Microsoft/frontend-bootcamp.git` into the terminal to pull down a copy of the workshop code\n- Type `cd frontend-bootcamp` to change your current directory to the bootcamp folder\n- Type `npm install` to install all of the project dependencies\n- Type `code -r .` to open the bootcamp code in VS Code\n> If on a Mac, be sure you've followed [these steps](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) first to make the `code` command available.\n\n### 3. Run the \"inner loop\" build\n\nAt this point, your VS Code window should look something like this:\n\n<img src=\"https://user-images.githubusercontent.com/1434956/53654442-9c379400-3c02-11e9-8768-d19e092b606d.png\" width=500 />\n\nTo start the dev \"inner loop,\" run:\n```\nnpm start\n```\n\nThis will load the site shown below.\n\n<img src=\"https://user-images.githubusercontent.com/1434956/53656239-88426100-3c07-11e9-8456-e3d958aa4def.png\" width=500 />\n\n### 4. Lesson Structure\n\n1. Demos will either be via CodePen (Steps 1, 2 and 3) or done in the step folder. Follow the step README to walkthrough the demo.\n\n2. Much like demos, exercises are done via CodePen or in the project step folders. These exercises will give you an opportunity to try what was demonstrated in the first step.\n  \n## What to expect\n\nFor each lesson, the presenter will walk through some demo code to teach core concepts about the topic. Don't worry about writing code at this point. Just follow along via the readmes linked below.\n\nMost lessons also have an exercise portion. Exercise instructions are usually found in the readme for each step's \"exercise\" folder.\n\n### Day one\n\nDay one covers the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript.\n\n1. [Introduction to HTML](step1-01)\n2. [Introduction to CSS](step1-02)\n3. [Introduction JavaScript](step1-03)\n4. [Introduction to React](step1-04)\n5. [React Components](step1-05)\n6. [State-driven UI](step1-06)\n7. [Types and UI-driven state](step1-07)\n\n### Day two\n\n1. [TypeScript basics](step2-01)\n2. [Fluent UI component library](step2-02)\n3. [Theming and styling](step2-03)\n4. [React Context](step2-04)\n5. [Redux: Store](step2-05)\n6. [Redux: React binding](step2-06)\n\n### Bonus content\n\n* [Redux: Service calls](bonus-servicecalls)\n* [Testing with Jest](bonus-jest)\n\n## Additional resources\n\n- [MDN Web Docs](https://developer.mozilla.org/en-US/)\n- [React Docs](https://reactjs.org/docs/getting-started.html)\n- [Thinking in React](https://reactjs.org/docs/thinking-in-react.html)\n\n## Follow the authors!\n\nIf you are interested in JavaScript, TypeScript, React, Redux, or Design Systems, follow us on Twitter:\n\n- [@kenneth_chau](https://twitter.com/kenneth_chau)\n- [@micahgodbolt](https://twitter.com/micahgodbolt)\n\n## Contributing\n\nThis project welcomes contributions and suggestions. Most contributions require you to agree to a\nContributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us\nthe rights to use your contribution. For details, visit https://cla.microsoft.com.\n\nWhen you submit a pull request, a CLA-bot will automatically determine whether you need to provide\na CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions\nprovided by the bot. You will only need to do this once across all repos using our CLA.\n\nThis project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).\nFor more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or\ncontact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n\n## Legal notices\n\nMicrosoft and any contributors grant you a license to the Microsoft documentation and other content\nin this repository under the [Creative Commons Attribution 4.0 International Public License](https://creativecommons.org/licenses/by/4.0/legalcode),\nsee the [LICENSE](LICENSE) file, and grant you a license to any code in the repository under the [MIT License](https://opensource.org/licenses/MIT), see the\n[LICENSE-CODE](LICENSE-CODE) file.\n\nMicrosoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation\nmay be either trademarks or registered trademarks of Microsoft in the United States and/or other countries.\nThe licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks.\nMicrosoft's general trademark guidelines can be found at http://go.microsoft.com/fwlink/?LinkID=254653.\n\nPrivacy information can be found at https://privacy.microsoft.com/en-us/\n\nMicrosoft and any contributors reserve all other rights, whether under their respective copyrights, patents,\nor trademarks, whether by implication, estoppel or otherwise."
  },
  {
    "path": "assets/scripts.js",
    "content": "// prettier-ignore\nvar appInsights = window.appInsights || function (a) {\n  function b(a) { c[a] = function () { var b = arguments; c.queue.push(function () { c[a].apply(c, b) }) } } var c = { config: a }, d = document, e = window; setTimeout(function () { var b = d.createElement(\"script\"); b.src = a.url || \"https://az416426.vo.msecnd.net/scripts/a/ai.0.js\", d.getElementsByTagName(\"script\")[0].parentNode.appendChild(b) }); try { c.cookie = d.cookie } catch (a) { } c.queue = []; for (var f = [\"Event\", \"Exception\", \"Metric\", \"PageView\", \"Trace\", \"Dependency\"]; f.length;)b(\"track\" + f.pop()); if (b(\"setAuthenticatedUserContext\"), b(\"clearAuthenticatedUserContext\"), b(\"startTrackEvent\"), b(\"stopTrackEvent\"), b(\"startTrackPage\"), b(\"stopTrackPage\"), b(\"flush\"), !a.disableExceptionTracking) { f = \"onerror\", b(\"_\" + f); var g = e[f]; e[f] = function (a, b, d, e, h) { var i = g && g(a, b, d, e, h); return !0 !== i && c[\"_\" + f](a, b, d, e, h), i } } return c\n}({\n  instrumentationKey: \"6ad37ae0-c4ab-4739-925c-1e2773c31f17\"\n});\n\n// prettier-ignore\nif (window.location.hostname !== 'localhost') {\n  window.appInsights = appInsights, appInsights.queue && 0 === appInsights.queue.length && appInsights.trackPageView(null, null, { urlReferrer: document.referrer });\n}\n"
  },
  {
    "path": "assets/shared.css",
    "content": "html {\n  box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\nbody {\n  background-color: #f3f2f1;\n}\n\na {\n  color: #0078d4;\n  text-decoration: none;\n}\n\na:hover {\n  text-decoration: underline;\n}\n\nh1 {\n  margin: 0;\n}\n\nh1 a {\n  font-size: 16px;\n  font-weight: 400;\n}\n\n.Container {\n  justify-content: center;\n  padding: 20px 0;\n  max-width: 1040px;\n  margin: 0 auto;\n}\n\n.Tiles {\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  grid-gap: 20px;\n  display: grid;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  counter-reset: steps;\n}\n\n.Tile {\n  background-color: white;\n  border-radius: 2px;\n  box-shadow: 0 3.2px 7.2px 0 rgba(0, 0, 0, 0.132), 0 0.6px 1.8px 0 rgba(0, 0, 0, 0.108);\n  opacity: 0.96;\n  transition: all 0.15s linear;\n  position: relative;\n  overflow: hidden;\n  padding: 12px;\n}\n\n.Tile:not(.Tile--intro):hover {\n  box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.132), 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.108);\n  opacity: 1;\n}\n\n.Tile.Tile--numbered::after {\n  counter-increment: steps;\n  content: counter(steps);\n  position: absolute;\n  left: -20px;\n  bottom: -3px;\n  font-size: 220px;\n  line-height: 188px;\n  color: #eaeaea;\n  z-index: 1;\n}\n\n.Tile-link {\n  align-items: center;\n  text-align: center;\n  color: #323130;\n  display: flex;\n  flex-direction: column;\n  height: 148px;\n  justify-content: center;\n  text-decoration: none;\n  position: relative;\n  font-size: 24px;\n  font-weight: 200;\n  z-index: 2;\n}\n\na.Tile-link {\n  color: #0078d7;\n}\n\na.Tile-link:hover {\n  text-decoration: underline;\n}\n\n.Tile-link i {\n  font-size: 32px;\n  margin-bottom: 12px;\n  color: #605e5c;\n}\n\n.Tile-links {\n  font-size: 16px;\n  color: #605e5c;\n}\n\n.Tile-links a {\n  text-decoration: none;\n  color: #0078d4;\n}\n\n.Tile-links a:hover {\n  text-decoration: underline;\n}\n\n.Tile--intro {\n  grid-column: span 2;\n  padding: 20px;\n}\n\n.Tile--intro h1 {\n  font-size: 24px;\n  font-weight: 300;\n  margin: 8px 0;\n  padding: 0;\n}\n\n.Tile--intro p {\n  font-size: 14px;\n  margin: 0;\n}\n\n.Tile--intro a,\n.Tile--intro a:visited {\n  color: #0078d4;\n}\n"
  },
  {
    "path": "assets/step.css",
    "content": "@import url(https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css);\n\nbody {\n  display: flex;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nimg {\n  max-width: 100%;\n}\n\nli {\n  margin-bottom: 3px;\n}\n\nblockquote {\n  background: white;\n  padding: 0px 5px;\n}\n\nbody.ms-Fabric {\n  font-size: 16px;\n  line-height: 20px;\n}\n\n#app {\n  flex: 1 1 40%;\n  padding: 50px;\n}\n\n#app pre {\n  border-radius: 2px;\n  border: 1px solid #999;\n  padding: 15px;\n}\n\n#markdownReadme {\n  box-sizing: border-box;\n  flex: 1 1 60%;\n  background: #f3f2f1;\n  padding: 50px;\n  margin: 0 auto;\n  height: 100vh;\n  overflow: auto;\n}\n\n#markdownReadme.exercise {\n  background-color: #ecf6fd;\n}\n\n#markdownReadme pre {\n  padding: 5px;\n  border-radius: 3px;\n  background: #1e1e1e;\n  margin: 15px 0;\n  overflow: auto;\n}\n\n#markdownReadme code {\n  font-family: Consolas, Menlo, Monaco, monospace;\n  font-size: 0.9em;\n  background-color: white;\n  padding: 0.2em 0.4em;\n  border-radius: 5px;\n}\n\n#markdownReadme code.hljs {\n  background-color: inherit;\n  font-weight: bold;\n}\n\n/**\n * highlight.js style\n */\n/*\n * Visual Studio 2015 dark style\n * Author: Nicolas LLOBERA <nllobera@gmail.com>\n */\n\n.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 0.5em;\n  background: #1e1e1e;\n  color: #fff;\n}\n\n.hljs-keyword,\n.hljs-literal,\n.hljs-symbol,\n.hljs-name {\n  color: #5da4df;\n}\n.hljs-link {\n  color: #569cd6;\n  text-decoration: underline;\n}\n\n.hljs-built_in,\n.hljs-type {\n  color: #4ec9b0;\n}\n\n.hljs-number,\n.hljs-class {\n  color: #b8d7a3;\n}\n\n.hljs-string,\n.hljs-meta-string {\n  color: #d69d85;\n}\n\n.hljs-regexp,\n.hljs-template-tag {\n  color: #9a5334;\n}\n\n.hljs-subst,\n.hljs-function,\n.hljs-title,\n.hljs-params,\n.hljs-formula {\n  color: #dcdcdc;\n}\n\n.hljs-comment,\n.hljs-quote {\n  color: #6dce5e;\n  font-style: italic;\n}\n\n.hljs-doctag {\n  color: #608b4e;\n}\n\n.hljs-meta,\n.hljs-meta-keyword,\n.hljs-tag {\n  color: #9b9b9b;\n}\n\n.hljs-variable,\n.hljs-template-variable {\n  color: #bd63c5;\n}\n\n.hljs-attr,\n.hljs-attribute,\n.hljs-builtin-name {\n  color: #9cdcfe;\n}\n\n.hljs-section {\n  color: gold;\n}\n\n.hljs-emphasis {\n  font-style: italic;\n}\n\n.hljs-strong {\n  font-weight: bold;\n}\n\n/*.hljs-code {\n  font-family:'Monospace';\n}*/\n\n.hljs-bullet,\n.hljs-selector-tag,\n.hljs-selector-id,\n.hljs-selector-class,\n.hljs-selector-attr,\n.hljs-selector-pseudo {\n  color: #d7ba7d;\n}\n\n.hljs-addition {\n  background-color: #144212;\n  display: inline-block;\n  width: 100%;\n}\n\n.hljs-deletion {\n  background-color: #600;\n  display: inline-block;\n  width: 100%;\n}\n"
  },
  {
    "path": "azure-pipelines.pr.yml",
    "content": "# Node.js\n# Build a general Node.js project with npm.\n# Add steps that analyze code, save build artifacts, deploy, and more:\n# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript\n\ntrigger: none\n\npool:\n  vmImage: 'Ubuntu-16.04'\n\nsteps:\n  - task: NodeTool@0\n    inputs:\n      versionSpec: '10.x'\n    displayName: 'Install Node.js'\n\n  - script: |\n      npm install\n      npm run build\n    displayName: 'npm install, build'\n"
  },
  {
    "path": "azure-pipelines.yml",
    "content": "# Node.js\n# Build a general Node.js project with npm.\n# Add steps that analyze code, save build artifacts, deploy, and more:\n# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript\n\npr: none\n\ntrigger:\n  - master\n\npool:\n  vmImage: 'Ubuntu-16.04'\n\nsteps:\n  - task: NodeTool@0\n    inputs:\n      versionSpec: '10.x'\n    displayName: 'Install Node.js'\n\n  - script: |\n      git config user.email \"kchau@microsoft.com\"\n      git config user.name \"Ken Chau\"\n      git remote set-url origin https://kenotron:$(git.pat)@github.com/Microsoft/frontend-bootcamp.git\n      git checkout master\n      git pull\n      npm install\n      git checkout -b build_$(Build.BuildId)\n      npm run build\n      git add .\n      git commit -m \"adding docs\"\n      git subtree split --prefix docs -b temp_$(Build.BuildId)\n      git push origin temp_$(Build.BuildId):refs/heads/gh-pages --force\n    displayName: 'npm install, build and push docs to gh-pages'\n"
  },
  {
    "path": "bonus-jest/demo/README.md",
    "content": "# Bonus: Testing TypeScript code with Jest (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\n[Jest](https://jestjs.io/) is a test framework made by Facebook and is very popular in the React and wider JS ecosystems.\n\nIn this exercise, we will work on implementing simple unit tests using Jest.\n\n## Jest features\n\n- Multi-threaded and isolated test runner\n- Provides a fake browser-like environment if needed (window, document, DOM, etc) using [jsdom](https://github.com/jsdom/jsdom)\n- Snapshots: Jest can create text-based snapshots of rendered components. These snapshots can be checked in and show API or large object changes alongside code changes in pull requests.\n- Code coverage is integrated (`--coverage`)\n- Very clear error messages showing where a test failure occurred\n\n## How to use Jest\n\nUsing `create-react-app` or other project generators, Jest should already be pre-configured. Running `npm test` usually will trigger it!\n\nSetting up Jest in a new project is outside the scope of this course, but if you're interested in how it works, take a look at the bootcamp project's `jest.config.js` and `jest.setup.js` files or the [getting started documentation](https://jestjs.io/docs/en/getting-started).\n\n## What does a test look like?\n\n```ts\n// describe(), it() and expect() are globally exported,\n// so they don't need to be imported in each test file\ndescribe('Something to be tested', () => {\n  it('should describe the behavior', () => {\n    expect(true).toBe(true);\n  });\n});\n```\n\n- `describe()` takes a string describing the thing to be tested (often a component or file name) and a function which runs tests.\n- `it()` takes a string describing the behavior to be tested and a function to run the test.\n- `expect()` takes the actual value as a parameter and returns an object with various \"matcher\" methods to test against an expected value/condition. `toBe` is just one of [many available matchers](https://jestjs.io/docs/en/expect).\n\n> When choosing test names, think of the strings passed to `describe` and `it` as forming a sentence. For example, inside  `describe('MyComponent', ...)` you might have a test `it('renders some text', ...)`, which forms the sentence a sentence describing the behavior: \"MyComponent renders some text.\"\n\n## Testing React components using Enzyme\n\n[Enzyme](https://airbnb.io/enzyme/) is made by Airbnb and provides utilities to help test React components.\n\nIn a real app using ReactDOM, the top-level component will be rendered on the page using `ReactDOM.render()`. Enzyme provides a lighter-weight `mount()` function which is usually adequate for testing purposes.\n\n`mount()` returns a wrapper that can be inspected and provides functionality like `find()`, simulating clicks, etc.\n\nThe following code demonstrates how Enzyme can be used to help test React components.\n\n```tsx\nimport React from 'react';\nimport { mount } from 'enzyme';\nimport { TestMe } from './TestMe';\n\ndescribe('TestMe Component', () => {\n  it('should have a non-clickable component when the original InnerMe is clicked', () => {\n    const wrapper = mount(<TestMe name=\"world\" />);\n    wrapper.find('#innerMe').simulate('click');\n    expect(wrapper.find('#innerMe').text()).toBe('Clicked');\n  });\n});\n\ndescribe('Foo Component Tests', () => {\n  it('allows us to set props', () => {\n    const wrapper = mount(<Foo bar=\"baz\" />);\n    expect(wrapper.props().bar).toBe('baz');\n    wrapper.setProps({ bar: 'foo' });\n    expect(wrapper.props().bar).toBe('foo');\n\n    wrapper.find('button').simulate('click');\n  });\n});\n```\n\n## Advanced topics\n\n### Mocking\n\nMocking functions is a large part of what makes Jest a powerful testing library. Jest actually intercepts the module loading process in Node.js, allowing it to mock entire modules if needed.\n\nThere are many ways to mock, as you'd imagine in a language as flexible as JS. We only look at the simplest case, but there's a lot of depth here.\n\nTo mock a function:\n\n```ts\nit('some test function', () => {\n  const mockCallback = jest.fn(x => 42 + x);\n  mockCallback(1);\n  mockCallback(2);\n  expect(mockCallback).toHaveBeenCalledTimes(2);\n});\n```\n\nRead more about jest mocking [here](https://jestjs.io/docs/en/mock-functions.html).\n\n### Async testing\n\nFor testing async scenarios, the test runner needs some way to know when the scenario is finished. Jest tests can handle async scenarios using callbacks, promises, or async/await.\n\n```ts\n// Callback\nit('tests callback functions', (done) => {\n  setTimeout(() => {\n    done();\n  }, 1000);\n});\n\n// Returning a promise\nit('tests promise functions', () => {\n  return someFunctionThatReturnsPromise());\n});\n\n// Async/await (recommended)\nit('tests async functions', async () => {\n  expect(await someFunction()).toBe(5);\n});\n```\n\n# Demo\n\n## Jest basics\n\nIn this repo, we can start an inner loop development of tests by running `npm test` from the root of the `frontend-bootcamp` folder.\n\nTake a look at code inside `demo/src`:\n\n1. `index.ts` exports a few functions for a counter as well as a function for squaring numbers. We'll use this last function to demonstrate how mocks work.\n\n2. `multiply.ts` is a contrived example of a function that is exported\n\n3. `index.spec.ts` is the test file\n\nNote how tests are re-run when either test files or source files under `src` are saved.\n"
  },
  {
    "path": "bonus-jest/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n    <div id=\"app\">\n      For this step, we look at unit testing. Run\n      <pre>npm test</pre>\n      in the command line.\n    </div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "bonus-jest/demo/src/TestMe.spec.tsx",
    "content": "import React from 'react';\nimport { mount } from 'enzyme';\nimport { TestMe } from './TestMe';\n\ndescribe('TestMe Component', () => {\n  it('should have a non-clickable component when the original InnerMe is clicked', () => {\n    const wrapper = mount(<TestMe name=\"world\" />);\n    wrapper.find('#innerMe').simulate('click');\n    expect(wrapper.find('#innerMe').text()).toBe('Clicked');\n  });\n});\n"
  },
  {
    "path": "bonus-jest/demo/src/TestMe.tsx",
    "content": "import React from 'react';\n\nexport interface TestMeProps {\n  name: string;\n}\n\nexport interface TestMeState {\n  clicked: boolean;\n}\n\nexport const TestMe = (props: TestMeProps) => {\n  return (\n    <div id=\"testMe\">\n      <InnerMe name={props.name} />\n    </div>\n  );\n};\n\nexport class InnerMe extends React.Component<TestMeProps, TestMeState> {\n  state = {\n    clicked: false\n  };\n\n  onClick = () => {\n    this.setState({ clicked: true });\n  };\n\n  render() {\n    return !this.state.clicked ? (\n      <div onClick={this.onClick} id=\"innerMe\">\n        Hello {this.props.name}, Click Me\n      </div>\n    ) : (\n      <div id=\"innerMe\">Clicked</div>\n    );\n  }\n}\n"
  },
  {
    "path": "bonus-jest/demo/src/index.spec.tsx",
    "content": "import React from 'react';\nimport { mount } from 'enzyme';\n\ndescribe('index', () => {\n  it('placeholder', () => {\n  });\n});\n"
  },
  {
    "path": "bonus-jest/demo/src/index.ts",
    "content": "import { multiply } from './multiply';\n\nlet counter = 0;\n\nexport function getCount() {\n  return counter;\n}\n\nexport function increment() {\n  return ++counter;\n}\n\nexport function decrement() {\n  return --counter;\n}\n\nexport function square(x: number) {\n  return multiply(x, x);\n}\n"
  },
  {
    "path": "bonus-jest/demo/src/multiply.ts",
    "content": "export function multiply(x: number, y: number) {\n  return x * y;\n}\n"
  },
  {
    "path": "bonus-jest/exercise/README.md",
    "content": "# Bonus: Testing TypeScript code with Jest (Exercise)\n\n[Lessons](../../) | [Demo](../demo/)\n\nStart the test runner by running `npm test` in the root of the `frontend-bootcamp` folder.\n\n## Basic testing\n\n1. Look at `exercise/src/stack.ts` for a sample implementation of a stack\n\n2. Follow the instructions inside `stack.spec.ts` file to complete the two tests\n\n## Enzyme Testing\n\n1. Open up `exercise/src/TestMe.spec.tsx`\n\n2. Fill in the test using Enzyme concepts introduced in the demo\n"
  },
  {
    "path": "bonus-jest/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" class=\"exercise\" data-src=\"./README.md\"></div>\n    <div id=\"app\">\n      For this step, we look at unit testing. Run\n      <pre>npm test</pre>\n      in the command line.\n    </div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "bonus-jest/exercise/src/TestMe.spec.tsx",
    "content": "import React from 'react';\nimport { mount } from 'enzyme';\nimport { TestMe } from './TestMe';\n\ndescribe('TestMe Component', () => {\n  it('should render correctly when hovered', () => {\n    // TODO:\n    // 1. mount a <TestMe> Component here\n    // 2. use enzyme wrapper's find() method to retrieve the #innerMe element\n    // 3. simulate a hover with \"mouseover\" event via the simulate() API\n    // 4. make assertions with expect on the text() of the #innerMe element\n  });\n});\n"
  },
  {
    "path": "bonus-jest/exercise/src/TestMe.tsx",
    "content": "import React from 'react';\n\nexport interface TestMeProps {\n  name: string;\n}\n\nexport interface TestMeState {\n  enabled: boolean;\n}\n\nexport const TestMe = (props: TestMeProps) => {\n  return (\n    <div id=\"testMe\">\n      <InnerMe name={props.name} />\n    </div>\n  );\n};\n\nexport class InnerMe extends React.Component<TestMeProps, TestMeState> {\n  state = {\n    enabled: false\n  };\n\n  onMouseOver = () => {\n    this.setState({ enabled: true });\n  };\n\n  render() {\n    return !this.state.enabled ? (\n      <div onMouseOver={this.onMouseOver} id=\"innerMe\">\n        Hello {this.props.name}, Hover Over Me\n      </div>\n    ) : (\n      <div id=\"innerMe\">Enabled</div>\n    );\n  }\n}\n"
  },
  {
    "path": "bonus-jest/exercise/src/index.ts",
    "content": "export { Stack } from './stack';\nexport { TestMe } from './TestMe';\n"
  },
  {
    "path": "bonus-jest/exercise/src/stack.spec.ts",
    "content": "// TODO: Import the stack here\n\ndescribe('Stack', () => {\n  it('should push item to the top of the stack', () => {\n    // TODO: implement test here:\n    // 1. Instantiate a new Stack - i.e. const stack = new Stack<number>();\n    // 2. Use stack push calls to add some items to the stack\n    // 3. Write assertions via the expect() API\n  });\n\n  it('should pop the item from the top of stack', () => {\n    // TODO: implement test here:\n    // 1. Instantiate a new Stack - i.e. const stack = new Stack<number>();\n    // 2. Use stack push calls to add some items to the stack\n    // 3. pop a few items off the stack\n    // 4. write assertions via the expect() API\n  });\n});\n"
  },
  {
    "path": "bonus-jest/exercise/src/stack.ts",
    "content": "export class Stack<T> {\n  private _items: T[] = [];\n\n  /** Add an item to the top of the stack. */\n  push(item: T) {\n    this._items.push(item);\n  }\n\n  /** Remove the top item from the stack and return it. */\n  pop(): T {\n    if (this._items.length > 0) {\n      return this._items.pop();\n    }\n  }\n\n  /** Return the top item from the stack without removing it. */\n  peek(): T {\n    if (this._items.length > 0) {\n      return this._items[this._items.length - 1];\n    }\n  }\n\n  /** Get the number of items in the stack/ */\n  get count(): number {\n    return this._items.length;\n  }\n}\n"
  },
  {
    "path": "bonus-servicecalls/demo/README.md",
    "content": "# Bonus: Service calls (Demo)\n\n[Lessons](../../)\n\n> Note: this step doesn't work with the live site on github.io. Clone the repo to try this step out.\n\n## `redux-thunk`: side effects inside action creators\n\nThe [Redux Thunk](https://github.com/reduxjs/redux-thunk) middleware allows writing actions that make service calls.\n\nRemember those simple little action functions? They're called action creators. These little functions can be charged with superpowers to allow asynchronous side effects to happen while creating the messages. Asynchronous side effects include service calls against APIs.\n\nAction creators are a natural place to put service calls. Redux Thunk middleware passes `dispatch()` and `getState()` from the store into the action creators. This allows the action creator itself to dispatch different actions in between async side effects. Combined with the async / await syntax, coding service calls is a cinch!\n\nMost of the time, in a single-page app, we apply **optimistic UI updates**. We can update the UI before the network call completes so the UI feels more responsive.\n\n## Action creator with a thunk\n\n[What's a thunk?](https://daveceddia.com/what-is-a-thunk/) - it is a wrapper function that returns a function. What does it do? Let's find out!\n\nThis action creator just returns an object:\n\n```ts\nfunction addTodo(label: string) {\n  return { type: 'addTodo', id: uuid(), label };\n}\n```\n\nIn order for us to make service calls, we need to supercharge this with the power of `redux-thunk`\n\n```ts\nfunction addTodo(label: string) {\n  return async (dispatch: any, getState: () => Store) => {\n    const addAction = actions.addTodo(label);\n    const id = addAction.id;\n    dispatch(addAction);\n    await service.add(id, getState().todos[id]);\n  };\n}\n```\n\nLet's make some observations:\n\n1. The outer function has the same function signature as the previous one\n2. It returns a function that has `dispatch` and `getState` as parameters\n3. The inner function is `async` enabled, and can await on \"side effects\" like asynchronous service calls\n4. This inner function has the ability to dispatch additional actions because it has been passed the `dispatch()` function from the store\n5. This inner function also has access to the state tree via `getState()`\n"
  },
  {
    "path": "bonus-servicecalls/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n    <div id=\"app\"></div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/actions/index.ts",
    "content": "import uuid from 'uuid/v4';\nimport { Store } from '../store';\nimport * as service from '../service';\n\nexport const actions = {\n  addTodo: (label: string) => ({ type: 'addTodo', id: uuid(), label }),\n  remove: (id: string) => ({ type: 'remove', id }),\n  complete: (id: string) => ({ type: 'complete', id }),\n  clear: () => ({ type: 'clear' }),\n  setFilter: (filter: string) => ({ type: 'setFilter', filter }),\n  edit: (id: string, label: string) => ({ type: 'edit', id, label })\n};\n\nexport const actionsWithService = {\n  addTodo: (label: string) => {\n    return async (dispatch: any, getState: () => Store) => {\n      const addAction = actions.addTodo(label);\n      const id = addAction.id;\n      dispatch(addAction);\n      await service.add(id, getState().todos[id]);\n    };\n  },\n\n  remove: (id: string) => {\n    return async (dispatch: any, getState: () => Store) => {\n      dispatch(actions.remove(id));\n      await service.remove(id);\n    };\n  },\n\n  complete: (id: string) => {\n    return async (dispatch: any, getState: () => Store) => {\n      dispatch(actions.complete(id));\n      await service.update(id, getState().todos[id]);\n    };\n  },\n\n  clear: () => {\n    return async (dispatch: any, getState: () => Store) => {\n      dispatch(actions.clear());\n      await service.updateAll(getState().todos);\n    };\n  },\n\n  edit: (id: string, label: string) => {\n    return async (dispatch: any, getState: () => Store) => {\n      dispatch(actions.edit(id, label));\n      await service.update(id, getState().todos[id]);\n    };\n  }\n};\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/components/TodoApp.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nimport { TodoHeader } from './TodoHeader';\nimport { TodoList } from './TodoList';\n\nexport const TodoApp = () => {\n  return (\n    <Stack horizontalAlign=\"center\">\n      <Stack style={{ width: 400 }} gap={25}>\n        <TodoHeader />\n        <TodoList />\n        <TodoFooter />\n      </Stack>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabric-react';\nimport { actionsWithService } from '../actions';\nimport { connect } from 'react-redux';\nimport { Store } from '../store';\n\ninterface TodoFooterProps {\n  todos: Store['todos'];\n  clear: () => void;\n}\n\nconst TodoFooter = (props: TodoFooterProps) => {\n  const { todos, clear } = props;\n\n  const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\">\n      <Text>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </Text>\n      <DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>\n    </Stack>\n  );\n};\n\nconst ConnectedTodoFooter = connect(\n  (state: Store) => ({\n    todos: state.todos\n  }),\n  (dispatch: any) => ({\n    clear: () => dispatch(actionsWithService.clear())\n  })\n)(TodoFooter);\n\nexport { ConnectedTodoFooter as TodoFooter };\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';\nimport { FilterTypes } from '../store';\nimport { actions, actionsWithService } from '../actions';\nimport { connect } from 'react-redux';\n\ninterface TodoHeaderProps {\n  addTodo: (label: string) => void;\n  setFilter: (filter: FilterTypes) => void;\n}\n\ninterface TodoHeaderState {\n  labelInput: string;\n}\n\nclass TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {\n  constructor(props: TodoHeaderProps) {\n    super(props);\n    this.state = { labelInput: undefined };\n  }\n\n  render() {\n    return (\n      <Stack gap={10}>\n        <Stack horizontal horizontalAlign=\"center\">\n          <Text variant=\"xxLarge\">todos</Text>\n        </Stack>\n\n        <Stack horizontal gap={10}>\n          <Stack.Item grow>\n            <TextField\n              placeholder=\"What needs to be done?\"\n              value={this.state.labelInput}\n              onChange={this.onChange}\n              styles={props => ({\n                ...(props.focused && {\n                  field: {\n                    backgroundColor: '#c7e0f4'\n                  }\n                })\n              })}\n            />\n          </Stack.Item>\n          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>\n        </Stack>\n\n        <Pivot onLinkClick={this.onFilter}>\n          <PivotItem headerText=\"all\" />\n          <PivotItem headerText=\"active\" />\n          <PivotItem headerText=\"completed\" />\n        </Pivot>\n      </Stack>\n    );\n  }\n\n  private onAdd = () => {\n    this.props.addTodo(this.state.labelInput);\n    this.setState({ labelInput: undefined });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ labelInput: newValue });\n  };\n\n  private onFilter = (item: PivotItem) => {\n    this.props.setFilter(item.props.headerText as FilterTypes);\n  };\n}\n\nconst ConnectedTodoHeader = connect(\n  state => ({}),\n  (dispatch: any) => ({\n    addTodo: label => dispatch(actionsWithService.addTodo(label)),\n    setFilter: filter => dispatch(actions.setFilter(filter))\n  })\n)(TodoHeader);\n\nexport { ConnectedTodoHeader as TodoHeader };\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem';\nimport { connect } from 'react-redux';\nimport { Store } from '../store';\n\ninterface TodoListProps {\n  todos: Store['todos'];\n  filter: Store['filter'];\n}\n\nconst TodoList = (props: TodoListProps) => {\n  const { filter, todos } = props;\n  const filteredTodos = Object.keys(todos).filter(id => {\n    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n  });\n\n  return (\n    <Stack gap={10}>\n      {filteredTodos.map(id => (\n        <TodoListItem key={id} id={id} />\n      ))}\n    </Stack>\n  );\n};\n\nconst ConnectedTodoList = connect((state: Store) => ({ ...state }))(TodoList);\nexport { ConnectedTodoList as TodoList };\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';\nimport { actionsWithService } from '../actions';\nimport { Store } from '../store';\nimport { connect } from 'react-redux';\n\ninterface TodoListItemProps {\n  id: string;\n  todos: Store['todos'];\n  complete: (id: string) => void;\n  remove: (id: string) => void;\n  edit: (id: string, label: string) => void;\n}\n\ninterface TodoListItemState {\n  editing: boolean;\n  editLabel: string;\n}\n\nclass TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {\n  constructor(props: TodoListItemProps) {\n    super(props);\n    this.state = { editing: false, editLabel: undefined };\n  }\n\n  render() {\n    const { id, todos, complete, remove } = this.props;\n\n    const item = todos[id];\n\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {!this.state.editing && (\n          <>\n            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />\n            <div>\n              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />\n              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />\n            </div>\n          </>\n        )}\n\n        {this.state.editing && (\n          <Stack.Item grow>\n            <Stack horizontal gap={10}>\n              <Stack.Item grow>\n                <TextField value={this.state.editLabel} onChange={this.onChange} />\n              </Stack.Item>\n              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>\n            </Stack>\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  }\n\n  private onEdit = () => {\n    const { id, todos } = this.props;\n    const { label } = todos[id];\n\n    this.setState({\n      editing: true,\n      editLabel: this.state.editLabel || label\n    });\n  };\n\n  private onDoneEdit = () => {\n    this.props.edit(this.props.id, this.state.editLabel);\n    this.setState({\n      editing: false,\n      editLabel: undefined\n    });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ editLabel: newValue });\n  };\n}\n\nconst ConnectedTodoListItem = connect(\n  (state: Store) => ({ todos: state.todos }),\n  (dispatch: any) => ({\n    complete: id => dispatch(actionsWithService.complete(id)),\n    remove: id => dispatch(actionsWithService.remove(id)),\n    edit: (id, label) => dispatch(actionsWithService.edit(id, label))\n  })\n)(TodoListItem);\n\nexport { ConnectedTodoListItem as TodoListItem };\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { reducer } from './reducers';\nimport { createStore, applyMiddleware } from 'redux';\nimport { TodoApp } from './components/TodoApp';\nimport { Provider } from 'react-redux';\nimport { initializeIcons } from '@uifabric/icons';\nimport { composeWithDevTools } from 'redux-devtools-extension';\nimport thunk from 'redux-thunk';\nimport * as service from './service';\nimport { Store, FilterTypes } from './store';\n\n(async () => {\n  const preloadStore = {\n    todos: (await service.getAll()) as Store['todos'],\n    filter: 'all' as FilterTypes\n  };\n\n  const store = createStore(reducer, preloadStore, composeWithDevTools(applyMiddleware(thunk)));\n\n  initializeIcons();\n\n  ReactDOM.render(\n    <Provider store={store}>\n      <TodoApp />\n    </Provider>,\n    document.getElementById('app')\n  );\n})();\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/reducers/index.ts",
    "content": "import { Store } from '../store';\nimport { combineReducers } from 'redux';\nimport { createReducer } from 'redux-starter-kit';\n\nexport const todosReducer = createReducer<Store['todos']>(\n  {},\n  {\n    addTodo(state, action) {\n      state[action.id] = { label: action.label, completed: false };\n    },\n\n    remove(state, action) {\n      delete state[action.id];\n    },\n\n    clear(state, action) {\n      Object.keys(state).forEach(key => {\n        if (state[key].completed) {\n          delete state[key];\n        }\n      });\n    },\n\n    complete(state, action) {\n      state[action.id].completed = !state[action.id].completed;\n    },\n\n    edit(state, action) {\n      state[action.id].label = action.label;\n    }\n  }\n);\n\nexport const filterReducer = createReducer<Store['filter']>('all', {\n  setFilter(state, action) {\n    return action.filter;\n  }\n});\n\nexport const reducer = combineReducers({\n  todos: todosReducer,\n  filter: filterReducer\n});\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/service/index.ts",
    "content": "import { TodoItem, Store } from '../store';\nconst HOST = 'http://localhost:3000';\n\nexport async function add(id: string, todo: TodoItem) {\n  const response = await fetch(`${HOST}/todos/${id}`, {\n    method: 'post',\n    headers: { 'content-type': 'application/json' },\n    body: JSON.stringify(todo)\n  });\n\n  return await response.json();\n}\n\nexport async function update(id: string, todo: TodoItem) {\n  const response = await fetch(`${HOST}/todos/${id}`, {\n    method: 'put',\n    headers: { 'content-type': 'application/json' },\n    body: JSON.stringify(todo)\n  });\n\n  return await response.json();\n}\n\nexport async function remove(id: string) {\n  const response = await fetch(`${HOST}/todos/${id}`, {\n    method: 'delete'\n  });\n\n  return await response.json();\n}\n\nexport async function getAll() {\n  const response = await fetch(`${HOST}/todos`, {\n    method: 'get'\n  });\n\n  return await response.json();\n}\n\nexport async function updateAll(todos: Store['todos']) {\n  const response = await fetch(`${HOST}/todos`, {\n    method: 'post',\n    headers: { 'content-type': 'application/json' },\n    body: JSON.stringify(todos)\n  });\n\n  return await response.json();\n}\n"
  },
  {
    "path": "bonus-servicecalls/demo/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link rel=\"stylesheet\" href=\"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css\" />\n    <link rel=\"stylesheet\" href=\"./assets/shared.css\" />\n    <title>Microsoft Days in the Web - Welcome</title>\n  </head>\n  <body class=\"ms-Fabric\">\n    <div class=\"Container\">\n      <h1>Frontend Bootcamp <a href=\"https://github.com/Microsoft/frontend-bootcamp\">View on GitHub</a></h1>\n    </div>\n    <div class=\"Container\">\n      <ul class=\"Tiles\">\n        <li class=\"Tile Tile--intro\">\n          <h2>Day 1</h2>\n          Get set up and learn to build a todo app using HTML, CSS, JavaScript, and React.\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            Intro to HTML\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step1-01/lesson/\">lesson</a> | <a target=\"_blank\" href=\"./step1-01/demo/\">demo</a> |\n              <a target=\"_blank\" href=\"./step1-01/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            Intro to CSS\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step1-02/lesson/\">lesson</a> | <a target=\"_blank\" href=\"./step1-02/demo/\">demo</a> |\n              <a target=\"_blank\" href=\"./step1-02/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            Intro to JS\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step1-03/lesson/\">lesson</a> | <a target=\"_blank\" href=\"./step1-03/demo/\">demo</a> |\n              <a target=\"_blank\" href=\"./step1-03/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            React Intro\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step1-04/lesson/\">lesson</a> | <a target=\"_blank\" href=\"./step1-04/demo/\">demo</a> |\n              <a target=\"_blank\" href=\"./step1-04/final/\">final</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            React Components\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step1-05/demo/\">demo</a> | <a target=\"_blank\" href=\"./step1-05/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            State-Driven UI\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step1-06/demo/\">demo</a> | <a target=\"_blank\" href=\"./step1-06/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            Types & <br />UI-Driven State\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step1-07/demo/\">demo</a> | <a target=\"_blank\" href=\"./step1-07/exercise/\">exercise</a> |\n              <a target=\"_blank\" href=\"./step1-07/final/\">final</a>\n            </div>\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div class=\"Container\">\n      <ul class=\"Tiles\">\n        <li class=\"Tile Tile--intro\">\n          <h2>Day 2</h2>\n          Take your todo app to the next level with TypeScript, Fabric React, and Redux.\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            TypeScript Basics\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step2-01/demo/\">demo</a> | <a target=\"_blank\" href=\"./step2-01/exercise/\">exercise</a> |\n              <a target=\"_blank\" href=\"./step2-01/final/\">final</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            UI Fabric\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step2-02/demo/\">demo</a> | <a target=\"_blank\" href=\"./step2-02/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            Theming and Styling\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step2-03/demo/\">demo</a> | <a target=\"_blank\" href=\"./step2-03/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            React Context\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step2-04/demo/\">demo</a> | <a target=\"_blank\" href=\"./step2-04/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            Redux: The Store\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step2-05/demo/\">demo</a> | <a target=\"_blank\" href=\"./step2-05/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            Redux: React Binding\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./step2-06/demo/\">demo</a> | <a target=\"_blank\" href=\"./step2-06/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div class=\"Container\">\n      <ul class=\"Tiles\">\n        <li class=\"Tile Tile--intro\">\n          <h2>Bonus Content</h2>\n          Some Extra Bonus Lessons!! Yay! Bonus!!\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <a target=\"_blank\" href=\"./bonus-servicecalls/demo/\" class=\"Tile-link\"> Redux: Service Calls </a>\n        </li>\n        <li class=\"Tile Tile--numbered\">\n          <div class=\"Tile-link\">\n            Testing with Jest\n            <div class=\"Tile-links\">\n              <a target=\"_blank\" href=\"./bonus-jest/demo/\">demo</a> | <a target=\"_blank\" href=\"./bonus-jest/exercise/\">exercise</a>\n            </div>\n          </div>\n        </li>\n      </ul>\n    </div>\n    <div class=\"Container\">\n      <ul class=\"Tiles\">\n        <li class=\"Tile Tile--intro\">\n          <h2>Playground</h2>\n          Build your app here!\n        </li>\n        <li class=\"Tile Tile--unnumbered\"><a target=\"_blank\" href=\"./playground/\" class=\"Tile-link\">Playground</a></li>\n      </ul>\n    </div>\n    <script src=\"./assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "jest.config.js",
    "content": "module.exports = {\n  preset: 'ts-jest',\n  setupFiles: ['./jest.setup.js'],\n  testEnvironment: 'jsdom',\n  testPathIgnorePatterns: ['/node_modules/', '/docs/']\n};\n"
  },
  {
    "path": "jest.setup.js",
    "content": "// setup file\nvar enzyme = require('enzyme');\nvar Adapter = require('enzyme-adapter-react-16');\n\nenzyme.configure({ adapter: new Adapter() });\n"
  },
  {
    "path": "markdownReadme/src/index.ts",
    "content": "import marked, { Renderer } from 'marked';\nimport hljs from 'highlight.js/lib/highlight';\nimport javascript from 'highlight.js/lib/languages/javascript';\nimport typescript from 'highlight.js/lib/languages/typescript';\nimport html from 'highlight.js/lib/languages/xml';\nimport css from 'highlight.js/lib/languages/css';\n\nhljs.registerLanguage('javascript', javascript);\nhljs.registerLanguage('typescript', typescript);\nhljs.registerLanguage('html', html);\nhljs.registerLanguage('css', css);\n\nasync function run() {\n  const div = document.getElementById('markdownReadme');\n\n  // Create your custom renderer.\n  const renderer = new Renderer();\n  renderer.code = (code, language) => {\n    // Check whether the given language is valid for highlight.js.\n    const validLang = !!(language && hljs.getLanguage(language));\n    // Highlight only if the language is valid.\n    const highlighted = validLang ? hljs.highlight(language, code).value : code;\n    // Render the highlighted code with `hljs` class.\n    return `<pre><code class=\"hljs ${language}\">${highlighted}</code></pre>`;\n  };\n  marked.setOptions({ renderer });\n\n  if (div) {\n    const response = await fetch(div.dataset['src'] || '../README.md');\n    const markdownText = await response.text();\n    div.innerHTML = marked(markdownText);\n    restoreScroll(div);\n\n    div.addEventListener('scroll', evt => {\n      saveScroll(div);\n    });\n\n    window.addEventListener('resize', evt => {\n      saveScroll(div);\n    });\n  }\n}\n\nconst scrollKey = `${window.location.pathname}_scrolltop`;\n\nfunction saveScroll(div: HTMLElement) {\n  window.localStorage.setItem(scrollKey, String(div.scrollTop));\n}\n\nfunction restoreScroll(div: HTMLElement) {\n  const scrollTop = window.localStorage.getItem(scrollKey);\n  if (scrollTop) {\n    div.scrollTop = parseInt(scrollTop);\n  }\n}\n\nrun();\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"bootcamp\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/Microsoft/frontend-bootcamp\"\n  },\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"start:client\": \"webpack-dev-server --mode development --progress --open\",\n    \"test\": \"jest --watch\",\n    \"build\": \"rimraf docs && webpack --progress --mode production\",\n    \"start:server\": \"nodemon -w server server/index.js\",\n    \"start\": \"run-p start:server start:client\",\n    \"deploy-ghpages\": \"git push origin :gh-pages && git subtree push --prefix docs origin gh-pages\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"@types/body-parser\": \"^1.17.0\",\n    \"@types/cors\": \"^2.8.4\",\n    \"@types/enzyme\": \"^3.9.0\",\n    \"@types/express\": \"^4.16.1\",\n    \"@types/jest\": \"^23.3.13\",\n    \"@types/node\": \"~10.12.21\",\n    \"@types/react\": \"^16.7.20\",\n    \"@types/react-dom\": \"^16.0.11\",\n    \"@types/react-redux\": \"^7.0.0\",\n    \"@types/redux\": \"^3.6.0\",\n    \"@types/uuid\": \"^3.4.4\",\n    \"body-parser\": \"^1.18.3\",\n    \"copy-webpack-plugin\": \"^4.6.0\",\n    \"cors\": \"^2.8.5\",\n    \"css-loader\": \"^2.1.0\",\n    \"fork-ts-checker-async-overlay-webpack-plugin\": \"^0.1.0\",\n    \"fork-ts-checker-webpack-plugin\": \"^0.5.2\",\n    \"html-webpack-plugin\": \"^4.0.0-beta.5\",\n    \"jest\": \"^24.1.0\",\n    \"nodemon\": \"^1.18.9\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"rimraf\": \"^2.6.3\",\n    \"style-loader\": \"^0.23.1\",\n    \"ts-jest\": \"^24.0.0\",\n    \"ts-loader\": \"^5.3.3\",\n    \"tslint\": \"^5.13.0\",\n    \"typescript\": \"^3.3.3\",\n    \"uuid\": \"^3.3.2\",\n    \"webpack\": \"^4.28.4\",\n    \"webpack-cli\": \"^3.2.1\",\n    \"webpack-dev-server\": \"^3.1.14\"\n  },\n  \"dependencies\": {\n    \"@uifabric/fluent-theme\": \"^0.14.1\",\n    \"@uifabric/theme-samples\": \"^0.1.4\",\n    \"enzyme\": \"^3.9.0\",\n    \"enzyme-adapter-react-16\": \"^1.9.1\",\n    \"express\": \"^4.16.4\",\n    \"highlight.js\": \"^9.14.2\",\n    \"immer\": \"^1.12.1\",\n    \"marked\": \"^0.6.1\",\n    \"office-ui-fabric-react\": \"^6.144.0\",\n    \"react\": \"^16.8.3\",\n    \"react-dom\": \"^16.8.3\",\n    \"react-redux\": \"^6.0.0\",\n    \"redux\": \"^4.0.1\",\n    \"redux-devtools-extension\": \"^2.13.8\",\n    \"redux-starter-kit\": \"^0.4.3\",\n    \"redux-thunk\": \"^2.3.0\"\n  }\n}\n"
  },
  {
    "path": "playground/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <iframe\n      src=\"https://codesandbox.io/embed/jp590043k3?fontsize=14\"\n      style=\"width:100%; height:100vh; border:0; border-radius: 4px; overflow:hidden;\"\n      sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\"\n    ></iframe>\n  </body>\n</html>\n"
  },
  {
    "path": "prettier.config.js",
    "content": "module.exports = {\n  singleQuote: true,\n  tabWidth: 2,\n  printWidth: 140\n};\n"
  },
  {
    "path": "server/index.js",
    "content": "// @ts-check\nconst fs = require('fs');\nconst express = require('express');\nconst bodyParser = require('body-parser');\nconst cors = require('cors');\nconst app = express();\n\nconst store = {\n  /** @type {any} */\n  read() {\n    if (fs.existsSync('tmp.json')) {\n      store.todos = JSON.parse(fs.readFileSync('tmp.json').toString());\n    } else {\n      store.todos = {};\n    }\n\n    return store.todos;\n  },\n\n  save() {\n    fs.writeFileSync('tmp.json', JSON.stringify(store.todos));\n  },\n\n  todos: {}\n};\n\napp.use(bodyParser.json());\napp.use(cors());\n\napp.get('/todos', (req, res) => {\n  res.json(store.read());\n});\n\napp.put('/todos/:id', (req, res) => {\n  store.todos[req.params.id] = req.body;\n  store.save();\n  res.json('ok');\n});\n\napp.post('/todos/:id', (req, res) => {\n  store.todos[req.params.id] = req.body;\n  store.save();\n  res.json('ok');\n});\n\napp.delete('/todos/:id', (req, res) => {\n  delete store.todos[req.params.id];\n  store.save();\n  res.json('ok');\n});\n\napp.post('/todos', (req, res) => {\n  store.todos = req.body;\n  store.save();\n  res.json('ok');\n});\n\napp.get('/hello', (req, res) => {\n  res.send('world');\n});\n\napp.listen(process.env.NODE_ENV === 'production' ? undefined : 3000, () => {\n  console.log('Listening at http://localhost:3000');\n});\n"
  },
  {
    "path": "server/now.json",
    "content": "{\n  \"version\": 2,\n  \"name\": \"todo-server\",\n  \"builds\": [{ \"src\": \"*.js\", \"use\": \"@now/node-server\" }],\n  \"env\": {\n    \"NODE_ENV\": \"production\"\n  }\n}\n"
  },
  {
    "path": "step1-01/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Intro to HTML</title>\n    <link rel=\"stylesheet\" href=\"./style.css\" />\n\n    <style>\n      body {\n        padding: 10px;\n      }\n      hr {\n        margin: 40px;\n      }\n    </style>\n  </head>\n\n  <body>\n    <section>\n      <h2><a href=\"https://developer.mozilla.org/en-US/docs/Glossary/semantics\" target=\"_blank\" >Why Semantic HTML</a></h2>\n      <div>\n        <h3>Semantic</h3>\n        <p>This is a paragraph about why semantic HTML is important.</p>\n        <h4>A unordered list</h4>\n        <ul>\n          <li>Unordered item 1</li>\n          <li>Another unordered item</li>\n          <li>and another unordered item</li>\n        </ul>\n        <h4>An ordered list</h4>\n        <ol>\n          <li>Ordered item 1</li>\n          <li>Another ordered item</li>\n          <li>and another ordered item</li>\n        </ol>\n        <h4>Next up</h4>\n        <a href=\"https://fluidframework.com/\">Fluid Framework</a>\n      </div>\n      <br/><br/>\n      <div>\n        <div>Non Semantic</div>\n        <div>This is a paragraph about why semantic HTML is important.</div>\n        <div>A unordered list</div>\n        <div>\n          <div>Unordered item 1</div>\n          <div>Another unordered item</div>\n          <div>and another unordered item</div>\n        </div>\n        <div>An ordered list</div>\n        <div>\n          <div>Ordered item 1</div>\n          <div>Another ordered item</div>\n          <div>and another ordered item</div>\n        </div>\n        <div>Next up</div>\n        <div onClick=\"location.href='https://fluidframework.com/'\">Fluid Framework</a>\n      </div>\n      <br/>\n    </section>\n    <hr>\n    <section>\n      <h2><a target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata\">Document Metadata</a></h2>\n      <pre>\n  &lt;html&gt;\n    &lt;head&gt;\n      &lt;title&gt;Intro to HTML&lt;/title&gt;\n      &lt;link rel=&quot;stylesheet&quot; href=&quot;./style.css&quot; /&gt;\n      \n      &lt;style&gt;\n        hr {\n          margin: 40px;\n        }\n      &lt;/style&gt;\n    &lt;/head&gt;\n  &lt;/html&gt;\n      </pre>\n    </section>\n    <hr />\n\n    <section>\n      <h2><a target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning\">Content Sections</a></h2>\n      <pre>\n  &lt;body&gt;\n    &lt;header&gt;\n      &lt;h1&gt;Heading 1&lt;/h1&gt;\n      &lt;h2&gt;Heading 2&lt;/h2&gt;\n      &lt;h3&gt;Heading 3&lt;/h3&gt;\n      &lt;h4&gt;Heading 4&lt;/h4&gt;\n      &lt;h5&gt;Heading 5&lt;/h5&gt;\n      &lt;h6&gt;Heading 6&lt;/h6&gt;\n\n      &lt;nav&gt;&lt;/nav&gt;\n    &lt;/header&gt;\n\n    &lt;main&gt;\n      &lt;article&gt;&lt;/article&gt;\n      &lt;aside&gt;&lt;/aside&gt;\n    &lt;/main&gt;\n\n    &lt;footer&gt;&lt;/footer&gt;\n  &lt;/body&gt;\n      </pre>\n    </section>\n    <hr />\n    <section>\n      <h2><a target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content\">Block Text content</a></h2>\n\n      <h3>Div</h3>\n      <div>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo et quod odio velit, hic qui autem dolores magni earum ducimus dolorem\n        modi, numquam laborum accusamus adipisci eius excepturi doloremque vero.\n      </div>\n      <div>\n        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptatum maiores vitae? Architecto amet provident labore error\n        officia accusantium reiciendis, vero perspiciatis. Incidunt numquam enim deserunt, velit earum totam veritatis.\n        <div>\n          Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nobis ex optio, minus in, eum ratione magnam aut distinctio,\n          aliquid libero eaque nihil provident nemo est adipisci repellendus nisi numquam?\n        </div>\n      </div>\n\n      <h3>Paragraph</h3>\n      <p>\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel\n        eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum.\n      </p>\n      <p>\n        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit\n        enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non?\n      </p>\n\n      <h3>Ordered List</h3>\n      <ol>\n        <li>Ordered</li>\n        <li>list</li>\n        <li>items</li>\n      </ol>\n\n      <h3>Unordered List</h3>\n      <ul>\n        <li>Unordered</li>\n        <li>list</li>\n        <li>items</li>\n      </ul>\n\n      <h3>Pre</h3>\n      <pre>\n        // This is a pre tag            --           It respects spacing and tabs\n        \n        &lt;ul&gt;\n          &lt;li&gt;Unordered&lt;/li&gt;\n          &lt;li&gt;list&lt;/li&gt;\n          &lt;li&gt;items&lt;/li&gt;\n        &lt;/ul&gt;\n      </pre>\n\n      <pre>\n        // But actual code still needs to be escaped\n        \n        &amp;lt;ul&amp;gt;\n          &amp;lt;li&amp;gt;Unordered&amp;lt;/li&amp;gt;\n          &amp;lt;li&amp;gt;list&amp;lt;/li&amp;gt;\n          &amp;lt;li&amp;gt;items&amp;lt;/li&amp;gt;\n        &amp;lt;/ul&amp;gt;\n      </pre>\n    </section>\n    <hr />\n    <section>\n      <h2>\n        <a target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics\">Inline text elements</a>\n      </h2>\n\n      <h3>Anchor tag and span</h3>\n\n      <a target=\"_blank\" href=\"https://example.com\"> Anchor Tag with <span style=\"color: red\">span tag wrapped around part of it</span> </a>\n\n      <h3>Inline style tags</h3>\n      <p><b>b tag</b> <em>em tag</em> <i>i tag</i> <sub>sub tag</sub> <sup>sup tab</sup> <code>code tag</code></p>\n\n      <h3>Image tag</h3>\n      <div>\n        <img src=\"../../assets/fabric.jpg\" alt=\"Fabric Logo\" width=\"100\" />\n        <img src=\"../../assets/fabric.jpg\" alt=\"Fabric Logo\" width=\"50\" />\n        <img src=\"../../assets/fabric.jpg\" alt=\"Fabric Logo\" width=\"150\" />\n      </div>\n    </section>\n    <hr />\n    <section>\n      <h2><a target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content\">Table content</a></h2>\n\n      <table border=\"1\">\n        <thead>\n          <tr>\n            <th>Column 1 header</th>\n            <th>Column 2 header</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr>\n            <td>The table body</td>\n            <td>with two columns</td>\n          </tr>\n          <tr>\n            <td>Another table row</td>\n            <td>with two columns</td>\n          </tr>\n          <tr>\n            <td colspan=\"2\">Row spanning both columns</td>\n          </tr>\n        </tbody>\n      </table>\n    </section>\n    <hr />\n    <section>\n      <h2><a target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms\">Forms</a></h2>\n\n      <form action=\"\" method=\"get\" class=\"form-example\">\n        <div>\n          <label for=\"name\">Enter your name: </label>\n          <input type=\"text\" name=\"name\" id=\"name\" required />\n        </div>\n        <div>\n          <label for=\"name\">Enter your password: </label>\n          <input type=\"password\" name=\"password\" id=\"password\" required />\n        </div>\n        <div>\n          <div>\n            <input type=\"checkbox\" id=\"option1\" name=\"option1\" checked />\n            <label for=\"option1\">Option 1</label>\n          </div>\n\n          <div>\n            <input type=\"checkbox\" id=\"option2\" name=\"option2\" />\n            <label for=\"option2\">Option 2</label>\n          </div>\n        </div>\n\n        <div>\n          <input type=\"color\" id=\"color1\" name=\"color1\" value=\"#e66465\" />\n          <label for=\"color1\">Color 1</label>\n        </div>\n\n        <div>\n          <input type=\"color\" id=\"color2\" name=\"color2\" value=\"#f6b73c\" />\n          <label for=\"color2\">Color 2</label>\n        </div>\n        <div>\n          <label for=\"start\">Start date:</label>\n\n          <input type=\"date\" id=\"start\" name=\"trip-start\" value=\"2018-07-22\" min=\"2018-01-01\" max=\"2018-12-31\" />\n        </div>\n        <div>\n          <div>\n            <input type=\"radio\" id=\"Radio1\" name=\"radios\" value=\"Radio1\" checked />\n            <label for=\"Radio1\">Radio 1</label>\n          </div>\n\n          <div>\n            <input type=\"radio\" id=\"radio2\" name=\"radios\" value=\"radio2\" />\n            <label for=\"radio2\">Radio 2</label>\n          </div>\n\n          <div>\n            <input type=\"radio\" id=\"radio3\" name=\"radios\" value=\"radio3\" />\n            <label for=\"radio3\">Radio 3</label>\n          </div>\n        </div>\n        <div>\n          <label for=\"pet-select\">Choose a pet:</label>\n\n          <select id=\"pet-select\">\n            <option value=\"\">--Please choose an option--</option>\n            <option value=\"dog\">Dog</option>\n            <option value=\"cat\">Cat</option>\n            <option value=\"hamster\">Hamster</option>\n            <option value=\"parrot\">Parrot</option>\n            <option value=\"spider\">Spider</option>\n            <option value=\"goldfish\">Goldfish</option>\n          </select>\n        </div>\n\n        <div>\n          <input type=\"submit\" value=\"Subscribe!\" />\n        </div>\n      </form>\n    </section>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-01/demo/style.css",
    "content": "aside {\n  float: right;\n  width: 33%;\n  padding: 10px;\n  background: #eee;\n}\n\nform > div {\n  margin-bottom: 20px;\n}\n\nh2 a {\n  color: #0078d4;\n  text-decoration: none;\n}\n\nh2 a:hover {\n  text-decoration: underline;\n}\n\nbody {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n"
  },
  {
    "path": "step1-01/exercise/README.md",
    "content": "# Step 1.1 - Introduction to HTML (Exercise)\n\nSee index.html from [npm start](http://localhost:8080/step1-01/exercise/) or the [live site](https://microsoft.github.io/frontend-bootcamp/step1-01/exercise/) for the exercise."
  },
  {
    "path": "step1-01/exercise/answers.html",
    "content": "<h1>The Recipe 4th of July Baked Beans</h1>\n<p>It's great how a single meal can take you back dozens of years. This is one of those recipes that never seems to fail to impress.</p>\n<p>I learned this recipe from the cousin of one of my college friends back in Nashville Tennessee. We had an amazing 4th of July feast which included this recipe and some bratwurst like these <a href=\"https://www.culinaryhill.com/wisconsin-beer-brats/\" target=\"_blank\"> Wisconsin Beer Brats</a></p>\n\n<dl>\n    <dt>Prep Time:</dt>\n    <dd> 10 minutes</dd>\n    <dt>Cook time:</dt>\n    <dd> 3+ hours</dd>\n    <dt>Servings:</dt>\n    <dd> 12</dd>\n</dl>\n\n<h2>Ingredients:</h2>\n<ul>\n    <li>1LB Bacon chopped</li>\n    <li>3 Cans Bush's Original Baked Beans </li>\n    <li>1 Walla Wall Onion chopped </li>\n    <li>3 ground garlic cloves </li>\n    <li>4 Tablespoons of mustard </li>\n    <li>3 Tablespoons of molasses </li>\n    <li>4 Tablespoons of brown sugar </li>\n</ul>\n\n<h2>Directions:</h2>\n<ol>\n    <li>Cook bacon until it is mostly cooked, then drain most of the grease and put aside</li>\n    <li>Cook onion in remaining bacon grease</li>\n    <li>Combine onions and bacon, then add garlic, cook for a few more minutes</li>\n    <li>Add beans and get up to simmer temperature</li>\n    <li>Add mustard until your beans are nice and yellow</li>\n    <li>Add molasses until color darkens again</li>\n    <li>Add brown sugar until properly sweet</li>\n    <li>Simmer for a long time, occasionally stirring</li>\n</ol>\n\n<h2>Expert Tips:</h2>\n<p>Burning off most of the liquid gives you nice, hearty, sticky beans. If the beans get too dry, you can always add beer!</p>\n\n<h2> Nutritional Information:</h2>\n<dl>\n    <dt>Calories:</dt>\n    <dd> lots</dd>\n    <dt>Fat:</dt>\n    <dd> lots</dd>\n    <dt>Fun:</dt>\n    <dd> lots</dd>\n</dl>\n"
  },
  {
    "path": "step1-01/exercise/index.html",
    "content": "<html>\n  <body>\n    <div\n      class=\"codepen\"\n      data-theme-id=\"36294\"\n      data-prefill\n      data-editable=\"true\"\n      data-height=\"100%\"\n      data-theme-id=\"1\"\n      data-default-tab=\"css,result\"\n    >\n      <pre data-lang=\"css\">\n/*\nStep 1 Exercise\n\nThe power of HTML is its ability to represent complex information in a way that conveys meaning. In this exercise you are going to be creating an HTML page for my favorite recipe.\n\n## The Exercise\n\n1. Create a recipe page to host our recipe\n2. Use header, main, footer, headings (h1/h2 etc), paragraphs, lists\n3. Use ordered and unordered lists appropriately\n4. Add the `baked_beans.jpg` image: https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/step1-01/exercise/baked_beans.jpg\n5. Add an anchor tag around 'Wisconsin Beer Brats'\n\n> Note that CodePen takes care of the `HTML` and `Body` tags, so you can simply start with the content\n\n## The Recipe\n\nTitle:\n4th of July Baked Beans\n\nDescription:\nIt's great how a single meal can take you back dozens of years. This is one of those recipes that never seems to fail to impress.\n\nI learned this recipe from the cousin of one of my college friends back in Nashville Tennessee. We had an amazing 4th of July feast which included this recipe and some bratwurst like these Wisconsin Beer Brats https://www.culinaryhill.com/wisconsin-beer-brats/\n\nPrep Time: 10 minutes\nCook time: 3+ hours\nServings: 12\n\nIngredients:\n1LB Bacon chopped\n3 Cans Bush's Original Baked Beans\n1 Walla Wall Onion chopped\n3 ground garlic cloves\n4 Tablespoons of mustard\n3 Tablespoons of molasses\n4 Tablespoons of brown sugar\n\nDirections:\nCook bacon until it is mostly cooked, then drain most of the grease and put aside\nCook onion in remaining bacon grease\nCombine onions and bacon, then add garlic, cook for a few more minutes\nAdd beans and get up to simmer temperature\nAdd mustard until your beans are nice and yellow\nAdd molasses until color darkens again\nAdd brown sugar until properly sweet\nSimmer for a long time, occasionally stirring\n\nExpert Tips:\nBurning off most of the liquid gives you nice, hearty, sticky beans.\nIf the beans get too dry, you can always add beer!\n\nNutritional Information:\nCalories: lots\nFat: lots\nFun: lots\n\n*/\n\n      </pre>\n      <pre data-lang=\"html\">Add Recipe Here</pre>\n    </div>\n\n    <script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-01/lesson/README.md",
    "content": "# Step 1.1 - Introduction to HTML\n\n[Demo](../demo/) | [Exercise](../exercise/)\n\n## How the web works\n\nA simple web page is rendered on the screen via the following steps.\n\n> There are many sub-steps in this process, but these are the highlights.\n\n1. You instruct the browser which web page you'd like to see\n2. The browser looks up the site on a DNS server\n   - This is like a big phone book for website server addresses\n3. The browser asks the server to send over a specific page of the website, such as `developer.mozilla.org/filename.html` or `developer.mozilla.org`\n   - If asked for a \"root\"-level address, most servers will return `<root>/index.html`\n4. The server sends the HTML file back to the browser\n5. The browser starts to read the HTML file from the top to the bottom, stopping any time that additional resources are required:\n   - CSS stylesheets\n   - JavaScript files\n   - Fonts\n   - Images\n6. Browser makes requests for additional resources\n   - Those resources might request even more files\n7. Once the browser gets to the bottom of the page it can start working on rendering, and then display the page\n\n![MDN Page Load](https://user-images.githubusercontent.com/1434956/53033758-9da8d580-3426-11e9-9ab8-09f42ccab9a8.png)\n\n## HTML demo\n\nHTML tags are the basis of all web applications. They give the page structure and define the content within.\n\nAn HTML tag takes the following form:\n\n```html\n<tag class=\"foo\" onclick=\"myFunction()\" otherAttributes=\"values\"> </tag>\n```\n\nHTML tags can also be nested to create a tree that we call the [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction).\n\nThe [HTML demo page](https://microsoft.github.io/frontend-bootcamp/step1-01/demo) shows a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).\n\n## Sample webpage\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>Frontend Workshop: By Micah Godbolt and Ken Chau</title>\n    <link rel=\"stylesheet\" href=\"./style.css\" />\n  </head>\n  <body>\n    <header>\n      <h1>Frontend Workshop</h1>\n      <nav>\n        <ul>\n          <li><a href=\"./about.html\">About This Workshop</a></li>\n          <li><a href=\"./participate.html\">Take This Workshop</a></li>\n          <li><a href=\"./contribute.html\">Contribute to This Workshop</a></li>\n        </ul>\n      </nav>\n    </header>\n    <main>\n      <h2>About This Workshop</h2>\n      <p>The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript.</p>\n      <img src=\"../../assets/todo_screenshot.jpg\" alt=\"Picture of the Todo App we will build\" />\n      <p>On the second day we'll dive into more advanced topics like TypeScript, testing, and state management.</p>\n    </main>\n    <footer>\n      <h2>Get More Information</h2>\n      <ul>\n        <li><a href=\"https://github.com/Microsoft/frontend-bootcamp\"> Frontend Bootcamp </a></li>\n        <li><a href=\"https://twitter.com/micahgodbolt\"> @micahgodbolt </a></li>\n        <li><a href=\"https://twitter.com/kenneth_chau\"> @kenneth_chau</a></li>\n      </ul>\n    </footer>\n  </body>\n</html>\n```\n"
  },
  {
    "path": "step1-01/lesson/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-01/lesson/src/index.tsx",
    "content": ""
  },
  {
    "path": "step1-02/demo/index.html",
    "content": "<html>\n  <body>\n    <div\n      class=\"codepen\"\n      data-theme-id=\"36294\"\n      data-prefill\n      data-editable=\"true\"\n      data-height=\"100%\"\n      data-theme-id=\"1\"\n      data-default-tab=\"html,result\"\n    >\n      <pre data-lang=\"css\">\n/* Targeting the entire page */\n//body {\n  font: 1.2em sans-serif;\n}\n\n/* Targeting an HTML tag */\n//h1 {\n  /* Color name */\n  color: black;\n\n  /* 6-digit hex  */\n  background: #ababab;\n\n  /* Margin: specified separately for each side */\n  margin-bottom: 15px;\n  margin-top: 15px;\n\n  /* Shorthand: Padding applies to all sides  */\n  padding: 10px;\n\n  /* Border shorthand and 3-digit hex */\n  border: 1px solid #ddd;\n}\n\n/* Overriding inherited styles */\n//span {\n  color: #004578;\n}\n\n/* Sibling selector */\n//a + a {\n  /* Changing elements from inline to block */\n  display: block;\n}\n\n/* Targeting a class name  */\n//.tiles {\n  display: flex;\n}\n\n/* Descendant selector */\n//.tiles img {\n  width: 100%;\n}\n\n/* Direct descendant selector */\n//.tiles > div {\n  /* rgb color */\n  background: rgb(10, 10, 10);\n  color: white;\n  flex-basis: 100%;\n  /* Padding/margin shorthand. Goes clockwise from top.\n  10px - all\n  10px 20px - top/bottom left/right\n  10px 20px 15px - top left/right bottom\n  */\n  padding: 10px 20px 15px;\n  margin: 10px 20px 10px 0;\n  border: 1px solid white;\n}\n\n/* Qualified selector */\n//div.important-links {\n  background: #004578;\n}\n\n/* Style inheritance only works for unstyled elements */\n//a {\n  color: white;\n}\n\n/* Hover pseudo-selector */\n//a:hover {\n  color: #ccc;\n}\n\n/* Positional pseudo-selector  */\n//.tiles > div:last-child {\n  /* overrides margin-right but leaves other margins alone */\n  margin-right: 0;\n}\n\n/* ID selector */\n//#contact-form {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Attribute selector */\n//input[type='submit'] {\n  margin-top: 10px;\n}   \n      </pre>\n      <pre data-lang=\"html\">\n&lt;h1&gt;This is my &lt;span&gt;Title&lt;/span&gt;&lt;/h1&gt;\n&lt;div class=&quot;tiles&quot;&gt;\n  &lt;div class=&quot;important-links&quot;&gt;\n    &lt;h2&gt;Important Links&lt;/h2&gt;\n    &lt;a href=&quot;#&quot;&gt;We're Awesome&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;Learn More&lt;/a&gt;\n    &lt;a href=&quot;#&quot;&gt;Hire Us&lt;/a&gt;\n  &lt;/div&gt;\n  &lt;div&gt;\n    &lt;h2&gt;Our Logo&lt;/h2&gt;\n    &lt;img src=&quot;https://github.com/microsoft/frontend-bootcamp/blob/master/assets/fabric.jpg?raw=true&quot; width=&quot;100&quot; alt=&quot;fabric logo&quot; /&gt;\n  &lt;/div&gt;\n  &lt;div&gt;\n    &lt;h2&gt;Contact Us&lt;/h2&gt;\n    &lt;div id=&quot;contact-form&quot;&gt;\n      &lt;label&gt;Email&lt;/label&gt;&lt;input type=&quot;email&quot; /&gt;\n      &lt;input value=&quot;Submit&quot; type=&quot;submit&quot; /&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n      </pre>\n    </div>\n\n    <script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-02/exercise/README.md",
    "content": "# Step 1.2 - Introduction to CSS (Exercise)\n\nSee index.html from [npm start](http://localhost:8080/step1-02/exercise/) or the [live site](https://microsoft.github.io/frontend-bootcamp/step1-02/exercise/) for the exercise."
  },
  {
    "path": "step1-02/exercise/answers.css",
    "content": "/* 1. Text Color: Red */\nh2 {\n  color: red;\n}\n\n/* 2. Color Green (hint: Sibling Selector) */\nh2 + div {\n  color: green;\n}\n\n/* 3. Border Green*/\n.myList li {\n  border: 1px solid green;\n}\n\n/* 4. Background Green */\n.myClass {\n  background: green;\n}\n\n/* 5. Background Green & Color White (Hint Qualified Selector) */\n.myClass.otherClass {\n  color: white;\n}\n\n/* 6. Background Yellow */\n#myId {\n  background: yellow;\n}\n\n/* Bonus: Border Pink*/\nsection > div:last-child {\n  border: 1px solid pink;\n}\n"
  },
  {
    "path": "step1-02/exercise/index.html",
    "content": "<html>\n  <body>\n    <div\n      class=\"codepen\"\n      data-theme-id=\"36294\"\n      data-prefill\n      data-editable=\"true\"\n      data-height=\"100%\"\n      data-theme-id=\"1\"\n      data-default-tab=\"html,result\"\n    >\n      <pre data-lang=\"css\">\n/* 1. */\n\n/* 2. */\n\n/* 3. */\n\n/* 4. */\n\n/* 5. */\n\n/* 6. */\n\n/* Bonus */\n      </pre>\n      <pre data-lang=\"html\">\n&lt;!-- Without changing the HTML markup, apply the styles asked for in the markup. Do not apply styles that a tag doesn't ask for. -->\n\n&lt;section&gt;\n  &lt;h2&gt;1. Text Color: Red&lt;/h2&gt;\n  &lt;div&gt;2. Color Green (hint: Sibling Selector)&lt;/div&gt;\n  &lt;main&gt;\n    &lt;ul class=&quot;myList&quot;&gt;\n      &lt;li&gt;\n        3. Border Green\n      &lt;/li&gt;\n    &lt;/ul&gt;\n    &lt;div class=&quot;myClass&quot;&gt;4. Background Green&lt;/div&gt;\n    &lt;div class=&quot;myClass otherClass&quot;&gt;\n      5. Background Green &amp; Color White\n      (Hint Qualified Selector)\n    &lt;/div&gt;\n    &lt;div id=&quot;myId&quot; class=&quot;otherClass&quot;&gt;6. Background Yellow&lt;/div&gt;\n  &lt;/main&gt;\n  &lt;ul&gt;\n    &lt;li&gt;\n      Don't Style Me\n    &lt;/li&gt;\n  &lt;/ul&gt;\n  &lt;div&gt;Bonus: Border Pink&lt;/div&gt;\n&lt;/section&gt;\n      </pre>\n    </div>\n\n    <script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-02/lesson/README.md",
    "content": "# Step 1.2 - Introduction to CSS (Demo)\n\n[Demo](../demo/) | [Exercise](../exercise/)\n\n## CSS properties\n\nNow that we've gone over adding HTML tags to the page, let's cover adding styles to those tags. We can do quite a lot with styles! We can change:\n\n- Typography\n- Colors\n- Appearance (corners, borders, decorations)\n- Layout\n- Position\n- Display format: inline vs block\n- Animations\n- and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)\n\nCSS styles are always written in `property: value` pairs (like `background: blue;`) and terminated with a semicolon.\n\n## Applying CSS to an HTML file\n\nCSS can be applied to HTML tags in three different ways.\n\n1. Inline using an HTML tag's `style` attribute\n   - `<div style=\"background: blue; color: white;\">Hello </div>`\n2. Via a `<style>` tag in the HTML page\n3. Through an external CSS file\n   - `<link rel=\"stylesheet\" href=\"./css-demo-finished.css\" />`\n\n## Targeting specific elements\n\nInline styles are always applied directly to the element you place them on, but `<style>` tags and external CSS files need a way to match elements with their respective style sets. This is done with **[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)**. When selectors are combined with CSS styles, we call this a **ruleset**.\n\nCSS rulesets take on the following form:\n\n```css\nselector1,\nselector2 {\n  property1: value1;\n  property2: value2;\n}\n```\n\nHere's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296):\n\n<img src=\"https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/assets/css-syntax.png\"/>\n\nA selector can be a single tag, class, ID, or attribute. It can also be a [combination](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors) of those elements.\n\nBonus: Check out the [Vocabs project](http://apps.workflower.fi/vocabs/css/en)\n"
  },
  {
    "path": "step1-02/lesson/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-02/lesson/src/index.tsx",
    "content": ""
  },
  {
    "path": "step1-03/demo/index.html",
    "content": "<html>\n  <body>\n    <div\n      class=\"codepen\"\n      data-theme-id=\"36294\"\n      data-prefill\n      data-editable=\"true\"\n      data-height=\"100%\"\n      data-theme-id=\"1\"\n      data-default-tab=\"js,result\"\n    >\n      <pre data-lang=\"css\">\n\nbody {\n  font: 1.2em sans-serif;\n}\n\n.tiles > div {\n  background: rgb(10, 10, 10);\n  color: white;\n  flex-basis: 100%;\n  padding: 10px 20px 15px;\n  margin: 10px 20px 10px 0;\n  border: 1px solid white;\n}\n\n#contact-form {\n  display: flex;\n  flex-direction: column;\n}\n\ninput[type='submit'] {\n  align-self: flex-start;\n  margin-top: 10px;\n}   \n      </pre>\n      <pre data-lang=\"html\">\n&lt;div class=&quot;tiles&quot;&gt;\n  &lt;div&gt;\n    &lt;h2&gt;Contact Us&lt;/h2&gt;\n    &lt;div id=&quot;contact-form&quot;&gt;\n      &lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;&lt;input id=&quot;email&quot; type=&quot;email&quot;/&gt;\n      &lt;input class=&quot;submit&quot; value=&quot;Submit&quot; type=&quot;submit&quot; /&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n      </pre>\n      <pre data-lang=\"js\">\n// Count the number of 'a' characters in the email form. \n// Update button to reflect that number.  \n\n      </pre>\n    </div>\n\n    <script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-03/exercise/README.md",
    "content": "# Step 1.3 - Introduction to JavaScript (Exercise)\n\nSee index.html from [npm start](http://localhost:8080/step1-03/exercise/) or the [live site](https://microsoft.github.io/frontend-bootcamp/step1-03/exercise/) for the exercise."
  },
  {
    "path": "step1-03/exercise/answer.js",
    "content": "function getFavs() {\n  let favList = [];\n  const inputs = document.querySelectorAll('input');\n  for (const input of inputs) {\n    if (input.checked === true) {\n      favList.push(input.parentNode.textContent);\n    }\n  }\n  document.querySelector('.favorites').textContent = favList.join(' ');\n}\n\nlet button = document.querySelector('button');\n\nbutton.addEventListener('click', getFavs);\n"
  },
  {
    "path": "step1-03/exercise/index.html",
    "content": "<html>\n  <body>\n    <div\n      class=\"codepen\"\n      data-theme-id=\"36294\"\n      data-prefill\n      data-editable=\"true\"\n      data-height=\"100%\"\n      data-theme-id=\"1\"\n      data-default-tab=\"js,result\"\n    >\n      <pre data-lang=\"css\">\nlabel,\nbutton {\n  display: block;\n  margin-bottom: 10px;\n}\n      </pre>\n      <pre data-lang=\"html\">\n&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Ice cream&lt;/label&gt;\n&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Pizza&lt;/label&gt;\n&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Tacos&lt;/label&gt;\n&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Meatloaf&lt;/label&gt;\n&lt;label&gt;&lt;input type=&quot;checkbox&quot; /&gt;Brocolli&lt;/label&gt;\n\n&lt;button&gt;Display Your Favorites&lt;/button&gt;\n\n&lt;div class=&quot;favorites&quot;&gt;&lt;/div&gt;\n      </pre>\n      <pre data-lang=\"js\">\n/*\n1. Create a function named `getFavs`. Inside, run:\n    alert('clicked')\n\n2. Create a variable `button` and set it to a reference to our button using:\n    document.querySelector('button')\n\n3. Add a click event listener to the button that calls `getFavs`.\n   Click the button and make sure the alert is displayed.\n\n4. Replace the `alert` call with a new `favList` variable set to an empty array: []\n\n5. Create a const variable `inputs` set to all of the inputs on the page.\n   `querySelectorAll` will help here.\n\n6. Iterate over all of the inputs using:\n    for (const input of inputs) {}\n\n7. In each iteration, use an `if` statement to check if `input.checked` is equal to true\n\n8. If the above tests passes, push the `input.parentNode.textContent` into the `favList`\n   array by passing the text as a parameter to `favList.push()`\n  - `push` is a built-in array method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\n\n9. Outside of the for loop, use `document.querySelector('.favorites')` to target the\n   div at the bottom of the page. Set the div's `textContent` to `favList.join(' ')`.\n   This will join each of the foods together into a string separated by a space.\n*/\n\n      </pre>\n    </div>\n\n    <script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-03/lesson/README.md",
    "content": "# Step 1.3 - Introduction to JavaScript (Demo)\n\nIt's entirely possible to create a website with nothing but HTML and CSS, but as soon as you want user interaction other than links and forms, you'll need to reach for JavaScript, the scripting language of the web. Fortunately, JavaScript has grown up quite a bit since it was introduced in the '90s, and now runs just about everything: web applications, mobile applications, native applications, servers, robots and rocket ships.\n\nIn this demo we are going to cover a few core basics of the language that will help us when we start writing our todo app. At the end of this demo we will be able to count and display the number of the letter \"a\"s in our email input. Here's the markup we're working with:\n\n```html\n<div id=\"contact-form\">\n  <label for=\"email\">Email</label><input id=\"email\" type=\"email\" />\n  <input class=\"submit\" value=\"Submit\" type=\"submit\" />\n</div>\n```\n\nBy the end of the demo we'll have covered the following:\n\n- Variables\n- Events\n- Functions\n- Conditionals\n- Loops\n- Interacting with the DOM (Document Object Model)\n\n## Introduction to variables\n\nWe can create a new variable with the keywords `var`, `let`, `const` and use them within our application. These variables can contain one of the following types of values:\n\n- **boolean**: `true`, `false`\n- **number**: `1`, `3.14`\n- **string**: `'single quotes'`, `\"double quotes\"`, or `` `backticks` ``\n- **array**: `[ 1, 2, 3, 'hello', 'world']`\n- **object**: `{ foo: 3, bar: 'hello' }`\n- **function**: `function(foo) { return foo + 1 }` or `(foo) => { return foo + 1}`\n- **null**\n- **undefined**\n\n> [When to use `var`/`let`/`const`?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable-in-jav) Use `const` for variables you never expect to change, and `let` for anything else. `var` is mostly no longer used. See the link for more details about how each works.\n\n### Variable examples\n\n```js\nconst myBoolean = true;\nconst myNumber = 5;\nconst myString = `Using backticks I can reuse other variables ${myNumber}`;\nconst myArray = [1, 'cat', false, myString];\nconst myObject = { key1: 'value1', anotherKey: myArray, lastKey: aFunction };\nconst myFunction = (myNumberParam) => {\n  console.log(myNumber + myNumberParam);\n};\n```\n\n> JavaScript is a dynamically typed language, so if you initially store a number in a variable (`let myVar = 0`), you can change it to contain a string by simply writing `myVar = 'hello'` without any trouble.\n\n### Adding variables\n\nLet's start off our demo by adding a variable to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). This variable will be global and constant.\n\n```js\nconst match = 'a';\n```\n\n## Functions\n\nFunctions are reusable pieces of functionality. Functions can take inputs (parameters) and return values (or neither). Functions can be called from within your program, from within other functions, or invoked from within the DOM itself.\n\nIn our example we'll create a function called `displayMatches` (camelCase is typical for functions) and we'll invoke this function every time that our submit button is clicked. For now we'll simply have our function call `console.log(\"Clicked\")`, which is a function that displays an alert message box in your browser.\n\n```js\nfunction displayMatches() {\n  console.log('Clicked');\n}\n```\n\n## Events\n\nFunctions on their own don't have any effect on the page. When I declare `function displayMatches()` I have only defined the function; I haven't actually executed it.\n\nTo execute a function we need to attach it to an event. There are a number of possible events: keyboard strokes, mouse clicks, document loading, and more.\n\n### Add event listeners\n\nTo attach a function to an event, we use an [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventListener) like this:\n\n```js\nwindow.addEventListener('load', function () {\n  console.log('loaded');\n});\n\nwindow.addEventListener('click', function () {\n  console.log('click');\n});\n```\n\n> [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) is a reference to the entire window containing the HTML document.\n\n### Global event handlers\n\nIf you think this feels a little verbose, you're not alone. Many of the [most common event types](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers) are available as element properties. This way we can set properties like `onload` or `onclick` like this:\n\n```js\nwindow.onload = function () {\n  console.log('loaded!');\n};\nwindow.onclick = function () {\n  console.log('clicked!');\n};\n```\n\n> Note that only a single function can be assigned to `onload`, but many event listeners can be added for `load`.\n\nIn our example, we want to trigger a function when a button is clicked. To do this, we first need to get a reference to the button. We can use the [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) method of the browser-provided [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Document) global variable to get that reference. Then we can set our `displayMatches` function to be the button's `onclick` handler.\n\n```js\nconst button = document.querySelector('.submit');\nbutton.onclick = displayMatches;\n```\n\nYou can also combine the two statements together like this:\n\n```js\ndocument.querySelector('.submit').onclick = displayMatches;\n```\n\nReload the page and click the button to see your function in action!\n\n## Iteration\n\nNext we'll update our function to iterate through a string of letters. We loop over each letter using the [`for of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) syntax. We'll use real input later, but for now this verifies that our function is working.\n\n```js\nfunction displayMatches() {\n  const text = 'abcda';\n  for (let letter of text) {\n    console.log(letter);\n  }\n}\n```\n\n## Conditionals\n\nNext we want to compare each `letter` with our global `match` value, and if they are the same, we will increment a `matches` variable. Remember that `letter = match` would set the `letter` variable to the value in `match`, so to do comparisons, we use the equality operator `==` or the strict equality operator `===`.\n\n```js\nfunction displayMatches() {\n  const text = 'abcda';\n  let matches = 0;\n  for (let letter of text) {\n    if (letter === match) {\n      matches++;\n    }\n  }\n  console.log(matches);\n}\n```\n\n> In JavaScript, it's safest to use strict `===` for comparisons, because `==` will try to convert the operands to the same type. For example, `\"1\" == 1` converts `\"1\"` to a number and returns true. This result makes decent sense, but the behavior in certain other cases is [not what you'd expect](https://www.youtube.com/watch?v=et8xNAc2ic8). (See [this video](https://www.destroyallsoftware.com/talks/wat) for more strange JavaScript behavior.)\n\n## Interacting with the DOM\n\nNow that we have a function performing all of our logic, it's time to connect this to our DOM by using some of the browser's built-in functions.\n\nFirst we need to get a reference to the email field in our app's DOM. To do this, I've added an `id` to the input, and we'll find the element using [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) from the `document` global variable. This function will return a reference to that input, and we can store it in the `email` variable.\n\n```js\nfunction displayMatches() {\n  const email = document.getElementById('email');\n  console.log(email);\n  // ...\n}\n```\n\nSince what we're actually after is the value of the input field, we can set our `text` variable to the string contained in the email input's `value` key. To see this in action, in Chrome you can right click on the console message created by the code above, choose \"save as variable\" and then type `variableName.value`.\n\n```js\nfunction displayMatches() {\n  const email = document.getElementById('email');\n  const text = email.value;\n  console.log(text);\n}\n```\n\n### Writing values back to the DOM\n\nNow that we've read values from the DOM and fed that into our matching logic, we are ready to return the number of matches to our app. To do this we first need to grab a reference to our submit button, and since this button has no `id`, we'll use `querySelector` to get it. This function takes any valid CSS selector and returns the first match found.\n\n```js\nfunction displayMatches() {\n  // ...\n  const submit = document.querySelector('.submit');\n}\n```\n\nNow that we have a reference to the submit input, we can set its value contain to the number of matches.\n\n```js\nfunction displayMatches() {\n  // ...\n  const submit = document.querySelector('.submit');\n  submit.value = matches + ' matches';\n}\n```\n\nWe could also have done this in a single line as follows:\n\n```js\nfunction displayMatches() {\n  // ...\n  document.querySelector('.submit').value = matches + ' matches';\n}\n```\n"
  },
  {
    "path": "step1-03/lesson/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-03/lesson/src/index.tsx",
    "content": ""
  },
  {
    "path": "step1-04/demo/index.html",
    "content": "\n<html>\n  <body>\n    <div\n      class=\"codepen\"\n      data-theme-id=\"36294\"\n      data-prefill\n      data-editable=\"true\"\n      data-height=\"100%\"\n      data-theme-id=\"1\"\n      data-default-tab=\"js,result\"\n    >\n    <pre data-lang=\"html\">\n&lt;script src=\"https://unpkg.com/react@16/umd/react.development.js\">&lt;/script>\n&lt;script src=\"https://unpkg.com/react-dom@16/umd/react-dom.development.js\">&lt;/script>\n          \n&lt;div id='app'>&lt;/div>\n    </pre>\n    <pre data-lang=\"css\">\n.foo {\n  background: green;\n}\n    </pre>\n    <pre data-lang=\"typescript\">\nReactDOM.render(\n  &lt;div>Hello World&lt;/div>, \n  document.getElementById('app')\n);\n      </pre>\n    <script async src=\"https://static.codepen.io/assets/embed/ei.js\"></script>\n  </body>\n</html>\n\n"
  },
  {
    "path": "step1-04/final/README.md",
    "content": "# Step 1.4 - Introduction to React (Final)\n\nTake a look at the contents of the `src` folder to see final versions of the `App`, `Button`, and `Counter` components from this lesson.\n"
  },
  {
    "path": "step1-04/final/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-04/final/src/App.tsx",
    "content": "import React from 'react';\nimport { Counter } from './components/Counter';\n\nexport const App = props => {\n  return (\n    <div>\n      <Counter text=\"chickens\" />\n      <Counter text=\"ducks\" />\n    </div>\n  );\n};\n"
  },
  {
    "path": "step1-04/final/src/components/Button.css",
    "content": ".Button {\n  display: block;\n  background: #0078d4;\n  color: white;\n  padding: 5px 10px;\n  outline: none;\n  border: none;\n}\n.Button:hover {\n  background: #005a9e;\n}\n\n.Button:active {\n  background: #004578;\n}\n"
  },
  {
    "path": "step1-04/final/src/components/Button.tsx",
    "content": "import React from 'react';\nimport './Button.css';\n\nexport const Button = props => {\n  return (\n    <button className=\"Button\" onClick={props.onClick}>\n      {props.children}\n    </button>\n  );\n};\n"
  },
  {
    "path": "step1-04/final/src/components/Counter.tsx",
    "content": "import React from 'react';\nimport { Button } from './Button';\n\nexport const Counter = props => {\n  const [clicks, setClicks] = React.useState(0);\n  const handleClick = () => setClicks(clicks + 1);\n  const { text } = props;\n  return (\n    <div>\n      {text}: {clicks}\n      <Button onClick={handleClick}>Click</Button>\n    </div>\n  );\n}\n"
  },
  {
    "path": "step1-04/final/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { App } from './App';\n\nReactDOM.render(<App />, document.getElementById('app'));\n"
  },
  {
    "path": "step1-04/lesson/README.md",
    "content": "# Step 1.4 - Introduction to React (Demo)\n\nIn this demo we'll be creating a simple counter that will display a count and increment on click.\n\nLet's start this demo in [CodePen](https://codepen.io/micahgodbolt/pen/wOWeVb?editors=0010).\n\n## React Hello World\n\n```js\nReactDOM.render(<p>Hello World</p>, document.getElementById('app'));\n```\n\nCalling `ReactDOM.render()` is how our code gets on the page. The function takes two parameters: the content to place on the page, and the element in which you want it placed.\n\nThe first parameter to `render()` looks a lot like HTML, but actually, it's [JSX](https://reactjs.org/docs/introducing-jsx.html). There are a few key differences between JSX and HTML:\n\n- Since `class` is a [reserved word](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords) in JavaScript, you will need to use `className` on your HTML tags: `<div className=\"foo\">`\n- We can use custom HTML tags corresponding to the React components we create: `<div><MyControl>hi</MyControl></div>`\n- Controls can be self-closing: `<MyControl text='hi' />`\n- You can use JavaScript inside of JSX!\n\n## Writing a React component\n\nA React component is a function that returns a portion of your application. This can include HTML markup, CSS styles, and JavaScript driven functionality.\n\n```jsx\nconst App = (props) => {\n  return <p>Hello World</p>;\n};\n```\n\nMoving our \"Hello World\" markup into our App's `render` function, we can now update the `ReactDOM.render()` call to look like this:\n\n```jsx\nReactDOM.render(<App />, document.getElementById('app'));\n```\n\n### Props\n\nA component can take in additional props using the same syntax as HTML attributes like `id` or `href`.\n\n```jsx\n<App text=\"Hello World\" />\n```\n\nThe `text` prop can be accessed inside your component via `props.text` in a component.\n\n```jsx\nconst App = (props) => {\n  return <p>{props.text}</p>;\n};\n```\n\n`props` allow your component to be more reusable, since you can create multiple instances of the same component with different props.\n\n```jsx\nReactDOM.render(\n  <div>\n    <App text=\"Hello World\" />\n    <App text=\"How are you doing?\" />\n  </div>,\n  document.getElementById('app')\n);\n```\n\n> Note that a render function can only return a single element, so our two `App` components need to be wrapped in a `div`.\n\n```jsx\nconst App = (props) => {\n  return <p>{props.text ? props.text : 'oops!'}</p>;\n};\n```\n\n### Destructuring props\n\nWriting `props.text` over and over in a function can be quite tedious. Since this is all JavaScript, you could create a new variable for this text using variable assignment.\n\n```jsx\nconst App = (props) => {\n  const text = props.text;\n  return <p>{text ? text : 'you missed something'}</p>;\n};\n```\n\nThis works fine for a single prop, but as your component starts to become more complex:\n\n```jsx\n<App\n  open={false}\n  count={5}\n  text=\"Hello World\"\n  items={['cat', 'dog', 'bird']}\n  config={{\n    start: 1,\n    end: 10,\n    autoStart: true,\n  }}\n/>\n```\n\n> Note that all non-string values are passed through as JavaScript by wrapping them in `{}`.\n\nYour code starts to look like this:\n\n```jsx\nconst open = props.open;\nconst text = props.text;\nconst count = props.count;\nconst items = props.items;\n```\n\nA common approach to simplify this process is to use a syntax called [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring).\n\nDestructuring allows you to pull individual pieces of information out of an object in a single statement.\n\n```jsx\nconst { open, text, count, items } = props;\n```\n\nSo while this might be overkill right now, it makes it easier to add props down the road.\n\n### Cleanup\n\nBefore we move on, we'll modify our `ReactDOM.render` call to just include our App. This render call typically includes just a single component with no props.\n\nNext we'll be creating a `Counter` component. We'll add that to our App now, and then start to write the control.\n\n```jsx\nconst App = (props) => {\n  return <Counter text=\"chickens\" />;\n};\n\nReactDOM.render(<App />, document.getElementById('app'));\n```\n\n> Note the capitalization of `Counter`. HTML might not be case-sensitive, but JSX is! A common practice is to use the capitalized names of HTML elements to name corresponding React components: Button, Select, Label, Form, etc.\n\n## Writing a stateful Counter component\n\nThe power of React, past being a good templating language, is that it provides us a way to maintain and modify state over the componet's lifecycle.\n\n### Adding state\n\nState is added to a component by using the `useState` hook. [Hooks](https://reactjs.org/docs/hooks-intro.html) are special React methods that can only be called within a React component, and provide ways to maintain state and perform other lifecycle methods.\n\n```js\nconst Counter = (props) => {\n  const [clicks, setClicks] = React.useState(0);\n};\n```\n\n- The component takes in some`props`.\n- `clicks` is a stateful value that will be updated each time `setClicks` is called with a new value\n\n### Rendering our Counter\n\nFor our `Counter` component, the goal is to be able to track how many times the counter's button is clicked. We'll use the following markup.\n\n```jsx\nconst { text } = props;\nreturn (\n  <div>\n    {text}: {clicks}\n    <button>Click</button>\n  </div>\n);\n```\n\n### Writing our button click handler\n\nOur next step is to wire up the button to increment the `clicks` in our component state.\n\nThis function will increment the clicks value by 1.\n\n```jsx\nconst handleClick = () => {\n  setClicks(clicks + 1);\n};\n```\n\nNow that we have a function to increment our count, all that's left is to connect it to our button.\n\n```jsx\n<button onClick={handleClick}>Click</button>\n```\n\n> Also note that each `Counter` maintains its own state! You can modify the state inside of one counter without affecting the others.\n\n## Try it all out!\n\nAdd a couple `Counter`s to our `App`, each with different text. Notice how they can easy take in different props and maintain their own state.\n\n## Moving this into our codebase\n\nTo scale our application, we'll need to break up the file into smaller, reusable pieces. In this part of the demo we'll look at the `final` folder and how the JavaScript module system allows us to break up our components into a collection of files exporting their functionality.\n\n### Module exports and imports\n\nOpen up `step1-04/final/components/Counter.tsx` and look at the `Counter` component.\n\n```tsx\nexport const Counter = (props) => {\n  // ...\n};\n```\n\nThis file exports the Counter component as a **named export**. This means when we import it we do the following:\n\n```tsx\nimport { Counter } from './components/Counter';\n```\n\n> Note the `{}` wrapped around the import value. This is actually an example of destructuring.\n\n#### Default exports\n\nWe typically use named exports, but it's also possible export a default value like this:\n\n```tsx\nexport default const Counter = (props) =>{\n  // ...\n}\n```\n\nWhen we import the component we can call it whatever we want:\n\n```tsx\nimport SomeCounterComponent from './components/Counter';\n```\n\n## Writing a Button component\n\nButtons are among the most commonly written components. Custom buttons help abstract common styling, add icons or other decorations, and increase functionality (menu buttons etc). Let's take a quick look at a custom button component to see how it comes together.\n\n```jsx\nimport React from 'react';\nimport './Button.css';\n\nexport const Button = (props) => {\n  return (\n    <button className=\"Button\" onClick={props.onClick}>\n      {props.children}\n    </button>\n  );\n};\n```\n"
  },
  {
    "path": "step1-04/lesson/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-04/lesson/src/index.tsx",
    "content": ""
  },
  {
    "path": "step1-05/TodoApp.html",
    "content": "<!DOCTYPE html>\n<html>\n  <body>\n    <header>\n      <h1>todos <small>(1.5)</small></h1>\n      <div class=\"addTodo\">\n        <input class=\"textfield\" placeholder=\"add todo\" />\n        <button class=\"submit\">Add</button>\n      </div>\n      <nav class=\"filter\">\n        <button class=\"selected\">all</button>\n        <button>active</button>\n        <button>completed</button>\n      </nav>\n    </header>\n\n    <ul class=\"todos\">\n      <li class=\"todo\">\n        <label><input type=\"checkbox\" /> Todo 1</label>\n      </li>\n      <li class=\"todo\">\n        <label><input type=\"checkbox\" /> Todo 2</label>\n      </li>\n      <li class=\"todo\">\n        <label><input type=\"checkbox\" /> Todo 3</label>\n      </li>\n      <li class=\"todo\">\n        <label><input type=\"checkbox\" /> Todo 4</label>\n      </li>\n    </ul>\n    <footer>\n      <span>4 items left</span>\n      <button class=\"submit\">Clear Completed</button>\n    </footer>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-05/demo/README.md",
    "content": "# Step 1.5 - Building a static page in React (Demo)\n\nTo start building our todo application, we'll follow the steps outlined in [Thinking in React](https://reactjs.org/docs/thinking-in-react.html). The first step of the process is to break our application into a component hierarchy. For this app, we're going to keep it simple and just use four parts.\n\n- TodoHeader\n- TodoList\n- TodoListItem\n- TodoFooter\n\nYou can find the HTML for our application in `step1-05/TodoApp.html`.\n\n## TodoHeader\n\nWe'll store all of our components inside a `components` folder under `step1-05/demo/src`. Let's create that now. We'll then start writing the `TodoHeader` in `src/components/TodoHeader.tsx`. The `tsx` file extension tells our editor that this file includes React code written in TypeScript.\n\n> We'll talk about TypeScript soon, but for now, know that all valid JavaScript is valid TypeScript.\n\n```jsx\nimport React from 'react';\n\nexport const TodoHeader = () => {\n  return (\n    <header>\n      <h1>todos</h1>\n      <div className=\"addTodo\">\n        <input className=\"textfield\" placeholder=\"add todo\" />\n        <button className=\"submit\">Add</button>\n      </div>\n      <nav className=\"filter\">\n        <button className=\"completed\">all</button>\n        <button>active</button>\n        <button>completed</button>\n      </nav>\n    </header>\n  );\n};\n```\n\n> Note that since this is React, we had to change `class` to `className`, but nothing else changes.\n\n## TodoListItem\n\nAny time you see repeated complex elements, that is usually a sign that you should create a new component. With a few props you can typically abstract all of those elements into a single component. This is certainly the case with todo items.\n\n```jsx\nimport React from 'react';\n\nexport const TodolistItem = () => {\n  return (\n    <li className=\"todo\">\n      <label>\n        <input type=\"checkbox\" /> Todo 1\n      </label>\n    </li>\n  );\n};\n```\n"
  },
  {
    "path": "step1-05/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <link rel=\"stylesheet\" href=\"./src/style.css\" />\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n\n\n"
  },
  {
    "path": "step1-05/demo/src/App.tsx",
    "content": "import React from 'react';\n\nexport const TodoApp = () => {\n  return (\n    <div>\n      <p>Hello World</p>\n    </div>\n  );\n}\n"
  },
  {
    "path": "step1-05/demo/src/index.tsx",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { TodoApp } from \"./App\";\nReactDOM.render(<TodoApp />, document.getElementById(\"app\"));\n"
  },
  {
    "path": "step1-05/demo/src/style.css",
    "content": "body {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  width: 400px;\n  margin: 20px auto;\n}\n\nh1 {\n  text-align: center;\n}\n\n.addTodo {\n  display: flex;\n}\n\n.textfield {\n  flex-grow: 1;\n  margin-right: 10px;\n}\n\n.submit {\n  border: none;\n  padding: 5px 10px;\n}\n\n.filter {\n  margin: 10px 0 0;\n}\n\n.filter button {\n  background: transparent;\n  border: none;\n}\n\n.filter .selected {\n  border-bottom: 2px solid blue;\n}\n\n.todos {\n  list-style: none;\n  padding: 0;\n}\n\nfooter {\n  display: flex;\n}\n\nfooter span {\n  flex-grow: 1;\n}\n"
  },
  {
    "path": "step1-05/exercise/README.md",
    "content": "# Step 1.5 - Building a static page in React (Exercise)\n\nFrom this exercise on, we'll be working in VS Code instead of CodePen. If you don't already have the bootcamp folder open in a VS Code window, see the [main readme](https://github.com/Microsoft/frontend-bootcamp/blob/master/README.md) for instructions.\n\nIf you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the \"exercise\" link under day 1 step 5 to see results.\n\n## TodoFooter\n\n1. Add a TodoFooter component in the `step1-05/exercise/src/components` folder.\n2. Create a react component that returns the footer markup from `step1-05/TodoApp.html`. Make sure to import React, export the component, and change `class` to `className`.\n\n## TodoList\n\n1. Add a TodoList component like you did with the footer.\n2. Import TodoListItem and add four of them inside of the `<ul>` (we'll be using live data later)\n3. Bonus points for using a [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) loop or using [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to create 4 list items based on the array `[1,2,3,4]`\n\n## App\n\n1. Import both of these components into `App.tsx` and place their tags below the `TodoHeader`.\n"
  },
  {
    "path": "step1-05/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <link rel=\"stylesheet\" href=\"./src/style.css\" />\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n\n\n"
  },
  {
    "path": "step1-05/exercise/src/App.tsx",
    "content": "import React from 'react';\nimport { TodoHeader } from './components/TodoHeader';\n\nexport const TodoApp = () => {\n  return (\n    <div>\n      <TodoHeader />\n    </div>\n  );\n}\n"
  },
  {
    "path": "step1-05/exercise/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\n\nexport const TodoHeader = () => {\n  return (\n    <header>\n      <h1>todos <small>(1.5 exercise)</small></h1>\n      <div className=\"addTodo\">\n        <input className=\"textfield\" placeholder=\"add todo\" />\n        <button className=\"submit\">Add</button>\n      </div>\n      <nav className=\"filter\">\n        <button className=\"selected\">all</button>\n        <button>active</button>\n        <button>completed</button>\n      </nav>\n    </header>\n  )\n}\n"
  },
  {
    "path": "step1-05/exercise/src/components/TodoListItem.tsx",
    "content": "import React from \"react\";\n\nexport const TodoListItem = () => {\n  return (\n    <li className=\"todo\">\n      <label>\n        <input type=\"checkbox\" /> Todo 1\n      </label>\n    </li>\n  );\n}\n"
  },
  {
    "path": "step1-05/exercise/src/index.tsx",
    "content": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { TodoApp } from \"./App\";\nReactDOM.render(<TodoApp />, document.getElementById(\"app\"));\n"
  },
  {
    "path": "step1-05/exercise/src/style.css",
    "content": "body {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  width: 400px;\n  margin: 20px auto;\n}\n\nh1 {\n  text-align: center;\n}\n\nsmall {\n  font-size: 0.5em;\n}\n\n.addTodo {\n  display: flex;\n}\n\n.textfield {\n  flex-grow: 1;\n  margin-right: 10px;\n}\n\n.submit {\n  border: none;\n  padding: 5px 10px;\n}\n\n.filter {\n  margin: 10px 0 0;\n}\n\n.filter button {\n  background: transparent;\n  border: none;\n}\n\n.filter .selected {\n  border-bottom: 2px solid blue;\n}\n\n.todos {\n  list-style: none;\n  padding: 0;\n}\n\nfooter {\n  display: flex;\n}\n\nfooter span {\n  flex-grow: 1;\n}\n"
  },
  {
    "path": "step1-06/demo/README.md",
    "content": "# Step 1.6 - Creating a state-driven UI (Demo)\n\nIn React, the data travels in one direction: top-down in the form of state propagating down the component hierarchy. Only the component containing the state can change the state itself. When a UI interaction occurs, a stateful component must pass down an event handler to the UI component triggering the event in order to signal a state change.\n\n[Step #3 of \"Thinking in React\"](https://reactjs.org/docs/thinking-in-react.html#step-3-identify-the-minimal-but-complete-representation-of-ui-state) suggests finding the \"minimal set of mutable state\" that your application requires. What pieces of state can we identify?\n\n[Step #4 of \"Thinking in React\"](https://reactjs.org/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live) asks us to think about where our state should live.\n\n- Is the state local to a single component?\n- Is the state derived from another state?\n- Is the state primarily in one component but shared with others?\n- Is the state global?\n\n## Adding state to TodoApp\n\nInside of our `TodoApp` component we only need to track two pieces of state, our `todos` and the current `filter`. We don't need to worry about a `remaining` count because it can be calculated by counting the number of todos where `status` is set to `active`.\n\n```jsx\nexport const TodoApp = () => {\n  const [filter, setFilter] = React.useState<FilterTypes>('all');\n  const [todos, setTodos] = React.useState<Todos>([\n    {\n      id: '04',\n      label: 'Todo 4',\n      status: 'completed',\n    },\n    {\n      id: '03',\n      label: 'Todo 3',\n      status: 'active',\n    },\n    {\n      id: '02',\n      label: 'Todo 2',\n      status: 'active',\n    },\n    {\n      id: '01',\n      label: 'Todo 1',\n      status: 'active',\n    },\n  ]);\n\n```\n\n## Passing state through to UI\n\nNow we can pass `filter` and `todos` into our components.\n\n```jsx\nreturn (\n  <div>\n    <TodoHeader filter={filter} />\n    <TodoList todos={todos} filter={filter} />\n    <TodoFooter todos={todos} />\n  </div>\n);\n```\n\n## State-driven TodoList\n\nI've already pulled out our props into `filter` and `todos` variables, and written a bit of JS that will return an array of filtered todos. We'll be using that filtered array to render our todo items.\n\nReact requires any dynamic length list to have unique `key` properties, for which we can use the `todo.id`. This key helps React to only re-render the parts of the list that changes.\n\n```jsx\nreturn (\n  <ul className=\"todos\">\n    {filteredTodos.map((todo) => (\n      <TodoListItem key={todo.id} {...todo} />\n    ))}\n  </ul>\n);\n```\n\n## State-driven and stateful TodoHeader\n\nIn `TodoHeader.tsx` we are going to both display the selected filter state, and track the text for a new todo.\n\n### Conditional class names\n\nIn CSS-based styling, visual states are applied by adding and removing classes. We can use the filter value to conditionally add a class, thereby lighting up the correct filter button.\n\n```jsx\n<nav className=\"filter\">\n  <button className={filter === 'all' ? 'selected' : ''}> all</button>\n  <button className={filter === 'active' ? 'selected' : ''}> active</button>\n  <button className={filter === 'completed' ? 'selected' : ''}> completed</button>\n</nav>\n```\n\n> The [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) `condition ? ifTrue : ifFalse` is often used to conditionally render a string or JSX element. In the case that the condition is false the `className` is simply ommited.\n\n### Adding a controlled input\n\nIn React, form elements such as `<input>`, `<textarea>`, and `<select>` can be used as either **uncontrolled** or **controlled**.\n\nAn **uncontrolled input** maintains its current value internally and updates that value based on user interactions (entering text, choosing options, etc). Our code only polls the value from the input when it's needed, such as on submit. This is similar to how inputs in a plain HTML form work.\n\nA **controlled input** takes its current value from a prop or state and uses a callback to modify that value when a change is made by the user. This is usually the prefered method when writing React.\n\n> The distinction between controlled and uncontrolled is important to understand when writing or using form components, and misunderstandings of this concept are a very common source of bugs. See [this article](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) for a more detailed explanation.\n\nLet's try changing the text field in our `TodoHeader` component to a controlled input. To add a controlled input, we need two things, which our demo already provides:\n\n1. A state variable to hold the input's value:\n\n```jsx\nconst [inputText, setInputText] = React.useState('');\n```\n\n2. A callback function to update that value:\n\n```jsx\nconst onInput = (e) => {\n  setInputText(e.target.value);\n};\n```\n\nWith those two pieces in place, we can update our uncontrolled input to being controlled.\n\n```jsx\n<input value={inputText} onChange={onInput} className=\"textfield\" placeholder=\"add todo\" />\n```\n\n> If you have React Dev Tools installed, open them up and take a look at `labelInput` as we type in the input.\n"
  },
  {
    "path": "step1-06/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <link rel=\"stylesheet\" href=\"./src/style.css\" />\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n\n\n"
  },
  {
    "path": "step1-06/demo/src/TodoApp.tsx",
    "content": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './components/TodoHeader';\nimport { TodoList } from './components/TodoList';\n\nexport const TodoApp = () => {\n  return (\n    <div>\n      <TodoHeader />\n      <TodoList />\n      <TodoFooter />\n    </div>\n  );\n}\n"
  },
  {
    "path": "step1-06/demo/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\n\nexport const TodoFooter = (props: any) => {\n  // const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;\n  return (\n    <footer>\n      <span>4 items left</span>\n      <button className=\"submit\">Clear Completed</button>\n    </footer>\n  );\n};\n"
  },
  {
    "path": "step1-06/demo/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\n\nexport const TodoHeader = (props) => {\n\n  const [inputText, setInputText] = React.useState('')\n  const { filter } = props;\n\n  const handleChange = e => {\n    setInputText(e.target.value);\n  };\n  return (\n    <header>\n      <h1>todos <small>(1.6 demo)</small></h1>\n      <div className=\"addTodo\">\n        <input className=\"textfield\" placeholder=\"add todo\" />\n        <button className=\"submit\">Add</button>\n      </div>\n      <nav className=\"filter\">\n        <button className=\"selected\">all</button>\n        <button>active</button>\n        <button>completed</button>\n      </nav>\n    </header>\n  );\n}\n"
  },
  {
    "path": "step1-06/demo/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\n\nexport const TodoList = (props) => {\n  const { filter, todos = [] } = props;\n\n  const filteredTodos = todos.filter(todo => {\n    return filter === 'all'\n      || (filter === 'completed' && todo.status === 'completed')\n      || (filter === 'active' && todo.status === 'active');\n  });\n\n  return (\n    <ul className=\"todos\">\n      {['01', '02', '03', '04'].map((todo) => <TodoListItem />)}\n    </ul>\n  );\n}\n"
  },
  {
    "path": "step1-06/demo/src/components/TodoListItem.tsx",
    "content": "import React from \"react\";\n\nexport const TodoListItem = () => {\n  return (\n    <li className=\"todo\">\n      <label>\n        <input type=\"checkbox\" /> Todo 1\n        </label>\n    </li>\n  );\n}\n"
  },
  {
    "path": "step1-06/demo/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step1-06/demo/src/style.css",
    "content": "body {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  width: 400px;\n  margin: 20px auto;\n}\n\nh1 {\n  text-align: center;\n}\n\nsmall {\n  font-size: 0.5em;\n}\n\n.addTodo {\n  display: flex;\n}\n\n.textfield {\n  flex-grow: 1;\n  margin-right: 10px;\n}\n\n.submit {\n  border: none;\n  padding: 5px 10px;\n}\n\n.filter {\n  margin: 10px 0 0;\n}\n\n.filter button {\n  background: transparent;\n  border: none;\n}\n\n.filter .selected {\n  border-bottom: 2px solid blue;\n}\n\n.todos {\n  list-style: none;\n  padding: 0;\n}\n\nfooter {\n  display: flex;\n}\n\nfooter span {\n  flex-grow: 1;\n}\n"
  },
  {
    "path": "step1-06/exercise/README.md",
    "content": "# Step 1.6 - Creating a state-driven UI (Exercise)\n\nIf you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the \"exercise\" link under day 1 step 6 to see results.\n\n### TodoFooter\n\n1. Use the provided `itemCount` value to display the current number of items left.\n2. Use a [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to print \"item\" vs \"item**s**\" based on whether `itemCount === 1`.\n\n### TodoListItem\n\n1. Pull in `label` and `status` from props using [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)\n2. Set the `input` text to `label` and the `checked` prop to `true` if `status === 'completed`\n   > Note that this is only half the work we need to do to make these controlled inputs work. What is the other half?\n"
  },
  {
    "path": "step1-06/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <link rel=\"stylesheet\" href=\"./src/style.css\" />\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n\n\n"
  },
  {
    "path": "step1-06/exercise/src/TodoApp.tsx",
    "content": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './components/TodoHeader';\nimport { TodoList } from './components/TodoList';\n\nconst defaultTodos = [\n  {\n    id: '04',\n    label: 'Todo 4',\n    status: 'completed',\n  },\n  {\n    id: '03',\n    label: 'Todo 3',\n    status: 'active',\n  },\n  {\n    id: '02',\n    label: 'Todo 2',\n    status: 'active',\n  },\n  {\n    id: '01',\n    label: 'Todo 1',\n    status: 'active',\n  },\n];\n\nexport const TodoApp = () => {\n  const [filter, setFilter] = React.useState('all');\n  const [todos, setTodos] = React.useState(defaultTodos);\n  return (\n    <div>\n      <TodoHeader filter={filter} />\n      <TodoList todos={todos} filter={filter} />\n      <TodoFooter todos={todos} />\n    </div>\n  );\n}\n"
  },
  {
    "path": "step1-06/exercise/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\n\nexport const TodoFooter = (props) => {\n  const itemCount = props.todos.filter((todo) => todo.status === 'active').length;\n  return (\n    <footer>\n      <span>4 items left</span>\n      <button className=\"submit\">Clear Completed</button>\n    </footer>\n  );\n};\n"
  },
  {
    "path": "step1-06/exercise/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\n\nexport const TodoHeader = (props) => {\n  const [inputText, setInputText] = React.useState<string>('');\n  const { filter } = props;\n\n  const onInput = e => {\n    setInputText(e.target.value);\n  };\n\n  return (\n    <header>\n      <h1>todos <small>(1.6 exercise)</small></h1>\n      <div className=\"addTodo\">\n        <input value={inputText} onChange={onInput} className=\"textfield\" placeholder=\"add todo\" />\n        <button className=\"submit\">Add</button>\n      </div>\n      <nav className=\"filter\">\n        <button className={filter === 'all' ? 'selected' : ''}> all</button>\n        <button className={filter === 'active' ? 'selected' : ''}>active</button>\n        <button className={filter === 'completed' ? 'selected' : ''}>completed</button>\n      </nav>\n    </header>\n  );\n}"
  },
  {
    "path": "step1-06/exercise/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\n\nexport const TodoList = (props) => {\n  const { filter, todos } = props;\n\n  const filteredTodos = todos.filter((todo) => {\n    if (todo.status === 'cleared') return false;\n    return filter === 'all' ||\n      (filter === 'completed' && todo.status === 'completed') ||\n      (filter === 'active' && todo.status === 'active');\n  });\n\n  return (\n    <ul className=\"todos\">\n      {filteredTodos.map((todo) => (\n        <TodoListItem key={todo.id} {...todo} />\n      ))}\n    </ul>\n  );\n}\n"
  },
  {
    "path": "step1-06/exercise/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\n\nexport const TodoListItem = (props) => {\n  return (\n    <li className=\"todo\">\n      <label>\n        <input type=\"checkbox\" /> Todo 1\n        </label>\n    </li>\n  );\n}\n"
  },
  {
    "path": "step1-06/exercise/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step1-06/exercise/src/style.css",
    "content": "body {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  width: 400px;\n  margin: 20px auto;\n}\n\nh1 {\n  text-align: center;\n}\n\nsmall {\n  font-size: 0.5em;\n}\n\n.addTodo {\n  display: flex;\n}\n\n.textfield {\n  flex-grow: 1;\n  margin-right: 10px;\n}\n\n.submit {\n  border: none;\n  padding: 5px 10px;\n}\n\n.filter {\n  margin: 10px 0 0;\n}\n\n.filter button {\n  background: transparent;\n  border: none;\n}\n\n.filter .selected {\n  border-bottom: 2px solid blue;\n}\n\n.todos {\n  list-style: none;\n  padding: 0;\n}\n\nfooter {\n  display: flex;\n}\n\nfooter span {\n  flex-grow: 1;\n}\n"
  },
  {
    "path": "step1-06/index.html",
    "content": "<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../assets/shared.css\" />\n    <link rel=\"stylesheet\" href=\"https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css\" />\n  </head>\n\n  <body class=\"ms-Fabric\">\n    <div class=\"Container\">\n      <ul class=\"Tiles\">\n        <li class=\"Tile\"><a href=\"./demo/index.html\" class=\"Tile-link\">Demo Start</a></li>\n        <li class=\"Tile\"><a href=\"./final/index.html\" class=\"Tile-link\">Final</a></li>\n      </ul>\n    </div>\n  </body>\n</html>\n"
  },
  {
    "path": "step1-07/demo/README.md",
    "content": "# Step 1.7 - Types and creating a UI-driven state (Demo)\n\nNow that we have a UI that is purely driven by the state of our app, we need to add functionality to allow the UI to modify the state. This is our core \"business logic\" and handles our basic \"CRUD\" operations: Create, Read, Update, Delete.\n\nThis step in \"Thinking in React\" is called [Step 5: Add Inverse Data Flow](https://reactjs.org/docs/thinking-in-react.html#step-5-add-inverse-data-flow). Lets start by looking at the `TodoApp.tsx` and seeing how our components are going to be able to interact with app state.\n\n## Intro to TypeScript\n\nTaking a look at our components in `TodoApp`, you can see that our list of props is getting not just longer, but much more complex! We're passing through functions with various signatures, complex `todos` objects, and filter strings which are always one of three values.\n\nAs applications grow, it becomes difficult to remember what each function does or what each todo contains. Also, as JavaScript is a dynamically typed language, if I wanted to change the value of `filter` to a boolean, JavaScript wouldn't care. But if `TodoHeader` was expecting a string, our application would break.\n\nFor these two reasons, the industry is shifting to writing applications that are strongly typed, and many are using TypeScript to accomplish that.\n\nAs [TypeScript's website](https://www.typescriptlang.org/) states:\n\n> TypeScript is a superset of JavaScript that compiles to plain JavaScript.\n\nIf you've used [Sass](https://sass-lang.com/), you're familiar with this concept. In the same way that all valid CSS is valid Sass, all valid JavaScript is valid TypeScript. That's why our exercises have been written in `ts` and `tsx` files instead of `js` and `jsx`.\n\nLet's dive in and see how TypeScript can help clarify our component props and guard against future regressions.\n\n# Demo\n\nLet's start off in the TodoList, as that has the most data flow up and down. There isn't any interactive UI in this component, as we're simply passing our `todo` down to each `TodoListItem`, but we can write a props interface to make sure that everything gets passed down properly.\n\n## Writing TodoListProps\n\nLooking at our `TodoApp` we know that `TodoList` has three props: `filter`, `todos`, and `toggleCompleted`. We'll start by creating an interface called `TodoListProps` that represents this component's props.\n\n```ts\ninterface TodoListProps {\n  filter: any;\n  toggleCompleted: any;\n  todos: any;\n}\n```\n\n> Note that we're using the `any` keyword for now. This won't give us any type safety, but it does let us specify valid prop names we can pass to this component.\n\nWith that interface written, we'll add it to our component.\n\n```ts\nexport const TodoList = (props: TodoListProps) => {\n```\n\nNow that we have a typed component, let's go back to our `TodoApp` and see what happens if we try to change the name of a prop.\n\n## Adding type safety\n\nSo far we've only established what our prop names are, not the type of values inside of them. Let's first look at `filter` and see how we can improve that prop's type safety.\n\n### Filter Type\n\nWe know that `filter` shouldn't be an object, array or function, so we can specify it should always be a string like this:\n\n```ts\ninterface TodoListProps {\n  filter: string;\n  toggleCompleted: any;\n  todos: any;\n}\n```\n\nBut since we know that the filter can be only one of three values, we can make that explicit with a [union type](https://www.typescriptlang.org/docs/handbook/advanced-types.html#union-types):\n\n```ts\ninterface TodoListProps {\n  filter: 'all' | 'active' | 'completed';\n  toggleCompleted: any;\n  todos: any;\n}\n```\n\nNow try going back to `TodoApp` and changing the `filter` attribute in `TodoList` to something else. You'll see an error in the editor (if using VS Code) and on the command line when you save the file.\n\n### Complete Type\n\nThe `toggleComplete` prop isn't data, but a function.\n\n```ts\ninterface TodoListProps {\n  filter: 'all' | 'active' | 'completed';\n  toggleCompleted: (id: string) => void;\n  todos: any;\n}\n```\n\nFor functions we are concerned with the parameters passed in as well as returned. You can see in the example above that the function takes in an `id` of type string and returns `void`, which means it has no returned value.\n\n> Technically, all functions in JavaScript return `undefined` if no other return value is specified, but declaring a return type of `void` causes TypeScript to error if you try to return a value from the function (or use its default returned value of `undefined`).\n\n## Todos Type\n\nThe `todos` prop is an array of objects where each of those objects represent a `todo`. For now we'll write that `todo` interface right into the list props;\n\n```ts\ninterface TodoListProps {\n  filter: 'all' | 'active' | 'completed';\n  toggleCompleted: (id: string) => void;\n  todos: [\n    {\n      id: string;\n      label: string;\n      status: string;\n    }\n  ];\n}\n```\n\nNow that our interface is complete, try changing the word \"all\" in `filter === all` and see that VS Code will tell you this condition will always be false. Compare this to plain JavaScript: if you had a typo in that line, you wouldn't understand why your filter wasn't working.\n\n## Sharing types\n\nMost of our components will need to specify types for `todos` and `filter`, so it's a good thing that TypeScript allows us to share types between files. I've already written up and exported those shared types in the file `TodoApp.types.ts`, so we just need to import them and use them in our interface.\n\n```ts\nimport { FilterTypes, Todos, ToggleCompleted } from '../TodoApp.types';\n\ninterface TodoListProps {\n  filter: FilterTypes;\n  toggleCompleted: ToggleCompleted;\n  todos: Todos;\n}\n```\n\n## Writing TodoListItemProps\n\nJumping down to the TodoListItem, as we start to write the `TodoListItemProps` we realize that three of the props, `label`, `status`, `id`, have already been defined in the `TodoItem` interface. So we can make `TodoListItemProps` reuse the `TodoItem` interface by extending it.\n\n```ts\nimport { ToggleCompleted } from '../TodoApp.types';\n\ninterface TodoListItemProps extends TodoItem {\n  toggleCompleted: ToggleCompleted;\n}\n```\n\nThe end result of this is an interface with all four properties: `id`, `toggleCompleted`, `status` and `label`.\n\nNext we can pull in the remaining props in the render function:\n\n```jsx\nconst { label, status, id, toggleCompleted } = props;\n```\n\nAnd then use the input's `onChange` event to call a function that toggles the todo's completed state. We can see in the signature that `toggleCompleted` expects an `id` of type string, so we'll pass our `id` prop in.\n\n> A [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) is a function passed into a component as a prop.\n\n```jsx\nconst handleCheck = () => toggleCompleted(id);\n...\n<input type=\"checkbox\" checked={status === 'completed'} onChange={handleCheck} />\n```\n\n## Passing props down\n\nNow that we have added `toggleCompleted` to our `TodoListItemProps` we'll see that the `TodoListItem` in our `TodoList` is complaining about a missing prop. We successfully passed the function into our `TodoList`, but we aren't passing it down into `TodoListItem`. This process is often called `prop drilling` and can be a signal for refactoring (which you'll see in the final example).\n\n```jsx\n<TodoListItem key={todo.id} {...todo} toggleCompleted={toggleCompleted} />\n```\n"
  },
  {
    "path": "step1-07/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <link rel=\"stylesheet\" href=\"./src/style.css\" />\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n\n\n"
  },
  {
    "path": "step1-07/demo/src/TodoApp.tsx",
    "content": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './components/TodoHeader';\nimport { TodoList } from './components/TodoList';\nimport { Todo, Todos, FilterTypes } from './TodoApp.types';\n\nconst defaultTodos: Todos = [\n  {\n    id: '04',\n    label: 'Todo 4',\n    status: 'completed',\n  },\n  {\n    id: '03',\n    label: 'Todo 3',\n    status: 'active',\n  },\n  {\n    id: '02',\n    label: 'Todo 2',\n    status: 'active',\n  },\n  {\n    id: '01',\n    label: 'Todo 1',\n    status: 'active',\n  },\n];\n\nexport const TodoApp = () => {\n  const [filter, setFilter] = React.useState<FilterTypes>('all');\n  const [todos, setTodos] = React.useState<Todos>(defaultTodos);\n\n  const addTodo = (label: string): void => {\n    const getId = () => Date.now().toString();\n    const newTodo: Todo = {\n      id: getId(),\n      label: label,\n      status: 'active',\n    };\n    setTodos([...todos, newTodo]);\n  };\n\n  const toggleCompleted = (id: string) => {\n    const newTodos = todos.map((todo): Todo => {\n      if (todo.id === id) {\n        return { ...todo, status: todo.status === 'active' ? 'completed' : 'active' };\n      } else {\n        return todo;\n      }\n    });\n    setTodos(newTodos);\n  };\n\n  const clearCompleted = () => {\n    const updatedTodos = todos.map((todo): Todo => {\n      if (todo.status === 'completed') {\n        return { ...todo, status: 'cleared' };\n      } else {\n        return todo;\n      }\n    });\n    setTodos(updatedTodos);\n  };\n\n  const changeFilter = (filter: FilterTypes) => {\n    setFilter(filter);\n  };\n  return (\n    <div>\n      <TodoHeader filter={filter} changeFilter={changeFilter} addTodo={addTodo} />\n      <TodoList todos={todos} filter={filter} toggleCompleted={toggleCompleted} />\n      <TodoFooter todos={todos} clearCompleted={clearCompleted} />\n    </div>\n  );\n}\n"
  },
  {
    "path": "step1-07/demo/src/TodoApp.types.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\nexport type TodoType = 'active' | 'completed' | 'cleared';\n\nexport interface Todo {\n  id: string;\n  label: string;\n  status: TodoType;\n}\n\nexport type Todos = Todo[];\n\nexport type AddTodo = (label: string) => void;\nexport type ToggleCompleted = (id: string) => void;\nexport type ClearCompleted = () => void;\nexport type ChangeFilter = (filter: FilterTypes) => void;\n\n"
  },
  {
    "path": "step1-07/demo/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\n\nexport const TodoFooter = (props) => {\n  const { clearCompleted, todos } = props;\n\n  const itemCount = todos.filter((todo) => todo.status === 'active').length;\n\n\n  return (\n    <footer>\n      <span>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </span>\n      <button className=\"submit\">\n        Clear Completed\n      </button>\n    </footer>\n  );\n};\n"
  },
  {
    "path": "step1-07/demo/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\n\nexport const TodoHeader = (props) => {\n  const [inputText, setInputText] = React.useState<string>('');\n  const { filter, addTodo, changeFilter } = props;\n\n  const onInput = (e) => {\n    setInputText(e.target.value);\n  };\n\n  const onSubmit = () => {\n    if (inputText.length > 0) addTodo(inputText);\n    setInputText('');\n  };\n\n  const onFilter = (e) => {\n    changeFilter(e.currentTarget.textContent)\n  };\n\n  return (\n    <header>\n      <h1>todos <small>(1.6 exercise)</small></h1>\n      <div className=\"addTodo\">\n        <input value={inputText} onChange={onInput} className=\"textfield\" placeholder=\"add todo\" />\n        <button className=\"submit\">Add</button>\n      </div>\n      <nav className=\"filter\">\n        <button className={filter === 'all' ? 'selected' : ''}> all</button>\n        <button className={filter === 'active' ? 'selected' : ''}>active</button>\n        <button className={filter === 'completed' ? 'selected' : ''}>completed</button>\n      </nav>\n    </header>\n  );\n}"
  },
  {
    "path": "step1-07/demo/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\n\nexport const TodoList = (props) => {\n  const { filter, todos } = props;\n\n  const filteredTodos = todos.filter((todo) => {\n    if (todo.status === 'cleared') return false;\n    return filter === 'all' ||\n      (filter === 'completed' && todo.status === 'completed') ||\n      (filter === 'active' && todo.status === 'active');\n  });\n\n  return (\n    <ul className=\"todos\">\n      {filteredTodos.map((todo) => (\n        <TodoListItem key={todo.id} {...todo} />\n      ))}\n    </ul>\n  );\n}\n"
  },
  {
    "path": "step1-07/demo/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\n\nexport const TodoListItem = (props) => {\n  const { label, status, id } = props;\n\n  return (\n    <li className=\"todo\">\n      <label>\n        <input type=\"checkbox\" checked={status === 'completed'} /> {label}\n      </label>\n    </li>\n  );\n};\n"
  },
  {
    "path": "step1-07/demo/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step1-07/demo/src/style.css",
    "content": "body {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  width: 400px;\n  margin: 20px auto;\n}\n\nh1 {\n  text-align: center;\n}\n\nsmall {\n  font-size: 0.5em;\n}\n\n.addTodo {\n  display: flex;\n}\n\n.textfield {\n  flex-grow: 1;\n  margin-right: 10px;\n}\n\n.submit {\n  border: none;\n  padding: 5px 10px;\n}\n\n.filter {\n  margin: 10px 0 0;\n}\n\n.filter button {\n  background: transparent;\n  border: none;\n}\n\n.filter .selected {\n  border-bottom: 2px solid blue;\n}\n\n.todos {\n  list-style: none;\n  padding: 0;\n}\n\nfooter {\n  display: flex;\n}\n\nfooter span {\n  flex-grow: 1;\n}\n"
  },
  {
    "path": "step1-07/exercise/README.md",
    "content": "# Step 1.7 - Types and creating a UI-driven state (Exercise)\n\nIf you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the \"exercise\" link under day 1 step 7 to see results.\n\n## TodoFooter\n\n1. Open TodoFooter and write a `TodoFooterProps` interface. It should include two values, a `clearCompleted` and `todos`. Use this interface in the function props like this: `(props: TodoFooterProps)`\n\n2. Write an `handleClick` function that calls `props.clear`.\n\n3. Assign `handleClick` to the button's `onClick` prop.\n\n4. Test out this functionality. Check a few todos complete and click the `Clear Completed` button.\n\n## TodoHeader\n\n1. Open TodoHeader then write and use the `TodoHeaderProps` which will include `addTodo`, `changeFilter` and `filter`.\n\n2. Add `onFilter` to each of the filter buttons\n\n- Note that we can't add new parameters to onClick, but we can pull information from the event target!\n\n4. Call `onSubmit` from the submit button\n\n5. Check out this new functionality! We can now add and filter todos!\n"
  },
  {
    "path": "step1-07/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <link rel=\"stylesheet\" href=\"./src/style.css\" />\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n\n\n"
  },
  {
    "path": "step1-07/exercise/src/TodoApp.tsx",
    "content": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './components/TodoHeader';\nimport { TodoList } from './components/TodoList';\nimport { Todo, Todos, FilterTypes } from './TodoApp.types';\n\nconst defaultTodos: Todos = [\n  {\n    id: '04',\n    label: 'Todo 4',\n    status: 'completed',\n  },\n  {\n    id: '03',\n    label: 'Todo 3',\n    status: 'active',\n  },\n  {\n    id: '02',\n    label: 'Todo 2',\n    status: 'active',\n  },\n  {\n    id: '01',\n    label: 'Todo 1',\n    status: 'active',\n  },\n];\n\nexport const TodoApp = () => {\n  const [filter, setFilter] = React.useState('all');\n  const [todos, setTodos] = React.useState<Todos>(defaultTodos);\n\n  const addTodo = (label: string): void => {\n    const getId = () => Date.now().toString();\n    const newTodo: Todo = {\n      id: getId(),\n      label: label,\n      status: 'active',\n    };\n    setTodos([...todos, newTodo]);\n  };\n\n  const toggleCompleted = (id: string) => {\n    const newTodos = todos.map((todo): Todo => {\n      if (todo.id === id) {\n        return { ...todo, status: todo.status === 'active' ? 'completed' : 'active' };\n      } else {\n        return todo;\n      }\n    });\n    setTodos(newTodos);\n  };\n\n  const clearCompleted = () => {\n    const updatedTodos = todos.map((todo): Todo => {\n      if (todo.status === 'completed') {\n        return { ...todo, status: 'cleared' };\n      } else {\n        return todo;\n      }\n    });\n    setTodos(updatedTodos);\n  };\n\n  const changeFilter = (filter: FilterTypes) => {\n    setFilter(filter);\n  };\n  return (\n    <div>\n      <TodoHeader filter={filter} changeFilter={changeFilter} addTodo={addTodo} />\n      <TodoList todos={todos} filter={'all'} toggleCompleted={toggleCompleted} />\n      <TodoFooter todos={todos} clearCompleted={clearCompleted} />\n    </div>\n  );\n}\n"
  },
  {
    "path": "step1-07/exercise/src/TodoApp.types.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\nexport type TodoType = 'active' | 'completed' | 'cleared';\n\nexport interface Todo {\n  id: string;\n  label: string;\n  status: TodoType;\n}\n\nexport type Todos = Todo[];\n\nexport type AddTodo = (label: string) => void;\nexport type ToggleCompleted = (id: string) => void;\nexport type ClearCompleted = () => void;\nexport type ChangeFilter = (filter: FilterTypes) => void;\n\n"
  },
  {
    "path": "step1-07/exercise/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\n\nexport const TodoFooter = (props) => {\n  const { clearCompleted, todos } = props;\n\n  const itemCount = todos.filter((todo) => todo.status === 'active').length;\n\n\n  return (\n    <footer>\n      <span>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </span>\n      <button className=\"submit\">\n        Clear Completed\n      </button>\n    </footer>\n  );\n};\n"
  },
  {
    "path": "step1-07/exercise/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\n\nexport const TodoHeader = (props) => {\n  const [inputText, setInputText] = React.useState<string>('');\n  const { filter, addTodo, changeFilter } = props;\n\n  const onInput = (e) => {\n    setInputText(e.target.value);\n  };\n\n  const onSubmit = () => {\n    if (inputText.length > 0) addTodo(inputText);\n    setInputText('');\n  };\n\n  const onFilter = (e) => {\n    changeFilter(e.currentTarget.textContent)\n  };\n\n  return (\n    <header>\n      <h1>todos <small>(1.6 exercise)</small></h1>\n      <div className=\"addTodo\">\n        <input value={inputText} onChange={onInput} className=\"textfield\" placeholder=\"add todo\" />\n        <button className=\"submit\">Add</button>\n      </div>\n      <nav className=\"filter\">\n        <button className={filter === 'all' ? 'selected' : ''}> all</button>\n        <button className={filter === 'active' ? 'selected' : ''}>active</button>\n        <button className={filter === 'completed' ? 'selected' : ''}>completed</button>\n      </nav>\n    </header>\n  );\n}"
  },
  {
    "path": "step1-07/exercise/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\nimport { FilterTypes, Todos } from '../TodoApp.types';\n\ninterface TodoListProps {\n  filter: FilterTypes;\n  toggleCompleted: (id: string) => void;\n  todos: Todos;\n}\n\nexport const TodoList = (props: TodoListProps) => {\n  const { filter, todos, toggleCompleted } = props;\n\n  const filteredTodos = todos.filter((todo) => {\n    if (todo.status === 'cleared') return false;\n    return filter === 'all' ||\n      (filter === 'completed' && todo.status === 'completed') ||\n      (filter === 'active' && todo.status === 'active');\n  });\n\n  return (\n    <ul className=\"todos\">\n      {filteredTodos.map((todo) => (\n        <TodoListItem key={todo.id} {...todo} toggleCompleted={toggleCompleted} />\n      ))}\n    </ul>\n  );\n}\n"
  },
  {
    "path": "step1-07/exercise/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Todo, ToggleCompleted } from '../TodoApp.types';\n\ninterface TodoListItemProps extends Todo {\n  toggleCompleted: ToggleCompleted;\n}\n\nexport const TodoListItem = (props: TodoListItemProps) => {\n  const { label, status, id, toggleCompleted } = props;\n\n  const handleCheck = () => toggleCompleted(id);\n\n  return (\n    <li className=\"todo\">\n      <label>\n        <input type=\"checkbox\" checked={status === 'completed'} onChange={handleCheck} /> {label}\n      </label>\n    </li>\n  );\n};\n"
  },
  {
    "path": "step1-07/exercise/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step1-07/exercise/src/style.css",
    "content": "body {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  width: 400px;\n  margin: 20px auto;\n}\n\nh1 {\n  text-align: center;\n}\n\nsmall {\n  font-size: 0.5em;\n}\n\n.addTodo {\n  display: flex;\n}\n\n.textfield {\n  flex-grow: 1;\n  margin-right: 10px;\n}\n\n.submit {\n  border: none;\n  padding: 5px 10px;\n}\n\n.filter {\n  margin: 10px 0 0;\n}\n\n.filter button {\n  background: transparent;\n  border: none;\n}\n\n.filter .selected {\n  border-bottom: 2px solid blue;\n}\n\n.todos {\n  list-style: none;\n  padding: 0;\n}\n\nfooter {\n  display: flex;\n}\n\nfooter span {\n  flex-grow: 1;\n}\n"
  },
  {
    "path": "step1-07/final/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <link rel=\"stylesheet\" href=\"./src/style.css\" />\n  <body>\n    <div id=\"app\"></div>\n  </body>\n</html>\n\n\n"
  },
  {
    "path": "step1-07/final/src/TodoApp.tsx",
    "content": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './components/TodoHeader';\nimport { TodoList } from './components/TodoList';\nimport { Todo, Todos, FilterTypes, AppContextProps } from './TodoApp.types';\n\nexport const AppContext = React.createContext<AppContextProps>(undefined);\n\nconst defaultTodos: Todos = [\n  {\n    id: '04',\n    label: 'Todo 4',\n    status: 'completed',\n  },\n  {\n    id: '03',\n    label: 'Todo 3',\n    status: 'active',\n  },\n  {\n    id: '02',\n    label: 'Todo 2',\n    status: 'active',\n  },\n  {\n    id: '01',\n    label: 'Todo 1',\n    status: 'active',\n  },\n];\n\nexport const TodoApp = () => {\n  const [filter, setFilter] = React.useState<FilterTypes>('all');\n  const [todos, setTodos] = React.useState<Todos>(defaultTodos);\n\n  // TODO Convert to useReducer\n  const addTodo = (label: string): void => {\n    const getId = () => Date.now().toString();\n    const newTodo: Todo = {\n      id: getId(),\n      label: label,\n      status: 'active',\n    };\n    setTodos([...todos, newTodo]);\n  };\n\n  const toggleCompleted = (id: string) => {\n    const newTodos = todos.map((todo): Todo => {\n      if (todo.id === id) {\n        return { ...todo, status: todo.status === 'active' ? 'completed' : 'active' };\n      } else {\n        return todo;\n      }\n    });\n    setTodos(newTodos);\n  };\n\n  const clearCompleted = () => {\n    const updatedTodos = todos.map((todo): Todo => {\n      if (todo.status === 'completed') {\n        return { ...todo, status: 'cleared' };\n      } else {\n        return todo;\n      }\n    });\n    setTodos(updatedTodos);\n  };\n\n  const changeFilter = (filter: FilterTypes) => {\n    setFilter(filter);\n  };\n\n  const getFilter = () => {\n    return filter;\n  }\n\n  const getTodos = () => {\n    return todos;\n  }\n\n  return (\n    <AppContext.Provider value={{\n      addTodo,\n      toggleCompleted,\n      clearCompleted,\n      changeFilter,\n      getFilter,\n      getTodos\n    }}>\n      <TodoHeader />\n      <TodoList />\n      <TodoFooter />\n    </AppContext.Provider>\n  );\n};\n"
  },
  {
    "path": "step1-07/final/src/TodoApp.types.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\nexport type TodoType = 'active' | 'completed' | 'cleared';\n\nexport interface Todo {\n  id: string;\n  label: string;\n  status: TodoType;\n}\n\nexport type Todos = Todo[];\n\n\nexport interface AppContextProps {\n  addTodo: (label: string) => void;\n  toggleCompleted: (id: string) => void;\n  clearCompleted: () => void;\n  changeFilter: (filter: FilterTypes) => void;\n  getFilter: () => FilterTypes;\n  getTodos: () => Todos;\n}\n"
  },
  {
    "path": "step1-07/final/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\nimport { AppContext } from '../TodoApp';\n\nexport const TodoFooter = () => {\n  const { clearCompleted, getTodos } = React.useContext(AppContext);\n\n  const itemCount = getTodos().filter((todo) => todo.status === 'active').length;\n  const handleClick = () => {\n    clearCompleted();\n  };\n\n  return (\n    <footer>\n      <span>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </span>\n      <button onClick={handleClick} className=\"submit\">\n        Clear Completed\n      </button>\n    </footer>\n  );\n};\n"
  },
  {
    "path": "step1-07/final/src/components/TodoHeader.tsx",
    "content": "import React, { ChangeEventHandler, MouseEventHandler, useState, useContext } from 'react';\nimport { FilterTypes } from '../TodoApp.types';\nimport { AppContext } from '../TodoApp';\n\nexport const TodoHeader = () => {\n  const { changeFilter, addTodo, getFilter } = useContext(AppContext);\n  const [inputText, setInputText] = useState<string>('');\n\n  const onInput: ChangeEventHandler<HTMLInputElement> = (e) => {\n    setInputText(e.target.value);\n  };\n\n  const onSubmit = () => {\n    if (inputText.length > 0) addTodo(inputText);\n    setInputText('');\n  };\n\n  const onFilter: MouseEventHandler<HTMLButtonElement> = (e) => {\n    changeFilter(e.currentTarget.textContent as FilterTypes)\n  };\n  return (\n    <header>\n      <h1>\n        todos <small>(1.7 final)</small>\n      </h1>\n      <div className=\"addTodo\">\n        <input value={inputText} onChange={onInput} className=\"textfield\" placeholder=\"add todo\" />\n        <button onClick={onSubmit} className=\"submit\">\n          Add\n        </button>\n      </div>\n      <nav className=\"filter\">\n        <button onClick={onFilter} className={getFilter() === 'all' ? 'selected' : ''}> all</button>\n        <button onClick={onFilter} className={getFilter() === 'active' ? 'selected' : ''}>active</button>\n        <button onClick={onFilter} className={getFilter() === 'completed' ? 'selected' : ''}>completed</button>\n      </nav>\n    </header>\n  );\n};\n"
  },
  {
    "path": "step1-07/final/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\nimport { AppContext } from '../TodoApp';\n\nexport const TodoList = () => {\n  const { getFilter, getTodos } = React.useContext(AppContext);\n\n  const filteredTodos = getTodos().filter((todo) => {\n    if (todo.status === 'cleared') return false;\n    return getFilter() === 'all' ||\n      (getFilter() === 'completed' && todo.status === 'completed') ||\n      (getFilter() === 'active' && todo.status === 'active');\n  });\n\n  return (\n    <ul className=\"todos\">\n      {filteredTodos.map((todo) => (\n        <TodoListItem key={todo.id} {...todo} />\n      ))}\n    </ul>\n  );\n};\n"
  },
  {
    "path": "step1-07/final/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Todo } from '../TodoApp.types';\nimport { AppContext } from '../TodoApp';\n\nexport const TodoListItem = (props: Todo) => {\n  const { label, status, id } = props;\n  const { toggleCompleted } = React.useContext(AppContext);\n\n  return (\n    <li className=\"todo\">\n      <label>\n        <input type=\"checkbox\" checked={status === 'completed'} onChange={() => toggleCompleted(id)} /> {label}\n      </label>\n    </li>\n  );\n};\n"
  },
  {
    "path": "step1-07/final/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step1-07/final/src/style.css",
    "content": "body {\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n  width: 400px;\n  margin: 20px auto;\n}\n\nh1 {\n  text-align: center;\n}\n\nsmall {\n  font-size: 0.5em;\n}\n\n.addTodo {\n  display: flex;\n}\n\n.textfield {\n  flex-grow: 1;\n  margin-right: 10px;\n}\n\n.submit {\n  border: none;\n  padding: 5px 10px;\n}\n\n.filter {\n  margin: 10px 0 0;\n}\n\n.filter button {\n  background: transparent;\n  border: none;\n}\n\n.filter .selected {\n  border-bottom: 2px solid blue;\n}\n\n.todos {\n  list-style: none;\n  padding: 0;\n}\n\nfooter {\n  display: flex;\n}\n\nfooter span {\n  flex-grow: 1;\n}\n"
  },
  {
    "path": "step2-01/demo/README.md",
    "content": "# Step 2.1 - Introduction to TypeScript (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/) | [Final](../final/)\n\nIn this step, we'll cover enough TypeScript concepts to be productive with the React & Redux frameworks.\n\nTopics in this step will include:\n\n- [ES modules](#modules)\n- [Types](#typescript-types)\n- [Spread](#spread-operator) and [Destructuring](#destructuring)\n- [Promise](#promise) and [Async / Await](#async--await)\n\n> To try out TypeScript concepts and see the corresponding JavaScript, you can use the [TypeScript playground](http://www.typescriptlang.org/play/index.html). We won't be using it in this training, but it's very handy in general!\n\n## Modules\n\nHistorically, JS was only executed in-browser. The code all had to be loaded using `<script>` tags. With the introduction of node.js, the JS community needed a way to scale beyond just single script files. Other languages support the notion of modules, so various groups started developing modularity standards for JS.\n\nThe most important ones to know about are:\n\n- **commonjs** - Node.js's standard to support modules\n  - synchronous loading using `require()` function\n  - `require()` can be dynamically called in the course of a program\n- **ESM (ECMAScript module)** - language-level support\n  - statically analyzable and synchronous\n  - dynamic and asynchronous support via `import()` that returns a promise\n\n> For more information about the _many_ modularity patterns and standards developed over time, see [this article](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc). You may still encounter some of the older patterns in legacy code.\n\n## TypeScript types\n\nRefer to [`demo/src/types`](./src/types/index.ts) for examples of some of the types available in TS that benefit a React developer.\n\n## Spread operator\n\nThe spread operator `...` provides a quick way to clone and concatenate objects and arrays. This syntax is seen a lot inside React props and Redux reducers.\n\nWith **objects**:\n\n```ts\n// Shallow copy an object\nconst cloned1 = { ...obj };\n\n// Shallow copy and add/overwrite a key\nconst overridden1 = { ...obj, key: value };\n\n// Shallow copy multiple objects and add a key\nconst cloned2 = { ...obj1, ...obj2, key: value };\n\n// Use an expression to calculate a key dynamically\nconst overridden = { ...object, [key + '-suffix']: value };\n```\n\nWith **arrays**:\n\n```ts\nconst copy1 = [...arr];\nconst copy2 = [...arr1, ...arr2];\nconst copyWithExtras = [123, ...arr, 'hello'];\n```\n\nSpreading an array into positional arguments to a function:\n\n```ts\nfunction myFunc(a: number, b: number, c: number) {\n  // ...\n}\nconst arr = [1, 2, 3];\nmyFunc(...arr);\n```\n\nSpreading an object into props for a React component:\n\n```jsx\nconst obj = { a: 1, b: 2, c: 3 };\n// equivalent to:\n// <MyComponent a={obj.a} b={obj.b} c={obj.c} />\nconst rendered = <MyComponent {...obj} />;\n```\n\n## Destructuring\n\nDestructuring is a concise way to take properties out of an object or array:\n\n```ts\nconst obj = { foo: 1, bar: 2 };\nconst { foo, bar } = obj;\n// foo = 1, bar = 2\n\nconst arr = [1, 2];\nconst [foo, bar] = arr;\n// foo = 1, bar = 2\n```\n\nYou can separate an item from the rest of the object with destructuring:\n\n```ts\nconst obj = { a: 1, b: 2, c: 3, d: 4 };\nconst { a, ...rest } = obj;\n// a = 1, rest = {b: 2, c: 3, d: 4}\n\nconst arr = [1, 2, 3];\nconst [foo, ...bar] = arr;\n// foo = 1, bar = [2, 3]\n```\n\n## Promise\n\nA promise is an object representing work that will be completed later, asynchronously. Promises are chainable, which helps with writing maintainable async code. (Typically, legacy async code uses callbacks to let the caller have control over what to do after the task has been completed, which becomes [very hard to read](http://callbackhell.com/).)\n\n```ts\nconst aPromise = new Promise((resolve, reject) => {\n  // do something async and call resolve() to let promise know it is done\n  setTimeout(() => {\n    // setTimeout will call this method after 1s, simulating async operation like network calls\n    resolve();\n  }, 1000);\n});\n```\n\nEach promise instance exposes a `then()` function that is chainable. It also provides `catch()`, which catches all exceptions or `reject()` calls:\n\n```ts\n// Promise.resolve() creates an already-resolved promise instance\nconst aPromise = Promise.resolve('hello world');\n\naPromise\n  .then(result => {\n    return makeAnotherPromise();\n  })\n  .then(result => {\n    return makeYetAnotherPromise();\n  })\n  .catch(err => {\n    console.error(err);\n  });\n```\n\n> For more information, see [this overview of promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) or [this deep dive](https://developers.google.com/web/fundamentals/primers/promises).\n\n## Async / await\n\n**Async / Await** is a language-level feature for writing asynchronous functions as if they are ordinary, synchronous code. JS support for this is built on top of `Promise`s and is inspired heavily by [C#'s async / await syntax](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/async/). An async function is written like this:\n\n```ts\nasync function someFunctionAsync() {\n  // Inside here, we can await on other async functions\n  const result = await someOtherFunctionAsync();\n  return result + ' hello';\n}\n```\n\nAll functions that are marked `async` return a `Promise` automatically. The previous example returned a `Promise<string>`, and can be used like this:\n\n```ts\nsomeFunctionAsync().then(result => {\n  console.log(result);\n});\n```\n\n> For more information, see [this article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).\n"
  },
  {
    "path": "step2-01/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n    <div id=\"app\">\n      Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open console window.\n    </div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-01/demo/src/async/index.ts",
    "content": "async function fetchSomething() {\n  const response = await fetch('http://localhost:3000/hello');\n  return await response.text();\n}\n\n// Async functions always return a Promise\nfetchSomething().then(text => {\n  console.log('hello ' + text);\n});\n\n// adding an export turns this into a \"module\"\nexport default {};\n"
  },
  {
    "path": "step2-01/demo/src/generics/index.ts",
    "content": "// Generics for classes\nclass Stack<T = number> {\n  private data: T[] = [];\n\n  push(item: T) {\n    this.data.push(item);\n  }\n  pop(): T {\n    return this.data.pop();\n  }\n}\n\nconst numberStack = new Stack();\nconst stringStack = new Stack<string>();\n\n// Generics for functions\nfunction reverse<T>(arg: T[]): T[] {\n  // TODO: implement the logic to reverse the array\n  return arg;\n}\n\n// adding an export turns this into a \"module\"\nexport default {};\n"
  },
  {
    "path": "step2-01/demo/src/index.tsx",
    "content": "// Interesting TypeScript Topics\n\n// types\nimport './types';\n\n// interface\nimport './interfaces';\n\n// modularity\nimport './modules';\n\n// generics\nimport './generics';\n\n// await / async\nimport './async';\n\n// spread syntax\nimport './spread';\n"
  },
  {
    "path": "step2-01/demo/src/interfaces/index.ts",
    "content": "// Interface for an object or class\ninterface Car {\n  make: string;\n  model: string;\n}\n\nclass MyCar implements Car {\n  make: string;\n  model: string;\n\n  constructor(make: string, model: string) {\n    this.make = make;\n    this.model = model;\n  }\n}\nconst myCar1: Car = new MyCar('Honda', 'Accord');\n\nconst myCar2: Car = {\n  make: 'Honda',\n  model: 'Accord'\n};\n\n// Interface for a function\ninterface InterestingFn {\n  (someArgs: string): number;\n}\nconst interesting: InterestingFn = (someArgs: string): number => {\n  return Number(someArgs);\n};\n\n// adding an export to turn this into a \"module\"\nexport default {};\n"
  },
  {
    "path": "step2-01/demo/src/modules/default.ts",
    "content": "export default class DefaultClass {\n  hello = 'world';\n}\n"
  },
  {
    "path": "step2-01/demo/src/modules/index.ts",
    "content": "// These are named imports from a file relative to this file\nimport { namedConst, namedFn, namedObj, namedConstBracket } from './named';\n\n// We can even give an alias to the named constant\nimport { namedConst as c } from './named';\n\n// These are the *same instances* of the named imports, but they all get imported inside a single object\nimport * as named from './named';\n\n// Print out the exports\nconsole.log(namedConst);\nconsole.log(c);\nconsole.log(namedFn());\nconsole.log(namedObj);\nconsole.log(namedConstBracket);\n\n// Print out exports from module level import\nconsole.log(named.namedConst);\nconsole.log(named.namedFn());\nconsole.log(named.namedObj);\nconsole.log(named.namedConstBracket);\n\n// The named and module-level imports reference the same object instances\nconsole.log(namedObj === named.namedObj); // true\n\n// Default import can be named anything we want as the consumer\nimport DefaultClass from './default';\nimport Foo from './default';\n\nconsole.log(new DefaultClass().hello);\nconsole.log(new Foo().hello);\n"
  },
  {
    "path": "step2-01/demo/src/modules/named.ts",
    "content": "export const namedConst = 5;\n\nexport function namedFn() {\n  return 5;\n}\n\nexport const namedObj = {\n  hello: 'world'\n};\n\nconst namedConstBracket = 10;\n\nexport { namedConstBracket };\n"
  },
  {
    "path": "step2-01/demo/src/spread/index.ts",
    "content": "// Destructuring\nvar [a, b, ...rest] = [1, 2, 3, 4];\nconsole.log(a, b, rest); // 1 2 [3,4]\n\n// Array assignment\nvar list = [1, 2];\nlist = [...list, 3, 4];\nconsole.log(list); // [1,2,3,4]\n\n// Object assignment\nconst point2D = { x: 1, y: 2 };\nconst point3D = { ...point2D, z: 3 };\n\n// Concat two objects\nconst obj1 = { x: 1 };\nconst obj2 = { y: 2 };\n\nconst obj3 = { ...obj1, ...obj2 };\n\n// Destructuring object\nconst { x } = obj3;\n\n// adding an export turns this into a \"module\"\nexport default {};\n"
  },
  {
    "path": "step2-01/demo/src/types/index.ts",
    "content": "// Basic Types\nlet isDone: boolean = false;\nlet decimal: number = 6;\nlet color: string = 'blue';\nlet sky: string = `the sky is ${color}`;\n\n// Function Types\ntype FibFn = (n: number) => number;\n\n// Object Types\ntype Obj = {\n  [key: string]: string;\n};\n\n// Object with Specified Keys\ntype Specific1 = {\n  foo: string;\n  bar: number;\n  common: string;\n};\n\ntype Specific2 = {\n  alice: string;\n  bob: number;\n  common: number;\n};\n\n// composition\ntype TypeOfObj = {\n  foo: string;\n  bar: number;\n  obj1: Specific1;\n  obj2: Specific2;\n};\n\n// Get types by property\ntype Obj1Type = TypeOfObj['obj1'];\n\n// union, intersection\ntype Union = Specific1 | Specific2;\ntype Intersection = Specific1 & Specific2;\n\n// casting\nlet choose1 = <Specific1>{ common: '5' };\n\n// string literal union\ntype CatStatus = 'alive' | 'dead' | 'both';\n\n// Classes\nclass Animal { }\n\n// Illustration purposes only\n// In real apps, avoid inheritance if possible\n// noted exception: React.Component with react@<16.8.0\nclass Cat extends Animal { }\nclass Dog extends Animal { }\n\n// Any Type - avoid if possible\nlet mystery: any = \"I don't like the person who will be maintaining this code\";\nmystery = 2;\nmystery = () => 3;\n\n// adding an export turns this into a \"module\"\nexport default {};\n"
  },
  {
    "path": "step2-01/exercise/README.md",
    "content": "# Step 2.1 - Introduction to TypeScript (Exercise)\n\n[Lessons](../../) | [Demo](../demo/) | [Final](../final/)\n\nIf you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder.\n\nExercises will be completed under this step's `exercise/src` folder unless otherwise noted. You'll also want to open the [Step2-01 exercise page](http://localhost:8080/step2-01/exercise/) to see the results as you work.\n\n## Modules\n\n1. Open the file `exercise/src/fibonacci.ts` in VS Code\n\n2. Inside this file, write a function called `fib(n)` that takes in a number and returns the `n`-th Fibonacci number (be sure the specify the type of `n`).\n\n> HINT: `function fib(n: number) { return n <= 1 ? n : fib(n - 1) + fib(n - 2); }`\n\n3. Export `fib(n)` as a **named export**\n\n4. Export a const variable `FibConst` as a **default export**\n\n5. Inside `index.ts` in the same folder, import both `fib` and `FibConst`, and use the built-in `console.log()` function to log the result of `fib(FibConst)`.\n\n## Types and interfaces\n\nInside `exercise/src/index.ts`:\n\n1. Add a type alias for string union type describing the states of Red-Green-Yellow traffic light: `type TrafficLight = ???`\n\n2. Describe a type of car with an interface: `interface Car { ... }` complete with `wheels`, `color`, `make`, `model`\n\n3. Create a valid car instance and log it using `console.log()`: `const myCar: Car = { ??? }`;\n\n## Generics\n\nInside `exercise/src/stack.ts`, create a generic class for a `Stack<T>` complete with a typed `pop()` and `push()` methods.\n\n> Hint: the JavaScript array already has `push()` and `pop()` implemented for you. That can be your backing store.\n\nIn `exercise/src/index.ts`, create a `Stack<number>` and use `console.log()` to demonstrate its functionality.\n\n## Spread and destructuring\n\n1. Note the following code in index.ts:\n\n```ts\nconst obj1 = {\n  first: 'who',\n  second: 'what',\n  third: 'dunno',\n  left: 'why'\n};\n\nconst obj2 = {\n  center: 'because',\n  pitcher: 'tomorrow',\n  catcher: 'today'\n};\n```\n\n2. Now create a one-liner using the spread syntax `{...x, ...y}` to create a new variable `megaObj` that combines these two objects.\n\n3. Use the destructuring syntax to retrieve the values for `{first, second, catcher}` from `megaObj`.\n\n## Async / await\n\nNote the following code in index.ts:\n\n```ts\nfunction makePromise() {\n  return Promise.resolve(5);\n}\n```\n\n1. Call `makePromise()` with the `await` syntax and log the results.\n\n2. Create a new function that uses the `async` keyword. Inside the function, make an `await` call to `makePromise()` and return the results.\n"
  },
  {
    "path": "step2-01/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" class=\"exercise\" data-src=\"./README.md\"></div>\n    <div id=\"app\">\n      Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open the console\n      window.\n    </div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-01/exercise/src/fibonacci.ts",
    "content": "// TODO: create a named export of a function called fib(n)\n// export function fib(n: number) ...\n\n// TODO: create a default export of a constant of a number FibConst\n// export default ...\n"
  },
  {
    "path": "step2-01/exercise/src/index.ts",
    "content": "// TODO: import the fib(n) function and the constant from './fibonacci.ts'\n// import FibConst, {fib} from ...\n\n// TODO: import Stack from ...\n\n// Do the exercises here, outputting results using console.log()\nconsole.log('hello world');\n\n// ---- Modules ----\n\n// TODO: log the result of fib(FibConst)\n\n// ---- Types and Interfaces ----\n\n// TODO: define TrafficLight type\n// type TrafficLight = ???\n\n// TODO: define Car interface\n// interface Car { ??? }\n\n// TODO: create Car instance\n// const myCar: Car = { ??? }\n\n// ---- Generics ----\n\n// TODO: Demonstrate the Stack\n// const myStack: Stack<number> = ???\n\n// ---- Spread and Destructuring ----\nconst obj1 = {\n  first: 'who',\n  second: 'what',\n  third: 'dunno',\n  left: 'why'\n};\n\nconst obj2 = {\n  center: 'because',\n  pitcher: 'tomorrow',\n  catcher: 'today'\n};\n\n// TODO: combine obj1 and obj2 into a single object megaObj using spread syntax\n// const megaObj = ???\n\n// TODO: use destructuring syntax to extract { first, second, catcher }\n\n// ---- Async / Await ----\nfunction makePromise() {\n  return Promise.resolve(5);\n}\n\n// TODO: create a new async function\n\nasync function run() {\n  // TODO: call makePromise() using await syntax and log the results\n  // TODO: call your new async function\n}\n\nrun();\n\n// Make this file a module so its code doesn't go in the global scope\nexport {};\n"
  },
  {
    "path": "step2-01/exercise/src/stack.ts",
    "content": "// TODO: create a Stack<T> generic class here:\n\n// export class Stack<T> {\n//   push(...) { ... }\n//   pop(...) { ... }\n// }\n"
  },
  {
    "path": "step2-01/final/README.md",
    "content": "# Step 2.1 - Introduction to TypeScript (Final)\n\n[Lessons](../../) | [Demo](../demo/) | [Exercise](../exercise/)\n\nLook at the src folder for exercise solutions.\n"
  },
  {
    "path": "step2-01/final/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" class=\"exercise\" data-src=\"./README.md\"></div>\n    <div id=\"app\">\n      Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open the console\n      window.\n    </div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-01/final/src/fibonacci.ts",
    "content": "export function fib(n: number) {\n  return n <= 1 ? n : fib(n - 1) + fib(n - 2);\n}\n\nconst FibConst: number = 3;\nexport default FibConst;\n"
  },
  {
    "path": "step2-01/final/src/index.ts",
    "content": "import FibConst, { fib } from './fibonacci';\nimport { Stack } from './stack';\n\nconsole.log('hello world');\n\n// ---- Modules ----\nconsole.log('fib(FibConst) is:', fib(FibConst));\n\n// ---- Types and Interfaces ----\ntype TrafficLight = 'red' | 'green' | 'yellow';\nconst annoyingLight: TrafficLight = 'red';\n\ninterface Car {\n  wheels: number;\n  color: string;\n  make: string;\n  model: string;\n}\n\nconst myCar: Car = {\n  wheels: 4,\n  color: 'blue',\n  make: 'Toyota',\n  model: 'Camry'\n};\n// JSON.stringify makes a nice string representation of an object\nconsole.log('My car:', JSON.stringify(myCar));\n\n// ---- Generics ----\nconst myStack = new Stack<number>();\nmyStack.push(1);\nmyStack.push(2);\nmyStack.push(3);\nconsole.log('Number on top of the stack:', myStack.pop());\n\n// ---- Spread and Destructuring ----\nconst obj1 = {\n  first: 'who',\n  second: 'what',\n  third: 'dunno',\n  left: 'why'\n};\n\nconst obj2 = {\n  center: 'because',\n  pitcher: 'tomorrow',\n  catcher: 'today'\n};\n\nconst megaObj = { ...obj1, ...obj2 };\n\nconst { first, second, catcher } = megaObj;\nconsole.log('First:', first);\nconsole.log('Second:', second);\nconsole.log('Catcher:', catcher);\n\n// ---- Async / Await ----\nfunction makePromise(): Promise<number> {\n  return Promise.resolve(5);\n}\n\nasync function getGreeting(name: string): Promise<string> {\n  return 'hello ' + name;\n}\n\nasync function run() {\n  const result = await makePromise();\n  console.log('makePromise returned:', result);\n\n  const greeting = await getGreeting('Ken');\n  console.log('greeting:', greeting);\n}\n\nrun();\n\n// Make this file a module so its code doesn't go in the global scope\nexport {};\n"
  },
  {
    "path": "step2-01/final/src/stack.ts",
    "content": "export class Stack<T> {\n  private _store: T[];\n\n  constructor() {\n    this._store = [];\n  }\n\n  push(elem: T): void {\n    this._store.push(elem);\n  }\n\n  pop(): T {\n    return this._store.pop();\n  }\n}\n"
  },
  {
    "path": "step2-02/demo/README.md",
    "content": "# Step 2.2 - UI Fabric component library (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\n[UI Fabric](https://developer.microsoft.com/en-us/fabric) is a component library that reflects the latest Microsoft design language. It is used in many Microsoft web applications and is [developed in the open](https://github.com/OfficeDev/office-ui-fabric-react).\n\nWe'll talk about:\n\n- [What makes it good](#what-makes-it-good)\n- [How to find it](#how-to-find-it)\n- [How to use it](#how-to-use-it)\n- [Laying out apps with Stack](#layout-with-stack)\n\n## What makes it good\n\n- Fabric has been developed BOTH by developers and design engineers working together as a team\n- Most notable Microsoft web products use it\n- It is documented both with examples and TypeScript API documentation\n- Components are highly customizable and themeable\n- Comprehensive library\n- Works with assistive technologies and conforms to web accessibility standards for focus management\n- Fully funded and well managed - shield rotation and lots of automation work\n- Engineering is done in the open on GitHub\n- Engineering system is shared and re-usable by other teams\n\n## How to find it\n\nGitHub repo:\nhttps://github.com/officedev/office-ui-fabric-react\n\nDocumentation:\nhttps://developer.microsoft.com/en-us/fabric/#/components\n\n## How to use it\n\n### Importing a component\n\n```jsx\nimport { DefaultButton } from 'office-ui-fabric-react';\n\nconst MyComponent = () => {\n  return (\n    <div>\n      <DefaultButton>Hello World</DefaultButton>\n    </div>\n  );\n};\n```\n\n### Customizing behavior of individual components\n\nTake a look at the [Button documentation](https://developer.microsoft.com/en-us/fabric#/components/button).\n\nFrom the documentation, we can see that if we want to render an icon along with the button's text, we can pass `iconProps` to the button:\n\n```js\nimport { DefaultButton } from 'office-ui-fabric-react';\n\nconst MyComponent = () => {\n  return (\n    <div>\n      <DefaultButton iconProps={{ iconName: 'Mail' }}>Send Mail</DefaultButton>\n    </div>\n  );\n};\n```\n\n### Customizing component rendering\n\nSome Fabric components take in a render functions to allow customizing certain parts of the component. An example with TextField:\n\n```js\nimport { TextField } from 'office-ui-fabric-react';\n\nconst MyComponent = () => {\n  return (\n    <div>\n      <TextField onRenderPrefix={() => <Icon iconName=\"Search\" />} />\n      <TextField onRenderPrefix={() => 'hello world'} />\n    </div>\n  );\n};\n```\n\n## Layout with Stack\n\nBefore we start, let's look at flexbox--a modern CSS layout method which is powerful, but really, really complex to use:\n\n- A guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n- A tool: http://the-echoplex.net/flexyboxes/\n- Did you know there were three or so flexbox standards? (this means old articles may have non-working code)\n\nFabric's answer is: Stack.\n\n**Stack** is a container-type component that abstracts the usage of flexbox to define the layout of its child components.\n\nFlexbox uses CSS styles to control:\n\n- direction\n- grow\n- shrink\n- wrap\n- justification\n- alignment\n\nStack abstracts these CSS styles and provides typings to make them more discoverable.\n\nCheck out a cookbook of sorts in our [documentation](https://developer.microsoft.com/en-us/fabric#/components/stack).\n"
  },
  {
    "path": "step2-02/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n    <div id=\"app\"></div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-02/demo/src/components/TodoApp.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nimport { TodoHeader } from './TodoHeader';\nimport { TodoList } from './TodoList';\nimport { Store } from '../store';\n\nlet index = 0;\n\nexport class TodoApp extends React.Component<any, Store> {\n  constructor(props) {\n    super(props);\n    this.state = {\n      todos: {\n        id0: { label: 'hello', completed: false },\n        id1: { label: 'world', completed: false }\n      },\n      filter: 'all'\n    };\n  }\n\n  render() {\n    const { filter, todos } = this.state;\n    return (\n      <Stack horizontalAlign=\"center\">\n        <Stack style={{ width: 400 }} gap={25}>\n          <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />\n          <TodoList complete={this._complete} todos={todos} filter={filter} remove={this._remove} edit={this._edit} />\n          <TodoFooter clear={this._clear} todos={todos} />\n        </Stack>\n      </Stack>\n    );\n  }\n\n  private _addTodo = label => {\n    const { todos } = this.state;\n    const id = index++;\n\n    this.setState({\n      todos: { ...todos, [id]: { label } }\n    });\n  };\n\n  private _remove = id => {\n    const newTodos = { ...this.state.todos };\n    delete newTodos[id];\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _complete = id => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id].completed = !newTodos[id].completed;\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _edit = (id, label) => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id] = { ...newTodos[id], label };\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _clear = () => {\n    const { todos } = this.state;\n    const newTodos = {};\n\n    Object.keys(this.state.todos).forEach(id => {\n      if (!todos[id].completed) {\n        newTodos[id] = todos[id];\n      }\n    });\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _setFilter = filter => {\n    this.setState({\n      filter: filter\n    });\n  };\n}\n"
  },
  {
    "path": "step2-02/demo/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\nimport { Store } from '../store';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabric-react';\n\ninterface TodoFooterProps {\n  clear: () => void;\n  todos: Store['todos'];\n}\n\nexport const TodoFooter = (props: TodoFooterProps) => {\n  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\">\n      <Text>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </Text>\n      <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-02/demo/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';\nimport { FilterTypes } from '../store';\n\ninterface TodoHeaderProps {\n  addTodo: (label: string) => void;\n  setFilter: (filter: FilterTypes) => void;\n  filter: string;\n}\n\ninterface TodoHeaderState {\n  labelInput: string;\n}\n\nexport class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {\n  constructor(props: TodoHeaderProps) {\n    super(props);\n    this.state = { labelInput: undefined };\n  }\n\n  render() {\n    return (\n      <Stack>\n        <Stack horizontal horizontalAlign=\"center\">\n          <Text variant=\"xxLarge\">todos <Text variant=\"mediumPlus\">(2.2 demo)</Text></Text>\n        </Stack>\n\n        <Stack horizontal>\n          <Stack.Item grow>\n            <TextField placeholder=\"What needs to be done?\" value={this.state.labelInput} onChange={this.onChange} />\n          </Stack.Item>\n          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>\n        </Stack>\n\n        <Pivot onLinkClick={this.onFilter}>\n          <PivotItem headerText=\"all\" />\n          <PivotItem headerText=\"active\" />\n          <PivotItem headerText=\"completed\" />\n        </Pivot>\n      </Stack>\n    );\n  }\n\n  private onAdd = () => {\n    this.props.addTodo(this.state.labelInput);\n    this.setState({ labelInput: undefined });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ labelInput: newValue });\n  };\n\n  private onFilter = (item: PivotItem) => {\n    this.props.setFilter(item.props.headerText as FilterTypes);\n  };\n}\n"
  },
  {
    "path": "step2-02/demo/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem';\nimport { Store, FilterTypes } from '../store';\n\ninterface TodoListProps {\n  complete: (id: string) => void;\n  remove: (id: string) => void;\n  todos: Store['todos'];\n  filter: FilterTypes;\n  edit: (id: string, label: string) => void;\n}\n\nexport const TodoList = (props: TodoListProps) => {\n  const { filter, todos, complete, remove, edit } = props;\n  const filteredTodos = Object.keys(todos).filter(id => {\n    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n  });\n\n  return (\n    <Stack gap={10}>\n      {filteredTodos.map(id => (\n        <TodoListItem key={id} id={id} todos={todos} complete={complete} remove={remove} edit={edit} />\n      ))}\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-02/demo/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';\nimport { Store } from '../store';\n\ninterface TodoListItemProps {\n  id: string;\n  todos: Store['todos'];\n  remove: (id: string) => void;\n  complete: (id: string) => void;\n  edit: (id: string, label: string) => void;\n}\n\ninterface TodoListItemState {\n  editing: boolean;\n  editLabel: string;\n}\n\nexport class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {\n  constructor(props: TodoListItemProps) {\n    super(props);\n    this.state = { editing: false, editLabel: undefined };\n  }\n\n  render() {\n    const { todos, id, complete, remove } = this.props;\n    const item = todos[id];\n\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {!this.state.editing && (\n          <>\n            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />\n            <div>\n              <IconButton iconProps={{ iconName: 'Edit' }} className=\"clearButton\" onClick={this.onEdit} />\n              <IconButton iconProps={{ iconName: 'Cancel' }} className=\"clearButton\" onClick={() => remove(id)} />\n            </div>\n          </>\n        )}\n\n        {this.state.editing && (\n          <Stack.Item grow>\n            <Stack horizontal>\n              <Stack.Item grow>\n                <TextField value={this.state.editLabel} onChange={this.onChange} />\n              </Stack.Item>\n              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>\n            </Stack>\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  }\n\n  private onEdit = () => {\n    const { todos, id } = this.props;\n    const { label } = todos[id];\n\n    this.setState({\n      editing: true,\n      editLabel: this.state.editLabel || label\n    });\n  };\n\n  private onDoneEdit = () => {\n    this.props.edit(this.props.id, this.state.editLabel);\n    this.setState({\n      editing: false,\n      editLabel: undefined\n    });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ editLabel: newValue });\n  };\n}\n"
  },
  {
    "path": "step2-02/demo/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { initializeIcons } from '@uifabric/icons';\n\n// Initializes the UI Fabric icons that we can use\n// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons\ninitializeIcons();\n\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step2-02/demo/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "step2-02/exercise/README.md",
    "content": "# Step 2.2 - UI Fabric component library (Exercise)\n\n[Lessons](../../) | [Demo](../demo/)\n\n# Exercise 1: Getting familiar with the Fabric documentation site:\n\nOpen the [documentation for DefaultButton](https://developer.microsoft.com/en-us/fabric/#/components/button). Use the sidebar to explore other available components.\n\n# Exercise 2: \"Fabric\"ize the TodoFooter.tsx\n\nIf you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the \"exercise\" link under day 2 step 2 to see results.\n\n1. Open TSX file inside `exercise/src/components/TodoFooter.tsx`\n2. Follow the top TODO comment to import Stack, Text and DefaultButton components from Fabric\n3. Follow the TODO comment to:\n\n- replace `<footer>` with a `<Stack>`\n- replace `<span>` with a `<Text>`\n- replace `<button>` with a `<DefaultButton>`\n\n## Bonus Exercise\n\nGO WILD! There are so many components in the Fabric library! Try to put some components in the exercise component files. Try out these concepts mentioned earlier:\n\n- Importing components from `office-ui-fabric-react`\n- Customizing component with props found on the documentation site\n- Customize component with render props (these will be called onRender\\_\\_\\_ or similar)\n"
  },
  {
    "path": "step2-02/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" class=\"exercise\" data-src=\"./README.md\"></div>\n    <div id=\"app\"></div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-02/exercise/src/components/TodoApp.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nimport { TodoHeader } from './TodoHeader';\nimport { TodoList } from './TodoList';\nimport { Store } from '../store';\n\nlet index = 0;\n\nexport class TodoApp extends React.Component<any, Store> {\n  constructor(props) {\n    super(props);\n    this.state = {\n      todos: {\n        id0: { label: 'hello', completed: false },\n        id1: { label: 'world', completed: false }\n      },\n      filter: 'all'\n    };\n  }\n  render() {\n    const { filter, todos } = this.state;\n    return (\n      <Stack horizontalAlign=\"center\">\n        <Stack style={{ width: 400 }} gap={25}>\n          <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />\n          <TodoList complete={this._complete} todos={todos} filter={filter} remove={this._remove} edit={this._edit} />\n          <TodoFooter clear={this._clear} todos={todos} />\n        </Stack>\n      </Stack>\n    );\n  }\n\n  private _addTodo = label => {\n    const { todos } = this.state;\n    const id = index++;\n\n    this.setState({\n      todos: { ...todos, [id]: { label } }\n    });\n  };\n\n  private _remove = id => {\n    const newTodos = { ...this.state.todos };\n    delete newTodos[id];\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _complete = id => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id].completed = !newTodos[id].completed;\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _edit = (id, label) => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id] = { ...newTodos[id], label };\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _clear = () => {\n    const { todos } = this.state;\n    const newTodos = {};\n\n    Object.keys(this.state.todos).forEach(id => {\n      if (!todos[id].completed) {\n        newTodos[id] = todos[id];\n      }\n    });\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _setFilter = filter => {\n    this.setState({\n      filter: filter\n    });\n  };\n}\n"
  },
  {
    "path": "step2-02/exercise/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\nimport { Store } from '../store';\n\n// TODO: import DefaultButton, Stack, and Text\n\ninterface TodoFooterProps {\n  clear: () => void;\n  todos: Store['todos'];\n}\n\nexport const TodoFooter = (props: TodoFooterProps) => {\n  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;\n\n  // TODO:\n  // 1. replace the <footer> with the Fabric control <Stack>\n  // 2. replace the <span> with the Fabric control <Text>\n  // 3. replace the <button> with Fabric control <DefaultButton>\n\n  return (\n    <footer>\n      <span>\n        {itemCount} item{itemCount <= 1 ? '' : 's'} left\n      </span>\n      <button onClick={() => props.clear()} className=\"button\">\n        Clear Completed\n      </button>\n    </footer>\n  );\n};\n"
  },
  {
    "path": "step2-02/exercise/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';\nimport { FilterTypes } from '../store';\n\ninterface TodoHeaderProps {\n  addTodo: (label: string) => void;\n  setFilter: (filter: FilterTypes) => void;\n  filter: string;\n}\n\ninterface TodoHeaderState {\n  labelInput: string;\n}\n\nexport class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {\n  constructor(props: TodoHeaderProps) {\n    super(props);\n    this.state = { labelInput: undefined };\n  }\n\n  render() {\n    return (\n      <Stack>\n        <Stack horizontal horizontalAlign=\"center\">\n          <Text variant=\"xxLarge\">todos <Text variant=\"mediumPlus\">(2.2 exercise)</Text></Text>\n        </Stack>\n\n        <Stack horizontal>\n          <Stack.Item grow>\n            <TextField placeholder=\"What needs to be done?\" value={this.state.labelInput} onChange={this.onChange} />\n          </Stack.Item>\n          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>\n        </Stack>\n\n        <Pivot onLinkClick={this.onFilter}>\n          <PivotItem headerText=\"all\" />\n          <PivotItem headerText=\"active\" />\n          <PivotItem headerText=\"completed\" />\n        </Pivot>\n      </Stack>\n    );\n  }\n\n  private onAdd = () => {\n    this.props.addTodo(this.state.labelInput);\n    this.setState({ labelInput: undefined });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ labelInput: newValue });\n  };\n\n  private onFilter = (item: PivotItem) => {\n    this.props.setFilter(item.props.headerText as FilterTypes);\n  };\n}\n"
  },
  {
    "path": "step2-02/exercise/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem';\nimport { Store, FilterTypes } from '../store';\n\ninterface TodoListProps {\n  complete: (id: string) => void;\n  remove: (id: string) => void;\n  todos: Store['todos'];\n  filter: FilterTypes;\n  edit: (id: string, label: string) => void;\n}\n\nexport const TodoList = (props: TodoListProps) => {\n  const { filter, todos, complete, remove, edit } = props;\n  const filteredTodos = Object.keys(todos).filter(id => {\n    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n  });\n\n  return (\n    <Stack gap={10}>\n      {filteredTodos.map(id => (\n        <TodoListItem key={id} id={id} todos={todos} complete={complete} remove={remove} edit={edit} />\n      ))}\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-02/exercise/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';\nimport { Store } from '../store';\n\ninterface TodoListItemProps {\n  id: string;\n  todos: Store['todos'];\n  remove: (id: string) => void;\n  complete: (id: string) => void;\n  edit: (id: string, label: string) => void;\n}\n\ninterface TodoListItemState {\n  editing: boolean;\n  editLabel: string;\n}\n\nexport class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {\n  constructor(props: TodoListItemProps) {\n    super(props);\n    this.state = { editing: false, editLabel: undefined };\n  }\n\n  render() {\n    const { todos, id, complete, remove } = this.props;\n    const item = todos[id];\n\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {!this.state.editing && (\n          <>\n            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />\n            <div>\n              <IconButton iconProps={{ iconName: 'Edit' }} className=\"clearButton\" onClick={this.onEdit} />\n              <IconButton iconProps={{ iconName: 'Cancel' }} className=\"clearButton\" onClick={() => remove(id)} />\n            </div>\n          </>\n        )}\n\n        {this.state.editing && (\n          <Stack.Item grow>\n            <Stack horizontal>\n              <Stack.Item grow>\n                <TextField value={this.state.editLabel} onChange={this.onChange} />\n              </Stack.Item>\n              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>\n            </Stack>\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  }\n\n  private onEdit = () => {\n    const { todos, id } = this.props;\n    const { label } = todos[id];\n\n    this.setState({\n      editing: true,\n      editLabel: this.state.editLabel || label\n    });\n  };\n\n  private onDoneEdit = () => {\n    this.props.edit(this.props.id, this.state.editLabel);\n    this.setState({\n      editing: false,\n      editLabel: undefined\n    });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ editLabel: newValue });\n  };\n}\n"
  },
  {
    "path": "step2-02/exercise/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { initializeIcons } from '@uifabric/icons';\n\n// Initializes the UI Fabric icons that we can use\n// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons\ninitializeIcons();\n\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step2-02/exercise/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "step2-03/demo/README.md",
    "content": "# Step 2.3 - Theming and styling with UI Fabric (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\nIn this section, we will illustrate how to use some of the built-in theming and styling features of the UI Fabric component library.\n\nThese are the theming and styling methods that we will focus on in this step:\n\n1. Theming using the `<Customizer>` component\n2. Customizing themes and loading with `loadTheme()`\n3. Customizing Fabric components via the `styles` prop\n4. CSS-in-JS with `mergeStyles`\n\nThe first three methods only work with Fabric components, but the fourth, `mergeStyles`, can be used in other projects as well (and is typically not used within Fabric-based projects).\n\n## 1. Applying Fabric themes using `<Customizer>`\n\nOne way to apply a theme is by wrapping the components to be themed with a `<Customizer>` component. `Customizer` propagates the theme down to children through the [React Context](https://reactjs.org/docs/context.html) mechanism.\n\nThere are some predefined themes within Fabric already, like Fluent (which will become the default in the next major release), MDL2, Azure, and some other sample themes like Teams.\n\nThe following code (simplified from `demo/src/components/TodoApp.tsx`) shows an example of applying the Fluent theme to our todo app using `Customizer`.\n\n```jsx\nimport { Customizer } from 'office-ui-fabric-react';\nimport { FluentCustomizations } from '@uifabric/fluent-theme';\n\nfunction render() {\n  return (\n    <Customizer {...FluentCustomizations}>\n      <Stack>\n        <TodoHeader />\n        <TodoList />\n        <TodoFooter />\n      </Stack>\n    </Customizer>\n  );\n}\n```\n\n## 2. Applying customized themes using `loadTheme()`\n\nAnother way to apply a theme is using the `loadTheme()` function. Themes loaded this way apply to the entire application.\n\nTo try out `loadTheme()` in our todo app, remove the `<Customizer>` tag from `TodoApp.tsx` and place this code in the module scope.\n\n```ts\nimport { loadTheme } from 'office-ui-fabric-react';\n\nloadTheme({\n  palette: {\n    themePrimary: '#0078d4',\n    themeLighterAlt: '#eff6fc',\n    themeLighter: '#deecf9',\n    themeLight: '#c7e0f4',\n    themeTertiary: '#71afe5',\n    themeSecondary: '#2b88d8',\n    themeDarkAlt: '#106ebe',\n    themeDark: '#005a9e',\n    themeDarker: '#004578',\n    neutralLighterAlt: '#f8f8f8',\n    neutralLighter: '#f4f4f4',\n    neutralLight: '#eaeaea',\n    neutralQuaternaryAlt: '#dadada',\n    neutralQuaternary: '#d0d0d0',\n    neutralTertiaryAlt: '#c8c8c8',\n    neutralTertiary: '#c2c2c2',\n    neutralSecondary: '#858585',\n    neutralPrimaryAlt: '#4b4b4b',\n    neutralPrimary: '#333333',\n    neutralDark: '#272727',\n    black: '#1d1d1d',\n    white: '#ffffff'\n  }\n});\n```\n\n> If you'd like to create your own theme, the Fabric website has a [handy theme generator](https://aka.ms/themedesigner) to help get you started.\n\n## 3. Customizing one Fabric control instance\n\nIf you just want to customize a single component instance's styling, Fabric components expose a `styles` prop (not to be confused with the React built-in one called `style`).\n\nYou can use intellisense to discover which parts of the component you can to customize.\n\nThe `styles` prop can take either an object, or a function which returns a style object based on the component's prop values.\n\nThe following code (simplified from `demo/src/components/TodoHeader.tsx`) demonstrates using `styles` to customize individual components. The TextField uses a style function and the PrimaryButton uses a style object.\n\n```js\nfunction render() {\n  const buttonStyles = {\n    root: { backgroundColor: 'maroon' },\n    rootHovered: { background: 'green' }\n  };\n\n  const textFieldStyles = (props: ITextFieldStyleProps): Partial<ITextFieldStyles> => ({\n    ...(props.focused && {\n      field: {\n        backgroundColor: '#c7e0f4'\n      }\n    })\n  });\n\n  return (\n    <Stack>\n      <Stack.Item>\n        <TextField placeholder=\"What needs to be done?\" styles={textFieldStyles} />\n      </Stack.Item>\n      <PrimaryButton styles={buttonStyles}>Add</PrimaryButton>\n    </Stack>\n  );\n}\n```\n\n## 4. CSS-in-JS with `mergeStyles`\n\n`mergeStyles` is a styling library that creates CSS class names from styles that are expressed as JavaScript objects. These classes can be used as the `className` prop of any component or element, such as `<div>`.\n\nThis is an advanced approach which also works outside of Fabric. Within Fabric-based apps, you would typically only use `mergeStyles` in certain niche scenarios. (Fabric itself uses `mergeStyles` under the hood to power some of its styling.)\n\nBenefits of `mergeStyles` include:\n\n- Works in any app\n- Eliminates the need to import or bundle CSS stylesheets (all styles are bundled as normal JS code)\n- Provides type checking for styles (like Sass) when used with TypeScript\n- Very performant compared with other similar libraries\n\nThe following is a basic example using mergeStyles. ([This CodePen](https://codepen.io/dzearing/pen/jGdgrE?editors=1011) illustrates in more detail what `mergeStyles` does and includes some advanced examples.)\n\n```jsx\n// can also import from office-ui-fabric-react in Fabric-based apps\nimport { mergeStyles } from '@uifabric/merge-styles';\n\nconst blueBackgroundClassName = mergeStyles({\n  backgroundColor: 'green'\n});\nconst className = mergeStyles(blueBackgroundClassName, {\n  padding: 50, // px is assumed if no units are given\n  selectors: {\n    ':hover': {\n      backgroundColor: 'red'\n    }\n  }\n});\n\nconst myDiv = <div className={className}>I am a green div that turns red on hover!</div>;\n```\n"
  },
  {
    "path": "step2-03/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n    <div id=\"app\"></div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-03/demo/src/components/TodoApp.tsx",
    "content": "import React from 'react';\nimport { Stack, Customizer, mergeStyles, getTheme, loadTheme } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nimport { TodoHeader } from './TodoHeader';\nimport { TodoList } from './TodoList';\nimport { Store } from '../store';\nimport { FluentCustomizations } from '@uifabric/fluent-theme';\n\nlet index = 0;\n\nconst className = mergeStyles({\n  padding: 25,\n  ...getTheme().effects.elevation4\n});\n\n// Uncomment to see loadTheme\n/*\nloadTheme({\n  palette: {\n    themePrimary: '#c41515',\n    themeLighterAlt: '#fdf4f4',\n    themeLighter: '#f6d3d3',\n    themeLight: '#edaeae',\n    themeTertiary: '#dc6666',\n    themeSecondary: '#cb2c2c',\n    themeDarkAlt: '#b11313',\n    themeDark: '#951010',\n    themeDarker: '#6e0c0c',\n    neutralLighterAlt: '#d5b1b1',\n    neutralLighter: '#d2aeae',\n    neutralLight: '#c9a7a7',\n    neutralQuaternaryAlt: '#bc9c9c',\n    neutralQuaternary: '#b39595',\n    neutralTertiaryAlt: '#ac8f8f',\n    neutralTertiary: '#c38c8c',\n    neutralSecondary: '#b06e6e',\n    neutralPrimaryAlt: '#9c5454',\n    neutralPrimary: '#500e0e',\n    neutralDark: '#762a2a',\n    black: '#621a1a',\n    white: '#dbb5b5'\n  }\n});\n*/\n\nexport class TodoApp extends React.Component<any, Store> {\n  constructor(props) {\n    super(props);\n    this.state = {\n      todos: {},\n      filter: 'all'\n    };\n  }\n  render() {\n    const { filter, todos } = this.state;\n    return (\n      <Customizer {...FluentCustomizations}>\n        <Stack horizontalAlign=\"center\">\n          <Stack style={{ width: 400 }} gap={25} className={className}>\n            <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />\n            <TodoList complete={this._complete} todos={todos} filter={filter} remove={this._remove} edit={this._edit} />\n            <TodoFooter clear={this._clear} todos={todos} />\n          </Stack>\n        </Stack>\n      </Customizer>\n    );\n  }\n\n  private _addTodo = label => {\n    const { todos } = this.state;\n    const id = index++;\n\n    this.setState({\n      todos: { ...todos, [id]: { label } }\n    });\n  };\n\n  private _remove = id => {\n    const newTodos = { ...this.state.todos };\n    delete newTodos[id];\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _complete = id => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id].completed = !newTodos[id].completed;\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _edit = (id, label) => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id] = { ...newTodos[id], label };\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _clear = () => {\n    const { todos } = this.state;\n    const newTodos = {};\n\n    Object.keys(this.state.todos).forEach(id => {\n      if (!todos[id].completed) {\n        newTodos[id] = todos[id];\n      }\n    });\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _setFilter = filter => {\n    this.setState({\n      filter: filter\n    });\n  };\n}\n"
  },
  {
    "path": "step2-03/demo/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\nimport { Store } from '../store';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabric-react';\n\ninterface TodoFooterProps {\n  clear: () => void;\n  todos: Store['todos'];\n}\n\nexport const TodoFooter = (props: TodoFooterProps) => {\n  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n      <Text>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </Text>\n      <DefaultButton\n        onClick={() => props.clear()}\n        styles={{\n          root: { fontStyle: 'oblique' }\n        }}\n      >\n        Clear Completed\n      </DefaultButton>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-03/demo/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';\nimport { FilterTypes } from '../store';\n\ninterface TodoHeaderProps {\n  addTodo: (label: string) => void;\n  setFilter: (filter: FilterTypes) => void;\n  filter: FilterTypes;\n}\n\ninterface TodoHeaderState {\n  labelInput: string;\n}\n\nexport class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {\n  constructor(props: TodoHeaderProps) {\n    super(props);\n    this.state = { labelInput: undefined };\n  }\n\n  render() {\n    return (\n      <Stack gap={10}>\n        <Stack horizontal horizontalAlign=\"center\">\n          <Text variant=\"xxLarge\">todos <Text variant=\"mediumPlus\">(2.3 demo)</Text></Text>\n        </Stack>\n\n        <Stack horizontal gap={10}>\n          <Stack.Item grow>\n            <TextField\n              placeholder=\"What needs to be done?\"\n              value={this.state.labelInput}\n              onChange={this.onChange}\n              styles={props => ({\n                ...(props.focused && {\n                  field: {\n                    backgroundColor: '#c7e0f4'\n                  }\n                })\n              })}\n            />\n          </Stack.Item>\n          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>\n        </Stack>\n\n        <Pivot onLinkClick={this.onFilter}>\n          <PivotItem headerText=\"all\" />\n          <PivotItem headerText=\"active\" />\n          <PivotItem headerText=\"completed\" />\n        </Pivot>\n      </Stack>\n    );\n  }\n\n  private onAdd = () => {\n    this.props.addTodo(this.state.labelInput);\n    this.setState({ labelInput: undefined });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ labelInput: newValue });\n  };\n\n  private onFilter = (item: PivotItem) => {\n    this.props.setFilter(item.props.headerText as FilterTypes);\n  };\n}\n"
  },
  {
    "path": "step2-03/demo/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem';\nimport { Store, FilterTypes } from '../store';\n\ninterface TodoListProps {\n  complete: (id: string) => void;\n  remove: (id: string) => void;\n  todos: Store['todos'];\n  filter: FilterTypes;\n  edit: (id: string, label: string) => void;\n}\n\nexport const TodoList = (props: TodoListProps) => {\n  const { filter, todos, complete, remove, edit } = props;\n  const filteredTodos = Object.keys(todos).filter(id => {\n    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n  });\n\n  return (\n    <Stack gap={10}>\n      {filteredTodos.map(id => (\n        <TodoListItem key={id} id={id} todos={todos} complete={complete} remove={remove} edit={edit} />\n      ))}\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-03/demo/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';\nimport { Store } from '../store';\n\ninterface TodoListItemProps {\n  id: string;\n  todos: Store['todos'];\n  remove: (id: string) => void;\n  complete: (id: string) => void;\n  edit: (id: string, label: string) => void;\n}\n\ninterface TodoListItemState {\n  editing: boolean;\n  editLabel: string;\n}\n\nexport class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {\n  constructor(props: TodoListItemProps) {\n    super(props);\n    this.state = { editing: false, editLabel: undefined };\n  }\n\n  render() {\n    const { todos, id, complete, remove } = this.props;\n    const item = todos[id];\n\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {!this.state.editing && (\n          <>\n            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />\n            <div>\n              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />\n              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />\n            </div>\n          </>\n        )}\n\n        {this.state.editing && (\n          <Stack.Item grow>\n            <Stack horizontal gap={10}>\n              <Stack.Item grow>\n                <TextField value={this.state.editLabel} onChange={this.onChange} />\n              </Stack.Item>\n              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>\n            </Stack>\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  }\n\n  private onEdit = () => {\n    const { todos, id } = this.props;\n    const { label } = todos[id];\n\n    this.setState({\n      editing: true,\n      editLabel: this.state.editLabel || label\n    });\n  };\n\n  private onDoneEdit = () => {\n    this.props.edit(this.props.id, this.state.editLabel);\n    this.setState({\n      editing: false,\n      editLabel: undefined\n    });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ editLabel: newValue });\n  };\n}\n"
  },
  {
    "path": "step2-03/demo/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { initializeIcons } from '@uifabric/icons';\n\n// Initializes the UI Fabric icons that we can use\n// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons\ninitializeIcons();\n\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step2-03/demo/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "step2-03/exercise/README.md",
    "content": "# Step 2.3 - Theming and styling with UI Fabric (Exercise)\n\n[Lessons](../../) | [Demo](../demo/)\n\nIf you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the \"exercise\" link under day 2 step 3 to see results.\n\n## Applying Fabric themes\n\nTry applying some predefined themes from UI Fabric packages inside the TodoApp under `exercise/src/components/TodoApp.tsx`. Do this by replacing:\n\n```ts\nimport { FluentCustomizations } from '@uifabric/fluent-theme';\n```\n\nwith:\n\n```ts\nimport { TeamsCustomizations } from '@uifabric/theme-samples';\n```\n\n## Applying customized themes\n\n1. Create your own theme using the [theme generator](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator) and copy the generated code.\n\n2. In `exercise/src/components/TodoApp.tsx`, delete the `Customizer` component.\n\n3. Paste in the generated theme code before the `TodoApp` component definition.\n\n4. Play around with the values and use VS Code's intellisense to discover more properties of the `ITheme` type.\n\n## Customizing one Fabric control instance\n\n1. Open `exercise/src/components/TodoFooter.tsx`\n\n2. Find the `<DefaultButton>` and insert a `styles` prop\n\n3. Try to customize this with a styles object (let the Intellisense of VS Code guide you on what you can use to customize)\n\n4. Try to customize this with a styles function\n\n## CSS-in-JS with `mergeStyles`\n\nAs mentioned in the demo, this is an advanced approach which also works outside of Fabric. You wouldn't typically use this approach within a Fabric-based app.\n\n1. Try generating a class name using `mergeStyles` and use it as a `className` prop inside `TodoApp`\n\n```jsx\nimport { mergeStyles } from 'office-ui-fabric-react';\n\nconst className = mergeStyles({\n  backgroundColor: 'red',\n  selectors: {\n    ':hover': {\n      backgroundColor: 'blue'\n    }\n  }\n});\n```\n\n2. Try to give a few components extra padding\n"
  },
  {
    "path": "step2-03/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" class=\"exercise\" data-src=\"./README.md\"></div>\n    <div id=\"app\"></div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-03/exercise/src/components/TodoApp.tsx",
    "content": "import React from 'react';\nimport { Stack, Customizer, mergeStyles, getTheme } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nimport { TodoHeader } from './TodoHeader';\nimport { TodoList } from './TodoList';\nimport { Store } from '../store';\n\n// TODO: Change me to another theme!\nimport { TeamsCustomizations } from '@uifabric/theme-samples';\n\nlet index = 0;\n\n// TODO: Change this to add other CSS styles like backgroundColor, fontSize, etc\nconst className = mergeStyles({\n  padding: 25,\n  ...getTheme().effects.elevation4\n});\n\nexport class TodoApp extends React.Component<any, Store> {\n  constructor(props) {\n    super(props);\n    this.state = {\n      todos: {},\n      filter: 'all'\n    };\n  }\n  render() {\n    const { filter, todos } = this.state;\n    return (\n      <Customizer {...TeamsCustomizations}>\n        <Stack horizontalAlign=\"center\">\n          <Stack style={{ width: 400 }} gap={25} className={className}>\n            <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />\n            <TodoList complete={this._complete} todos={todos} filter={filter} remove={this._remove} edit={this._edit} />\n            <TodoFooter clear={this._clear} todos={todos} />\n          </Stack>\n        </Stack>\n      </Customizer>\n    );\n  }\n\n  private _addTodo = label => {\n    const { todos } = this.state;\n    const id = index++;\n\n    this.setState({\n      todos: { ...todos, [id]: { label } }\n    });\n  };\n\n  private _remove = id => {\n    const newTodos = { ...this.state.todos };\n    delete newTodos[id];\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _complete = id => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id].completed = !newTodos[id].completed;\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _edit = (id, label) => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id] = { ...newTodos[id], label };\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _clear = () => {\n    const { todos } = this.state;\n    const newTodos = {};\n\n    Object.keys(this.state.todos).forEach(id => {\n      if (!todos[id].completed) {\n        newTodos[id] = todos[id];\n      }\n    });\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _setFilter = filter => {\n    this.setState({\n      filter: filter\n    });\n  };\n}\n"
  },
  {
    "path": "step2-03/exercise/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\nimport { Store } from '../store';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabric-react';\n\ninterface TodoFooterProps {\n  clear: () => void;\n  todos: Store['todos'];\n}\n\nexport const TodoFooter = (props: TodoFooterProps) => {\n  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;\n\n  // TODO: play around with the DefaultButton component below with a \"styles\" prop\n  // - try it with an object: styles={{ ... }}\n  // - try it with a function: styles={props => ({ ... })}\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n      <Text>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </Text>\n      <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-03/exercise/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\nimport { Text, Stack, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';\nimport { FilterTypes } from '../store';\n\ninterface TodoHeaderProps {\n  addTodo: (label: string) => void;\n  setFilter: (filter: FilterTypes) => void;\n  filter: FilterTypes;\n}\n\ninterface TodoHeaderState {\n  labelInput: string;\n}\n\nexport class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {\n  constructor(props: TodoHeaderProps) {\n    super(props);\n    this.state = { labelInput: undefined };\n  }\n\n  render() {\n    return (\n      <Stack gap={10}>\n        <Stack horizontal horizontalAlign=\"center\">\n          <Text variant=\"xxLarge\">todos <Text variant=\"mediumPlus\">(2.3 exercise)</Text></Text>\n        </Stack>\n\n        <Stack horizontal gap={10}>\n          <Stack.Item grow>\n            <TextField placeholder=\"What needs to be done?\" value={this.state.labelInput} onChange={this.onChange} />\n          </Stack.Item>\n          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>\n        </Stack>\n\n        <Pivot onLinkClick={this.onFilter}>\n          <PivotItem headerText=\"all\" />\n          <PivotItem headerText=\"active\" />\n          <PivotItem headerText=\"completed\" />\n        </Pivot>\n      </Stack>\n    );\n  }\n\n  private onAdd = () => {\n    this.props.addTodo(this.state.labelInput);\n    this.setState({ labelInput: undefined });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ labelInput: newValue });\n  };\n\n  private onFilter = (item: PivotItem) => {\n    this.props.setFilter(item.props.headerText as FilterTypes);\n  };\n}\n"
  },
  {
    "path": "step2-03/exercise/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem';\nimport { Store, FilterTypes } from '../store';\n\ninterface TodoListProps {\n  complete: (id: string) => void;\n  remove: (id: string) => void;\n  todos: Store['todos'];\n  filter: FilterTypes;\n  edit: (id: string, label: string) => void;\n}\n\nexport const TodoList = (props: TodoListProps) => {\n  const { filter, todos, complete, remove, edit } = props;\n  const filteredTodos = Object.keys(todos).filter(id => {\n    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n  });\n\n  return (\n    <Stack gap={10}>\n      {filteredTodos.map(id => (\n        <TodoListItem key={id} id={id} todos={todos} complete={complete} remove={remove} edit={edit} />\n      ))}\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-03/exercise/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';\nimport { Store } from '../store';\n\ninterface TodoListItemProps {\n  id: string;\n  todos: Store['todos'];\n  remove: (id: string) => void;\n  complete: (id: string) => void;\n  edit: (id: string, label: string) => void;\n}\n\ninterface TodoListItemState {\n  editing: boolean;\n  editLabel: string;\n}\n\nexport class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {\n  constructor(props: TodoListItemProps) {\n    super(props);\n    this.state = { editing: false, editLabel: undefined };\n  }\n\n  render() {\n    const { todos, id, complete, remove } = this.props;\n    const item = todos[id];\n\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {!this.state.editing && (\n          <>\n            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />\n            <div>\n              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />\n              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />\n            </div>\n          </>\n        )}\n\n        {this.state.editing && (\n          <Stack.Item grow>\n            <Stack horizontal gap={10}>\n              <Stack.Item grow>\n                <TextField value={this.state.editLabel} onChange={this.onChange} />\n              </Stack.Item>\n              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>\n            </Stack>\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  }\n\n  private onEdit = () => {\n    const { todos, id } = this.props;\n    const { label } = todos[id];\n\n    this.setState({\n      editing: true,\n      editLabel: this.state.editLabel || label\n    });\n  };\n\n  private onDoneEdit = () => {\n    this.props.edit(this.props.id, this.state.editLabel);\n    this.setState({\n      editing: false,\n      editLabel: undefined\n    });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ editLabel: newValue });\n  };\n}\n"
  },
  {
    "path": "step2-03/exercise/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { initializeIcons } from '@uifabric/icons';\n\n// Initializes the UI Fabric icons that we can use\n// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons\ninitializeIcons();\n\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step2-03/exercise/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "step2-04/demo/README.md",
    "content": "# Step 2.4 - React Context (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\nIn this step, we describe some problems we encounter when creating a more complex application.\n\nWe will solve these problems with the [React Context API](https://reactjs.org/docs/context.html). The Context API consists of Provider and Consumer components. Let's take a look at what is in this step:\n\n1. The problem of complex applications\n2. React Context API\n3. Consuming context from a class component\n4. Consuming context from a functional component\n\n## The problem of complex applications\n\nReact represents a single component like this:\n\n```\n(props) => view;\n```\n\nIn a real application, these functions are composed. It looks more like this:\n\n![](../../assets/todo-components.png)\n\nBeing able to compose components is helpful, but it introduces some complexity:\n\n1. Data needs to be passed down from component to component via props--even if some of the intermediate components don't need to know about some of the data. This is a problem called **props drilling**.\n\n2. Shared data can be changed by various actors (user interaction, updates from server), and there is no coordination of these changes. This makes propagating updates between components challenging.\n\nEven in our simple application, we saw this problem. For example, `<TodoList>` has this props interface:\n\n```ts\ninterface TodoListProps {\n  complete: (id: string) => void;\n  remove: (id: string) => void;\n  todos: Store['todos'];\n  filter: FilterTypes;\n  edit: (id: string, label: string) => void;\n}\n```\n\nNone of these props are used in the `TodoList` itself; they're only passed down to child `TodoListItem` components:\n\n```js\n<TodoListItem todos=\"{todos}\" complete=\"{complete}\" remove=\"{remove}\" edit=\"{edit}\" />\n```\n\n## React Context API\n\nLet's solve these problems with the [React Context API](https://reactjs.org/docs/context.html). Context is React's way to share data from components with their child components without explicitly passing it down through props at every level of the tree. In simpler terms, it solves the props drilling issue mentioned above!\n\nReact context is created by calling `createContext()` with some initial data. Use the `<TodoContext.Provider>` component to wrap a part of the component tree that should be handed the context.\n\n### Providing context with `<TodoContext.Provider>`\n\n```js\n// To create an empty context\nconst TodoContext = React.createContext(undefined);\n\nclass TodoApp extends React.Component {\n  render() {\n    // Pass in some state and functions to the provider's value prop\n    return (\n      <TodoContext.Provider\n        value={{\n          ...this.state,\n          addTodo: this._addTodo,\n          setFilter: this._setFilter,\n          /* same goes for remove, complete, and clear */\n        }}>\n        <div>\n          <TodoHeader />\n          <TodoList />\n          <TodoFooter />\n        </div>\n      </TodoContext.Provider>\n    );\n  }\n}\n```\n\n### Consume context from a class component\n\nInside a class-based child component, such as `<TodoHeader>`, the context created in the parent can be accessed via `this.context`. Note that for this to work, you must also set the component class's `contextType` property to the context type created above.\n\n```js\nclass TodoHeader extends React.Component {\n  render() {\n    // Step 1: use the context prop\n    return <div>Filter is {this.context.filter}</div>;\n  }\n}\n\n// Step 2: be sure to set the contextType property of the component class\nTodoHeader.contextType = TodoContext;\n```\n\n### Consume context from a functional component\n\nIf you're using the functional component syntax, you can access the context with the `useContext()` hook:\n\n```js\nconst TodoFooter = props => {\n  const context = useContext(TodoContext);\n  return (\n    <div>\n      <button onClick={context.clear()}>Clear Completed</button>\n    </div>\n  );\n};\n```\n\n> Note that `useContext()` requires a recent release of React (16.8+)\n\nThere is another legal syntax for accessing context with the `<TodoContext.Consumer>`, but we'll leave that out as an exercise for you!\n"
  },
  {
    "path": "step2-04/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n    <div id=\"app\"></div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-04/demo/src/TodoContext.ts",
    "content": "import React from 'react';\n\n// The typing forces us to put something inside createContext(); start with undefined\nexport const TodoContext = React.createContext(undefined);\n"
  },
  {
    "path": "step2-04/demo/src/components/TodoApp.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nimport { TodoHeader } from './TodoHeader';\nimport { TodoList } from './TodoList';\nimport { Store } from '../store';\nimport { TodoContext } from '../TodoContext';\n\nlet index = 0;\n\nexport class TodoApp extends React.Component<any, Store> {\n  constructor(props) {\n    super(props);\n    this.state = {\n      todos: {},\n      filter: 'all'\n    };\n  }\n  render() {\n    return (\n      <TodoContext.Provider\n        value={{\n          ...this.state,\n          addTodo: this._addTodo,\n          remove: this._remove,\n          complete: this._complete,\n          clear: this._clear,\n          setFilter: this._setFilter,\n          edit: this._edit\n        }}\n      >\n        <Stack horizontalAlign=\"center\">\n          <Stack style={{ width: 400 }} gap={25}>\n            <TodoHeader />\n            <TodoList />\n            <TodoFooter />\n          </Stack>\n        </Stack>\n      </TodoContext.Provider>\n    );\n  }\n\n  private _addTodo = label => {\n    const { todos } = this.state;\n    const id = index++;\n\n    this.setState({\n      todos: { ...todos, [id]: { label } }\n    });\n  };\n\n  private _remove = id => {\n    const newTodos = { ...this.state.todos };\n    delete newTodos[id];\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _complete = id => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id].completed = !newTodos[id].completed;\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _edit = (id, label) => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id] = { ...newTodos[id], label };\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _clear = () => {\n    const { todos } = this.state;\n    const newTodos = {};\n\n    Object.keys(this.state.todos).forEach(id => {\n      if (!todos[id].completed) {\n        newTodos[id] = todos[id];\n      }\n    });\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _setFilter = filter => {\n    this.setState({\n      filter: filter\n    });\n  };\n}\n"
  },
  {
    "path": "step2-04/demo/src/components/TodoFooter.tsx",
    "content": "import React, { useContext } from 'react';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabric-react';\nimport { TodoContext } from '../TodoContext';\n\nexport const TodoFooter = () => {\n  const context = useContext(TodoContext);\n  const itemCount = Object.keys(context.todos).filter(id => !context.todos[id].completed).length;\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n      <Text>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </Text>\n      <DefaultButton onClick={() => context.clear()}>Clear Completed</DefaultButton>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-04/demo/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';\nimport { FilterTypes } from '../store';\nimport { TodoContext } from '../TodoContext';\n\ninterface TodoHeaderState {\n  labelInput: string;\n}\n\nexport class TodoHeader extends React.Component<{}, TodoHeaderState> {\n  constructor(props: {}) {\n    super(props);\n    this.state = { labelInput: undefined };\n  }\n\n  render() {\n    return (\n      <Stack gap={10}>\n        <Stack horizontal horizontalAlign=\"center\">\n          <Text variant=\"xxLarge\">todos <Text variant=\"mediumPlus\">(2.4 demo)</Text></Text>\n        </Stack>\n\n        <Stack horizontal gap={10}>\n          <Stack.Item grow>\n            <TextField\n              placeholder=\"What needs to be done?\"\n              value={this.state.labelInput}\n              onChange={this.onChange}\n              styles={props => ({\n                ...(props.focused && {\n                  field: {\n                    backgroundColor: '#c7e0f4'\n                  }\n                })\n              })}\n            />\n          </Stack.Item>\n          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>\n        </Stack>\n\n        <Pivot onLinkClick={this.onFilter}>\n          <PivotItem headerText=\"all\" />\n          <PivotItem headerText=\"active\" />\n          <PivotItem headerText=\"completed\" />\n        </Pivot>\n      </Stack>\n    );\n  }\n\n  private onAdd = () => {\n    this.context.addTodo(this.state.labelInput);\n    this.setState({ labelInput: undefined });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ labelInput: newValue });\n  };\n\n  private onFilter = (item: PivotItem) => {\n    this.context.setFilter(item.props.headerText as FilterTypes);\n  };\n}\n\nTodoHeader.contextType = TodoContext;\n"
  },
  {
    "path": "step2-04/demo/src/components/TodoList.tsx",
    "content": "import React, { useContext } from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem';\nimport { Store, FilterTypes } from '../store';\nimport { TodoContext } from '../TodoContext';\n\nexport const TodoList = () => {\n  const context = useContext(TodoContext);\n  const { filter, todos } = context;\n  const filteredTodos = Object.keys(todos).filter(id => {\n    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n  });\n\n  return (\n    <Stack gap={10}>\n      {filteredTodos.map(id => (\n        <TodoListItem key={id} id={id} />\n      ))}\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-04/demo/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';\nimport { TodoContext } from '../TodoContext';\n\ninterface TodoListItemProps {\n  id: string;\n}\n\ninterface TodoListItemState {\n  editing: boolean;\n  editLabel: string;\n}\n\nexport class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {\n  constructor(props: TodoListItemProps) {\n    super(props);\n    this.state = { editing: false, editLabel: undefined };\n  }\n\n  render() {\n    const { id } = this.props;\n    const { todos, complete, remove } = this.context;\n\n    const item = todos[id];\n\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {!this.state.editing && (\n          <>\n            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />\n            <div>\n              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />\n              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />\n            </div>\n          </>\n        )}\n\n        {this.state.editing && (\n          <Stack.Item grow>\n            <Stack horizontal gap={10}>\n              <Stack.Item grow>\n                <TextField value={this.state.editLabel} onChange={this.onChange} />\n              </Stack.Item>\n              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>\n            </Stack>\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  }\n\n  private onEdit = () => {\n    const { id } = this.props;\n    const { todos } = this.context;\n    const { label } = todos[id];\n\n    this.setState({\n      editing: true,\n      editLabel: this.state.editLabel || label\n    });\n  };\n\n  private onDoneEdit = () => {\n    this.context.edit(this.props.id, this.state.editLabel);\n    this.setState({\n      editing: false,\n      editLabel: undefined\n    });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ editLabel: newValue });\n  };\n}\n\nTodoListItem.contextType = TodoContext;\n"
  },
  {
    "path": "step2-04/demo/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { initializeIcons } from '@uifabric/icons';\n\n// Initializes the UI Fabric icons that we can use\n// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons\ninitializeIcons();\n\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step2-04/demo/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "step2-04/exercise/README.md",
    "content": "# Step 2.4 - React Context (Exercise)\n\n[Lessons](../../) | [Demo](../demo/)\n\nIf you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the \"exercise\" link under day 2 step 4 to see results.\n\n## TodoContext.Provider component\n\n1. Open `exercise/src/components/TodoApp.tsx`\n\n2. Uncomment the missing functions inside the value prop\n\n## TodoFooter: context inside functional component\n\n1. Open `exercise/src/components/TodoFooter.tsx`\n\n2. Use `useContext` to access the `TodoContext` and replace the two constants with values from the context\n\n## TodoHeader: context inside class component\n\n1. Open `exercise/src/components/TodoHeader.tsx`\n\n2. Replace `onAdd` with a real implementation using the `this.context` object\n\n3. Replace `onFilter` with a real implementation using the `this.context` object\n\n4. Be sure to set the `contextType` of the TodoHeader component\n"
  },
  {
    "path": "step2-04/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" class=\"exercise\" data-src=\"./README.md\"></div>\n    <div id=\"app\"></div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-04/exercise/src/TodoContext.ts",
    "content": "import React from 'react';\n\n// The typing forces us to put something inside createContext(); start with undefined\nexport const TodoContext = React.createContext(undefined);\n"
  },
  {
    "path": "step2-04/exercise/src/components/TodoApp.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nimport { TodoHeader } from './TodoHeader';\nimport { TodoList } from './TodoList';\nimport { Store } from '../store';\nimport { TodoContext } from '../TodoContext';\n\nlet index = 0;\n\nexport class TodoApp extends React.Component<any, Store> {\n  constructor(props) {\n    super(props);\n    this.state = {\n      todos: {},\n      filter: 'all'\n    };\n  }\n  render() {\n    return (\n      <TodoContext.Provider\n        value={{\n          ...this.state\n          // TODO: put the missing functions into the context value\n          // addTodo: this._addTodo,\n          // remove: this._remove,\n          // complete: this._complete,\n          // clear: this._clear,\n          // setFilter: this._setFilter,\n          // edit: this._edit\n        }}\n      >\n        <Stack horizontalAlign=\"center\">\n          <Stack style={{ width: 400 }} gap={25}>\n            <TodoHeader />\n            <TodoList />\n            <TodoFooter />\n          </Stack>\n        </Stack>\n      </TodoContext.Provider>\n    );\n  }\n\n  private _addTodo = label => {\n    const { todos } = this.state;\n    const id = index++;\n\n    this.setState({\n      todos: { ...todos, [id]: { label } }\n    });\n  };\n\n  private _remove = id => {\n    const newTodos = { ...this.state.todos };\n    delete newTodos[id];\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _complete = id => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id].completed = !newTodos[id].completed;\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _edit = (id, label) => {\n    const newTodos = { ...this.state.todos };\n    newTodos[id] = { ...newTodos[id], label };\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _clear = () => {\n    const { todos } = this.state;\n    const newTodos = {};\n\n    Object.keys(this.state.todos).forEach(id => {\n      if (!todos[id].completed) {\n        newTodos[id] = todos[id];\n      }\n    });\n\n    this.setState({\n      todos: newTodos\n    });\n  };\n\n  private _setFilter = filter => {\n    this.setState({\n      filter: filter\n    });\n  };\n}\n"
  },
  {
    "path": "step2-04/exercise/src/components/TodoFooter.tsx",
    "content": "import React, { useContext } from 'react';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabric-react';\nimport { TodoContext } from '../TodoContext';\n\nexport const TodoFooter = () => {\n  // TODO: replace the following with a useContext(TodoContext) calls\n  const todos = {};\n  const clear = () => {};\n  // - end of exercise for this file -\n\n  const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n      <Text>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </Text>\n      <DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-04/exercise/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';\nimport { FilterTypes } from '../store';\nimport { TodoContext } from '../TodoContext';\n\ninterface TodoHeaderState {\n  labelInput: string;\n}\n\nexport class TodoHeader extends React.Component<{}, TodoHeaderState> {\n  constructor(props: {}) {\n    super(props);\n    this.state = { labelInput: undefined };\n  }\n\n  render() {\n    return (\n      <Stack gap={10}>\n        <Stack horizontal horizontalAlign=\"center\">\n          <Text variant=\"xxLarge\">todos <Text variant=\"mediumPlus\">(2.4 exercise)</Text></Text>\n        </Stack>\n\n        <Stack horizontal gap={10}>\n          <Stack.Item grow>\n            <TextField\n              placeholder=\"What needs to be done?\"\n              value={this.state.labelInput}\n              onChange={this.onChange}\n              styles={props => ({\n                ...(props.focused && {\n                  field: {\n                    backgroundColor: '#c7e0f4'\n                  }\n                })\n              })}\n            />\n          </Stack.Item>\n          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>\n        </Stack>\n\n        <Pivot onLinkClick={this.onFilter}>\n          <PivotItem headerText=\"all\" />\n          <PivotItem headerText=\"active\" />\n          <PivotItem headerText=\"completed\" />\n        </Pivot>\n      </Stack>\n    );\n  }\n\n  private onAdd = () => {\n    // TODO: insert a this.context.addTodo call\n    // HINT: this.context.addTodo(this.state.labelInput);\n    this.setState({ labelInput: undefined });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ labelInput: newValue });\n  };\n\n  private onFilter = (item: PivotItem) => {\n    // TODO: insert a this.context.setFilter call\n    // HINT: this.context.setFilter(item.props.headerText as FilterTypes);\n  };\n}\n\n// TODO: TodoHeader.contextType = TodoContext;\n"
  },
  {
    "path": "step2-04/exercise/src/components/TodoList.tsx",
    "content": "import React, { useContext } from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem';\nimport { Store, FilterTypes } from '../store';\nimport { TodoContext } from '../TodoContext';\n\nexport const TodoList = () => {\n  const context = useContext(TodoContext);\n  const { filter, todos } = context;\n  const filteredTodos = Object.keys(todos).filter(id => {\n    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n  });\n\n  return (\n    <Stack gap={10}>\n      {filteredTodos.map(id => (\n        <TodoListItem key={id} id={id} />\n      ))}\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-04/exercise/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';\nimport { TodoContext } from '../TodoContext';\n\ninterface TodoListItemProps {\n  id: string;\n}\n\ninterface TodoListItemState {\n  editing: boolean;\n  editLabel: string;\n}\n\nexport class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {\n  constructor(props: TodoListItemProps) {\n    super(props);\n    this.state = { editing: false, editLabel: undefined };\n  }\n\n  render() {\n    const { id } = this.props;\n    const { todos, complete, remove } = this.context;\n\n    const item = todos[id];\n\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {!this.state.editing && (\n          <>\n            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />\n            <div>\n              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />\n              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />\n            </div>\n          </>\n        )}\n\n        {this.state.editing && (\n          <Stack.Item grow>\n            <Stack horizontal gap={10}>\n              <Stack.Item grow>\n                <TextField value={this.state.editLabel} onChange={this.onChange} />\n              </Stack.Item>\n              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>\n            </Stack>\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  }\n\n  private onEdit = () => {\n    const { id } = this.props;\n    const { todos } = this.context;\n    const { label } = todos[id];\n\n    this.setState({\n      editing: true,\n      editLabel: this.state.editLabel || label\n    });\n  };\n\n  private onDoneEdit = () => {\n    this.context.edit(this.props.id, this.state.editLabel);\n    this.setState({\n      editing: false,\n      editLabel: undefined\n    });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ editLabel: newValue });\n  };\n}\n\nTodoListItem.contextType = TodoContext;\n"
  },
  {
    "path": "step2-04/exercise/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { initializeIcons } from '@uifabric/icons';\n\n// Initializes the UI Fabric icons that we can use\n// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons\ninitializeIcons();\n\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step2-04/exercise/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "step2-05/demo/README.md",
    "content": "# Step 2.5 - Redux: The Store (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\nIn this step, we will look at solving the problems of complex applications (as mentioned in Step 4) with a library called [Redux](https://redux.js.org).\n\n1. Introduction to Redux\n2. Why use Redux?\n3. Creating the Redux store\n4. Writing reducers\n5. Dispatching actions\n\n## Introduction to Redux\n\nAs a reminder, the problems that we want to address are:\n\n1. Data needs to be passed down from component to component via props, even when some intermediate components don't use all of the data.\n2. Shared data can be changed by various actors (user interaction, updates from server), and there is no coordination of these changes.\n\nRedux is an implementation of the Flux architectural pattern:\n\n![Flux Diagram](../../assets/flux.png)\n\n### View\n\nA view is a React component that consumes the store as its data.\n\n### Actions\n\n[Actions](https://redux.js.org/basics/actions) are serializable JSON messages that represent some event, such as a user's action or a network request. With the aid of **reducers**, they affect the overall state. At minimum, an action should contain a `type` key. Sometimes it contains additional data as a **payload**.\n\n### Store\n\nThe [store](https://redux.js.org/basics/store) consists of a **state tree**, a **dispatcher**, and **reducers**.\n\n1. The **state tree** is a _singleton_, _serializable_, _immutable_ nested JSON structure. It is updated from one snapshot to another using reducers.\n\n2. The [**dispatcher**](https://redux.js.org/basics/data-flow) accepts actions, passing them to the reducers.\n\n3. [**Reducers**](https://redux.js.org/basics/reducers) are functions that take in the current state tree and an action, producing the next snapshot of the state tree. This is the only way to update the state tree.\n\n## Why use Redux?\n\nThere are lots of alternatives available, but here are some really good reasons to go with Redux:\n\n1. For more complex applications, Flux pattern forces code to be written in a way that is easy to reason about\n2. There may be a need to serialize the application state to be transmitted across the network somehow\n3. Dev tooling is really amazing\n4. Popularity of the framework means the ecosystem is mature at this point\n\n## Using Redux\n\n### Creating the Redux store\n\nThe [`createStore()`](https://redux.js.org/api/createstore) function is provided by Redux to create a store. In general, an application has a single store. The function typically takes in the main reducer and an initial snapshot of the state tree.\n\n```ts\nconst store = createStore(reducer, initialState);\n```\n\n### Writing reducers\n\nWe'll write our reducers with the help of some utilities from the official [`redux-starter-kit`](https://redux-starter-kit.js.org/), which greatly decreases the amount of boilerplate needed. The process for designing and implementing reducers is as follows:\n\n#### 1. Organize reducers according to the keys of the state tree object\n\nGiven a state tree shaped like this:\n\n```ts\n{\n  todos: {\n    [id: string]: TodoItem,\n  },\n\n  filter: 'all' | 'complete' | 'active'\n}\n```\n\nWe would organize our reducers matching the keys of the state tree and combine them with [`combineReducers()`](https://redux.js.org/recipes/structuring-reducers/using-combinereducers):\n\n```ts\nimport { createReducer } from 'redux-starter-kit';\nimport { combineReducers } from 'redux';\n\nconst reducer = combineReducers({\n  todos: createReducer({}, {\n    addTodo: (state, action) => { /* ... */ }\n  }),\n  filter: createReducer('all', {\n    setFilter: (state, action) => { /* ... */ }\n  })\n})\n```\n\n#### 2. Write the reducers with mutables\n\nIn plain Redux, reducers must make a copy of the state before making modifications, but [`createReducer()`](https://redux-starter-kit.js.org/api/createreducer) will automatically translate all the mutations to the state into immutable snapshots (!!!!!):\n\n```ts\n// first argument: initial state\n// second argument: object whose keys correspond to possible values of action.type\nconst todosReducer = createReducer(\n  {},\n  {\n    addTodo: (state, action) => {\n      state[action.id] = { label: action.label, completed: false };\n    }\n  }\n);\n```\n\n### Dispatching actions\n\nDispatching an action will pass the action and the current state to the reducers. The root reducer will produce a new snapshot of the entire state tree. We can inspect the affected snapshot with the help of `getState()`.\n\n```ts\nconst store = createStore(reducer, initialState);\nstore.dispatch({ type: 'addTodo', label: 'hello' });\nstore.dispatch({ type: 'addTodo', label: 'world' });\nconsole.log(store.getState());\n```\n\nCreating these action messages by hand is tedious, so we use action creators to do that:\n\n```ts\nconst actions = {\n  addTodo = (label: string) => ({ label, id: nextId(), completed: false })\n};\n\nstore.dispatch(actions.addTodo('hello'));\n```\n"
  },
  {
    "path": "step2-05/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n    <div id=\"app\">\n      <p>\n        Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open console\n        window.\n      </p>\n\n      <p>\n        To inspect Redux store, use the <a href=\"http://extension.remotedev.io/\">Redux Dev Tool</a> extension for your browser:\n        <a href=\"https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd\">Chrome</a>,\n        <a href=\"https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/\">FireFox</a>. (Sorry, no Edge or IE support)\n      </p>\n    </div>\n\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-05/demo/src/actions/index.ts",
    "content": "import nextId from 'uuid/v4';\n\nexport const actions = {\n  addTodo: (label: string) => ({ type: 'addTodo', id: nextId(), label }),\n  remove: (id: string) => ({ type: 'remove', id }),\n  complete: (id: string) => ({ type: 'complete', id }),\n  clear: () => ({ type: 'clear' }),\n  setFilter: (filter: string) => ({ type: 'setFilter', filter })\n};\n"
  },
  {
    "path": "step2-05/demo/src/index.tsx",
    "content": "import { reducer } from './reducers';\nimport { createStore } from 'redux';\nimport { actions } from './actions';\nimport { composeWithDevTools } from 'redux-devtools-extension';\n\nconst store = createStore(reducer, {}, composeWithDevTools());\n\nstore.dispatch(actions.addTodo('hello'));\n\nlet action = actions.addTodo('world');\nstore.dispatch(action);\n\nstore.dispatch(actions.remove(action.id));\n\nconsole.log(store.getState());\n"
  },
  {
    "path": "step2-05/demo/src/reducers/index.ts",
    "content": "import { Store } from '../store';\nimport { combineReducers } from 'redux';\nimport { createReducer } from 'redux-starter-kit';\n\nexport const todosReducer = createReducer<Store['todos']>(\n  {},\n  {\n    addTodo(state, action) {\n      state[action.id] = { label: action.label, completed: false };\n    },\n\n    remove(state, action) {\n      delete state[action.id];\n    },\n\n    clear(state, action) {\n      Object.keys(state).forEach(key => {\n        if (state[key].completed) {\n          delete state[key];\n        }\n      });\n    },\n\n    complete(state, action) {\n      state[action.id].completed = !state[action.id].completed;\n    },\n\n    edit(state, action) {\n      state[action.id].label = action.label;\n    }\n  }\n);\n\nexport const filterReducer = createReducer<Store['filter']>('all', {\n  setFilter(state, action) {\n    return action.filter;\n  }\n});\n\nexport const reducer = combineReducers({\n  todos: todosReducer,\n  filter: filterReducer\n});\n"
  },
  {
    "path": "step2-05/demo/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "step2-05/exercise/README.md",
    "content": "# Step 2.5 - Redux: The Store (Exercise)\n\n[Lessons](../../) | [Demo](../demo/)\n\nIf you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the \"exercise\" link under day 2 step 5 to see results.\n\n1. First, take a look at the store interface in `exercise/src/store/index.ts`. Note that the `Store` interface has two keys: `todos` and `filter`. We'll concentrate on `todos`, which is an object where the keys are string IDs and the values are of type `TodoItem`.\n\n2. Open `exercise/src/reducers/index.ts` and fill in the missing reducer implementations.\n\n3. Open `exercise/src/index.tsx` and write some `dispatch` calls.\n\n4. Take a look what is written in the console (F12 on PC, `cmd-option-I` on Mac).\n\n5. Install the Redux DevTools [Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/) extension\n\n6. Observe the state changes and try doing \"time travel\"\n"
  },
  {
    "path": "step2-05/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" class=\"exercise\" data-src=\"./README.md\"></div>\n    <div id=\"app\">\n      <p>\n        Nothing to show here; just look at your console window for output. Hit F12 (<code>cmd+option+I</code> on Mac) to open console\n        window.\n      </p>\n\n      <p>\n        To inspect Redux store, use the <a href=\"http://extension.remotedev.io/\">Redux Dev Tool</a> extension for your browser:\n        <a href=\"https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd\">Chrome</a>,\n        <a href=\"https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/\">FireFox</a>. (Sorry, no Edge or IE support)\n      </p>\n    </div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-05/exercise/src/actions/index.ts",
    "content": "import nextId from 'uuid/v4';\n\nexport const actions = {\n  addTodo: (label: string) => ({ type: 'addTodo', id: nextId(), label }),\n  remove: (id: string) => ({ type: 'remove', id }),\n  complete: (id: string) => ({ type: 'complete', id }),\n  clear: () => ({ type: 'clear' }),\n  setFilter: (filter: string) => ({ type: 'setFilter', filter })\n};\n"
  },
  {
    "path": "step2-05/exercise/src/index.tsx",
    "content": "import { reducer } from './reducers';\nimport { createStore } from 'redux';\nimport { actions } from './actions';\nimport { composeWithDevTools } from 'redux-devtools-extension';\n\nconst store = createStore(reducer, {}, composeWithDevTools());\n\n// TODO: try doing some store.dispatch() calls here\n// HINT: remember to use the functions inside \"actions\" object\n\nconsole.log(store.getState());\n"
  },
  {
    "path": "step2-05/exercise/src/reducers/index.ts",
    "content": "import { Store } from '../store';\nimport { combineReducers } from 'redux';\nimport { createReducer } from 'redux-starter-kit';\n\nexport const todosReducer = createReducer<Store['todos']>(\n  {},\n  {\n    addTodo(state, action) {\n      // TODO: implement this reducer\n    },\n\n    remove(state, action) {\n      delete state[action.id];\n    },\n\n    clear(state, action) {\n      Object.keys(state).forEach(key => {\n        if (state[key].completed) {\n          delete state[key];\n        }\n      });\n    },\n\n    complete(state, action) {\n      // TODO: implement this reducer\n    },\n\n    edit(state, action) {\n      // TODO: implement this reducer\n    }\n  }\n);\n\nexport const filterReducer = createReducer<Store['filter']>('all', {\n  setFilter(state, action) {\n    return action.filter;\n  }\n});\n\nexport const reducer = combineReducers({\n  todos: todosReducer,\n  filter: filterReducer\n});\n"
  },
  {
    "path": "step2-05/exercise/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "step2-06/demo/README.md",
    "content": "# Step 2.6 - Redux: React binding (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\nRedux is currently the most popular Flux implementation, and the ecosystem of related libraries has grown as a result. This is one of the reasons why it is a very popular library within Microsoft products.\n\nVarious GitHub users have collected \"awesome lists\" of tech and articles related to Redux. Here is [one such list](https://github.com/xgrommx/awesome-redux#react---a-javascript-library-for-building-user-interfaces), but it is literally impossible to list out all the related tech.\n\nIn this step, we introduce one useful library that works with Redux: [`react-redux`](https://react-redux.js.org/). Whereas the Step 2.5 code could be used with any web UI framework, we'll now use `react-redux` to connect the store to our React app. There are two steps in this process:\n\n1. Providing the store to the views\n2. Mapping the store to props\n\n## Provide the store context to the views\n\nClass components will access the Redux store via the [`<Provider>`](https://react-redux.js.org/api/provider) from `react-redux`. Under the hood, `react-redux` uses the context API to pass the store to the descendant components.\n\n```jsx\nconst store = createStore(reducers);\n\nconst App = () => {\n  return (\n    <Provider store={store}>\n      <div>Hello World!</div>\n    </Provider>\n  );\n};\n```\n\n## Mapping the store to props\n\n`react-redux` also provides the [`connect()`](https://react-redux.js.org/api/connect) function, which maps portions of the state tree and dispatch functions into props for the child React component. Let's look at how that is done.\n\n```jsx\nimport { connect } from 'react-redux';\n\nconst MyComponent = props => {\n  return <div>\n    {props.prop1}\n    <button onClick={props.action1()}>Click Me</button>\n  </div>;\n};\n\nconst ConnectedComponent = connect(\n  state => {\n    prop1: state.key1,\n    prop2: state.key2\n  },\n  dispatch => {\n    action1: (arg) => dispatch(actions.action1(arg)),\n    action2: (arg) => dispatch(actions.action2(arg)),\n  }\n)(MyComponent);\n```\n\nSo, that's a lot to digest. We'll go through the different parts:\n\n1. `<MyComponent>` is simple component that expects to have props, without any knowledge of Redux. It is just a plain React component.\n\n2. The `connect()` function takes in several arguments.\n\n   - The first argument maps portions of the Redux _state tree_ into `<MyComponent>` _props_\n   - The second arguments maps dispatch functions into `<MyComponent>` _props_ (typically used as callbacks to respond to user interaction)\n\n3. Finally, `connect()` actually returns a function, which we immediately call to **decorate** `<MyComponent>` into `<ConnectedComponent>` - it is a strange syntax, so do study it more closely here.\n\n> Yes, `connect()` is a function that takes in functions as arguments and returns a function that takes in a component and returns a component. Try to say this fast 10 times. :)\n\n## A note on performance\n\nSome folks going through this bootcamp cannot wait to start making screaming fast apps with Redux. Performance isn't free, and it certainly isn't with Redux. Try going through these links to get started on that topic:\n\nhttps://github.com/markerikson/react-redux-links/blob/master/react-performance.md#redux-performance\n"
  },
  {
    "path": "step2-06/demo/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" data-src=\"./README.md\"></div>\n    <div id=\"app\"></div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-06/demo/src/actions/index.ts",
    "content": "import uuid from 'uuid/v4';\n\nexport const actions = {\n  addTodo: (label: string) => ({ type: 'addTodo', id: uuid(), label }),\n  remove: (id: string) => ({ type: 'remove', id }),\n  complete: (id: string) => ({ type: 'complete', id }),\n  clear: () => ({ type: 'clear' }),\n  setFilter: (filter: string) => ({ type: 'setFilter', filter }),\n  edit: (id: string, label: string) => ({ type: 'edit', id, label })\n};\n"
  },
  {
    "path": "step2-06/demo/src/components/TodoApp.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nimport { TodoHeader } from './TodoHeader';\nimport { TodoList } from './TodoList';\n\nexport const TodoApp = () => {\n  return (\n    <Stack horizontalAlign=\"center\">\n      <Stack style={{ width: 400 }} gap={25}>\n        <TodoHeader />\n        <TodoList />\n        <TodoFooter />\n      </Stack>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-06/demo/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabric-react';\nimport { actions } from '../actions';\nimport { connect } from 'react-redux';\nimport { Store } from '../store';\n\ninterface TodoFooterProps {\n  todos: Store['todos'];\n  clear: () => void;\n}\n\nconst TodoFooter = (props: TodoFooterProps) => {\n  const { todos, clear } = props;\n\n  const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n      <Text>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </Text>\n      <DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>\n    </Stack>\n  );\n};\n\nconst ConnectedTodoFooter = connect(\n  (state: Store) => ({\n    todos: state.todos\n  }),\n  dispatch => ({\n    clear: () => dispatch(actions.clear())\n  })\n)(TodoFooter);\n\nexport { ConnectedTodoFooter as TodoFooter };\n"
  },
  {
    "path": "step2-06/demo/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';\nimport { FilterTypes } from '../store';\nimport { actions } from '../actions';\nimport { connect } from 'react-redux';\n\ninterface TodoHeaderProps {\n  addTodo: (label: string) => void;\n  setFilter: (filter: FilterTypes) => void;\n}\n\ninterface TodoHeaderState {\n  labelInput: string;\n}\n\nclass TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {\n  constructor(props: TodoHeaderProps) {\n    super(props);\n    this.state = { labelInput: undefined };\n  }\n\n  render() {\n    return (\n      <Stack gap={10}>\n        <Stack horizontal horizontalAlign=\"center\">\n          <Text variant=\"xxLarge\">todos <Text variant=\"mediumPlus\">(2.6 demo)</Text></Text>\n        </Stack>\n\n        <Stack horizontal gap={10}>\n          <Stack.Item grow>\n            <TextField\n              placeholder=\"What needs to be done?\"\n              value={this.state.labelInput}\n              onChange={this.onChange}\n              styles={props => ({\n                ...(props.focused && {\n                  field: {\n                    backgroundColor: '#c7e0f4'\n                  }\n                })\n              })}\n            />\n          </Stack.Item>\n          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>\n        </Stack>\n\n        <Pivot onLinkClick={this.onFilter}>\n          <PivotItem headerText=\"all\" />\n          <PivotItem headerText=\"active\" />\n          <PivotItem headerText=\"completed\" />\n        </Pivot>\n      </Stack>\n    );\n  }\n\n  private onAdd = () => {\n    this.props.addTodo(this.state.labelInput);\n    this.setState({ labelInput: undefined });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ labelInput: newValue });\n  };\n\n  private onFilter = (item: PivotItem) => {\n    this.props.setFilter(item.props.headerText as FilterTypes);\n  };\n}\n\nconst ConnectedTodoHeader = connect(\n  state => ({}),\n  dispatch => ({\n    addTodo: label => dispatch(actions.addTodo(label)),\n    setFilter: filter => dispatch(actions.setFilter(filter))\n  })\n)(TodoHeader);\n\nexport { ConnectedTodoHeader as TodoHeader };\n"
  },
  {
    "path": "step2-06/demo/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem';\nimport { connect } from 'react-redux';\nimport { Store } from '../store';\n\ninterface TodoListProps {\n  todos: Store['todos'];\n  filter: Store['filter'];\n}\n\nconst TodoList = (props: TodoListProps) => {\n  const { filter, todos } = props;\n  const filteredTodos = Object.keys(todos).filter(id => {\n    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n  });\n\n  return (\n    <Stack gap={10}>\n      {filteredTodos.map(id => (\n        <TodoListItem key={id} id={id} />\n      ))}\n    </Stack>\n  );\n};\n\nconst ConnectedTodoList = connect((state: Store) => ({ ...state }))(TodoList);\nexport { ConnectedTodoList as TodoList };\n"
  },
  {
    "path": "step2-06/demo/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';\nimport { actions } from '../actions';\nimport { Store } from '../store';\nimport { connect } from 'react-redux';\n\ninterface TodoListItemProps {\n  id: string;\n  todos: Store['todos'];\n  complete: (id: string) => void;\n  remove: (id: string) => void;\n  edit: (id: string, label: string) => void;\n}\n\ninterface TodoListItemState {\n  editing: boolean;\n  editLabel: string;\n}\n\nclass TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {\n  constructor(props: TodoListItemProps) {\n    super(props);\n    this.state = { editing: false, editLabel: undefined };\n  }\n\n  render() {\n    const { id, todos, complete, remove } = this.props;\n\n    const item = todos[id];\n\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {!this.state.editing && (\n          <>\n            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />\n            <div>\n              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />\n              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />\n            </div>\n          </>\n        )}\n\n        {this.state.editing && (\n          <Stack.Item grow>\n            <Stack horizontal gap={10}>\n              <Stack.Item grow>\n                <TextField value={this.state.editLabel} onChange={this.onChange} />\n              </Stack.Item>\n              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>\n            </Stack>\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  }\n\n  private onEdit = () => {\n    const { id, todos } = this.props;\n    const { label } = todos[id];\n\n    this.setState({\n      editing: true,\n      editLabel: this.state.editLabel || label\n    });\n  };\n\n  private onDoneEdit = () => {\n    this.props.edit(this.props.id, this.state.editLabel);\n    this.setState({\n      editing: false,\n      editLabel: undefined\n    });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ editLabel: newValue });\n  };\n}\n\nconst ConnectedTodoListItem = connect(\n  (state: Store) => ({ todos: state.todos }),\n  dispatch => ({\n    complete: id => dispatch(actions.complete(id)),\n    remove: id => dispatch(actions.remove(id)),\n    edit: (id, label) => dispatch(actions.edit(id, label))\n  })\n)(TodoListItem);\n\nexport { ConnectedTodoListItem as TodoListItem };\n"
  },
  {
    "path": "step2-06/demo/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { reducer } from './reducers';\nimport { createStore } from 'redux';\nimport { TodoApp } from './components/TodoApp';\nimport { initializeIcons } from '@uifabric/icons';\nimport { composeWithDevTools } from 'redux-devtools-extension';\nimport { Provider } from 'react-redux';\n\nconst store = createStore(reducer, {}, composeWithDevTools());\n\ninitializeIcons();\n\nReactDOM.render(\n  <Provider store={store}>\n    <TodoApp />\n  </Provider>,\n  document.getElementById('app')\n);\n"
  },
  {
    "path": "step2-06/demo/src/reducers/index.ts",
    "content": "import { Store } from '../store';\nimport { combineReducers } from 'redux';\nimport { createReducer } from 'redux-starter-kit';\n\nexport const todosReducer = createReducer<Store['todos']>(\n  {},\n  {\n    addTodo(state, action) {\n      state[action.id] = { label: action.label, completed: false };\n    },\n\n    remove(state, action) {\n      delete state[action.id];\n    },\n\n    clear(state, action) {\n      Object.keys(state).forEach(key => {\n        if (state[key].completed) {\n          delete state[key];\n        }\n      });\n    },\n\n    complete(state, action) {\n      state[action.id].completed = !state[action.id].completed;\n    },\n\n    edit(state, action) {\n      state[action.id].label = action.label;\n    }\n  }\n);\n\nexport const filterReducer = createReducer<Store['filter']>('all', {\n  setFilter(state, action) {\n    return action.filter;\n  }\n});\n\nexport const reducer = combineReducers({\n  todos: todosReducer,\n  filter: filterReducer\n});\n"
  },
  {
    "path": "step2-06/demo/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "step2-06/exercise/README.md",
    "content": "# Step 2.6 - Redux: React binding (Exercise)\n\n[Lessons](../../) | [Demo](../demo/)\n\nIf you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder. Click the \"exercise\" link under day 2 step 6 to see results.\n\nAt the beginning of this exercise, the \"Add\" and \"Clear Completed\" buttons do not work. We'll be fixing that in this step!\n\n1. Open `exercise/src/index.tsx` and wrap `<TodoApp>` with `<Provider>` as instructed in the comment\n\n2. Open `exercise/src/components/TodoFooter.tsx` and erase the \"nullable\" type modifier (the `?`) in the interface definition of `TodoFooterProps`\n\n3. Uncomment the bottom bits of code and fill in `connect()` arguments - feel free to use `TodoListItem.tsx` as a guide\n\n4. Repeat steps 2, 3 for the `TodoHeader.tsx` file\n\n## Bonus exercise\n\nFor further reading, go here to learn more about the `mergeProps` and `options` parameters to `connect()`:\n\nhttps://react-redux.js.org/api/connect\n"
  },
  {
    "path": "step2-06/exercise/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n  </head>\n  <body class=\"ms-Fabric\">\n    <div id=\"markdownReadme\" class=\"exercise\" data-src=\"./README.md\"></div>\n    <div id=\"app\">\n      For this step, we look at unit testing. Run\n      <pre>npm test</pre>\n      in the command line.\n    </div>\n    <script src=\"../../assets/scripts.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "step2-06/exercise/src/actions/index.ts",
    "content": "import uuid from 'uuid/v4';\n\nexport const actions = {\n  addTodo: (label: string) => ({ type: 'addTodo', id: uuid(), label }),\n  remove: (id: string) => ({ type: 'remove', id }),\n  complete: (id: string) => ({ type: 'complete', id }),\n  clear: () => ({ type: 'clear' }),\n  setFilter: (filter: string) => ({ type: 'setFilter', filter }),\n  edit: (id: string, label: string) => ({ type: 'edit', id, label })\n};\n"
  },
  {
    "path": "step2-06/exercise/src/components/TodoApp.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nimport { TodoHeader } from './TodoHeader';\nimport { TodoList } from './TodoList';\n\nexport const TodoApp = () => {\n  return (\n    <Stack horizontalAlign=\"center\">\n      <Stack style={{ width: 400 }} gap={25}>\n        <TodoHeader />\n        <TodoList />\n        <TodoFooter />\n      </Stack>\n    </Stack>\n  );\n};\n"
  },
  {
    "path": "step2-06/exercise/src/components/TodoFooter.tsx",
    "content": "import React from 'react';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabric-react';\nimport { actions } from '../actions';\nimport { connect } from 'react-redux';\nimport { Store } from '../store';\n\n// TODO: these ?'s after the keys of an interface makes it optional\n// and can be removed when you finished connecting this component\ninterface TodoFooterProps {\n  todos?: Store['todos'];\n  clear?: () => void;\n}\n\nconst TodoFooter = (props: TodoFooterProps) => {\n  const { todos, clear } = props;\n\n  const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;\n\n  return (\n    <Stack horizontal horizontalAlign=\"space-between\" verticalAlign=\"center\">\n      <Text>\n        {itemCount} item{itemCount === 1 ? '' : 's'} left\n      </Text>\n      <DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>\n    </Stack>\n  );\n};\n\n// TODO: write out the mapping functions for state and dispatch functions\n/*\n  HINT: you can get started by copy pasting below code as arguments to connect()\n\n  (state: Store) => ({\n    // TODO: mapping for state\n    // HINT: look at what the component needed from the props interface\n  }),\n  dispatch => ({\n    // TODO: mapping for dispatch actions\n    // HINT: look at what the component needed from the props interface\n  })\n*/\nconst ConnectedTodoFooter = connect()(TodoFooter);\nexport { ConnectedTodoFooter as TodoFooter };\n"
  },
  {
    "path": "step2-06/exercise/src/components/TodoHeader.tsx",
    "content": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';\nimport { FilterTypes } from '../store';\nimport { actions } from '../actions';\nimport { connect } from 'react-redux';\n\n// TODO: these ?'s after the keys of an interface makes it optional\n// and can be removed when you finished connecting this component\ninterface TodoHeaderProps {\n  addTodo?: (label: string) => void;\n  setFilter?: (filter: FilterTypes) => void;\n}\n\ninterface TodoHeaderState {\n  labelInput: string;\n}\n\nclass TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {\n  constructor(props: TodoHeaderProps) {\n    super(props);\n    this.state = { labelInput: undefined };\n  }\n\n  render() {\n    return (\n      <Stack gap={10}>\n        <Stack horizontal horizontalAlign=\"center\">\n          <Text variant=\"xxLarge\">todos <Text variant=\"mediumPlus\">(2.6 exercise)</Text></Text>\n        </Stack>\n\n        <Stack horizontal gap={10}>\n          <Stack.Item grow>\n            <TextField\n              placeholder=\"What needs to be done?\"\n              value={this.state.labelInput}\n              onChange={this.onChange}\n              styles={props => ({\n                ...(props.focused && {\n                  field: {\n                    backgroundColor: '#c7e0f4'\n                  }\n                })\n              })}\n            />\n          </Stack.Item>\n          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>\n        </Stack>\n\n        <Pivot onLinkClick={this.onFilter}>\n          <PivotItem headerText=\"all\" />\n          <PivotItem headerText=\"active\" />\n          <PivotItem headerText=\"completed\" />\n        </Pivot>\n      </Stack>\n    );\n  }\n\n  private onAdd = () => {\n    this.props.addTodo(this.state.labelInput);\n    this.setState({ labelInput: undefined });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ labelInput: newValue });\n  };\n\n  private onFilter = (item: PivotItem) => {\n    this.props.setFilter(item.props.headerText as FilterTypes);\n  };\n}\n\n// TODO: write out the mapping functions for state and dispatch functions\n/*\n  HINT: you can get started by copy pasting below code as arguments to connect()\n\n  (state: Store) => ({\n    // TODO: mapping for state\n    // HINT: look at what the component needed from the props interface\n  }),\n  dispatch => ({\n    // TODO: mapping for dispatch actions\n    // HINT: look at what the component needed from the props interface\n  })\n*/\nconst ConnectedTodoHeader = connect()(TodoHeader);\nexport { ConnectedTodoHeader as TodoHeader };\n"
  },
  {
    "path": "step2-06/exercise/src/components/TodoList.tsx",
    "content": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem';\nimport { connect } from 'react-redux';\nimport { Store } from '../store';\n\ninterface TodoListProps {\n  todos: Store['todos'];\n  filter: Store['filter'];\n}\n\nconst TodoList = (props: TodoListProps) => {\n  const { filter, todos } = props;\n  const filteredTodos = Object.keys(todos).filter(id => {\n    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);\n  });\n\n  return (\n    <Stack gap={10}>\n      {filteredTodos.map(id => (\n        <TodoListItem key={id} id={id} />\n      ))}\n    </Stack>\n  );\n};\n\nconst ConnectedTodoList = connect((state: Store) => ({ ...state }))(TodoList);\nexport { ConnectedTodoList as TodoList };\n"
  },
  {
    "path": "step2-06/exercise/src/components/TodoListItem.tsx",
    "content": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';\nimport { actions } from '../actions';\nimport { Store } from '../store';\nimport { connect } from 'react-redux';\n\ninterface TodoListItemProps {\n  id: string;\n  todos: Store['todos'];\n  complete: (id: string) => void;\n  remove: (id: string) => void;\n  edit: (id: string, label: string) => void;\n}\n\ninterface TodoListItemState {\n  editing: boolean;\n  editLabel: string;\n}\n\nclass TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {\n  constructor(props: TodoListItemProps) {\n    super(props);\n    this.state = { editing: false, editLabel: undefined };\n  }\n\n  render() {\n    const { id, todos, complete, remove } = this.props;\n\n    const item = todos[id];\n\n    return (\n      <Stack horizontal verticalAlign=\"center\" horizontalAlign=\"space-between\">\n        {!this.state.editing && (\n          <>\n            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />\n            <div>\n              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />\n              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />\n            </div>\n          </>\n        )}\n\n        {this.state.editing && (\n          <Stack.Item grow>\n            <Stack horizontal gap={10}>\n              <Stack.Item grow>\n                <TextField value={this.state.editLabel} onChange={this.onChange} />\n              </Stack.Item>\n              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>\n            </Stack>\n          </Stack.Item>\n        )}\n      </Stack>\n    );\n  }\n\n  private onEdit = () => {\n    const { id, todos } = this.props;\n    const { label } = todos[id];\n\n    this.setState({\n      editing: true,\n      editLabel: this.state.editLabel || label\n    });\n  };\n\n  private onDoneEdit = () => {\n    this.props.edit(this.props.id, this.state.editLabel);\n    this.setState({\n      editing: false,\n      editLabel: undefined\n    });\n  };\n\n  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    this.setState({ editLabel: newValue });\n  };\n}\n\nconst ConnectedTodoListItem = connect(\n  (state: Store) => ({ todos: state.todos }),\n  dispatch => ({\n    complete: id => dispatch(actions.complete(id)),\n    remove: id => dispatch(actions.remove(id)),\n    edit: (id, label) => dispatch(actions.edit(id, label))\n  })\n)(TodoListItem);\n\nexport { ConnectedTodoListItem as TodoListItem };\n"
  },
  {
    "path": "step2-06/exercise/src/index.tsx",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { reducer } from './reducers';\nimport { createStore } from 'redux';\nimport { TodoApp } from './components/TodoApp';\nimport { initializeIcons } from '@uifabric/icons';\nimport { composeWithDevTools } from 'redux-devtools-extension';\n// TODO: import { Provider } from 'react-redux';\n\nconst store = createStore(reducer, {}, composeWithDevTools());\n\ninitializeIcons();\n\n// TODO: wrap the <TodoApp> component with a <Provider store={store}> component\nReactDOM.render(<TodoApp />, document.getElementById('app'));\n"
  },
  {
    "path": "step2-06/exercise/src/reducers/index.ts",
    "content": "import { Store } from '../store';\nimport { combineReducers } from 'redux';\nimport { createReducer } from 'redux-starter-kit';\n\nexport const todosReducer = createReducer<Store['todos']>(\n  {},\n  {\n    addTodo(state, action) {\n      state[action.id] = { label: action.label, completed: false };\n    },\n\n    remove(state, action) {\n      delete state[action.id];\n    },\n\n    clear(state, action) {\n      Object.keys(state).forEach(key => {\n        if (state[key].completed) {\n          delete state[key];\n        }\n      });\n    },\n\n    complete(state, action) {\n      state[action.id].completed = !state[action.id].completed;\n    },\n\n    edit(state, action) {\n      state[action.id].label = action.label;\n    }\n  }\n);\n\nexport const filterReducer = createReducer<Store['filter']>('all', {\n  setFilter(state, action) {\n    return action.filter;\n  }\n});\n\nexport const reducer = combineReducers({\n  todos: todosReducer,\n  filter: filterReducer\n});\n"
  },
  {
    "path": "step2-06/exercise/src/store/index.ts",
    "content": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n  label: string;\n  completed: boolean;\n}\n\nexport interface Store {\n  todos: {\n    [id: string]: TodoItem;\n  };\n\n  filter: FilterTypes;\n}\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"outDir\": \"./dist/\",\n    \"noImplicitAny\": false,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"esModuleInterop\": true,\n    \"target\": \"es5\",\n    \"jsx\": \"react\",\n    \"allowJs\": true,\n    \"lib\": [\"es2015\", \"dom\"],\n    \"skipLibCheck\": true,\n    \"skipDefaultLibCheck\": true\n  },\n  \"exclude\": [\"node_modules\", \"docs\"]\n}\n"
  },
  {
    "path": "webpack.config.js",
    "content": "const path = require('path');\nconst fs = require('fs');\n\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\nconst outPath = path.resolve(__dirname, 'docs');\n\nconst entries = {};\nconst nonWebpackedEntries = [];\n\nfunction isValidLessonFolder(folder) {\n  return folder.includes('step') || folder.includes('playground') || folder.includes('bonus');\n}\n\nfunction* getEntryPoint(step) {\n  if (isValidLessonFolder(step)) {\n    for (let prefix of ['', 'demo/', 'exercise/', 'final/', 'lesson/']) {\n      for (let suffix of ['.js', '.jsx', '.ts', '.tsx']) {\n        const entryRequest = `./${step}/${prefix}src/index${suffix}`;\n        if (fs.existsSync(entryRequest)) {\n          yield entryRequest;\n        }\n      }\n    }\n  }\n\n  return false;\n}\n\nfs.readdirSync('./').filter(step => {\n  let isEntryPoint = false;\n\n  for (let entryPoint of getEntryPoint(step)) {\n    if (entryPoint) {\n      entries[entryPoint.replace(/\\/src\\/index.*/, '').replace(/^\\.\\//, '')] = entryPoint;\n      isEntryPoint = true;\n    }\n  }\n\n  if (!isEntryPoint && isValidLessonFolder(step)) {\n    nonWebpackedEntries.push(step);\n  } else if (step === 'step1-04') {\n    // special case: this folder's `final` has code, but its `demo` doesn't\n    nonWebpackedEntries.push('step1-04/demo');\n  }\n});\n\nmodule.exports = function (env, argv) {\n  return {\n    entry: { ...entries, markdownReadme: './markdownReadme/src/index.ts' },\n    module: {\n      rules: [\n        {\n          test: /\\.tsx?$/,\n          use: {\n            loader: 'ts-loader',\n            options: {\n              transpileOnly: true\n            }\n          },\n          exclude: /node_modules/\n        },\n        {\n          test: /\\.css$/,\n          use: ['style-loader', 'css-loader'],\n          exclude: /node_modules/\n        }\n      ]\n    },\n    plugins: [\n      ...Object.keys(entries).map(entry => {\n        return new HtmlWebpackPlugin({\n          template: path.join(__dirname, entry, 'index.html'),\n          filename: `${entry}/index.html`,\n          chunks: [entry, 'markdownReadme']\n        });\n      }),\n      new CopyWebpackPlugin([\n        ...Object.keys(entries).map(entry => {\n          return {\n            from: `${entry}/src/**/*`,\n            to: outPath\n          };\n        }),\n        ...Object.keys(entries).map(entry => {\n          return {\n            from: `${entry}/../*.+(md|html)`,\n            to: outPath\n          };\n        }),\n        ...Object.keys(entries).map(entry => {\n          return {\n            from: `${entry}/*.+(md|html)`,\n            to: outPath\n          };\n        }),\n        {\n          from: 'assets/**/*',\n          to: outPath\n        },\n        {\n          from: 'index.html',\n          to: outPath\n        },\n        ...nonWebpackedEntries.map(entry => ({ from: `${entry}/**/*`, to: outPath }))\n      ]),\n      new ForkTsCheckerWebpackPlugin({\n        silent: true,\n        async: false\n      })\n    ],\n    resolve: {\n      extensions: ['.tsx', '.ts', '.js'],\n      alias: {\n        'react-dom$': 'react-dom/profiling',\n        'scheduler/tracing': 'scheduler/tracing-profiling'\n      }\n    },\n    output: {\n      filename: '[name]/bundle.js',\n      path: outPath\n    },\n    devServer: {\n      contentBase: path.resolve(__dirname),\n      watchContentBase: true,\n      watchOptions: {\n        ignored: /tmp.json/\n      },\n      hot: false,\n      stats: 'errors-only',\n      overlay: true,\n      inline: true\n    },\n    stats: 'minimal',\n    devtool: argv.mode === 'development' ? 'eval' : 'source-map'\n  };\n};\n"
  }
]