Showing preview only (336K chars total). Download the full file or copy to clipboard to get everything.
Repository: microsoft/frontend-bootcamp
Branch: master
Commit: 7cea32428e16
Files: 253
Total size: 284.4 KB
Directory structure:
gitextract_0cjb0ebu/
├── .gitignore
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── LICENSE
├── LICENSE-CODE
├── README.md
├── assets/
│ ├── scripts.js
│ ├── shared.css
│ └── step.css
├── azure-pipelines.pr.yml
├── azure-pipelines.yml
├── bonus-jest/
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── TestMe.spec.tsx
│ │ ├── TestMe.tsx
│ │ ├── index.spec.tsx
│ │ ├── index.ts
│ │ └── multiply.ts
│ └── exercise/
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── TestMe.spec.tsx
│ ├── TestMe.tsx
│ ├── index.ts
│ ├── stack.spec.ts
│ └── stack.ts
├── bonus-servicecalls/
│ └── demo/
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── actions/
│ │ └── index.ts
│ ├── components/
│ │ ├── TodoApp.tsx
│ │ ├── TodoFooter.tsx
│ │ ├── TodoHeader.tsx
│ │ ├── TodoList.tsx
│ │ └── TodoListItem.tsx
│ ├── index.tsx
│ ├── reducers/
│ │ └── index.ts
│ ├── service/
│ │ └── index.ts
│ └── store/
│ └── index.ts
├── index.html
├── jest.config.js
├── jest.setup.js
├── markdownReadme/
│ └── src/
│ └── index.ts
├── package.json
├── playground/
│ └── index.html
├── prettier.config.js
├── server/
│ ├── index.js
│ └── now.json
├── step1-01/
│ ├── demo/
│ │ ├── index.html
│ │ └── style.css
│ ├── exercise/
│ │ ├── README.md
│ │ ├── answers.html
│ │ └── index.html
│ └── lesson/
│ ├── README.md
│ ├── index.html
│ └── src/
│ └── index.tsx
├── step1-02/
│ ├── demo/
│ │ └── index.html
│ ├── exercise/
│ │ ├── README.md
│ │ ├── answers.css
│ │ └── index.html
│ └── lesson/
│ ├── README.md
│ ├── index.html
│ └── src/
│ └── index.tsx
├── step1-03/
│ ├── demo/
│ │ └── index.html
│ ├── exercise/
│ │ ├── README.md
│ │ ├── answer.js
│ │ └── index.html
│ └── lesson/
│ ├── README.md
│ ├── index.html
│ └── src/
│ └── index.tsx
├── step1-04/
│ ├── demo/
│ │ └── index.html
│ ├── final/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── App.tsx
│ │ ├── components/
│ │ │ ├── Button.css
│ │ │ ├── Button.tsx
│ │ │ └── Counter.tsx
│ │ └── index.tsx
│ └── lesson/
│ ├── README.md
│ ├── index.html
│ └── src/
│ └── index.tsx
├── step1-05/
│ ├── TodoApp.html
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── App.tsx
│ │ ├── index.tsx
│ │ └── style.css
│ └── exercise/
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── App.tsx
│ ├── components/
│ │ ├── TodoHeader.tsx
│ │ └── TodoListItem.tsx
│ ├── index.tsx
│ └── style.css
├── step1-06/
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── TodoApp.tsx
│ │ ├── components/
│ │ │ ├── TodoFooter.tsx
│ │ │ ├── TodoHeader.tsx
│ │ │ ├── TodoList.tsx
│ │ │ └── TodoListItem.tsx
│ │ ├── index.tsx
│ │ └── style.css
│ ├── exercise/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── TodoApp.tsx
│ │ ├── components/
│ │ │ ├── TodoFooter.tsx
│ │ │ ├── TodoHeader.tsx
│ │ │ ├── TodoList.tsx
│ │ │ └── TodoListItem.tsx
│ │ ├── index.tsx
│ │ └── style.css
│ └── index.html
├── step1-07/
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── TodoApp.tsx
│ │ ├── TodoApp.types.ts
│ │ ├── components/
│ │ │ ├── TodoFooter.tsx
│ │ │ ├── TodoHeader.tsx
│ │ │ ├── TodoList.tsx
│ │ │ └── TodoListItem.tsx
│ │ ├── index.tsx
│ │ └── style.css
│ ├── exercise/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── TodoApp.tsx
│ │ ├── TodoApp.types.ts
│ │ ├── components/
│ │ │ ├── TodoFooter.tsx
│ │ │ ├── TodoHeader.tsx
│ │ │ ├── TodoList.tsx
│ │ │ └── TodoListItem.tsx
│ │ ├── index.tsx
│ │ └── style.css
│ └── final/
│ ├── index.html
│ └── src/
│ ├── TodoApp.tsx
│ ├── TodoApp.types.ts
│ ├── components/
│ │ ├── TodoFooter.tsx
│ │ ├── TodoHeader.tsx
│ │ ├── TodoList.tsx
│ │ └── TodoListItem.tsx
│ ├── index.tsx
│ └── style.css
├── step2-01/
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── async/
│ │ │ └── index.ts
│ │ ├── generics/
│ │ │ └── index.ts
│ │ ├── index.tsx
│ │ ├── interfaces/
│ │ │ └── index.ts
│ │ ├── modules/
│ │ │ ├── default.ts
│ │ │ ├── index.ts
│ │ │ └── named.ts
│ │ ├── spread/
│ │ │ └── index.ts
│ │ └── types/
│ │ └── index.ts
│ ├── exercise/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── fibonacci.ts
│ │ ├── index.ts
│ │ └── stack.ts
│ └── final/
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── fibonacci.ts
│ ├── index.ts
│ └── stack.ts
├── step2-02/
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── components/
│ │ │ ├── TodoApp.tsx
│ │ │ ├── TodoFooter.tsx
│ │ │ ├── TodoHeader.tsx
│ │ │ ├── TodoList.tsx
│ │ │ └── TodoListItem.tsx
│ │ ├── index.tsx
│ │ └── store/
│ │ └── index.ts
│ └── exercise/
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── components/
│ │ ├── TodoApp.tsx
│ │ ├── TodoFooter.tsx
│ │ ├── TodoHeader.tsx
│ │ ├── TodoList.tsx
│ │ └── TodoListItem.tsx
│ ├── index.tsx
│ └── store/
│ └── index.ts
├── step2-03/
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── components/
│ │ │ ├── TodoApp.tsx
│ │ │ ├── TodoFooter.tsx
│ │ │ ├── TodoHeader.tsx
│ │ │ ├── TodoList.tsx
│ │ │ └── TodoListItem.tsx
│ │ ├── index.tsx
│ │ └── store/
│ │ └── index.ts
│ └── exercise/
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── components/
│ │ ├── TodoApp.tsx
│ │ ├── TodoFooter.tsx
│ │ ├── TodoHeader.tsx
│ │ ├── TodoList.tsx
│ │ └── TodoListItem.tsx
│ ├── index.tsx
│ └── store/
│ └── index.ts
├── step2-04/
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── TodoContext.ts
│ │ ├── components/
│ │ │ ├── TodoApp.tsx
│ │ │ ├── TodoFooter.tsx
│ │ │ ├── TodoHeader.tsx
│ │ │ ├── TodoList.tsx
│ │ │ └── TodoListItem.tsx
│ │ ├── index.tsx
│ │ └── store/
│ │ └── index.ts
│ └── exercise/
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── TodoContext.ts
│ ├── components/
│ │ ├── TodoApp.tsx
│ │ ├── TodoFooter.tsx
│ │ ├── TodoHeader.tsx
│ │ ├── TodoList.tsx
│ │ └── TodoListItem.tsx
│ ├── index.tsx
│ └── store/
│ └── index.ts
├── step2-05/
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── actions/
│ │ │ └── index.ts
│ │ ├── index.tsx
│ │ ├── reducers/
│ │ │ └── index.ts
│ │ └── store/
│ │ └── index.ts
│ └── exercise/
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── actions/
│ │ └── index.ts
│ ├── index.tsx
│ ├── reducers/
│ │ └── index.ts
│ └── store/
│ └── index.ts
├── step2-06/
│ ├── demo/
│ │ ├── README.md
│ │ ├── index.html
│ │ └── src/
│ │ ├── actions/
│ │ │ └── index.ts
│ │ ├── components/
│ │ │ ├── TodoApp.tsx
│ │ │ ├── TodoFooter.tsx
│ │ │ ├── TodoHeader.tsx
│ │ │ ├── TodoList.tsx
│ │ │ └── TodoListItem.tsx
│ │ ├── index.tsx
│ │ ├── reducers/
│ │ │ └── index.ts
│ │ └── store/
│ │ └── index.ts
│ └── exercise/
│ ├── README.md
│ ├── index.html
│ └── src/
│ ├── actions/
│ │ └── index.ts
│ ├── components/
│ │ ├── TodoApp.tsx
│ │ ├── TodoFooter.tsx
│ │ ├── TodoHeader.tsx
│ │ ├── TodoList.tsx
│ │ └── TodoListItem.tsx
│ ├── index.tsx
│ ├── reducers/
│ │ └── index.ts
│ └── store/
│ └── index.ts
├── tsconfig.json
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
dist
lib
*.log
.DS_Store
tmp.json
================================================
FILE: .vscode/extensions.json
================================================
{
// See http://go.microsoft.com/fwlink/?LinkId=827846
// for the documentation about the extensions.json format
"recommendations": [
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
"esbenp.prettier-vscode"
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"prettier.printWidth": 140,
"prettier.tabWidth": 2,
"prettier.singleQuote": true,
"editor.tabSize": 2,
"editor.formatOnSave": true
}
================================================
FILE: LICENSE
================================================
Attribution 4.0 International
=======================================================================
Creative Commons Corporation ("Creative Commons") is not a law firm and
does not provide legal services or legal advice. Distribution of
Creative Commons public licenses does not create a lawyer-client or
other relationship. Creative Commons makes its licenses and related
information available on an "as-is" basis. Creative Commons gives no
warranties regarding its licenses, any material licensed under their
terms and conditions, or any related information. Creative Commons
disclaims all liability for damages resulting from their use to the
fullest extent possible.
Using Creative Commons Public Licenses
Creative Commons public licenses provide a standard set of terms and
conditions that creators and other rights holders may use to share
original works of authorship and other material subject to copyright
and certain other rights specified in the public license below. The
following considerations are for informational purposes only, are not
exhaustive, and do not form part of our licenses.
Considerations for licensors: Our public licenses are
intended for use by those authorized to give the public
permission to use material in ways otherwise restricted by
copyright and certain other rights. Our licenses are
irrevocable. Licensors should read and understand the terms
and conditions of the license they choose before applying it.
Licensors should also secure all rights necessary before
applying our licenses so that the public can reuse the
material as expected. Licensors should clearly mark any
material not subject to the license. This includes other CC-
licensed material, or material used under an exception or
limitation to copyright. More considerations for licensors:
wiki.creativecommons.org/Considerations_for_licensors
Considerations for the public: By using one of our public
licenses, a licensor grants the public permission to use the
licensed material under specified terms and conditions. If
the licensor's permission is not necessary for any reason--for
example, because of any applicable exception or limitation to
copyright--then that use is not regulated by the license. Our
licenses grant only permissions under copyright and certain
other rights that a licensor has authority to grant. Use of
the licensed material may still be restricted for other
reasons, including because others have copyright or other
rights in the material. A licensor may make special requests,
such as asking that all changes be marked or described.
Although not required by our licenses, you are encouraged to
respect those requests where reasonable. More_considerations
for the public:
wiki.creativecommons.org/Considerations_for_licensees
=======================================================================
Creative Commons Attribution 4.0 International Public License
By exercising the Licensed Rights (defined below), You accept and agree
to be bound by the terms and conditions of this Creative Commons
Attribution 4.0 International Public License ("Public License"). To the
extent this Public License may be interpreted as a contract, You are
granted the Licensed Rights in consideration of Your acceptance of
these terms and conditions, and the Licensor grants You such rights in
consideration of benefits the Licensor receives from making the
Licensed Material available under these terms and conditions.
Section 1 -- Definitions.
a. Adapted Material means material subject to Copyright and Similar
Rights that is derived from or based upon the Licensed Material
and in which the Licensed Material is translated, altered,
arranged, transformed, or otherwise modified in a manner requiring
permission under the Copyright and Similar Rights held by the
Licensor. For purposes of this Public License, where the Licensed
Material is a musical work, performance, or sound recording,
Adapted Material is always produced where the Licensed Material is
synched in timed relation with a moving image.
b. Adapter's License means the license You apply to Your Copyright
and Similar Rights in Your contributions to Adapted Material in
accordance with the terms and conditions of this Public License.
c. Copyright and Similar Rights means copyright and/or similar rights
closely related to copyright including, without limitation,
performance, broadcast, sound recording, and Sui Generis Database
Rights, without regard to how the rights are labeled or
categorized. For purposes of this Public License, the rights
specified in Section 2(b)(1)-(2) are not Copyright and Similar
Rights.
d. Effective Technological Measures means those measures that, in the
absence of proper authority, may not be circumvented under laws
fulfilling obligations under Article 11 of the WIPO Copyright
Treaty adopted on December 20, 1996, and/or similar international
agreements.
e. Exceptions and Limitations means fair use, fair dealing, and/or
any other exception or limitation to Copyright and Similar Rights
that applies to Your use of the Licensed Material.
f. Licensed Material means the artistic or literary work, database,
or other material to which the Licensor applied this Public
License.
g. Licensed Rights means the rights granted to You subject to the
terms and conditions of this Public License, which are limited to
all Copyright and Similar Rights that apply to Your use of the
Licensed Material and that the Licensor has authority to license.
h. Licensor means the individual(s) or entity(ies) granting rights
under this Public License.
i. Share means to provide material to the public by any means or
process that requires permission under the Licensed Rights, such
as reproduction, public display, public performance, distribution,
dissemination, communication, or importation, and to make material
available to the public including in ways that members of the
public may access the material from a place and at a time
individually chosen by them.
j. Sui Generis Database Rights means rights other than copyright
resulting from Directive 96/9/EC of the European Parliament and of
the Council of 11 March 1996 on the legal protection of databases,
as amended and/or succeeded, as well as other essentially
equivalent rights anywhere in the world.
k. You means the individual or entity exercising the Licensed Rights
under this Public License. Your has a corresponding meaning.
Section 2 -- Scope.
a. License grant.
1. Subject to the terms and conditions of this Public License,
the Licensor hereby grants You a worldwide, royalty-free,
non-sublicensable, non-exclusive, irrevocable license to
exercise the Licensed Rights in the Licensed Material to:
a. reproduce and Share the Licensed Material, in whole or
in part; and
b. produce, reproduce, and Share Adapted Material.
2. Exceptions and Limitations. For the avoidance of doubt, where
Exceptions and Limitations apply to Your use, this Public
License does not apply, and You do not need to comply with
its terms and conditions.
3. Term. The term of this Public License is specified in Section
6(a).
4. Media and formats; technical modifications allowed. The
Licensor authorizes You to exercise the Licensed Rights in
all media and formats whether now known or hereafter created,
and to make technical modifications necessary to do so. The
Licensor waives and/or agrees not to assert any right or
authority to forbid You from making technical modifications
necessary to exercise the Licensed Rights, including
technical modifications necessary to circumvent Effective
Technological Measures. For purposes of this Public License,
simply making modifications authorized by this Section 2(a)
(4) never produces Adapted Material.
5. Downstream recipients.
a. Offer from the Licensor -- Licensed Material. Every
recipient of the Licensed Material automatically
receives an offer from the Licensor to exercise the
Licensed Rights under the terms and conditions of this
Public License.
b. No downstream restrictions. You may not offer or impose
any additional or different terms or conditions on, or
apply any Effective Technological Measures to, the
Licensed Material if doing so restricts exercise of the
Licensed Rights by any recipient of the Licensed
Material.
6. No endorsement. Nothing in this Public License constitutes or
may be construed as permission to assert or imply that You
are, or that Your use of the Licensed Material is, connected
with, or sponsored, endorsed, or granted official status by,
the Licensor or others designated to receive attribution as
provided in Section 3(a)(1)(A)(i).
b. Other rights.
1. Moral rights, such as the right of integrity, are not
licensed under this Public License, nor are publicity,
privacy, and/or other similar personality rights; however, to
the extent possible, the Licensor waives and/or agrees not to
assert any such rights held by the Licensor to the limited
extent necessary to allow You to exercise the Licensed
Rights, but not otherwise.
2. Patent and trademark rights are not licensed under this
Public License.
3. To the extent possible, the Licensor waives any right to
collect royalties from You for the exercise of the Licensed
Rights, whether directly or through a collecting society
under any voluntary or waivable statutory or compulsory
licensing scheme. In all other cases the Licensor expressly
reserves any right to collect such royalties.
Section 3 -- License Conditions.
Your exercise of the Licensed Rights is expressly made subject to the
following conditions.
a. Attribution.
1. If You Share the Licensed Material (including in modified
form), You must:
a. retain the following if it is supplied by the Licensor
with the Licensed Material:
i. identification of the creator(s) of the Licensed
Material and any others designated to receive
attribution, in any reasonable manner requested by
the Licensor (including by pseudonym if
designated);
ii. a copyright notice;
iii. a notice that refers to this Public License;
iv. a notice that refers to the disclaimer of
warranties;
v. a URI or hyperlink to the Licensed Material to the
extent reasonably practicable;
b. indicate if You modified the Licensed Material and
retain an indication of any previous modifications; and
c. indicate the Licensed Material is licensed under this
Public License, and include the text of, or the URI or
hyperlink to, this Public License.
2. You may satisfy the conditions in Section 3(a)(1) in any
reasonable manner based on the medium, means, and context in
which You Share the Licensed Material. For example, it may be
reasonable to satisfy the conditions by providing a URI or
hyperlink to a resource that includes the required
information.
3. If requested by the Licensor, You must remove any of the
information required by Section 3(a)(1)(A) to the extent
reasonably practicable.
4. If You Share Adapted Material You produce, the Adapter's
License You apply must not prevent recipients of the Adapted
Material from complying with this Public License.
Section 4 -- Sui Generis Database Rights.
Where the Licensed Rights include Sui Generis Database Rights that
apply to Your use of the Licensed Material:
a. for the avoidance of doubt, Section 2(a)(1) grants You the right
to extract, reuse, reproduce, and Share all or a substantial
portion of the contents of the database;
b. if You include all or a substantial portion of the database
contents in a database in which You have Sui Generis Database
Rights, then the database in which You have Sui Generis Database
Rights (but not its individual contents) is Adapted Material; and
c. You must comply with the conditions in Section 3(a) if You Share
all or a substantial portion of the contents of the database.
For the avoidance of doubt, this Section 4 supplements and does not
replace Your obligations under this Public License where the Licensed
Rights include other Copyright and Similar Rights.
Section 5 -- Disclaimer of Warranties and Limitation of Liability.
a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
c. The disclaimer of warranties and limitation of liability provided
above shall be interpreted in a manner that, to the extent
possible, most closely approximates an absolute disclaimer and
waiver of all liability.
Section 6 -- Term and Termination.
a. This Public License applies for the term of the Copyright and
Similar Rights licensed here. However, if You fail to comply with
this Public License, then Your rights under this Public License
terminate automatically.
b. Where Your right to use the Licensed Material has terminated under
Section 6(a), it reinstates:
1. automatically as of the date the violation is cured, provided
it is cured within 30 days of Your discovery of the
violation; or
2. upon express reinstatement by the Licensor.
For the avoidance of doubt, this Section 6(b) does not affect any
right the Licensor may have to seek remedies for Your violations
of this Public License.
c. For the avoidance of doubt, the Licensor may also offer the
Licensed Material under separate terms or conditions or stop
distributing the Licensed Material at any time; however, doing so
will not terminate this Public License.
d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
License.
Section 7 -- Other Terms and Conditions.
a. The Licensor shall not be bound by any additional or different
terms or conditions communicated by You unless expressly agreed.
b. Any arrangements, understandings, or agreements regarding the
Licensed Material not stated herein are separate from and
independent of the terms and conditions of this Public License.
Section 8 -- Interpretation.
a. For the avoidance of doubt, this Public License does not, and
shall not be interpreted to, reduce, limit, restrict, or impose
conditions on any use of the Licensed Material that could lawfully
be made without permission under this Public License.
b. To the extent possible, if any provision of this Public License is
deemed unenforceable, it shall be automatically reformed to the
minimum extent necessary to make it enforceable. If the provision
cannot be reformed, it shall be severed from this Public License
without affecting the enforceability of the remaining terms and
conditions.
c. No term or condition of this Public License will be waived and no
failure to comply consented to unless expressly agreed to by the
Licensor.
d. Nothing in this Public License constitutes or may be interpreted
as a limitation upon, or waiver of, any privileges and immunities
that apply to the Licensor or You, including from the legal
processes of any jurisdiction or authority.
=======================================================================
Creative Commons is not a party to its public
licenses. Notwithstanding, Creative Commons may elect to apply one of
its public licenses to material it publishes and in those instances
will be considered the “Licensor.” The text of the Creative Commons
public licenses is dedicated to the public domain under the CC0 Public
Domain Dedication. Except for the limited purpose of indicating that
material is shared under a Creative Commons public license or as
otherwise permitted by the Creative Commons policies published at
creativecommons.org/policies, Creative Commons does not authorize the
use of the trademark "Creative Commons" or any other trademark or logo
of Creative Commons without its prior written consent including,
without limitation, in connection with any unauthorized modifications
to any of its public licenses or any other arrangements,
understandings, or agreements concerning use of licensed material. For
the avoidance of doubt, this paragraph does not form part of the
public licenses.
Creative Commons may be contacted at creativecommons.org.
================================================
FILE: LICENSE-CODE
================================================
MIT License
Copyright (c) 2019-present Microsoft Corporation
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Frontend Bootcamp / Days in the Web
## Welcome
In this two-day workshop you'll learn the basics of frontend development while building a working web app.
The 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.
## Getting set up
### 1. Required software
Before starting, make sure your computer has up-to-date versions of the following installed:
- [Node/NPM](https://nodejs.org/en/) (choose the **LTS** option, which should be version 10)
- [Git](https://git-scm.com/downloads)
- [Visual Studio Code](https://code.visualstudio.com)
- 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.
- If you already had VS Code installed, check for updates!
- 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/)
### 2. Installing and opening the project
- Open VS Code and then press ```ctrl + ` ``` (backtick, in top left corner of keyboard) to open the built-in terminal
- Use the `cd` (change directory) command to find an appropriate place for your code
- Type `git clone https://github.com/Microsoft/frontend-bootcamp.git` into the terminal to pull down a copy of the workshop code
- Type `cd frontend-bootcamp` to change your current directory to the bootcamp folder
- Type `npm install` to install all of the project dependencies
- Type `code -r .` to open the bootcamp code in VS Code
> 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.
### 3. Run the "inner loop" build
At this point, your VS Code window should look something like this:
<img src="https://user-images.githubusercontent.com/1434956/53654442-9c379400-3c02-11e9-8768-d19e092b606d.png" width=500 />
To start the dev "inner loop," run:
```
npm start
```
This will load the site shown below.
<img src="https://user-images.githubusercontent.com/1434956/53656239-88426100-3c07-11e9-8456-e3d958aa4def.png" width=500 />
### 4. Lesson Structure
1. 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.
2. 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.
## What to expect
For 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.
Most lessons also have an exercise portion. Exercise instructions are usually found in the readme for each step's "exercise" folder.
### Day one
Day one covers the basics of HTML, CSS and JavaScript, as well as an introduction to React and Typescript.
1. [Introduction to HTML](step1-01)
2. [Introduction to CSS](step1-02)
3. [Introduction JavaScript](step1-03)
4. [Introduction to React](step1-04)
5. [React Components](step1-05)
6. [State-driven UI](step1-06)
7. [Types and UI-driven state](step1-07)
### Day two
1. [TypeScript basics](step2-01)
2. [Fluent UI component library](step2-02)
3. [Theming and styling](step2-03)
4. [React Context](step2-04)
5. [Redux: Store](step2-05)
6. [Redux: React binding](step2-06)
### Bonus content
* [Redux: Service calls](bonus-servicecalls)
* [Testing with Jest](bonus-jest)
## Additional resources
- [MDN Web Docs](https://developer.mozilla.org/en-US/)
- [React Docs](https://reactjs.org/docs/getting-started.html)
- [Thinking in React](https://reactjs.org/docs/thinking-in-react.html)
## Follow the authors!
If you are interested in JavaScript, TypeScript, React, Redux, or Design Systems, follow us on Twitter:
- [@kenneth_chau](https://twitter.com/kenneth_chau)
- [@micahgodbolt](https://twitter.com/micahgodbolt)
## Contributing
This project welcomes contributions and suggestions. Most contributions require you to agree to a
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
the rights to use your contribution. For details, visit https://cla.microsoft.com.
When you submit a pull request, a CLA-bot will automatically determine whether you need to provide
a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions
provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
## Legal notices
Microsoft and any contributors grant you a license to the Microsoft documentation and other content
in this repository under the [Creative Commons Attribution 4.0 International Public License](https://creativecommons.org/licenses/by/4.0/legalcode),
see 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
[LICENSE-CODE](LICENSE-CODE) file.
Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation
may be either trademarks or registered trademarks of Microsoft in the United States and/or other countries.
The licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks.
Microsoft's general trademark guidelines can be found at http://go.microsoft.com/fwlink/?LinkID=254653.
Privacy information can be found at https://privacy.microsoft.com/en-us/
Microsoft and any contributors reserve all other rights, whether under their respective copyrights, patents,
or trademarks, whether by implication, estoppel or otherwise.
================================================
FILE: assets/scripts.js
================================================
// prettier-ignore
var appInsights = window.appInsights || function (a) {
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
}({
instrumentationKey: "6ad37ae0-c4ab-4739-925c-1e2773c31f17"
});
// prettier-ignore
if (window.location.hostname !== 'localhost') {
window.appInsights = appInsights, appInsights.queue && 0 === appInsights.queue.length && appInsights.trackPageView(null, null, { urlReferrer: document.referrer });
}
================================================
FILE: assets/shared.css
================================================
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #f3f2f1;
}
a {
color: #0078d4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
margin: 0;
}
h1 a {
font-size: 16px;
font-weight: 400;
}
.Container {
justify-content: center;
padding: 20px 0;
max-width: 1040px;
margin: 0 auto;
}
.Tiles {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: 20px;
display: grid;
list-style-type: none;
margin: 0;
padding: 0;
counter-reset: steps;
}
.Tile {
background-color: white;
border-radius: 2px;
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);
opacity: 0.96;
transition: all 0.15s linear;
position: relative;
overflow: hidden;
padding: 12px;
}
.Tile:not(.Tile--intro):hover {
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);
opacity: 1;
}
.Tile.Tile--numbered::after {
counter-increment: steps;
content: counter(steps);
position: absolute;
left: -20px;
bottom: -3px;
font-size: 220px;
line-height: 188px;
color: #eaeaea;
z-index: 1;
}
.Tile-link {
align-items: center;
text-align: center;
color: #323130;
display: flex;
flex-direction: column;
height: 148px;
justify-content: center;
text-decoration: none;
position: relative;
font-size: 24px;
font-weight: 200;
z-index: 2;
}
a.Tile-link {
color: #0078d7;
}
a.Tile-link:hover {
text-decoration: underline;
}
.Tile-link i {
font-size: 32px;
margin-bottom: 12px;
color: #605e5c;
}
.Tile-links {
font-size: 16px;
color: #605e5c;
}
.Tile-links a {
text-decoration: none;
color: #0078d4;
}
.Tile-links a:hover {
text-decoration: underline;
}
.Tile--intro {
grid-column: span 2;
padding: 20px;
}
.Tile--intro h1 {
font-size: 24px;
font-weight: 300;
margin: 8px 0;
padding: 0;
}
.Tile--intro p {
font-size: 14px;
margin: 0;
}
.Tile--intro a,
.Tile--intro a:visited {
color: #0078d4;
}
================================================
FILE: assets/step.css
================================================
@import url(https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css);
body {
display: flex;
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
li {
margin-bottom: 3px;
}
blockquote {
background: white;
padding: 0px 5px;
}
body.ms-Fabric {
font-size: 16px;
line-height: 20px;
}
#app {
flex: 1 1 40%;
padding: 50px;
}
#app pre {
border-radius: 2px;
border: 1px solid #999;
padding: 15px;
}
#markdownReadme {
box-sizing: border-box;
flex: 1 1 60%;
background: #f3f2f1;
padding: 50px;
margin: 0 auto;
height: 100vh;
overflow: auto;
}
#markdownReadme.exercise {
background-color: #ecf6fd;
}
#markdownReadme pre {
padding: 5px;
border-radius: 3px;
background: #1e1e1e;
margin: 15px 0;
overflow: auto;
}
#markdownReadme code {
font-family: Consolas, Menlo, Monaco, monospace;
font-size: 0.9em;
background-color: white;
padding: 0.2em 0.4em;
border-radius: 5px;
}
#markdownReadme code.hljs {
background-color: inherit;
font-weight: bold;
}
/**
* highlight.js style
*/
/*
* Visual Studio 2015 dark style
* Author: Nicolas LLOBERA <nllobera@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #1e1e1e;
color: #fff;
}
.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
color: #5da4df;
}
.hljs-link {
color: #569cd6;
text-decoration: underline;
}
.hljs-built_in,
.hljs-type {
color: #4ec9b0;
}
.hljs-number,
.hljs-class {
color: #b8d7a3;
}
.hljs-string,
.hljs-meta-string {
color: #d69d85;
}
.hljs-regexp,
.hljs-template-tag {
color: #9a5334;
}
.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
color: #dcdcdc;
}
.hljs-comment,
.hljs-quote {
color: #6dce5e;
font-style: italic;
}
.hljs-doctag {
color: #608b4e;
}
.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
color: #9b9b9b;
}
.hljs-variable,
.hljs-template-variable {
color: #bd63c5;
}
.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
color: #9cdcfe;
}
.hljs-section {
color: gold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
/*.hljs-code {
font-family:'Monospace';
}*/
.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #d7ba7d;
}
.hljs-addition {
background-color: #144212;
display: inline-block;
width: 100%;
}
.hljs-deletion {
background-color: #600;
display: inline-block;
width: 100%;
}
================================================
FILE: azure-pipelines.pr.yml
================================================
# Node.js
# Build a general Node.js project with npm.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
trigger: none
pool:
vmImage: 'Ubuntu-16.04'
steps:
- task: NodeTool@0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build
displayName: 'npm install, build'
================================================
FILE: azure-pipelines.yml
================================================
# Node.js
# Build a general Node.js project with npm.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
pr: none
trigger:
- master
pool:
vmImage: 'Ubuntu-16.04'
steps:
- task: NodeTool@0
inputs:
versionSpec: '10.x'
displayName: 'Install Node.js'
- script: |
git config user.email "kchau@microsoft.com"
git config user.name "Ken Chau"
git remote set-url origin https://kenotron:$(git.pat)@github.com/Microsoft/frontend-bootcamp.git
git checkout master
git pull
npm install
git checkout -b build_$(Build.BuildId)
npm run build
git add .
git commit -m "adding docs"
git subtree split --prefix docs -b temp_$(Build.BuildId)
git push origin temp_$(Build.BuildId):refs/heads/gh-pages --force
displayName: 'npm install, build and push docs to gh-pages'
================================================
FILE: bonus-jest/demo/README.md
================================================
# Bonus: Testing TypeScript code with Jest (Demo)
[Lessons](../../) | [Exercise](../exercise/)
[Jest](https://jestjs.io/) is a test framework made by Facebook and is very popular in the React and wider JS ecosystems.
In this exercise, we will work on implementing simple unit tests using Jest.
## Jest features
- Multi-threaded and isolated test runner
- Provides a fake browser-like environment if needed (window, document, DOM, etc) using [jsdom](https://github.com/jsdom/jsdom)
- 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.
- Code coverage is integrated (`--coverage`)
- Very clear error messages showing where a test failure occurred
## How to use Jest
Using `create-react-app` or other project generators, Jest should already be pre-configured. Running `npm test` usually will trigger it!
Setting 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).
## What does a test look like?
```ts
// describe(), it() and expect() are globally exported,
// so they don't need to be imported in each test file
describe('Something to be tested', () => {
it('should describe the behavior', () => {
expect(true).toBe(true);
});
});
```
- `describe()` takes a string describing the thing to be tested (often a component or file name) and a function which runs tests.
- `it()` takes a string describing the behavior to be tested and a function to run the test.
- `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).
> 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."
## Testing React components using Enzyme
[Enzyme](https://airbnb.io/enzyme/) is made by Airbnb and provides utilities to help test React components.
In 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.
`mount()` returns a wrapper that can be inspected and provides functionality like `find()`, simulating clicks, etc.
The following code demonstrates how Enzyme can be used to help test React components.
```tsx
import React from 'react';
import { mount } from 'enzyme';
import { TestMe } from './TestMe';
describe('TestMe Component', () => {
it('should have a non-clickable component when the original InnerMe is clicked', () => {
const wrapper = mount(<TestMe name="world" />);
wrapper.find('#innerMe').simulate('click');
expect(wrapper.find('#innerMe').text()).toBe('Clicked');
});
});
describe('Foo Component Tests', () => {
it('allows us to set props', () => {
const wrapper = mount(<Foo bar="baz" />);
expect(wrapper.props().bar).toBe('baz');
wrapper.setProps({ bar: 'foo' });
expect(wrapper.props().bar).toBe('foo');
wrapper.find('button').simulate('click');
});
});
```
## Advanced topics
### Mocking
Mocking 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.
There 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.
To mock a function:
```ts
it('some test function', () => {
const mockCallback = jest.fn(x => 42 + x);
mockCallback(1);
mockCallback(2);
expect(mockCallback).toHaveBeenCalledTimes(2);
});
```
Read more about jest mocking [here](https://jestjs.io/docs/en/mock-functions.html).
### Async testing
For 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.
```ts
// Callback
it('tests callback functions', (done) => {
setTimeout(() => {
done();
}, 1000);
});
// Returning a promise
it('tests promise functions', () => {
return someFunctionThatReturnsPromise());
});
// Async/await (recommended)
it('tests async functions', async () => {
expect(await someFunction()).toBe(5);
});
```
# Demo
## Jest basics
In this repo, we can start an inner loop development of tests by running `npm test` from the root of the `frontend-bootcamp` folder.
Take a look at code inside `demo/src`:
1. `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.
2. `multiply.ts` is a contrived example of a function that is exported
3. `index.spec.ts` is the test file
Note how tests are re-run when either test files or source files under `src` are saved.
================================================
FILE: bonus-jest/demo/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" data-src="./README.md"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
</div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
================================================
FILE: bonus-jest/demo/src/TestMe.spec.tsx
================================================
import React from 'react';
import { mount } from 'enzyme';
import { TestMe } from './TestMe';
describe('TestMe Component', () => {
it('should have a non-clickable component when the original InnerMe is clicked', () => {
const wrapper = mount(<TestMe name="world" />);
wrapper.find('#innerMe').simulate('click');
expect(wrapper.find('#innerMe').text()).toBe('Clicked');
});
});
================================================
FILE: bonus-jest/demo/src/TestMe.tsx
================================================
import React from 'react';
export interface TestMeProps {
name: string;
}
export interface TestMeState {
clicked: boolean;
}
export const TestMe = (props: TestMeProps) => {
return (
<div id="testMe">
<InnerMe name={props.name} />
</div>
);
};
export class InnerMe extends React.Component<TestMeProps, TestMeState> {
state = {
clicked: false
};
onClick = () => {
this.setState({ clicked: true });
};
render() {
return !this.state.clicked ? (
<div onClick={this.onClick} id="innerMe">
Hello {this.props.name}, Click Me
</div>
) : (
<div id="innerMe">Clicked</div>
);
}
}
================================================
FILE: bonus-jest/demo/src/index.spec.tsx
================================================
import React from 'react';
import { mount } from 'enzyme';
describe('index', () => {
it('placeholder', () => {
});
});
================================================
FILE: bonus-jest/demo/src/index.ts
================================================
import { multiply } from './multiply';
let counter = 0;
export function getCount() {
return counter;
}
export function increment() {
return ++counter;
}
export function decrement() {
return --counter;
}
export function square(x: number) {
return multiply(x, x);
}
================================================
FILE: bonus-jest/demo/src/multiply.ts
================================================
export function multiply(x: number, y: number) {
return x * y;
}
================================================
FILE: bonus-jest/exercise/README.md
================================================
# Bonus: Testing TypeScript code with Jest (Exercise)
[Lessons](../../) | [Demo](../demo/)
Start the test runner by running `npm test` in the root of the `frontend-bootcamp` folder.
## Basic testing
1. Look at `exercise/src/stack.ts` for a sample implementation of a stack
2. Follow the instructions inside `stack.spec.ts` file to complete the two tests
## Enzyme Testing
1. Open up `exercise/src/TestMe.spec.tsx`
2. Fill in the test using Enzyme concepts introduced in the demo
================================================
FILE: bonus-jest/exercise/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" class="exercise" data-src="./README.md"></div>
<div id="app">
For this step, we look at unit testing. Run
<pre>npm test</pre>
in the command line.
</div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
================================================
FILE: bonus-jest/exercise/src/TestMe.spec.tsx
================================================
import React from 'react';
import { mount } from 'enzyme';
import { TestMe } from './TestMe';
describe('TestMe Component', () => {
it('should render correctly when hovered', () => {
// TODO:
// 1. mount a <TestMe> Component here
// 2. use enzyme wrapper's find() method to retrieve the #innerMe element
// 3. simulate a hover with "mouseover" event via the simulate() API
// 4. make assertions with expect on the text() of the #innerMe element
});
});
================================================
FILE: bonus-jest/exercise/src/TestMe.tsx
================================================
import React from 'react';
export interface TestMeProps {
name: string;
}
export interface TestMeState {
enabled: boolean;
}
export const TestMe = (props: TestMeProps) => {
return (
<div id="testMe">
<InnerMe name={props.name} />
</div>
);
};
export class InnerMe extends React.Component<TestMeProps, TestMeState> {
state = {
enabled: false
};
onMouseOver = () => {
this.setState({ enabled: true });
};
render() {
return !this.state.enabled ? (
<div onMouseOver={this.onMouseOver} id="innerMe">
Hello {this.props.name}, Hover Over Me
</div>
) : (
<div id="innerMe">Enabled</div>
);
}
}
================================================
FILE: bonus-jest/exercise/src/index.ts
================================================
export { Stack } from './stack';
export { TestMe } from './TestMe';
================================================
FILE: bonus-jest/exercise/src/stack.spec.ts
================================================
// TODO: Import the stack here
describe('Stack', () => {
it('should push item to the top of the stack', () => {
// TODO: implement test here:
// 1. Instantiate a new Stack - i.e. const stack = new Stack<number>();
// 2. Use stack push calls to add some items to the stack
// 3. Write assertions via the expect() API
});
it('should pop the item from the top of stack', () => {
// TODO: implement test here:
// 1. Instantiate a new Stack - i.e. const stack = new Stack<number>();
// 2. Use stack push calls to add some items to the stack
// 3. pop a few items off the stack
// 4. write assertions via the expect() API
});
});
================================================
FILE: bonus-jest/exercise/src/stack.ts
================================================
export class Stack<T> {
private _items: T[] = [];
/** Add an item to the top of the stack. */
push(item: T) {
this._items.push(item);
}
/** Remove the top item from the stack and return it. */
pop(): T {
if (this._items.length > 0) {
return this._items.pop();
}
}
/** Return the top item from the stack without removing it. */
peek(): T {
if (this._items.length > 0) {
return this._items[this._items.length - 1];
}
}
/** Get the number of items in the stack/ */
get count(): number {
return this._items.length;
}
}
================================================
FILE: bonus-servicecalls/demo/README.md
================================================
# Bonus: Service calls (Demo)
[Lessons](../../)
> Note: this step doesn't work with the live site on github.io. Clone the repo to try this step out.
## `redux-thunk`: side effects inside action creators
The [Redux Thunk](https://github.com/reduxjs/redux-thunk) middleware allows writing actions that make service calls.
Remember 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.
Action 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!
Most 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.
## Action creator with a thunk
[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!
This action creator just returns an object:
```ts
function addTodo(label: string) {
return { type: 'addTodo', id: uuid(), label };
}
```
In order for us to make service calls, we need to supercharge this with the power of `redux-thunk`
```ts
function addTodo(label: string) {
return async (dispatch: any, getState: () => Store) => {
const addAction = actions.addTodo(label);
const id = addAction.id;
dispatch(addAction);
await service.add(id, getState().todos[id]);
};
}
```
Let's make some observations:
1. The outer function has the same function signature as the previous one
2. It returns a function that has `dispatch` and `getState` as parameters
3. The inner function is `async` enabled, and can await on "side effects" like asynchronous service calls
4. This inner function has the ability to dispatch additional actions because it has been passed the `dispatch()` function from the store
5. This inner function also has access to the state tree via `getState()`
================================================
FILE: bonus-servicecalls/demo/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" data-src="./README.md"></div>
<div id="app"></div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
================================================
FILE: bonus-servicecalls/demo/src/actions/index.ts
================================================
import uuid from 'uuid/v4';
import { Store } from '../store';
import * as service from '../service';
export const actions = {
addTodo: (label: string) => ({ type: 'addTodo', id: uuid(), label }),
remove: (id: string) => ({ type: 'remove', id }),
complete: (id: string) => ({ type: 'complete', id }),
clear: () => ({ type: 'clear' }),
setFilter: (filter: string) => ({ type: 'setFilter', filter }),
edit: (id: string, label: string) => ({ type: 'edit', id, label })
};
export const actionsWithService = {
addTodo: (label: string) => {
return async (dispatch: any, getState: () => Store) => {
const addAction = actions.addTodo(label);
const id = addAction.id;
dispatch(addAction);
await service.add(id, getState().todos[id]);
};
},
remove: (id: string) => {
return async (dispatch: any, getState: () => Store) => {
dispatch(actions.remove(id));
await service.remove(id);
};
},
complete: (id: string) => {
return async (dispatch: any, getState: () => Store) => {
dispatch(actions.complete(id));
await service.update(id, getState().todos[id]);
};
},
clear: () => {
return async (dispatch: any, getState: () => Store) => {
dispatch(actions.clear());
await service.updateAll(getState().todos);
};
},
edit: (id: string, label: string) => {
return async (dispatch: any, getState: () => Store) => {
dispatch(actions.edit(id, label));
await service.update(id, getState().todos[id]);
};
}
};
================================================
FILE: bonus-servicecalls/demo/src/components/TodoApp.tsx
================================================
import React from 'react';
import { Stack } from 'office-ui-fabric-react';
import { TodoFooter } from './TodoFooter';
import { TodoHeader } from './TodoHeader';
import { TodoList } from './TodoList';
export const TodoApp = () => {
return (
<Stack horizontalAlign="center">
<Stack style={{ width: 400 }} gap={25}>
<TodoHeader />
<TodoList />
<TodoFooter />
</Stack>
</Stack>
);
};
================================================
FILE: bonus-servicecalls/demo/src/components/TodoFooter.tsx
================================================
import React from 'react';
import { DefaultButton, Stack, Text } from 'office-ui-fabric-react';
import { actionsWithService } from '../actions';
import { connect } from 'react-redux';
import { Store } from '../store';
interface TodoFooterProps {
todos: Store['todos'];
clear: () => void;
}
const TodoFooter = (props: TodoFooterProps) => {
const { todos, clear } = props;
const itemCount = Object.keys(todos).filter(id => !todos[id].completed).length;
return (
<Stack horizontal horizontalAlign="space-between">
<Text>
{itemCount} item{itemCount === 1 ? '' : 's'} left
</Text>
<DefaultButton onClick={() => clear()}>Clear Completed</DefaultButton>
</Stack>
);
};
const ConnectedTodoFooter = connect(
(state: Store) => ({
todos: state.todos
}),
(dispatch: any) => ({
clear: () => dispatch(actionsWithService.clear())
})
)(TodoFooter);
export { ConnectedTodoFooter as TodoFooter };
================================================
FILE: bonus-servicecalls/demo/src/components/TodoHeader.tsx
================================================
import React from 'react';
import { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
import { FilterTypes } from '../store';
import { actions, actionsWithService } from '../actions';
import { connect } from 'react-redux';
interface TodoHeaderProps {
addTodo: (label: string) => void;
setFilter: (filter: FilterTypes) => void;
}
interface TodoHeaderState {
labelInput: string;
}
class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
constructor(props: TodoHeaderProps) {
super(props);
this.state = { labelInput: undefined };
}
render() {
return (
<Stack gap={10}>
<Stack horizontal horizontalAlign="center">
<Text variant="xxLarge">todos</Text>
</Stack>
<Stack horizontal gap={10}>
<Stack.Item grow>
<TextField
placeholder="What needs to be done?"
value={this.state.labelInput}
onChange={this.onChange}
styles={props => ({
...(props.focused && {
field: {
backgroundColor: '#c7e0f4'
}
})
})}
/>
</Stack.Item>
<PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>
</Stack>
<Pivot onLinkClick={this.onFilter}>
<PivotItem headerText="all" />
<PivotItem headerText="active" />
<PivotItem headerText="completed" />
</Pivot>
</Stack>
);
}
private onAdd = () => {
this.props.addTodo(this.state.labelInput);
this.setState({ labelInput: undefined });
};
private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
this.setState({ labelInput: newValue });
};
private onFilter = (item: PivotItem) => {
this.props.setFilter(item.props.headerText as FilterTypes);
};
}
const ConnectedTodoHeader = connect(
state => ({}),
(dispatch: any) => ({
addTodo: label => dispatch(actionsWithService.addTodo(label)),
setFilter: filter => dispatch(actions.setFilter(filter))
})
)(TodoHeader);
export { ConnectedTodoHeader as TodoHeader };
================================================
FILE: bonus-servicecalls/demo/src/components/TodoList.tsx
================================================
import React from 'react';
import { Stack } from 'office-ui-fabric-react';
import { TodoListItem } from './TodoListItem';
import { connect } from 'react-redux';
import { Store } from '../store';
interface TodoListProps {
todos: Store['todos'];
filter: Store['filter'];
}
const TodoList = (props: TodoListProps) => {
const { filter, todos } = props;
const filteredTodos = Object.keys(todos).filter(id => {
return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
});
return (
<Stack gap={10}>
{filteredTodos.map(id => (
<TodoListItem key={id} id={id} />
))}
</Stack>
);
};
const ConnectedTodoList = connect((state: Store) => ({ ...state }))(TodoList);
export { ConnectedTodoList as TodoList };
================================================
FILE: bonus-servicecalls/demo/src/components/TodoListItem.tsx
================================================
import React from 'react';
import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
import { actionsWithService } from '../actions';
import { Store } from '../store';
import { connect } from 'react-redux';
interface TodoListItemProps {
id: string;
todos: Store['todos'];
complete: (id: string) => void;
remove: (id: string) => void;
edit: (id: string, label: string) => void;
}
interface TodoListItemState {
editing: boolean;
editLabel: string;
}
class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
constructor(props: TodoListItemProps) {
super(props);
this.state = { editing: false, editLabel: undefined };
}
render() {
const { id, todos, complete, remove } = this.props;
const item = todos[id];
return (
<Stack horizontal verticalAlign="center" horizontalAlign="space-between">
{!this.state.editing && (
<>
<Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
<div>
<IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
<IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
</div>
</>
)}
{this.state.editing && (
<Stack.Item grow>
<Stack horizontal gap={10}>
<Stack.Item grow>
<TextField value={this.state.editLabel} onChange={this.onChange} />
</Stack.Item>
<DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>
</Stack>
</Stack.Item>
)}
</Stack>
);
}
private onEdit = () => {
const { id, todos } = this.props;
const { label } = todos[id];
this.setState({
editing: true,
editLabel: this.state.editLabel || label
});
};
private onDoneEdit = () => {
this.props.edit(this.props.id, this.state.editLabel);
this.setState({
editing: false,
editLabel: undefined
});
};
private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
this.setState({ editLabel: newValue });
};
}
const ConnectedTodoListItem = connect(
(state: Store) => ({ todos: state.todos }),
(dispatch: any) => ({
complete: id => dispatch(actionsWithService.complete(id)),
remove: id => dispatch(actionsWithService.remove(id)),
edit: (id, label) => dispatch(actionsWithService.edit(id, label))
})
)(TodoListItem);
export { ConnectedTodoListItem as TodoListItem };
================================================
FILE: bonus-servicecalls/demo/src/index.tsx
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { reducer } from './reducers';
import { createStore, applyMiddleware } from 'redux';
import { TodoApp } from './components/TodoApp';
import { Provider } from 'react-redux';
import { initializeIcons } from '@uifabric/icons';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import * as service from './service';
import { Store, FilterTypes } from './store';
(async () => {
const preloadStore = {
todos: (await service.getAll()) as Store['todos'],
filter: 'all' as FilterTypes
};
const store = createStore(reducer, preloadStore, composeWithDevTools(applyMiddleware(thunk)));
initializeIcons();
ReactDOM.render(
<Provider store={store}>
<TodoApp />
</Provider>,
document.getElementById('app')
);
})();
================================================
FILE: bonus-servicecalls/demo/src/reducers/index.ts
================================================
import { Store } from '../store';
import { combineReducers } from 'redux';
import { createReducer } from 'redux-starter-kit';
export const todosReducer = createReducer<Store['todos']>(
{},
{
addTodo(state, action) {
state[action.id] = { label: action.label, completed: false };
},
remove(state, action) {
delete state[action.id];
},
clear(state, action) {
Object.keys(state).forEach(key => {
if (state[key].completed) {
delete state[key];
}
});
},
complete(state, action) {
state[action.id].completed = !state[action.id].completed;
},
edit(state, action) {
state[action.id].label = action.label;
}
}
);
export const filterReducer = createReducer<Store['filter']>('all', {
setFilter(state, action) {
return action.filter;
}
});
export const reducer = combineReducers({
todos: todosReducer,
filter: filterReducer
});
================================================
FILE: bonus-servicecalls/demo/src/service/index.ts
================================================
import { TodoItem, Store } from '../store';
const HOST = 'http://localhost:3000';
export async function add(id: string, todo: TodoItem) {
const response = await fetch(`${HOST}/todos/${id}`, {
method: 'post',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(todo)
});
return await response.json();
}
export async function update(id: string, todo: TodoItem) {
const response = await fetch(`${HOST}/todos/${id}`, {
method: 'put',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(todo)
});
return await response.json();
}
export async function remove(id: string) {
const response = await fetch(`${HOST}/todos/${id}`, {
method: 'delete'
});
return await response.json();
}
export async function getAll() {
const response = await fetch(`${HOST}/todos`, {
method: 'get'
});
return await response.json();
}
export async function updateAll(todos: Store['todos']) {
const response = await fetch(`${HOST}/todos`, {
method: 'post',
headers: { 'content-type': 'application/json' },
body: JSON.stringify(todos)
});
return await response.json();
}
================================================
FILE: bonus-servicecalls/demo/src/store/index.ts
================================================
export type FilterTypes = 'all' | 'active' | 'completed';
export interface TodoItem {
label: string;
completed: boolean;
}
export interface Store {
todos: {
[id: string]: TodoItem;
};
filter: FilterTypes;
}
================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
<link rel="stylesheet" href="./assets/shared.css" />
<title>Microsoft Days in the Web - Welcome</title>
</head>
<body class="ms-Fabric">
<div class="Container">
<h1>Frontend Bootcamp <a href="https://github.com/Microsoft/frontend-bootcamp">View on GitHub</a></h1>
</div>
<div class="Container">
<ul class="Tiles">
<li class="Tile Tile--intro">
<h2>Day 1</h2>
Get set up and learn to build a todo app using HTML, CSS, JavaScript, and React.
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Intro to HTML
<div class="Tile-links">
<a target="_blank" href="./step1-01/lesson/">lesson</a> | <a target="_blank" href="./step1-01/demo/">demo</a> |
<a target="_blank" href="./step1-01/exercise/">exercise</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Intro to CSS
<div class="Tile-links">
<a target="_blank" href="./step1-02/lesson/">lesson</a> | <a target="_blank" href="./step1-02/demo/">demo</a> |
<a target="_blank" href="./step1-02/exercise/">exercise</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Intro to JS
<div class="Tile-links">
<a target="_blank" href="./step1-03/lesson/">lesson</a> | <a target="_blank" href="./step1-03/demo/">demo</a> |
<a target="_blank" href="./step1-03/exercise/">exercise</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
React Intro
<div class="Tile-links">
<a target="_blank" href="./step1-04/lesson/">lesson</a> | <a target="_blank" href="./step1-04/demo/">demo</a> |
<a target="_blank" href="./step1-04/final/">final</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
React Components
<div class="Tile-links">
<a target="_blank" href="./step1-05/demo/">demo</a> | <a target="_blank" href="./step1-05/exercise/">exercise</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
State-Driven UI
<div class="Tile-links">
<a target="_blank" href="./step1-06/demo/">demo</a> | <a target="_blank" href="./step1-06/exercise/">exercise</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Types & <br />UI-Driven State
<div class="Tile-links">
<a target="_blank" href="./step1-07/demo/">demo</a> | <a target="_blank" href="./step1-07/exercise/">exercise</a> |
<a target="_blank" href="./step1-07/final/">final</a>
</div>
</div>
</li>
</ul>
</div>
<div class="Container">
<ul class="Tiles">
<li class="Tile Tile--intro">
<h2>Day 2</h2>
Take your todo app to the next level with TypeScript, Fabric React, and Redux.
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
TypeScript Basics
<div class="Tile-links">
<a target="_blank" href="./step2-01/demo/">demo</a> | <a target="_blank" href="./step2-01/exercise/">exercise</a> |
<a target="_blank" href="./step2-01/final/">final</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
UI Fabric
<div class="Tile-links">
<a target="_blank" href="./step2-02/demo/">demo</a> | <a target="_blank" href="./step2-02/exercise/">exercise</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Theming and Styling
<div class="Tile-links">
<a target="_blank" href="./step2-03/demo/">demo</a> | <a target="_blank" href="./step2-03/exercise/">exercise</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
React Context
<div class="Tile-links">
<a target="_blank" href="./step2-04/demo/">demo</a> | <a target="_blank" href="./step2-04/exercise/">exercise</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Redux: The Store
<div class="Tile-links">
<a target="_blank" href="./step2-05/demo/">demo</a> | <a target="_blank" href="./step2-05/exercise/">exercise</a>
</div>
</div>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Redux: React Binding
<div class="Tile-links">
<a target="_blank" href="./step2-06/demo/">demo</a> | <a target="_blank" href="./step2-06/exercise/">exercise</a>
</div>
</div>
</li>
</ul>
</div>
<div class="Container">
<ul class="Tiles">
<li class="Tile Tile--intro">
<h2>Bonus Content</h2>
Some Extra Bonus Lessons!! Yay! Bonus!!
</li>
<li class="Tile Tile--numbered">
<a target="_blank" href="./bonus-servicecalls/demo/" class="Tile-link"> Redux: Service Calls </a>
</li>
<li class="Tile Tile--numbered">
<div class="Tile-link">
Testing with Jest
<div class="Tile-links">
<a target="_blank" href="./bonus-jest/demo/">demo</a> | <a target="_blank" href="./bonus-jest/exercise/">exercise</a>
</div>
</div>
</li>
</ul>
</div>
<div class="Container">
<ul class="Tiles">
<li class="Tile Tile--intro">
<h2>Playground</h2>
Build your app here!
</li>
<li class="Tile Tile--unnumbered"><a target="_blank" href="./playground/" class="Tile-link">Playground</a></li>
</ul>
</div>
<script src="./assets/scripts.js"></script>
</body>
</html>
================================================
FILE: jest.config.js
================================================
module.exports = {
preset: 'ts-jest',
setupFiles: ['./jest.setup.js'],
testEnvironment: 'jsdom',
testPathIgnorePatterns: ['/node_modules/', '/docs/']
};
================================================
FILE: jest.setup.js
================================================
// setup file
var enzyme = require('enzyme');
var Adapter = require('enzyme-adapter-react-16');
enzyme.configure({ adapter: new Adapter() });
================================================
FILE: markdownReadme/src/index.ts
================================================
import marked, { Renderer } from 'marked';
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
import typescript from 'highlight.js/lib/languages/typescript';
import html from 'highlight.js/lib/languages/xml';
import css from 'highlight.js/lib/languages/css';
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('html', html);
hljs.registerLanguage('css', css);
async function run() {
const div = document.getElementById('markdownReadme');
// Create your custom renderer.
const renderer = new Renderer();
renderer.code = (code, language) => {
// Check whether the given language is valid for highlight.js.
const validLang = !!(language && hljs.getLanguage(language));
// Highlight only if the language is valid.
const highlighted = validLang ? hljs.highlight(language, code).value : code;
// Render the highlighted code with `hljs` class.
return `<pre><code class="hljs ${language}">${highlighted}</code></pre>`;
};
marked.setOptions({ renderer });
if (div) {
const response = await fetch(div.dataset['src'] || '../README.md');
const markdownText = await response.text();
div.innerHTML = marked(markdownText);
restoreScroll(div);
div.addEventListener('scroll', evt => {
saveScroll(div);
});
window.addEventListener('resize', evt => {
saveScroll(div);
});
}
}
const scrollKey = `${window.location.pathname}_scrolltop`;
function saveScroll(div: HTMLElement) {
window.localStorage.setItem(scrollKey, String(div.scrollTop));
}
function restoreScroll(div: HTMLElement) {
const scrollTop = window.localStorage.getItem(scrollKey);
if (scrollTop) {
div.scrollTop = parseInt(scrollTop);
}
}
run();
================================================
FILE: package.json
================================================
{
"name": "bootcamp",
"version": "1.0.0",
"description": "",
"repository": {
"type": "git",
"url": "https://github.com/Microsoft/frontend-bootcamp"
},
"main": "index.js",
"scripts": {
"start:client": "webpack-dev-server --mode development --progress --open",
"test": "jest --watch",
"build": "rimraf docs && webpack --progress --mode production",
"start:server": "nodemon -w server server/index.js",
"start": "run-p start:server start:client",
"deploy-ghpages": "git push origin :gh-pages && git subtree push --prefix docs origin gh-pages"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/body-parser": "^1.17.0",
"@types/cors": "^2.8.4",
"@types/enzyme": "^3.9.0",
"@types/express": "^4.16.1",
"@types/jest": "^23.3.13",
"@types/node": "~10.12.21",
"@types/react": "^16.7.20",
"@types/react-dom": "^16.0.11",
"@types/react-redux": "^7.0.0",
"@types/redux": "^3.6.0",
"@types/uuid": "^3.4.4",
"body-parser": "^1.18.3",
"copy-webpack-plugin": "^4.6.0",
"cors": "^2.8.5",
"css-loader": "^2.1.0",
"fork-ts-checker-async-overlay-webpack-plugin": "^0.1.0",
"fork-ts-checker-webpack-plugin": "^0.5.2",
"html-webpack-plugin": "^4.0.0-beta.5",
"jest": "^24.1.0",
"nodemon": "^1.18.9",
"npm-run-all": "^4.1.5",
"rimraf": "^2.6.3",
"style-loader": "^0.23.1",
"ts-jest": "^24.0.0",
"ts-loader": "^5.3.3",
"tslint": "^5.13.0",
"typescript": "^3.3.3",
"uuid": "^3.3.2",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"@uifabric/fluent-theme": "^0.14.1",
"@uifabric/theme-samples": "^0.1.4",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.9.1",
"express": "^4.16.4",
"highlight.js": "^9.14.2",
"immer": "^1.12.1",
"marked": "^0.6.1",
"office-ui-fabric-react": "^6.144.0",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-starter-kit": "^0.4.3",
"redux-thunk": "^2.3.0"
}
}
================================================
FILE: playground/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<iframe
src="https://codesandbox.io/embed/jp590043k3?fontsize=14"
style="width:100%; height:100vh; border:0; border-radius: 4px; overflow:hidden;"
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
></iframe>
</body>
</html>
================================================
FILE: prettier.config.js
================================================
module.exports = {
singleQuote: true,
tabWidth: 2,
printWidth: 140
};
================================================
FILE: server/index.js
================================================
// @ts-check
const fs = require('fs');
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
const store = {
/** @type {any} */
read() {
if (fs.existsSync('tmp.json')) {
store.todos = JSON.parse(fs.readFileSync('tmp.json').toString());
} else {
store.todos = {};
}
return store.todos;
},
save() {
fs.writeFileSync('tmp.json', JSON.stringify(store.todos));
},
todos: {}
};
app.use(bodyParser.json());
app.use(cors());
app.get('/todos', (req, res) => {
res.json(store.read());
});
app.put('/todos/:id', (req, res) => {
store.todos[req.params.id] = req.body;
store.save();
res.json('ok');
});
app.post('/todos/:id', (req, res) => {
store.todos[req.params.id] = req.body;
store.save();
res.json('ok');
});
app.delete('/todos/:id', (req, res) => {
delete store.todos[req.params.id];
store.save();
res.json('ok');
});
app.post('/todos', (req, res) => {
store.todos = req.body;
store.save();
res.json('ok');
});
app.get('/hello', (req, res) => {
res.send('world');
});
app.listen(process.env.NODE_ENV === 'production' ? undefined : 3000, () => {
console.log('Listening at http://localhost:3000');
});
================================================
FILE: server/now.json
================================================
{
"version": 2,
"name": "todo-server",
"builds": [{ "src": "*.js", "use": "@now/node-server" }],
"env": {
"NODE_ENV": "production"
}
}
================================================
FILE: step1-01/demo/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<title>Intro to HTML</title>
<link rel="stylesheet" href="./style.css" />
<style>
body {
padding: 10px;
}
hr {
margin: 40px;
}
</style>
</head>
<body>
<section>
<h2><a href="https://developer.mozilla.org/en-US/docs/Glossary/semantics" target="_blank" >Why Semantic HTML</a></h2>
<div>
<h3>Semantic</h3>
<p>This is a paragraph about why semantic HTML is important.</p>
<h4>A unordered list</h4>
<ul>
<li>Unordered item 1</li>
<li>Another unordered item</li>
<li>and another unordered item</li>
</ul>
<h4>An ordered list</h4>
<ol>
<li>Ordered item 1</li>
<li>Another ordered item</li>
<li>and another ordered item</li>
</ol>
<h4>Next up</h4>
<a href="https://fluidframework.com/">Fluid Framework</a>
</div>
<br/><br/>
<div>
<div>Non Semantic</div>
<div>This is a paragraph about why semantic HTML is important.</div>
<div>A unordered list</div>
<div>
<div>Unordered item 1</div>
<div>Another unordered item</div>
<div>and another unordered item</div>
</div>
<div>An ordered list</div>
<div>
<div>Ordered item 1</div>
<div>Another ordered item</div>
<div>and another ordered item</div>
</div>
<div>Next up</div>
<div onClick="location.href='https://fluidframework.com/'">Fluid Framework</a>
</div>
<br/>
</section>
<hr>
<section>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Metadata</a></h2>
<pre>
<html>
<head>
<title>Intro to HTML</title>
<link rel="stylesheet" href="./style.css" />
<style>
hr {
margin: 40px;
}
</style>
</head>
</html>
</pre>
</section>
<hr />
<section>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning">Content Sections</a></h2>
<pre>
<body>
<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<nav></nav>
</header>
<main>
<article></article>
<aside></aside>
</main>
<footer></footer>
</body>
</pre>
</section>
<hr />
<section>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content">Block Text content</a></h2>
<h3>Div</h3>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo et quod odio velit, hic qui autem dolores magni earum ducimus dolorem
modi, numquam laborum accusamus adipisci eius excepturi doloremque vero.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore voluptatum maiores vitae? Architecto amet provident labore error
officia accusantium reiciendis, vero perspiciatis. Incidunt numquam enim deserunt, velit earum totam veritatis.
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium nobis ex optio, minus in, eum ratione magnam aut distinctio,
aliquid libero eaque nihil provident nemo est adipisci repellendus nisi numquam?
</div>
</div>
<h3>Paragraph</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, vero! Eum optio veniam nisi, assumenda ea velit in corrupti vel
eos reprehenderit beatae libero rem iusto, maiores, corporis sunt laborum.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis porro consequuntur exercitationem, perspiciatis nam saepe, odit
enim omnis qui commodi cupiditate in eveniet. Nemo maxime ipsam recusandae consectetur voluptatum non?
</p>
<h3>Ordered List</h3>
<ol>
<li>Ordered</li>
<li>list</li>
<li>items</li>
</ol>
<h3>Unordered List</h3>
<ul>
<li>Unordered</li>
<li>list</li>
<li>items</li>
</ul>
<h3>Pre</h3>
<pre>
// This is a pre tag -- It respects spacing and tabs
<ul>
<li>Unordered</li>
<li>list</li>
<li>items</li>
</ul>
</pre>
<pre>
// But actual code still needs to be escaped
&lt;ul&gt;
&lt;li&gt;Unordered&lt;/li&gt;
&lt;li&gt;list&lt;/li&gt;
&lt;li&gt;items&lt;/li&gt;
&lt;/ul&gt;
</pre>
</section>
<hr />
<section>
<h2>
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text elements</a>
</h2>
<h3>Anchor tag and span</h3>
<a target="_blank" href="https://example.com"> Anchor Tag with <span style="color: red">span tag wrapped around part of it</span> </a>
<h3>Inline style tags</h3>
<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>
<h3>Image tag</h3>
<div>
<img src="../../assets/fabric.jpg" alt="Fabric Logo" width="100" />
<img src="../../assets/fabric.jpg" alt="Fabric Logo" width="50" />
<img src="../../assets/fabric.jpg" alt="Fabric Logo" width="150" />
</div>
</section>
<hr />
<section>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content">Table content</a></h2>
<table border="1">
<thead>
<tr>
<th>Column 1 header</th>
<th>Column 2 header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
<tr>
<td>Another table row</td>
<td>with two columns</td>
</tr>
<tr>
<td colspan="2">Row spanning both columns</td>
</tr>
</tbody>
</table>
</section>
<hr />
<section>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Forms</a></h2>
<form action="" method="get" class="form-example">
<div>
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required />
</div>
<div>
<label for="name">Enter your password: </label>
<input type="password" name="password" id="password" required />
</div>
<div>
<div>
<input type="checkbox" id="option1" name="option1" checked />
<label for="option1">Option 1</label>
</div>
<div>
<input type="checkbox" id="option2" name="option2" />
<label for="option2">Option 2</label>
</div>
</div>
<div>
<input type="color" id="color1" name="color1" value="#e66465" />
<label for="color1">Color 1</label>
</div>
<div>
<input type="color" id="color2" name="color2" value="#f6b73c" />
<label for="color2">Color 2</label>
</div>
<div>
<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01" max="2018-12-31" />
</div>
<div>
<div>
<input type="radio" id="Radio1" name="radios" value="Radio1" checked />
<label for="Radio1">Radio 1</label>
</div>
<div>
<input type="radio" id="radio2" name="radios" value="radio2" />
<label for="radio2">Radio 2</label>
</div>
<div>
<input type="radio" id="radio3" name="radios" value="radio3" />
<label for="radio3">Radio 3</label>
</div>
</div>
<div>
<label for="pet-select">Choose a pet:</label>
<select id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
</div>
<div>
<input type="submit" value="Subscribe!" />
</div>
</form>
</section>
</body>
</html>
================================================
FILE: step1-01/demo/style.css
================================================
aside {
float: right;
width: 33%;
padding: 10px;
background: #eee;
}
form > div {
margin-bottom: 20px;
}
h2 a {
color: #0078d4;
text-decoration: none;
}
h2 a:hover {
text-decoration: underline;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
================================================
FILE: step1-01/exercise/README.md
================================================
# Step 1.1 - Introduction to HTML (Exercise)
See 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.
================================================
FILE: step1-01/exercise/answers.html
================================================
<h1>The Recipe 4th of July Baked Beans</h1>
<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>
<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>
<dl>
<dt>Prep Time:</dt>
<dd> 10 minutes</dd>
<dt>Cook time:</dt>
<dd> 3+ hours</dd>
<dt>Servings:</dt>
<dd> 12</dd>
</dl>
<h2>Ingredients:</h2>
<ul>
<li>1LB Bacon chopped</li>
<li>3 Cans Bush's Original Baked Beans </li>
<li>1 Walla Wall Onion chopped </li>
<li>3 ground garlic cloves </li>
<li>4 Tablespoons of mustard </li>
<li>3 Tablespoons of molasses </li>
<li>4 Tablespoons of brown sugar </li>
</ul>
<h2>Directions:</h2>
<ol>
<li>Cook bacon until it is mostly cooked, then drain most of the grease and put aside</li>
<li>Cook onion in remaining bacon grease</li>
<li>Combine onions and bacon, then add garlic, cook for a few more minutes</li>
<li>Add beans and get up to simmer temperature</li>
<li>Add mustard until your beans are nice and yellow</li>
<li>Add molasses until color darkens again</li>
<li>Add brown sugar until properly sweet</li>
<li>Simmer for a long time, occasionally stirring</li>
</ol>
<h2>Expert Tips:</h2>
<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>
<h2> Nutritional Information:</h2>
<dl>
<dt>Calories:</dt>
<dd> lots</dd>
<dt>Fat:</dt>
<dd> lots</dd>
<dt>Fun:</dt>
<dd> lots</dd>
</dl>
================================================
FILE: step1-01/exercise/index.html
================================================
<html>
<body>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="css,result"
>
<pre data-lang="css">
/*
Step 1 Exercise
The 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.
## The Exercise
1. Create a recipe page to host our recipe
2. Use header, main, footer, headings (h1/h2 etc), paragraphs, lists
3. Use ordered and unordered lists appropriately
4. Add the `baked_beans.jpg` image: https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/step1-01/exercise/baked_beans.jpg
5. Add an anchor tag around 'Wisconsin Beer Brats'
> Note that CodePen takes care of the `HTML` and `Body` tags, so you can simply start with the content
## The Recipe
Title:
4th of July Baked Beans
Description:
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.
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 Wisconsin Beer Brats https://www.culinaryhill.com/wisconsin-beer-brats/
Prep Time: 10 minutes
Cook time: 3+ hours
Servings: 12
Ingredients:
1LB Bacon chopped
3 Cans Bush's Original Baked Beans
1 Walla Wall Onion chopped
3 ground garlic cloves
4 Tablespoons of mustard
3 Tablespoons of molasses
4 Tablespoons of brown sugar
Directions:
Cook bacon until it is mostly cooked, then drain most of the grease and put aside
Cook onion in remaining bacon grease
Combine onions and bacon, then add garlic, cook for a few more minutes
Add beans and get up to simmer temperature
Add mustard until your beans are nice and yellow
Add molasses until color darkens again
Add brown sugar until properly sweet
Simmer for a long time, occasionally stirring
Expert Tips:
Burning off most of the liquid gives you nice, hearty, sticky beans.
If the beans get too dry, you can always add beer!
Nutritional Information:
Calories: lots
Fat: lots
Fun: lots
*/
</pre>
<pre data-lang="html">Add Recipe Here</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
================================================
FILE: step1-01/lesson/README.md
================================================
# Step 1.1 - Introduction to HTML
[Demo](../demo/) | [Exercise](../exercise/)
## How the web works
A simple web page is rendered on the screen via the following steps.
> There are many sub-steps in this process, but these are the highlights.
1. You instruct the browser which web page you'd like to see
2. The browser looks up the site on a DNS server
- This is like a big phone book for website server addresses
3. 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`
- If asked for a "root"-level address, most servers will return `<root>/index.html`
4. The server sends the HTML file back to the browser
5. The browser starts to read the HTML file from the top to the bottom, stopping any time that additional resources are required:
- CSS stylesheets
- JavaScript files
- Fonts
- Images
6. Browser makes requests for additional resources
- Those resources might request even more files
7. Once the browser gets to the bottom of the page it can start working on rendering, and then display the page
## HTML demo
HTML tags are the basis of all web applications. They give the page structure and define the content within.
An HTML tag takes the following form:
```html
<tag class="foo" onclick="myFunction()" otherAttributes="values"> </tag>
```
HTML 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).
The [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).
## Sample webpage
```html
<!DOCTYPE html>
<html>
<head>
<title>Frontend Workshop: By Micah Godbolt and Ken Chau</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<header>
<h1>Frontend Workshop</h1>
<nav>
<ul>
<li><a href="./about.html">About This Workshop</a></li>
<li><a href="./participate.html">Take This Workshop</a></li>
<li><a href="./contribute.html">Contribute to This Workshop</a></li>
</ul>
</nav>
</header>
<main>
<h2>About This Workshop</h2>
<p>The first day provides an introduction to the fundamentals of the web: HTML, CSS and JavaScript.</p>
<img src="../../assets/todo_screenshot.jpg" alt="Picture of the Todo App we will build" />
<p>On the second day we'll dive into more advanced topics like TypeScript, testing, and state management.</p>
</main>
<footer>
<h2>Get More Information</h2>
<ul>
<li><a href="https://github.com/Microsoft/frontend-bootcamp"> Frontend Bootcamp </a></li>
<li><a href="https://twitter.com/micahgodbolt"> @micahgodbolt </a></li>
<li><a href="https://twitter.com/kenneth_chau"> @kenneth_chau</a></li>
</ul>
</footer>
</body>
</html>
```
================================================
FILE: step1-01/lesson/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" data-src="./README.md"></div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
================================================
FILE: step1-01/lesson/src/index.tsx
================================================
================================================
FILE: step1-02/demo/index.html
================================================
<html>
<body>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="html,result"
>
<pre data-lang="css">
/* Targeting the entire page */
//body {
font: 1.2em sans-serif;
}
/* Targeting an HTML tag */
//h1 {
/* Color name */
color: black;
/* 6-digit hex */
background: #ababab;
/* Margin: specified separately for each side */
margin-bottom: 15px;
margin-top: 15px;
/* Shorthand: Padding applies to all sides */
padding: 10px;
/* Border shorthand and 3-digit hex */
border: 1px solid #ddd;
}
/* Overriding inherited styles */
//span {
color: #004578;
}
/* Sibling selector */
//a + a {
/* Changing elements from inline to block */
display: block;
}
/* Targeting a class name */
//.tiles {
display: flex;
}
/* Descendant selector */
//.tiles img {
width: 100%;
}
/* Direct descendant selector */
//.tiles > div {
/* rgb color */
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
/* Padding/margin shorthand. Goes clockwise from top.
10px - all
10px 20px - top/bottom left/right
10px 20px 15px - top left/right bottom
*/
padding: 10px 20px 15px;
margin: 10px 20px 10px 0;
border: 1px solid white;
}
/* Qualified selector */
//div.important-links {
background: #004578;
}
/* Style inheritance only works for unstyled elements */
//a {
color: white;
}
/* Hover pseudo-selector */
//a:hover {
color: #ccc;
}
/* Positional pseudo-selector */
//.tiles > div:last-child {
/* overrides margin-right but leaves other margins alone */
margin-right: 0;
}
/* ID selector */
//#contact-form {
display: flex;
flex-direction: column;
}
/* Attribute selector */
//input[type='submit'] {
margin-top: 10px;
}
</pre>
<pre data-lang="html">
<h1>This is my <span>Title</span></h1>
<div class="tiles">
<div class="important-links">
<h2>Important Links</h2>
<a href="#">We're Awesome</a>
<a href="#">Learn More</a>
<a href="#">Hire Us</a>
</div>
<div>
<h2>Our Logo</h2>
<img src="https://github.com/microsoft/frontend-bootcamp/blob/master/assets/fabric.jpg?raw=true" width="100" alt="fabric logo" />
</div>
<div>
<h2>Contact Us</h2>
<div id="contact-form">
<label>Email</label><input type="email" />
<input value="Submit" type="submit" />
</div>
</div>
</div>
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
================================================
FILE: step1-02/exercise/README.md
================================================
# Step 1.2 - Introduction to CSS (Exercise)
See 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.
================================================
FILE: step1-02/exercise/answers.css
================================================
/* 1. Text Color: Red */
h2 {
color: red;
}
/* 2. Color Green (hint: Sibling Selector) */
h2 + div {
color: green;
}
/* 3. Border Green*/
.myList li {
border: 1px solid green;
}
/* 4. Background Green */
.myClass {
background: green;
}
/* 5. Background Green & Color White (Hint Qualified Selector) */
.myClass.otherClass {
color: white;
}
/* 6. Background Yellow */
#myId {
background: yellow;
}
/* Bonus: Border Pink*/
section > div:last-child {
border: 1px solid pink;
}
================================================
FILE: step1-02/exercise/index.html
================================================
<html>
<body>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="html,result"
>
<pre data-lang="css">
/* 1. */
/* 2. */
/* 3. */
/* 4. */
/* 5. */
/* 6. */
/* Bonus */
</pre>
<pre data-lang="html">
<!-- Without changing the HTML markup, apply the styles asked for in the markup. Do not apply styles that a tag doesn't ask for. -->
<section>
<h2>1. Text Color: Red</h2>
<div>2. Color Green (hint: Sibling Selector)</div>
<main>
<ul class="myList">
<li>
3. Border Green
</li>
</ul>
<div class="myClass">4. Background Green</div>
<div class="myClass otherClass">
5. Background Green & Color White
(Hint Qualified Selector)
</div>
<div id="myId" class="otherClass">6. Background Yellow</div>
</main>
<ul>
<li>
Don't Style Me
</li>
</ul>
<div>Bonus: Border Pink</div>
</section>
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
================================================
FILE: step1-02/lesson/README.md
================================================
# Step 1.2 - Introduction to CSS (Demo)
[Demo](../demo/) | [Exercise](../exercise/)
## CSS properties
Now 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:
- Typography
- Colors
- Appearance (corners, borders, decorations)
- Layout
- Position
- Display format: inline vs block
- Animations
- and [many more](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
CSS styles are always written in `property: value` pairs (like `background: blue;`) and terminated with a semicolon.
## Applying CSS to an HTML file
CSS can be applied to HTML tags in three different ways.
1. Inline using an HTML tag's `style` attribute
- `<div style="background: blue; color: white;">Hello </div>`
2. Via a `<style>` tag in the HTML page
3. Through an external CSS file
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
## Targeting specific elements
Inline 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**.
CSS rulesets take on the following form:
```css
selector1,
selector2 {
property1: value1;
property2: value2;
}
```
Here's a more detailed view from [Chris Eppstein](https://twitter.com/chriseppstein/status/1100115119437111296):
<img src="https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/assets/css-syntax.png"/>
A 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.
Bonus: Check out the [Vocabs project](http://apps.workflower.fi/vocabs/css/en)
================================================
FILE: step1-02/lesson/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" data-src="./README.md"></div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
================================================
FILE: step1-02/lesson/src/index.tsx
================================================
================================================
FILE: step1-03/demo/index.html
================================================
<html>
<body>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="js,result"
>
<pre data-lang="css">
body {
font: 1.2em sans-serif;
}
.tiles > div {
background: rgb(10, 10, 10);
color: white;
flex-basis: 100%;
padding: 10px 20px 15px;
margin: 10px 20px 10px 0;
border: 1px solid white;
}
#contact-form {
display: flex;
flex-direction: column;
}
input[type='submit'] {
align-self: flex-start;
margin-top: 10px;
}
</pre>
<pre data-lang="html">
<div class="tiles">
<div>
<h2>Contact Us</h2>
<div id="contact-form">
<label for="email">Email</label><input id="email" type="email"/>
<input class="submit" value="Submit" type="submit" />
</div>
</div>
</div>
</pre>
<pre data-lang="js">
// Count the number of 'a' characters in the email form.
// Update button to reflect that number.
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
================================================
FILE: step1-03/exercise/README.md
================================================
# Step 1.3 - Introduction to JavaScript (Exercise)
See 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.
================================================
FILE: step1-03/exercise/answer.js
================================================
function getFavs() {
let favList = [];
const inputs = document.querySelectorAll('input');
for (const input of inputs) {
if (input.checked === true) {
favList.push(input.parentNode.textContent);
}
}
document.querySelector('.favorites').textContent = favList.join(' ');
}
let button = document.querySelector('button');
button.addEventListener('click', getFavs);
================================================
FILE: step1-03/exercise/index.html
================================================
<html>
<body>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="js,result"
>
<pre data-lang="css">
label,
button {
display: block;
margin-bottom: 10px;
}
</pre>
<pre data-lang="html">
<label><input type="checkbox" />Ice cream</label>
<label><input type="checkbox" />Pizza</label>
<label><input type="checkbox" />Tacos</label>
<label><input type="checkbox" />Meatloaf</label>
<label><input type="checkbox" />Brocolli</label>
<button>Display Your Favorites</button>
<div class="favorites"></div>
</pre>
<pre data-lang="js">
/*
1. Create a function named `getFavs`. Inside, run:
alert('clicked')
2. Create a variable `button` and set it to a reference to our button using:
document.querySelector('button')
3. Add a click event listener to the button that calls `getFavs`.
Click the button and make sure the alert is displayed.
4. Replace the `alert` call with a new `favList` variable set to an empty array: []
5. Create a const variable `inputs` set to all of the inputs on the page.
`querySelectorAll` will help here.
6. Iterate over all of the inputs using:
for (const input of inputs) {}
7. In each iteration, use an `if` statement to check if `input.checked` is equal to true
8. If the above tests passes, push the `input.parentNode.textContent` into the `favList`
array by passing the text as a parameter to `favList.push()`
- `push` is a built-in array method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
9. Outside of the for loop, use `document.querySelector('.favorites')` to target the
div at the bottom of the page. Set the div's `textContent` to `favList.join(' ')`.
This will join each of the foods together into a string separated by a space.
*/
</pre>
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
================================================
FILE: step1-03/lesson/README.md
================================================
# Step 1.3 - Introduction to JavaScript (Demo)
It'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.
In 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:
```html
<div id="contact-form">
<label for="email">Email</label><input id="email" type="email" />
<input class="submit" value="Submit" type="submit" />
</div>
```
By the end of the demo we'll have covered the following:
- Variables
- Events
- Functions
- Conditionals
- Loops
- Interacting with the DOM (Document Object Model)
## Introduction to variables
We 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:
- **boolean**: `true`, `false`
- **number**: `1`, `3.14`
- **string**: `'single quotes'`, `"double quotes"`, or `` `backticks` ``
- **array**: `[ 1, 2, 3, 'hello', 'world']`
- **object**: `{ foo: 3, bar: 'hello' }`
- **function**: `function(foo) { return foo + 1 }` or `(foo) => { return foo + 1}`
- **null**
- **undefined**
> [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.
### Variable examples
```js
const myBoolean = true;
const myNumber = 5;
const myString = `Using backticks I can reuse other variables ${myNumber}`;
const myArray = [1, 'cat', false, myString];
const myObject = { key1: 'value1', anotherKey: myArray, lastKey: aFunction };
const myFunction = (myNumberParam) => {
console.log(myNumber + myNumberParam);
};
```
> 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.
### Adding variables
Let'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.
```js
const match = 'a';
```
## Functions
Functions 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.
In 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.
```js
function displayMatches() {
console.log('Clicked');
}
```
## Events
Functions 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.
To 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.
### Add event listeners
To attach a function to an event, we use an [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventListener) like this:
```js
window.addEventListener('load', function () {
console.log('loaded');
});
window.addEventListener('click', function () {
console.log('click');
});
```
> [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) is a reference to the entire window containing the HTML document.
### Global event handlers
If 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:
```js
window.onload = function () {
console.log('loaded!');
};
window.onclick = function () {
console.log('clicked!');
};
```
> Note that only a single function can be assigned to `onload`, but many event listeners can be added for `load`.
In 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.
```js
const button = document.querySelector('.submit');
button.onclick = displayMatches;
```
You can also combine the two statements together like this:
```js
document.querySelector('.submit').onclick = displayMatches;
```
Reload the page and click the button to see your function in action!
## Iteration
Next 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.
```js
function displayMatches() {
const text = 'abcda';
for (let letter of text) {
console.log(letter);
}
}
```
## Conditionals
Next 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 `===`.
```js
function displayMatches() {
const text = 'abcda';
let matches = 0;
for (let letter of text) {
if (letter === match) {
matches++;
}
}
console.log(matches);
}
```
> 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.)
## Interacting with the DOM
Now 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.
First 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.
```js
function displayMatches() {
const email = document.getElementById('email');
console.log(email);
// ...
}
```
Since 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`.
```js
function displayMatches() {
const email = document.getElementById('email');
const text = email.value;
console.log(text);
}
```
### Writing values back to the DOM
Now 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.
```js
function displayMatches() {
// ...
const submit = document.querySelector('.submit');
}
```
Now that we have a reference to the submit input, we can set its value contain to the number of matches.
```js
function displayMatches() {
// ...
const submit = document.querySelector('.submit');
submit.value = matches + ' matches';
}
```
We could also have done this in a single line as follows:
```js
function displayMatches() {
// ...
document.querySelector('.submit').value = matches + ' matches';
}
```
================================================
FILE: step1-03/lesson/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" data-src="./README.md"></div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
================================================
FILE: step1-03/lesson/src/index.tsx
================================================
================================================
FILE: step1-04/demo/index.html
================================================
<html>
<body>
<div
class="codepen"
data-theme-id="36294"
data-prefill
data-editable="true"
data-height="100%"
data-theme-id="1"
data-default-tab="js,result"
>
<pre data-lang="html">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id='app'></div>
</pre>
<pre data-lang="css">
.foo {
background: green;
}
</pre>
<pre data-lang="typescript">
ReactDOM.render(
<div>Hello World</div>,
document.getElementById('app')
);
</pre>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</html>
================================================
FILE: step1-04/final/README.md
================================================
# Step 1.4 - Introduction to React (Final)
Take a look at the contents of the `src` folder to see final versions of the `App`, `Button`, and `Counter` components from this lesson.
================================================
FILE: step1-04/final/index.html
================================================
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>
================================================
FILE: step1-04/final/src/App.tsx
================================================
import React from 'react';
import { Counter } from './components/Counter';
export const App = props => {
return (
<div>
<Counter text="chickens" />
<Counter text="ducks" />
</div>
);
};
================================================
FILE: step1-04/final/src/components/Button.css
================================================
.Button {
display: block;
background: #0078d4;
color: white;
padding: 5px 10px;
outline: none;
border: none;
}
.Button:hover {
background: #005a9e;
}
.Button:active {
background: #004578;
}
================================================
FILE: step1-04/final/src/components/Button.tsx
================================================
import React from 'react';
import './Button.css';
export const Button = props => {
return (
<button className="Button" onClick={props.onClick}>
{props.children}
</button>
);
};
================================================
FILE: step1-04/final/src/components/Counter.tsx
================================================
import React from 'react';
import { Button } from './Button';
export const Counter = props => {
const [clicks, setClicks] = React.useState(0);
const handleClick = () => setClicks(clicks + 1);
const { text } = props;
return (
<div>
{text}: {clicks}
<Button onClick={handleClick}>Click</Button>
</div>
);
}
================================================
FILE: step1-04/final/src/index.tsx
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
ReactDOM.render(<App />, document.getElementById('app'));
================================================
FILE: step1-04/lesson/README.md
================================================
# Step 1.4 - Introduction to React (Demo)
In this demo we'll be creating a simple counter that will display a count and increment on click.
Let's start this demo in [CodePen](https://codepen.io/micahgodbolt/pen/wOWeVb?editors=0010).
## React Hello World
```js
ReactDOM.render(<p>Hello World</p>, document.getElementById('app'));
```
Calling `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.
The 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:
- 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">`
- We can use custom HTML tags corresponding to the React components we create: `<div><MyControl>hi</MyControl></div>`
- Controls can be self-closing: `<MyControl text='hi' />`
- You can use JavaScript inside of JSX!
## Writing a React component
A React component is a function that returns a portion of your application. This can include HTML markup, CSS styles, and JavaScript driven functionality.
```jsx
const App = (props) => {
return <p>Hello World</p>;
};
```
Moving our "Hello World" markup into our App's `render` function, we can now update the `ReactDOM.render()` call to look like this:
```jsx
ReactDOM.render(<App />, document.getElementById('app'));
```
### Props
A component can take in additional props using the same syntax as HTML attributes like `id` or `href`.
```jsx
<App text="Hello World" />
```
The `text` prop can be accessed inside your component via `props.text` in a component.
```jsx
const App = (props) => {
return <p>{props.text}</p>;
};
```
`props` allow your component to be more reusable, since you can create multiple instances of the same component with different props.
```jsx
ReactDOM.render(
<div>
<App text="Hello World" />
<App text="How are you doing?" />
</div>,
document.getElementById('app')
);
```
> Note that a render function can only return a single element, so our two `App` components need to be wrapped in a `div`.
```jsx
const App = (props) => {
return <p>{props.text ? props.text : 'oops!'}</p>;
};
```
### Destructuring props
Writing `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.
```jsx
const App = (props) => {
const text = props.text;
return <p>{text ? text : 'you missed something'}</p>;
};
```
This works fine for a single prop, but as your component starts to become more complex:
```jsx
<App
open={false}
count={5}
text="Hello World"
items={['cat', 'dog', 'bird']}
config={{
start: 1,
end: 10,
autoStart: true,
}}
/>
```
> Note that all non-string values are passed through as JavaScript by wrapping them in `{}`.
Your code starts to look like this:
```jsx
const open = props.open;
const text = props.text;
const count = props.count;
const items = props.items;
```
A 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).
Destructuring allows you to pull individual pieces of information out of an object in a single statement.
```jsx
const { open, text, count, items } = props;
```
So while this might be overkill right now, it makes it easier to add props down the road.
### Cleanup
Before 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.
Next we'll be creating a `Counter` component. We'll add that to our App now, and then start to write the control.
```jsx
const App = (props) => {
return <Counter text="chickens" />;
};
ReactDOM.render(<App />, document.getElementById('app'));
```
> 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.
## Writing a stateful Counter component
The 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.
### Adding state
State 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.
```js
const Counter = (props) => {
const [clicks, setClicks] = React.useState(0);
};
```
- The component takes in some`props`.
- `clicks` is a stateful value that will be updated each time `setClicks` is called with a new value
### Rendering our Counter
For 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.
```jsx
const { text } = props;
return (
<div>
{text}: {clicks}
<button>Click</button>
</div>
);
```
### Writing our button click handler
Our next step is to wire up the button to increment the `clicks` in our component state.
This function will increment the clicks value by 1.
```jsx
const handleClick = () => {
setClicks(clicks + 1);
};
```
Now that we have a function to increment our count, all that's left is to connect it to our button.
```jsx
<button onClick={handleClick}>Click</button>
```
> Also note that each `Counter` maintains its own state! You can modify the state inside of one counter without affecting the others.
## Try it all out!
Add 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.
## Moving this into our codebase
To 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.
### Module exports and imports
Open up `step1-04/final/components/Counter.tsx` and look at the `Counter` component.
```tsx
export const Counter = (props) => {
// ...
};
```
This file exports the Counter component as a **named export**. This means when we import it we do the following:
```tsx
import { Counter } from './components/Counter';
```
> Note the `{}` wrapped around the import value. This is actually an example of destructuring.
#### Default exports
We typically use named exports, but it's also possible export a default value like this:
```tsx
export default const Counter = (props) =>{
// ...
}
```
When we import the component we can call it whatever we want:
```tsx
import SomeCounterComponent from './components/Counter';
```
## Writing a Button component
Buttons 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.
```jsx
import React from 'react';
import './Button.css';
export const Button = (props) => {
return (
<button className="Button" onClick={props.onClick}>
{props.children}
</button>
);
};
```
================================================
FILE: step1-04/lesson/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" data-src="./README.md"></div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
================================================
FILE: step1-04/lesson/src/index.tsx
================================================
================================================
FILE: step1-05/TodoApp.html
================================================
<!DOCTYPE html>
<html>
<body>
<header>
<h1>todos <small>(1.5)</small></h1>
<div class="addTodo">
<input class="textfield" placeholder="add todo" />
<button class="submit">Add</button>
</div>
<nav class="filter">
<button class="selected">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
<ul class="todos">
<li class="todo">
<label><input type="checkbox" /> Todo 1</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 2</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 3</label>
</li>
<li class="todo">
<label><input type="checkbox" /> Todo 4</label>
</li>
</ul>
<footer>
<span>4 items left</span>
<button class="submit">Clear Completed</button>
</footer>
</body>
</html>
================================================
FILE: step1-05/demo/README.md
================================================
# Step 1.5 - Building a static page in React (Demo)
To 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.
- TodoHeader
- TodoList
- TodoListItem
- TodoFooter
You can find the HTML for our application in `step1-05/TodoApp.html`.
## TodoHeader
We'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.
> We'll talk about TypeScript soon, but for now, know that all valid JavaScript is valid TypeScript.
```jsx
import React from 'react';
export const TodoHeader = () => {
return (
<header>
<h1>todos</h1>
<div className="addTodo">
<input className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className="completed">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
);
};
```
> Note that since this is React, we had to change `class` to `className`, but nothing else changes.
## TodoListItem
Any 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.
```jsx
import React from 'react';
export const TodolistItem = () => {
return (
<li className="todo">
<label>
<input type="checkbox" /> Todo 1
</label>
</li>
);
};
```
================================================
FILE: step1-05/demo/index.html
================================================
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>
================================================
FILE: step1-05/demo/src/App.tsx
================================================
import React from 'react';
export const TodoApp = () => {
return (
<div>
<p>Hello World</p>
</div>
);
}
================================================
FILE: step1-05/demo/src/index.tsx
================================================
import React from "react";
import ReactDOM from "react-dom";
import { TodoApp } from "./App";
ReactDOM.render(<TodoApp />, document.getElementById("app"));
================================================
FILE: step1-05/demo/src/style.css
================================================
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
================================================
FILE: step1-05/exercise/README.md
================================================
# Step 1.5 - Building a static page in React (Exercise)
From 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.
If 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.
## TodoFooter
1. Add a TodoFooter component in the `step1-05/exercise/src/components` folder.
2. 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`.
## TodoList
1. Add a TodoList component like you did with the footer.
2. Import TodoListItem and add four of them inside of the `<ul>` (we'll be using live data later)
3. 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]`
## App
1. Import both of these components into `App.tsx` and place their tags below the `TodoHeader`.
================================================
FILE: step1-05/exercise/index.html
================================================
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>
================================================
FILE: step1-05/exercise/src/App.tsx
================================================
import React from 'react';
import { TodoHeader } from './components/TodoHeader';
export const TodoApp = () => {
return (
<div>
<TodoHeader />
</div>
);
}
================================================
FILE: step1-05/exercise/src/components/TodoHeader.tsx
================================================
import React from 'react';
export const TodoHeader = () => {
return (
<header>
<h1>todos <small>(1.5 exercise)</small></h1>
<div className="addTodo">
<input className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className="selected">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
)
}
================================================
FILE: step1-05/exercise/src/components/TodoListItem.tsx
================================================
import React from "react";
export const TodoListItem = () => {
return (
<li className="todo">
<label>
<input type="checkbox" /> Todo 1
</label>
</li>
);
}
================================================
FILE: step1-05/exercise/src/index.tsx
================================================
import React from "react";
import ReactDOM from "react-dom";
import { TodoApp } from "./App";
ReactDOM.render(<TodoApp />, document.getElementById("app"));
================================================
FILE: step1-05/exercise/src/style.css
================================================
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
small {
font-size: 0.5em;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
================================================
FILE: step1-06/demo/README.md
================================================
# Step 1.6 - Creating a state-driven UI (Demo)
In 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.
[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?
[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.
- Is the state local to a single component?
- Is the state derived from another state?
- Is the state primarily in one component but shared with others?
- Is the state global?
## Adding state to TodoApp
Inside 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`.
```jsx
export const TodoApp = () => {
const [filter, setFilter] = React.useState<FilterTypes>('all');
const [todos, setTodos] = React.useState<Todos>([
{
id: '04',
label: 'Todo 4',
status: 'completed',
},
{
id: '03',
label: 'Todo 3',
status: 'active',
},
{
id: '02',
label: 'Todo 2',
status: 'active',
},
{
id: '01',
label: 'Todo 1',
status: 'active',
},
]);
```
## Passing state through to UI
Now we can pass `filter` and `todos` into our components.
```jsx
return (
<div>
<TodoHeader filter={filter} />
<TodoList todos={todos} filter={filter} />
<TodoFooter todos={todos} />
</div>
);
```
## State-driven TodoList
I'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.
React 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.
```jsx
return (
<ul className="todos">
{filteredTodos.map((todo) => (
<TodoListItem key={todo.id} {...todo} />
))}
</ul>
);
```
## State-driven and stateful TodoHeader
In `TodoHeader.tsx` we are going to both display the selected filter state, and track the text for a new todo.
### Conditional class names
In 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.
```jsx
<nav className="filter">
<button className={filter === 'all' ? 'selected' : ''}> all</button>
<button className={filter === 'active' ? 'selected' : ''}> active</button>
<button className={filter === 'completed' ? 'selected' : ''}> completed</button>
</nav>
```
> 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.
### Adding a controlled input
In React, form elements such as `<input>`, `<textarea>`, and `<select>` can be used as either **uncontrolled** or **controlled**.
An **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.
A **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.
> 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.
Let'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:
1. A state variable to hold the input's value:
```jsx
const [inputText, setInputText] = React.useState('');
```
2. A callback function to update that value:
```jsx
const onInput = (e) => {
setInputText(e.target.value);
};
```
With those two pieces in place, we can update our uncontrolled input to being controlled.
```jsx
<input value={inputText} onChange={onInput} className="textfield" placeholder="add todo" />
```
> If you have React Dev Tools installed, open them up and take a look at `labelInput` as we type in the input.
================================================
FILE: step1-06/demo/index.html
================================================
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>
================================================
FILE: step1-06/demo/src/TodoApp.tsx
================================================
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
export const TodoApp = () => {
return (
<div>
<TodoHeader />
<TodoList />
<TodoFooter />
</div>
);
}
================================================
FILE: step1-06/demo/src/components/TodoFooter.tsx
================================================
import React from 'react';
export const TodoFooter = (props: any) => {
// const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
return (
<footer>
<span>4 items left</span>
<button className="submit">Clear Completed</button>
</footer>
);
};
================================================
FILE: step1-06/demo/src/components/TodoHeader.tsx
================================================
import React from 'react';
export const TodoHeader = (props) => {
const [inputText, setInputText] = React.useState('')
const { filter } = props;
const handleChange = e => {
setInputText(e.target.value);
};
return (
<header>
<h1>todos <small>(1.6 demo)</small></h1>
<div className="addTodo">
<input className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className="selected">all</button>
<button>active</button>
<button>completed</button>
</nav>
</header>
);
}
================================================
FILE: step1-06/demo/src/components/TodoList.tsx
================================================
import React from 'react';
import { TodoListItem } from './TodoListItem';
export const TodoList = (props) => {
const { filter, todos = [] } = props;
const filteredTodos = todos.filter(todo => {
return filter === 'all'
|| (filter === 'completed' && todo.status === 'completed')
|| (filter === 'active' && todo.status === 'active');
});
return (
<ul className="todos">
{['01', '02', '03', '04'].map((todo) => <TodoListItem />)}
</ul>
);
}
================================================
FILE: step1-06/demo/src/components/TodoListItem.tsx
================================================
import React from "react";
export const TodoListItem = () => {
return (
<li className="todo">
<label>
<input type="checkbox" /> Todo 1
</label>
</li>
);
}
================================================
FILE: step1-06/demo/src/index.tsx
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { TodoApp } from './TodoApp';
ReactDOM.render(<TodoApp />, document.getElementById('app'));
================================================
FILE: step1-06/demo/src/style.css
================================================
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
small {
font-size: 0.5em;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
================================================
FILE: step1-06/exercise/README.md
================================================
# Step 1.6 - Creating a state-driven UI (Exercise)
If 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.
### TodoFooter
1. Use the provided `itemCount` value to display the current number of items left.
2. 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`.
### TodoListItem
1. Pull in `label` and `status` from props using [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring)
2. Set the `input` text to `label` and the `checked` prop to `true` if `status === 'completed`
> Note that this is only half the work we need to do to make these controlled inputs work. What is the other half?
================================================
FILE: step1-06/exercise/index.html
================================================
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>
================================================
FILE: step1-06/exercise/src/TodoApp.tsx
================================================
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
const defaultTodos = [
{
id: '04',
label: 'Todo 4',
status: 'completed',
},
{
id: '03',
label: 'Todo 3',
status: 'active',
},
{
id: '02',
label: 'Todo 2',
status: 'active',
},
{
id: '01',
label: 'Todo 1',
status: 'active',
},
];
export const TodoApp = () => {
const [filter, setFilter] = React.useState('all');
const [todos, setTodos] = React.useState(defaultTodos);
return (
<div>
<TodoHeader filter={filter} />
<TodoList todos={todos} filter={filter} />
<TodoFooter todos={todos} />
</div>
);
}
================================================
FILE: step1-06/exercise/src/components/TodoFooter.tsx
================================================
import React from 'react';
export const TodoFooter = (props) => {
const itemCount = props.todos.filter((todo) => todo.status === 'active').length;
return (
<footer>
<span>4 items left</span>
<button className="submit">Clear Completed</button>
</footer>
);
};
================================================
FILE: step1-06/exercise/src/components/TodoHeader.tsx
================================================
import React from 'react';
export const TodoHeader = (props) => {
const [inputText, setInputText] = React.useState<string>('');
const { filter } = props;
const onInput = e => {
setInputText(e.target.value);
};
return (
<header>
<h1>todos <small>(1.6 exercise)</small></h1>
<div className="addTodo">
<input value={inputText} onChange={onInput} className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter === 'all' ? 'selected' : ''}> all</button>
<button className={filter === 'active' ? 'selected' : ''}>active</button>
<button className={filter === 'completed' ? 'selected' : ''}>completed</button>
</nav>
</header>
);
}
================================================
FILE: step1-06/exercise/src/components/TodoList.tsx
================================================
import React from 'react';
import { TodoListItem } from './TodoListItem';
export const TodoList = (props) => {
const { filter, todos } = props;
const filteredTodos = todos.filter((todo) => {
if (todo.status === 'cleared') return false;
return filter === 'all' ||
(filter === 'completed' && todo.status === 'completed') ||
(filter === 'active' && todo.status === 'active');
});
return (
<ul className="todos">
{filteredTodos.map((todo) => (
<TodoListItem key={todo.id} {...todo} />
))}
</ul>
);
}
================================================
FILE: step1-06/exercise/src/components/TodoListItem.tsx
================================================
import React from 'react';
export const TodoListItem = (props) => {
return (
<li className="todo">
<label>
<input type="checkbox" /> Todo 1
</label>
</li>
);
}
================================================
FILE: step1-06/exercise/src/index.tsx
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { TodoApp } from './TodoApp';
ReactDOM.render(<TodoApp />, document.getElementById('app'));
================================================
FILE: step1-06/exercise/src/style.css
================================================
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
small {
font-size: 0.5em;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
================================================
FILE: step1-06/index.html
================================================
<html>
<head>
<link rel="stylesheet" href="../assets/shared.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
</head>
<body class="ms-Fabric">
<div class="Container">
<ul class="Tiles">
<li class="Tile"><a href="./demo/index.html" class="Tile-link">Demo Start</a></li>
<li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
</ul>
</div>
</body>
</html>
================================================
FILE: step1-07/demo/README.md
================================================
# Step 1.7 - Types and creating a UI-driven state (Demo)
Now 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.
This 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.
## Intro to TypeScript
Taking 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.
As 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.
For these two reasons, the industry is shifting to writing applications that are strongly typed, and many are using TypeScript to accomplish that.
As [TypeScript's website](https://www.typescriptlang.org/) states:
> TypeScript is a superset of JavaScript that compiles to plain JavaScript.
If 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`.
Let's dive in and see how TypeScript can help clarify our component props and guard against future regressions.
# Demo
Let'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.
## Writing TodoListProps
Looking 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.
```ts
interface TodoListProps {
filter: any;
toggleCompleted: any;
todos: any;
}
```
> 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.
With that interface written, we'll add it to our component.
```ts
export const TodoList = (props: TodoListProps) => {
```
Now 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.
## Adding type safety
So 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.
### Filter Type
We know that `filter` shouldn't be an object, array or function, so we can specify it should always be a string like this:
```ts
interface TodoListProps {
filter: string;
toggleCompleted: any;
todos: any;
}
```
But 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):
```ts
interface TodoListProps {
filter: 'all' | 'active' | 'completed';
toggleCompleted: any;
todos: any;
}
```
Now 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.
### Complete Type
The `toggleComplete` prop isn't data, but a function.
```ts
interface TodoListProps {
filter: 'all' | 'active' | 'completed';
toggleCompleted: (id: string) => void;
todos: any;
}
```
For 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.
> 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`).
## Todos Type
The `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;
```ts
interface TodoListProps {
filter: 'all' | 'active' | 'completed';
toggleCompleted: (id: string) => void;
todos: [
{
id: string;
label: string;
status: string;
}
];
}
```
Now 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.
## Sharing types
Most 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.
```ts
import { FilterTypes, Todos, ToggleCompleted } from '../TodoApp.types';
interface TodoListProps {
filter: FilterTypes;
toggleCompleted: ToggleCompleted;
todos: Todos;
}
```
## Writing TodoListItemProps
Jumping 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.
```ts
import { ToggleCompleted } from '../TodoApp.types';
interface TodoListItemProps extends TodoItem {
toggleCompleted: ToggleCompleted;
}
```
The end result of this is an interface with all four properties: `id`, `toggleCompleted`, `status` and `label`.
Next we can pull in the remaining props in the render function:
```jsx
const { label, status, id, toggleCompleted } = props;
```
And 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.
> A [callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function) is a function passed into a component as a prop.
```jsx
const handleCheck = () => toggleCompleted(id);
...
<input type="checkbox" checked={status === 'completed'} onChange={handleCheck} />
```
## Passing props down
Now 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).
```jsx
<TodoListItem key={todo.id} {...todo} toggleCompleted={toggleCompleted} />
```
================================================
FILE: step1-07/demo/index.html
================================================
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>
================================================
FILE: step1-07/demo/src/TodoApp.tsx
================================================
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
import { Todo, Todos, FilterTypes } from './TodoApp.types';
const defaultTodos: Todos = [
{
id: '04',
label: 'Todo 4',
status: 'completed',
},
{
id: '03',
label: 'Todo 3',
status: 'active',
},
{
id: '02',
label: 'Todo 2',
status: 'active',
},
{
id: '01',
label: 'Todo 1',
status: 'active',
},
];
export const TodoApp = () => {
const [filter, setFilter] = React.useState<FilterTypes>('all');
const [todos, setTodos] = React.useState<Todos>(defaultTodos);
const addTodo = (label: string): void => {
const getId = () => Date.now().toString();
const newTodo: Todo = {
id: getId(),
label: label,
status: 'active',
};
setTodos([...todos, newTodo]);
};
const toggleCompleted = (id: string) => {
const newTodos = todos.map((todo): Todo => {
if (todo.id === id) {
return { ...todo, status: todo.status === 'active' ? 'completed' : 'active' };
} else {
return todo;
}
});
setTodos(newTodos);
};
const clearCompleted = () => {
const updatedTodos = todos.map((todo): Todo => {
if (todo.status === 'completed') {
return { ...todo, status: 'cleared' };
} else {
return todo;
}
});
setTodos(updatedTodos);
};
const changeFilter = (filter: FilterTypes) => {
setFilter(filter);
};
return (
<div>
<TodoHeader filter={filter} changeFilter={changeFilter} addTodo={addTodo} />
<TodoList todos={todos} filter={filter} toggleCompleted={toggleCompleted} />
<TodoFooter todos={todos} clearCompleted={clearCompleted} />
</div>
);
}
================================================
FILE: step1-07/demo/src/TodoApp.types.ts
================================================
export type FilterTypes = 'all' | 'active' | 'completed';
export type TodoType = 'active' | 'completed' | 'cleared';
export interface Todo {
id: string;
label: string;
status: TodoType;
}
export type Todos = Todo[];
export type AddTodo = (label: string) => void;
export type ToggleCompleted = (id: string) => void;
export type ClearCompleted = () => void;
export type ChangeFilter = (filter: FilterTypes) => void;
================================================
FILE: step1-07/demo/src/components/TodoFooter.tsx
================================================
import React from 'react';
export const TodoFooter = (props) => {
const { clearCompleted, todos } = props;
const itemCount = todos.filter((todo) => todo.status === 'active').length;
return (
<footer>
<span>
{itemCount} item{itemCount === 1 ? '' : 's'} left
</span>
<button className="submit">
Clear Completed
</button>
</footer>
);
};
================================================
FILE: step1-07/demo/src/components/TodoHeader.tsx
================================================
import React from 'react';
export const TodoHeader = (props) => {
const [inputText, setInputText] = React.useState<string>('');
const { filter, addTodo, changeFilter } = props;
const onInput = (e) => {
setInputText(e.target.value);
};
const onSubmit = () => {
if (inputText.length > 0) addTodo(inputText);
setInputText('');
};
const onFilter = (e) => {
changeFilter(e.currentTarget.textContent)
};
return (
<header>
<h1>todos <small>(1.6 exercise)</small></h1>
<div className="addTodo">
<input value={inputText} onChange={onInput} className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter === 'all' ? 'selected' : ''}> all</button>
<button className={filter === 'active' ? 'selected' : ''}>active</button>
<button className={filter === 'completed' ? 'selected' : ''}>completed</button>
</nav>
</header>
);
}
================================================
FILE: step1-07/demo/src/components/TodoList.tsx
================================================
import React from 'react';
import { TodoListItem } from './TodoListItem';
export const TodoList = (props) => {
const { filter, todos } = props;
const filteredTodos = todos.filter((todo) => {
if (todo.status === 'cleared') return false;
return filter === 'all' ||
(filter === 'completed' && todo.status === 'completed') ||
(filter === 'active' && todo.status === 'active');
});
return (
<ul className="todos">
{filteredTodos.map((todo) => (
<TodoListItem key={todo.id} {...todo} />
))}
</ul>
);
}
================================================
FILE: step1-07/demo/src/components/TodoListItem.tsx
================================================
import React from 'react';
export const TodoListItem = (props) => {
const { label, status, id } = props;
return (
<li className="todo">
<label>
<input type="checkbox" checked={status === 'completed'} /> {label}
</label>
</li>
);
};
================================================
FILE: step1-07/demo/src/index.tsx
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { TodoApp } from './TodoApp';
ReactDOM.render(<TodoApp />, document.getElementById('app'));
================================================
FILE: step1-07/demo/src/style.css
================================================
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
small {
font-size: 0.5em;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
================================================
FILE: step1-07/exercise/README.md
================================================
# Step 1.7 - Types and creating a UI-driven state (Exercise)
If 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.
## TodoFooter
1. 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)`
2. Write an `handleClick` function that calls `props.clear`.
3. Assign `handleClick` to the button's `onClick` prop.
4. Test out this functionality. Check a few todos complete and click the `Clear Completed` button.
## TodoHeader
1. Open TodoHeader then write and use the `TodoHeaderProps` which will include `addTodo`, `changeFilter` and `filter`.
2. Add `onFilter` to each of the filter buttons
- Note that we can't add new parameters to onClick, but we can pull information from the event target!
4. Call `onSubmit` from the submit button
5. Check out this new functionality! We can now add and filter todos!
================================================
FILE: step1-07/exercise/index.html
================================================
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>
================================================
FILE: step1-07/exercise/src/TodoApp.tsx
================================================
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
import { Todo, Todos, FilterTypes } from './TodoApp.types';
const defaultTodos: Todos = [
{
id: '04',
label: 'Todo 4',
status: 'completed',
},
{
id: '03',
label: 'Todo 3',
status: 'active',
},
{
id: '02',
label: 'Todo 2',
status: 'active',
},
{
id: '01',
label: 'Todo 1',
status: 'active',
},
];
export const TodoApp = () => {
const [filter, setFilter] = React.useState('all');
const [todos, setTodos] = React.useState<Todos>(defaultTodos);
const addTodo = (label: string): void => {
const getId = () => Date.now().toString();
const newTodo: Todo = {
id: getId(),
label: label,
status: 'active',
};
setTodos([...todos, newTodo]);
};
const toggleCompleted = (id: string) => {
const newTodos = todos.map((todo): Todo => {
if (todo.id === id) {
return { ...todo, status: todo.status === 'active' ? 'completed' : 'active' };
} else {
return todo;
}
});
setTodos(newTodos);
};
const clearCompleted = () => {
const updatedTodos = todos.map((todo): Todo => {
if (todo.status === 'completed') {
return { ...todo, status: 'cleared' };
} else {
return todo;
}
});
setTodos(updatedTodos);
};
const changeFilter = (filter: FilterTypes) => {
setFilter(filter);
};
return (
<div>
<TodoHeader filter={filter} changeFilter={changeFilter} addTodo={addTodo} />
<TodoList todos={todos} filter={'all'} toggleCompleted={toggleCompleted} />
<TodoFooter todos={todos} clearCompleted={clearCompleted} />
</div>
);
}
================================================
FILE: step1-07/exercise/src/TodoApp.types.ts
================================================
export type FilterTypes = 'all' | 'active' | 'completed';
export type TodoType = 'active' | 'completed' | 'cleared';
export interface Todo {
id: string;
label: string;
status: TodoType;
}
export type Todos = Todo[];
export type AddTodo = (label: string) => void;
export type ToggleCompleted = (id: string) => void;
export type ClearCompleted = () => void;
export type ChangeFilter = (filter: FilterTypes) => void;
================================================
FILE: step1-07/exercise/src/components/TodoFooter.tsx
================================================
import React from 'react';
export const TodoFooter = (props) => {
const { clearCompleted, todos } = props;
const itemCount = todos.filter((todo) => todo.status === 'active').length;
return (
<footer>
<span>
{itemCount} item{itemCount === 1 ? '' : 's'} left
</span>
<button className="submit">
Clear Completed
</button>
</footer>
);
};
================================================
FILE: step1-07/exercise/src/components/TodoHeader.tsx
================================================
import React from 'react';
export const TodoHeader = (props) => {
const [inputText, setInputText] = React.useState<string>('');
const { filter, addTodo, changeFilter } = props;
const onInput = (e) => {
setInputText(e.target.value);
};
const onSubmit = () => {
if (inputText.length > 0) addTodo(inputText);
setInputText('');
};
const onFilter = (e) => {
changeFilter(e.currentTarget.textContent)
};
return (
<header>
<h1>todos <small>(1.6 exercise)</small></h1>
<div className="addTodo">
<input value={inputText} onChange={onInput} className="textfield" placeholder="add todo" />
<button className="submit">Add</button>
</div>
<nav className="filter">
<button className={filter === 'all' ? 'selected' : ''}> all</button>
<button className={filter === 'active' ? 'selected' : ''}>active</button>
<button className={filter === 'completed' ? 'selected' : ''}>completed</button>
</nav>
</header>
);
}
================================================
FILE: step1-07/exercise/src/components/TodoList.tsx
================================================
import React from 'react';
import { TodoListItem } from './TodoListItem';
import { FilterTypes, Todos } from '../TodoApp.types';
interface TodoListProps {
filter: FilterTypes;
toggleCompleted: (id: string) => void;
todos: Todos;
}
export const TodoList = (props: TodoListProps) => {
const { filter, todos, toggleCompleted } = props;
const filteredTodos = todos.filter((todo) => {
if (todo.status === 'cleared') return false;
return filter === 'all' ||
(filter === 'completed' && todo.status === 'completed') ||
(filter === 'active' && todo.status === 'active');
});
return (
<ul className="todos">
{filteredTodos.map((todo) => (
<TodoListItem key={todo.id} {...todo} toggleCompleted={toggleCompleted} />
))}
</ul>
);
}
================================================
FILE: step1-07/exercise/src/components/TodoListItem.tsx
================================================
import React from 'react';
import { Todo, ToggleCompleted } from '../TodoApp.types';
interface TodoListItemProps extends Todo {
toggleCompleted: ToggleCompleted;
}
export const TodoListItem = (props: TodoListItemProps) => {
const { label, status, id, toggleCompleted } = props;
const handleCheck = () => toggleCompleted(id);
return (
<li className="todo">
<label>
<input type="checkbox" checked={status === 'completed'} onChange={handleCheck} /> {label}
</label>
</li>
);
};
================================================
FILE: step1-07/exercise/src/index.tsx
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { TodoApp } from './TodoApp';
ReactDOM.render(<TodoApp />, document.getElementById('app'));
================================================
FILE: step1-07/exercise/src/style.css
================================================
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
small {
font-size: 0.5em;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
================================================
FILE: step1-07/final/index.html
================================================
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="./src/style.css" />
<body>
<div id="app"></div>
</body>
</html>
================================================
FILE: step1-07/final/src/TodoApp.tsx
================================================
import React from 'react';
import { TodoFooter } from './components/TodoFooter';
import { TodoHeader } from './components/TodoHeader';
import { TodoList } from './components/TodoList';
import { Todo, Todos, FilterTypes, AppContextProps } from './TodoApp.types';
export const AppContext = React.createContext<AppContextProps>(undefined);
const defaultTodos: Todos = [
{
id: '04',
label: 'Todo 4',
status: 'completed',
},
{
id: '03',
label: 'Todo 3',
status: 'active',
},
{
id: '02',
label: 'Todo 2',
status: 'active',
},
{
id: '01',
label: 'Todo 1',
status: 'active',
},
];
export const TodoApp = () => {
const [filter, setFilter] = React.useState<FilterTypes>('all');
const [todos, setTodos] = React.useState<Todos>(defaultTodos);
// TODO Convert to useReducer
const addTodo = (label: string): void => {
const getId = () => Date.now().toString();
const newTodo: Todo = {
id: getId(),
label: label,
status: 'active',
};
setTodos([...todos, newTodo]);
};
const toggleCompleted = (id: string) => {
const newTodos = todos.map((todo): Todo => {
if (todo.id === id) {
return { ...todo, status: todo.status === 'active' ? 'completed' : 'active' };
} else {
return todo;
}
});
setTodos(newTodos);
};
const clearCompleted = () => {
const updatedTodos = todos.map((todo): Todo => {
if (todo.status === 'completed') {
return { ...todo, status: 'cleared' };
} else {
return todo;
}
});
setTodos(updatedTodos);
};
const changeFilter = (filter: FilterTypes) => {
setFilter(filter);
};
const getFilter = () => {
return filter;
}
const getTodos = () => {
return todos;
}
return (
<AppContext.Provider value={{
addTodo,
toggleCompleted,
clearCompleted,
changeFilter,
getFilter,
getTodos
}}>
<TodoHeader />
<TodoList />
<TodoFooter />
</AppContext.Provider>
);
};
================================================
FILE: step1-07/final/src/TodoApp.types.ts
================================================
export type FilterTypes = 'all' | 'active' | 'completed';
export type TodoType = 'active' | 'completed' | 'cleared';
export interface Todo {
id: string;
label: string;
status: TodoType;
}
export type Todos = Todo[];
export interface AppContextProps {
addTodo: (label: string) => void;
toggleCompleted: (id: string) => void;
clearCompleted: () => void;
changeFilter: (filter: FilterTypes) => void;
getFilter: () => FilterTypes;
getTodos: () => Todos;
}
================================================
FILE: step1-07/final/src/components/TodoFooter.tsx
================================================
import React from 'react';
import { AppContext } from '../TodoApp';
export const TodoFooter = () => {
const { clearCompleted, getTodos } = React.useContext(AppContext);
const itemCount = getTodos().filter((todo) => todo.status === 'active').length;
const handleClick = () => {
clearCompleted();
};
return (
<footer>
<span>
{itemCount} item{itemCount === 1 ? '' : 's'} left
</span>
<button onClick={handleClick} className="submit">
Clear Completed
</button>
</footer>
);
};
================================================
FILE: step1-07/final/src/components/TodoHeader.tsx
================================================
import React, { ChangeEventHandler, MouseEventHandler, useState, useContext } from 'react';
import { FilterTypes } from '../TodoApp.types';
import { AppContext } from '../TodoApp';
export const TodoHeader = () => {
const { changeFilter, addTodo, getFilter } = useContext(AppContext);
const [inputText, setInputText] = useState<string>('');
const onInput: ChangeEventHandler<HTMLInputElement> = (e) => {
setInputText(e.target.value);
};
const onSubmit = () => {
if (inputText.length > 0) addTodo(inputText);
setInputText('');
};
const onFilter: MouseEventHandler<HTMLButtonElement> = (e) => {
changeFilter(e.currentTarget.textContent as FilterTypes)
};
return (
<header>
<h1>
todos <small>(1.7 final)</small>
</h1>
<div className="addTodo">
<input value={inputText} onChange={onInput} className="textfield" placeholder="add todo" />
<button onClick={onSubmit} className="submit">
Add
</button>
</div>
<nav className="filter">
<button onClick={onFilter} className={getFilter() === 'all' ? 'selected' : ''}> all</button>
<button onClick={onFilter} className={getFilter() === 'active' ? 'selected' : ''}>active</button>
<button onClick={onFilter} className={getFilter() === 'completed' ? 'selected' : ''}>completed</button>
</nav>
</header>
);
};
================================================
FILE: step1-07/final/src/components/TodoList.tsx
================================================
import React from 'react';
import { TodoListItem } from './TodoListItem';
import { AppContext } from '../TodoApp';
export const TodoList = () => {
const { getFilter, getTodos } = React.useContext(AppContext);
const filteredTodos = getTodos().filter((todo) => {
if (todo.status === 'cleared') return false;
return getFilter() === 'all' ||
(getFilter() === 'completed' && todo.status === 'completed') ||
(getFilter() === 'active' && todo.status === 'active');
});
return (
<ul className="todos">
{filteredTodos.map((todo) => (
<TodoListItem key={todo.id} {...todo} />
))}
</ul>
);
};
================================================
FILE: step1-07/final/src/components/TodoListItem.tsx
================================================
import React from 'react';
import { Todo } from '../TodoApp.types';
import { AppContext } from '../TodoApp';
export const TodoListItem = (props: Todo) => {
const { label, status, id } = props;
const { toggleCompleted } = React.useContext(AppContext);
return (
<li className="todo">
<label>
<input type="checkbox" checked={status === 'completed'} onChange={() => toggleCompleted(id)} /> {label}
</label>
</li>
);
};
================================================
FILE: step1-07/final/src/index.tsx
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { TodoApp } from './TodoApp';
ReactDOM.render(<TodoApp />, document.getElementById('app'));
================================================
FILE: step1-07/final/src/style.css
================================================
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 400px;
margin: 20px auto;
}
h1 {
text-align: center;
}
small {
font-size: 0.5em;
}
.addTodo {
display: flex;
}
.textfield {
flex-grow: 1;
margin-right: 10px;
}
.submit {
border: none;
padding: 5px 10px;
}
.filter {
margin: 10px 0 0;
}
.filter button {
background: transparent;
border: none;
}
.filter .selected {
border-bottom: 2px solid blue;
}
.todos {
list-style: none;
padding: 0;
}
footer {
display: flex;
}
footer span {
flex-grow: 1;
}
================================================
FILE: step2-01/demo/README.md
================================================
# Step 2.1 - Introduction to TypeScript (Demo)
[Lessons](../../) | [Exercise](../exercise/) | [Final](../final/)
In this step, we'll cover enough TypeScript concepts to be productive with the React & Redux frameworks.
Topics in this step will include:
- [ES modules](#modules)
- [Types](#typescript-types)
- [Spread](#spread-operator) and [Destructuring](#destructuring)
- [Promise](#promise) and [Async / Await](#async--await)
> 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!
## Modules
Historically, 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.
The most important ones to know about are:
- **commonjs** - Node.js's standard to support modules
- synchronous loading using `require()` function
- `require()` can be dynamically called in the course of a program
- **ESM (ECMAScript module)** - language-level support
- statically analyzable and synchronous
- dynamic and asynchronous support via `import()` that returns a promise
> 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.
## TypeScript types
Refer to [`demo/src/types`](./src/types/index.ts) for examples of some of the types available in TS that benefit a React developer.
## Spread operator
The 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.
With **objects**:
```ts
// Shallow copy an object
const cloned1 = { ...obj };
// Shallow copy and add/overwrite a key
const overridden1 = { ...obj, key: value };
// Shallow copy multiple objects and add a key
const cloned2 = { ...obj1, ...obj2, key: value };
// Use an expression to calculate a key dynamically
const overridden = { ...object, [key + '-suffix']: value };
```
With **arrays**:
```ts
const copy1 = [...arr];
const copy2 = [...arr1, ...arr2];
const copyWithExtras = [123, ...arr, 'hello'];
```
Spreading an array into positional arguments to a function:
```ts
function myFunc(a: number, b: number, c: number) {
// ...
}
const arr = [1, 2, 3];
myFunc(...arr);
```
Spreading an object into props for a React component:
```jsx
const obj = { a: 1, b: 2, c: 3 };
// equivalent to:
// <MyComponent a={obj.a} b={obj.b} c={obj.c} />
const rendered = <MyComponent {...obj} />;
```
## Destructuring
Destructuring is a concise way to take properties out of an object or array:
```ts
const obj = { foo: 1, bar: 2 };
const { foo, bar } = obj;
// foo = 1, bar = 2
const arr = [1, 2];
const [foo, bar] = arr;
// foo = 1, bar = 2
```
You can separate an item from the rest of the object with destructuring:
```ts
const obj = { a: 1, b: 2, c: 3, d: 4 };
const { a, ...rest } = obj;
// a = 1, rest = {b: 2, c: 3, d: 4}
const arr = [1, 2, 3];
const [foo, ...bar] = arr;
// foo = 1, bar = [2, 3]
```
## Promise
A 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/).)
```ts
const aPromise = new Promise((resolve, reject) => {
// do something async and call resolve() to let promise know it is done
setTimeout(() => {
// setTimeout will call this method after 1s, simulating async operation like network calls
resolve();
}, 1000);
});
```
Each promise instance exposes a `then()` function that is chainable. It also provides `catch()`, which catches all exceptions or `reject()` calls:
```ts
// Promise.resolve() creates an already-resolved promise instance
const aPromise = Promise.resolve('hello world');
aPromise
.then(result => {
return makeAnotherPromise();
})
.then(result => {
return makeYetAnotherPromise();
})
.catch(err => {
console.error(err);
});
```
> 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).
## Async / await
**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:
```ts
async function someFunctionAsync() {
// Inside here, we can await on other async functions
const result = await someOtherFunctionAsync();
return result + ' hello';
}
```
All functions that are marked `async` return a `Promise` automatically. The previous example returned a `Promise<string>`, and can be used like this:
```ts
someFunctionAsync().then(result => {
console.log(result);
});
```
> For more information, see [this article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).
================================================
FILE: step2-01/demo/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" data-src="./README.md"></div>
<div id="app">
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.
</div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
================================================
FILE: step2-01/demo/src/async/index.ts
================================================
async function fetchSomething() {
const response = await fetch('http://localhost:3000/hello');
return await response.text();
}
// Async functions always return a Promise
fetchSomething().then(text => {
console.log('hello ' + text);
});
// adding an export turns this into a "module"
export default {};
================================================
FILE: step2-01/demo/src/generics/index.ts
================================================
// Generics for classes
class Stack<T = number> {
private data: T[] = [];
push(item: T) {
this.data.push(item);
}
pop(): T {
return this.data.pop();
}
}
const numberStack = new Stack();
const stringStack = new Stack<string>();
// Generics for functions
function reverse<T>(arg: T[]): T[] {
// TODO: implement the logic to reverse the array
return arg;
}
// adding an export turns this into a "module"
export default {};
================================================
FILE: step2-01/demo/src/index.tsx
================================================
// Interesting TypeScript Topics
// types
import './types';
// interface
import './interfaces';
// modularity
import './modules';
// generics
import './generics';
// await / async
import './async';
// spread syntax
import './spread';
================================================
FILE: step2-01/demo/src/interfaces/index.ts
================================================
// Interface for an object or class
interface Car {
make: string;
model: string;
}
class MyCar implements Car {
make: string;
model: string;
constructor(make: string, model: string) {
this.make = make;
this.model = model;
}
}
const myCar1: Car = new MyCar('Honda', 'Accord');
const myCar2: Car = {
make: 'Honda',
model: 'Accord'
};
// Interface for a function
interface InterestingFn {
(someArgs: string): number;
}
const interesting: InterestingFn = (someArgs: string): number => {
return Number(someArgs);
};
// adding an export to turn this into a "module"
export default {};
================================================
FILE: step2-01/demo/src/modules/default.ts
================================================
export default class DefaultClass {
hello = 'world';
}
================================================
FILE: step2-01/demo/src/modules/index.ts
================================================
// These are named imports from a file relative to this file
import { namedConst, namedFn, namedObj, namedConstBracket } from './named';
// We can even give an alias to the named constant
import { namedConst as c } from './named';
// These are the *same instances* of the named imports, but they all get imported inside a single object
import * as named from './named';
// Print out the exports
console.log(namedConst);
console.log(c);
console.log(namedFn());
console.log(namedObj);
console.log(namedConstBracket);
// Print out exports from module level import
console.log(named.namedConst);
console.log(named.namedFn());
console.log(named.namedObj);
console.log(named.namedConstBracket);
// The named and module-level imports reference the same object instances
console.log(namedObj === named.namedObj); // true
// Default import can be named anything we want as the consumer
import DefaultClass from './default';
import Foo from './default';
console.log(new DefaultClass().hello);
console.log(new Foo().hello);
================================================
FILE: step2-01/demo/src/modules/named.ts
================================================
export const namedConst = 5;
export function namedFn() {
return 5;
}
export const namedObj = {
hello: 'world'
};
const namedConstBracket = 10;
export { namedConstBracket };
================================================
FILE: step2-01/demo/src/spread/index.ts
================================================
// Destructuring
var [a, b, ...rest] = [1, 2, 3, 4];
console.log(a, b, rest); // 1 2 [3,4]
// Array assignment
var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]
// Object assignment
const point2D = { x: 1, y: 2 };
const point3D = { ...point2D, z: 3 };
// Concat two objects
const obj1 = { x: 1 };
const obj2 = { y: 2 };
const obj3 = { ...obj1, ...obj2 };
// Destructuring object
const { x } = obj3;
// adding an export turns this into a "module"
export default {};
================================================
FILE: step2-01/demo/src/types/index.ts
================================================
// Basic Types
let isDone: boolean = false;
let decimal: number = 6;
let color: string = 'blue';
let sky: string = `the sky is ${color}`;
// Function Types
type FibFn = (n: number) => number;
// Object Types
type Obj = {
[key: string]: string;
};
// Object with Specified Keys
type Specific1 = {
foo: string;
bar: number;
common: string;
};
type Specific2 = {
alice: string;
bob: number;
common: number;
};
// composition
type TypeOfObj = {
foo: string;
bar: number;
obj1: Specific1;
obj2: Specific2;
};
// Get types by property
type Obj1Type = TypeOfObj['obj1'];
// union, intersection
type Union = Specific1 | Specific2;
type Intersection = Specific1 & Specific2;
// casting
let choose1 = <Specific1>{ common: '5' };
// string literal union
type CatStatus = 'alive' | 'dead' | 'both';
// Classes
class Animal { }
// Illustration purposes only
// In real apps, avoid inheritance if possible
// noted exception: React.Component with react@<16.8.0
class Cat extends Animal { }
class Dog extends Animal { }
// Any Type - avoid if possible
let mystery: any = "I don't like the person who will be maintaining this code";
mystery = 2;
mystery = () => 3;
// adding an export turns this into a "module"
export default {};
================================================
FILE: step2-01/exercise/README.md
================================================
# Step 2.1 - Introduction to TypeScript (Exercise)
[Lessons](../../) | [Demo](../demo/) | [Final](../final/)
If you don't already have the app running, start it by running `npm start` from the root of the `frontend-bootcamp` folder.
Exercises 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.
## Modules
1. Open the file `exercise/src/fibonacci.ts` in VS Code
2. 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`).
> HINT: `function fib(n: number) { return n <= 1 ? n : fib(n - 1) + fib(n - 2); }`
3. Export `fib(n)` as a **named export**
4. Export a const variable `FibConst` as a **default export**
5. 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)`.
## Types and interfaces
Inside `exercise/src/index.ts`:
1. Add a type alias for string union type describing the states of Red-Green-Yellow traffic light: `type TrafficLight = ???`
2. Describe a type of car with an interface: `interface Car { ... }` complete with `wheels`, `color`, `make`, `model`
3. Create a valid car instance and log it using `console.log()`: `const myCar: Car = { ??? }`;
## Generics
Inside `exercise/src/stack.ts`, create a generic class for a `Stack<T>` complete with a typed `pop()` and `push()` methods.
> Hint: the JavaScript array already has `push()` and `pop()` implemented for you. That can be your backing store.
In `exercise/src/index.ts`, create a `Stack<number>` and use `console.log()` to demonstrate its functionality.
## Spread and destructuring
1. Note the following code in index.ts:
```ts
const obj1 = {
first: 'who',
second: 'what',
third: 'dunno',
left: 'why'
};
const obj2 = {
center: 'because',
pitcher: 'tomorrow',
catcher: 'today'
};
```
2. Now create a one-liner using the spread syntax `{...x, ...y}` to create a new variable `megaObj` that combines these two objects.
3. Use the destructuring syntax to retrieve the values for `{first, second, catcher}` from `megaObj`.
## Async / await
Note the following code in index.ts:
```ts
function makePromise() {
return Promise.resolve(5);
}
```
1. Call `makePromise()` with the `await` syntax and log the results.
2. Create a new function that uses the `async` keyword. Inside the function, make an `await` call to `makePromise()` and return the results.
================================================
FILE: step2-01/exercise/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../assets/step.css" />
</head>
<body class="ms-Fabric">
<div id="markdownReadme" class="exercise" data-src="./README.md"></div>
<div id="app">
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
window.
</div>
<script src="../../assets/scripts.js"></script>
</body>
</html>
================================================
FILE: step2-01/exercise/src/fibonacci.ts
====
gitextract_0cjb0ebu/ ├── .gitignore ├── .vscode/ │ ├── extensions.json │ └── settings.json ├── LICENSE ├── LICENSE-CODE ├── README.md ├── assets/ │ ├── scripts.js │ ├── shared.css │ └── step.css ├── azure-pipelines.pr.yml ├── azure-pipelines.yml ├── bonus-jest/ │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── TestMe.spec.tsx │ │ ├── TestMe.tsx │ │ ├── index.spec.tsx │ │ ├── index.ts │ │ └── multiply.ts │ └── exercise/ │ ├── README.md │ ├── index.html │ └── src/ │ ├── TestMe.spec.tsx │ ├── TestMe.tsx │ ├── index.ts │ ├── stack.spec.ts │ └── stack.ts ├── bonus-servicecalls/ │ └── demo/ │ ├── README.md │ ├── index.html │ └── src/ │ ├── actions/ │ │ └── index.ts │ ├── components/ │ │ ├── TodoApp.tsx │ │ ├── TodoFooter.tsx │ │ ├── TodoHeader.tsx │ │ ├── TodoList.tsx │ │ └── TodoListItem.tsx │ ├── index.tsx │ ├── reducers/ │ │ └── index.ts │ ├── service/ │ │ └── index.ts │ └── store/ │ └── index.ts ├── index.html ├── jest.config.js ├── jest.setup.js ├── markdownReadme/ │ └── src/ │ └── index.ts ├── package.json ├── playground/ │ └── index.html ├── prettier.config.js ├── server/ │ ├── index.js │ └── now.json ├── step1-01/ │ ├── demo/ │ │ ├── index.html │ │ └── style.css │ ├── exercise/ │ │ ├── README.md │ │ ├── answers.html │ │ └── index.html │ └── lesson/ │ ├── README.md │ ├── index.html │ └── src/ │ └── index.tsx ├── step1-02/ │ ├── demo/ │ │ └── index.html │ ├── exercise/ │ │ ├── README.md │ │ ├── answers.css │ │ └── index.html │ └── lesson/ │ ├── README.md │ ├── index.html │ └── src/ │ └── index.tsx ├── step1-03/ │ ├── demo/ │ │ └── index.html │ ├── exercise/ │ │ ├── README.md │ │ ├── answer.js │ │ └── index.html │ └── lesson/ │ ├── README.md │ ├── index.html │ └── src/ │ └── index.tsx ├── step1-04/ │ ├── demo/ │ │ └── index.html │ ├── final/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── App.tsx │ │ ├── components/ │ │ │ ├── Button.css │ │ │ ├── Button.tsx │ │ │ └── Counter.tsx │ │ └── index.tsx │ └── lesson/ │ ├── README.md │ ├── index.html │ └── src/ │ └── index.tsx ├── step1-05/ │ ├── TodoApp.html │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── App.tsx │ │ ├── index.tsx │ │ └── style.css │ └── exercise/ │ ├── README.md │ ├── index.html │ └── src/ │ ├── App.tsx │ ├── components/ │ │ ├── TodoHeader.tsx │ │ └── TodoListItem.tsx │ ├── index.tsx │ └── style.css ├── step1-06/ │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── TodoApp.tsx │ │ ├── components/ │ │ │ ├── TodoFooter.tsx │ │ │ ├── TodoHeader.tsx │ │ │ ├── TodoList.tsx │ │ │ └── TodoListItem.tsx │ │ ├── index.tsx │ │ └── style.css │ ├── exercise/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── TodoApp.tsx │ │ ├── components/ │ │ │ ├── TodoFooter.tsx │ │ │ ├── TodoHeader.tsx │ │ │ ├── TodoList.tsx │ │ │ └── TodoListItem.tsx │ │ ├── index.tsx │ │ └── style.css │ └── index.html ├── step1-07/ │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── TodoApp.tsx │ │ ├── TodoApp.types.ts │ │ ├── components/ │ │ │ ├── TodoFooter.tsx │ │ │ ├── TodoHeader.tsx │ │ │ ├── TodoList.tsx │ │ │ └── TodoListItem.tsx │ │ ├── index.tsx │ │ └── style.css │ ├── exercise/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── TodoApp.tsx │ │ ├── TodoApp.types.ts │ │ ├── components/ │ │ │ ├── TodoFooter.tsx │ │ │ ├── TodoHeader.tsx │ │ │ ├── TodoList.tsx │ │ │ └── TodoListItem.tsx │ │ ├── index.tsx │ │ └── style.css │ └── final/ │ ├── index.html │ └── src/ │ ├── TodoApp.tsx │ ├── TodoApp.types.ts │ ├── components/ │ │ ├── TodoFooter.tsx │ │ ├── TodoHeader.tsx │ │ ├── TodoList.tsx │ │ └── TodoListItem.tsx │ ├── index.tsx │ └── style.css ├── step2-01/ │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── async/ │ │ │ └── index.ts │ │ ├── generics/ │ │ │ └── index.ts │ │ ├── index.tsx │ │ ├── interfaces/ │ │ │ └── index.ts │ │ ├── modules/ │ │ │ ├── default.ts │ │ │ ├── index.ts │ │ │ └── named.ts │ │ ├── spread/ │ │ │ └── index.ts │ │ └── types/ │ │ └── index.ts │ ├── exercise/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── fibonacci.ts │ │ ├── index.ts │ │ └── stack.ts │ └── final/ │ ├── README.md │ ├── index.html │ └── src/ │ ├── fibonacci.ts │ ├── index.ts │ └── stack.ts ├── step2-02/ │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── components/ │ │ │ ├── TodoApp.tsx │ │ │ ├── TodoFooter.tsx │ │ │ ├── TodoHeader.tsx │ │ │ ├── TodoList.tsx │ │ │ └── TodoListItem.tsx │ │ ├── index.tsx │ │ └── store/ │ │ └── index.ts │ └── exercise/ │ ├── README.md │ ├── index.html │ └── src/ │ ├── components/ │ │ ├── TodoApp.tsx │ │ ├── TodoFooter.tsx │ │ ├── TodoHeader.tsx │ │ ├── TodoList.tsx │ │ └── TodoListItem.tsx │ ├── index.tsx │ └── store/ │ └── index.ts ├── step2-03/ │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── components/ │ │ │ ├── TodoApp.tsx │ │ │ ├── TodoFooter.tsx │ │ │ ├── TodoHeader.tsx │ │ │ ├── TodoList.tsx │ │ │ └── TodoListItem.tsx │ │ ├── index.tsx │ │ └── store/ │ │ └── index.ts │ └── exercise/ │ ├── README.md │ ├── index.html │ └── src/ │ ├── components/ │ │ ├── TodoApp.tsx │ │ ├── TodoFooter.tsx │ │ ├── TodoHeader.tsx │ │ ├── TodoList.tsx │ │ └── TodoListItem.tsx │ ├── index.tsx │ └── store/ │ └── index.ts ├── step2-04/ │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── TodoContext.ts │ │ ├── components/ │ │ │ ├── TodoApp.tsx │ │ │ ├── TodoFooter.tsx │ │ │ ├── TodoHeader.tsx │ │ │ ├── TodoList.tsx │ │ │ └── TodoListItem.tsx │ │ ├── index.tsx │ │ └── store/ │ │ └── index.ts │ └── exercise/ │ ├── README.md │ ├── index.html │ └── src/ │ ├── TodoContext.ts │ ├── components/ │ │ ├── TodoApp.tsx │ │ ├── TodoFooter.tsx │ │ ├── TodoHeader.tsx │ │ ├── TodoList.tsx │ │ └── TodoListItem.tsx │ ├── index.tsx │ └── store/ │ └── index.ts ├── step2-05/ │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── actions/ │ │ │ └── index.ts │ │ ├── index.tsx │ │ ├── reducers/ │ │ │ └── index.ts │ │ └── store/ │ │ └── index.ts │ └── exercise/ │ ├── README.md │ ├── index.html │ └── src/ │ ├── actions/ │ │ └── index.ts │ ├── index.tsx │ ├── reducers/ │ │ └── index.ts │ └── store/ │ └── index.ts ├── step2-06/ │ ├── demo/ │ │ ├── README.md │ │ ├── index.html │ │ └── src/ │ │ ├── actions/ │ │ │ └── index.ts │ │ ├── components/ │ │ │ ├── TodoApp.tsx │ │ │ ├── TodoFooter.tsx │ │ │ ├── TodoHeader.tsx │ │ │ ├── TodoList.tsx │ │ │ └── TodoListItem.tsx │ │ ├── index.tsx │ │ ├── reducers/ │ │ │ └── index.ts │ │ └── store/ │ │ └── index.ts │ └── exercise/ │ ├── README.md │ ├── index.html │ └── src/ │ ├── actions/ │ │ └── index.ts │ ├── components/ │ │ ├── TodoApp.tsx │ │ ├── TodoFooter.tsx │ │ ├── TodoHeader.tsx │ │ ├── TodoList.tsx │ │ └── TodoListItem.tsx │ ├── index.tsx │ ├── reducers/ │ │ └── index.ts │ └── store/ │ └── index.ts ├── tsconfig.json └── webpack.config.js
SYMBOL INDEX (273 symbols across 80 files)
FILE: assets/scripts.js
function b (line 3) | function b(a) { c[a] = function () { var b = arguments; c.queue.push(fun...
FILE: bonus-jest/demo/src/TestMe.tsx
type TestMeProps (line 3) | interface TestMeProps {
type TestMeState (line 7) | interface TestMeState {
class InnerMe (line 19) | class InnerMe extends React.Component<TestMeProps, TestMeState> {
method render (line 28) | render() {
FILE: bonus-jest/demo/src/index.ts
function getCount (line 5) | function getCount() {
function increment (line 9) | function increment() {
function decrement (line 13) | function decrement() {
function square (line 17) | function square(x: number) {
FILE: bonus-jest/demo/src/multiply.ts
function multiply (line 1) | function multiply(x: number, y: number) {
FILE: bonus-jest/exercise/src/TestMe.tsx
type TestMeProps (line 3) | interface TestMeProps {
type TestMeState (line 7) | interface TestMeState {
class InnerMe (line 19) | class InnerMe extends React.Component<TestMeProps, TestMeState> {
method render (line 28) | render() {
FILE: bonus-jest/exercise/src/stack.ts
class Stack (line 1) | class Stack<T> {
method push (line 5) | push(item: T) {
method pop (line 10) | pop(): T {
method peek (line 17) | peek(): T {
method count (line 24) | get count(): number {
FILE: bonus-servicecalls/demo/src/components/TodoFooter.tsx
type TodoFooterProps (line 7) | interface TodoFooterProps {
FILE: bonus-servicecalls/demo/src/components/TodoHeader.tsx
type TodoHeaderProps (line 7) | interface TodoHeaderProps {
type TodoHeaderState (line 12) | interface TodoHeaderState {
class TodoHeader (line 16) | class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderStat...
method constructor (line 17) | constructor(props: TodoHeaderProps) {
method render (line 22) | render() {
FILE: bonus-servicecalls/demo/src/components/TodoList.tsx
type TodoListProps (line 7) | interface TodoListProps {
FILE: bonus-servicecalls/demo/src/components/TodoListItem.tsx
type TodoListItemProps (line 7) | interface TodoListItemProps {
type TodoListItemState (line 15) | interface TodoListItemState {
class TodoListItem (line 20) | class TodoListItem extends React.Component<TodoListItemProps, TodoListIt...
method constructor (line 21) | constructor(props: TodoListItemProps) {
method render (line 26) | render() {
FILE: bonus-servicecalls/demo/src/reducers/index.ts
method addTodo (line 8) | addTodo(state, action) {
method remove (line 12) | remove(state, action) {
method clear (line 16) | clear(state, action) {
method complete (line 24) | complete(state, action) {
method edit (line 28) | edit(state, action) {
method setFilter (line 35) | setFilter(state, action) {
FILE: bonus-servicecalls/demo/src/service/index.ts
constant HOST (line 2) | const HOST = 'http://localhost:3000';
function add (line 4) | async function add(id: string, todo: TodoItem) {
function update (line 14) | async function update(id: string, todo: TodoItem) {
function remove (line 24) | async function remove(id: string) {
function getAll (line 32) | async function getAll() {
function updateAll (line 40) | async function updateAll(todos: Store['todos']) {
FILE: bonus-servicecalls/demo/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: markdownReadme/src/index.ts
function run (line 13) | async function run() {
function saveScroll (line 46) | function saveScroll(div: HTMLElement) {
function restoreScroll (line 50) | function restoreScroll(div: HTMLElement) {
FILE: server/index.js
method read (line 10) | read() {
method save (line 20) | save() {
FILE: step1-03/exercise/answer.js
function getFavs (line 1) | function getFavs() {
FILE: step1-07/demo/src/TodoApp.types.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoType (line 2) | type TodoType = 'active' | 'completed' | 'cleared';
type Todo (line 4) | interface Todo {
type Todos (line 10) | type Todos = Todo[];
type AddTodo (line 12) | type AddTodo = (label: string) => void;
type ToggleCompleted (line 13) | type ToggleCompleted = (id: string) => void;
type ClearCompleted (line 14) | type ClearCompleted = () => void;
type ChangeFilter (line 15) | type ChangeFilter = (filter: FilterTypes) => void;
FILE: step1-07/exercise/src/TodoApp.types.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoType (line 2) | type TodoType = 'active' | 'completed' | 'cleared';
type Todo (line 4) | interface Todo {
type Todos (line 10) | type Todos = Todo[];
type AddTodo (line 12) | type AddTodo = (label: string) => void;
type ToggleCompleted (line 13) | type ToggleCompleted = (id: string) => void;
type ClearCompleted (line 14) | type ClearCompleted = () => void;
type ChangeFilter (line 15) | type ChangeFilter = (filter: FilterTypes) => void;
FILE: step1-07/exercise/src/components/TodoList.tsx
type TodoListProps (line 5) | interface TodoListProps {
FILE: step1-07/exercise/src/components/TodoListItem.tsx
type TodoListItemProps (line 4) | interface TodoListItemProps extends Todo {
FILE: step1-07/final/src/TodoApp.types.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoType (line 2) | type TodoType = 'active' | 'completed' | 'cleared';
type Todo (line 4) | interface Todo {
type Todos (line 10) | type Todos = Todo[];
type AppContextProps (line 13) | interface AppContextProps {
FILE: step2-01/demo/src/async/index.ts
function fetchSomething (line 1) | async function fetchSomething() {
FILE: step2-01/demo/src/generics/index.ts
class Stack (line 2) | class Stack<T = number> {
method push (line 5) | push(item: T) {
method pop (line 8) | pop(): T {
function reverse (line 17) | function reverse<T>(arg: T[]): T[] {
FILE: step2-01/demo/src/interfaces/index.ts
type Car (line 2) | interface Car {
class MyCar (line 7) | class MyCar implements Car {
method constructor (line 11) | constructor(make: string, model: string) {
type InterestingFn (line 24) | interface InterestingFn {
FILE: step2-01/demo/src/modules/default.ts
class DefaultClass (line 1) | class DefaultClass {
FILE: step2-01/demo/src/modules/named.ts
function namedFn (line 3) | function namedFn() {
FILE: step2-01/demo/src/types/index.ts
type FibFn (line 8) | type FibFn = (n: number) => number;
type Obj (line 11) | type Obj = {
type Specific1 (line 16) | type Specific1 = {
type Specific2 (line 22) | type Specific2 = {
type TypeOfObj (line 29) | type TypeOfObj = {
type Obj1Type (line 37) | type Obj1Type = TypeOfObj['obj1'];
type Union (line 40) | type Union = Specific1 | Specific2;
type Intersection (line 41) | type Intersection = Specific1 & Specific2;
type CatStatus (line 47) | type CatStatus = 'alive' | 'dead' | 'both';
class Animal (line 50) | class Animal { }
class Cat (line 55) | class Cat extends Animal { }
class Dog (line 56) | class Dog extends Animal { }
FILE: step2-01/exercise/src/index.ts
function makePromise (line 49) | function makePromise() {
function run (line 55) | async function run() {
FILE: step2-01/final/src/fibonacci.ts
function fib (line 1) | function fib(n: number) {
FILE: step2-01/final/src/index.ts
type TrafficLight (line 10) | type TrafficLight = 'red' | 'green' | 'yellow';
type Car (line 13) | interface Car {
function makePromise (line 58) | function makePromise(): Promise<number> {
function getGreeting (line 62) | async function getGreeting(name: string): Promise<string> {
function run (line 66) | async function run() {
FILE: step2-01/final/src/stack.ts
class Stack (line 1) | class Stack<T> {
method constructor (line 4) | constructor() {
method push (line 8) | push(elem: T): void {
method pop (line 12) | pop(): T {
FILE: step2-02/demo/src/components/TodoApp.tsx
class TodoApp (line 10) | class TodoApp extends React.Component<any, Store> {
method constructor (line 11) | constructor(props) {
method render (line 22) | render() {
FILE: step2-02/demo/src/components/TodoFooter.tsx
type TodoFooterProps (line 5) | interface TodoFooterProps {
FILE: step2-02/demo/src/components/TodoHeader.tsx
type TodoHeaderProps (line 5) | interface TodoHeaderProps {
type TodoHeaderState (line 11) | interface TodoHeaderState {
class TodoHeader (line 15) | class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderStat...
method constructor (line 16) | constructor(props: TodoHeaderProps) {
method render (line 21) | render() {
FILE: step2-02/demo/src/components/TodoList.tsx
type TodoListProps (line 6) | interface TodoListProps {
FILE: step2-02/demo/src/components/TodoListItem.tsx
type TodoListItemProps (line 5) | interface TodoListItemProps {
type TodoListItemState (line 13) | interface TodoListItemState {
class TodoListItem (line 18) | class TodoListItem extends React.Component<TodoListItemProps, TodoListIt...
method constructor (line 19) | constructor(props: TodoListItemProps) {
method render (line 24) | render() {
FILE: step2-02/demo/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: step2-02/exercise/src/components/TodoApp.tsx
class TodoApp (line 10) | class TodoApp extends React.Component<any, Store> {
method constructor (line 11) | constructor(props) {
method render (line 21) | render() {
FILE: step2-02/exercise/src/components/TodoFooter.tsx
type TodoFooterProps (line 6) | interface TodoFooterProps {
FILE: step2-02/exercise/src/components/TodoHeader.tsx
type TodoHeaderProps (line 5) | interface TodoHeaderProps {
type TodoHeaderState (line 11) | interface TodoHeaderState {
class TodoHeader (line 15) | class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderStat...
method constructor (line 16) | constructor(props: TodoHeaderProps) {
method render (line 21) | render() {
FILE: step2-02/exercise/src/components/TodoList.tsx
type TodoListProps (line 6) | interface TodoListProps {
FILE: step2-02/exercise/src/components/TodoListItem.tsx
type TodoListItemProps (line 5) | interface TodoListItemProps {
type TodoListItemState (line 13) | interface TodoListItemState {
class TodoListItem (line 18) | class TodoListItem extends React.Component<TodoListItemProps, TodoListIt...
method constructor (line 19) | constructor(props: TodoListItemProps) {
method render (line 24) | render() {
FILE: step2-02/exercise/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: step2-03/demo/src/components/TodoApp.tsx
class TodoApp (line 46) | class TodoApp extends React.Component<any, Store> {
method constructor (line 47) | constructor(props) {
method render (line 54) | render() {
FILE: step2-03/demo/src/components/TodoFooter.tsx
type TodoFooterProps (line 5) | interface TodoFooterProps {
FILE: step2-03/demo/src/components/TodoHeader.tsx
type TodoHeaderProps (line 5) | interface TodoHeaderProps {
type TodoHeaderState (line 11) | interface TodoHeaderState {
class TodoHeader (line 15) | class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderStat...
method constructor (line 16) | constructor(props: TodoHeaderProps) {
method render (line 21) | render() {
FILE: step2-03/demo/src/components/TodoList.tsx
type TodoListProps (line 6) | interface TodoListProps {
FILE: step2-03/demo/src/components/TodoListItem.tsx
type TodoListItemProps (line 5) | interface TodoListItemProps {
type TodoListItemState (line 13) | interface TodoListItemState {
class TodoListItem (line 18) | class TodoListItem extends React.Component<TodoListItemProps, TodoListIt...
method constructor (line 19) | constructor(props: TodoListItemProps) {
method render (line 24) | render() {
FILE: step2-03/demo/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: step2-03/exercise/src/components/TodoApp.tsx
class TodoApp (line 19) | class TodoApp extends React.Component<any, Store> {
method constructor (line 20) | constructor(props) {
method render (line 27) | render() {
FILE: step2-03/exercise/src/components/TodoFooter.tsx
type TodoFooterProps (line 5) | interface TodoFooterProps {
FILE: step2-03/exercise/src/components/TodoHeader.tsx
type TodoHeaderProps (line 5) | interface TodoHeaderProps {
type TodoHeaderState (line 11) | interface TodoHeaderState {
class TodoHeader (line 15) | class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderStat...
method constructor (line 16) | constructor(props: TodoHeaderProps) {
method render (line 21) | render() {
FILE: step2-03/exercise/src/components/TodoList.tsx
type TodoListProps (line 6) | interface TodoListProps {
FILE: step2-03/exercise/src/components/TodoListItem.tsx
type TodoListItemProps (line 5) | interface TodoListItemProps {
type TodoListItemState (line 13) | interface TodoListItemState {
class TodoListItem (line 18) | class TodoListItem extends React.Component<TodoListItemProps, TodoListIt...
method constructor (line 19) | constructor(props: TodoListItemProps) {
method render (line 24) | render() {
FILE: step2-03/exercise/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: step2-04/demo/src/components/TodoApp.tsx
class TodoApp (line 11) | class TodoApp extends React.Component<any, Store> {
method constructor (line 12) | constructor(props) {
method render (line 19) | render() {
FILE: step2-04/demo/src/components/TodoHeader.tsx
type TodoHeaderState (line 6) | interface TodoHeaderState {
class TodoHeader (line 10) | class TodoHeader extends React.Component<{}, TodoHeaderState> {
method constructor (line 11) | constructor(props: {}) {
method render (line 16) | render() {
FILE: step2-04/demo/src/components/TodoListItem.tsx
type TodoListItemProps (line 5) | interface TodoListItemProps {
type TodoListItemState (line 9) | interface TodoListItemState {
class TodoListItem (line 14) | class TodoListItem extends React.Component<TodoListItemProps, TodoListIt...
method constructor (line 15) | constructor(props: TodoListItemProps) {
method render (line 20) | render() {
FILE: step2-04/demo/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: step2-04/exercise/src/components/TodoApp.tsx
class TodoApp (line 11) | class TodoApp extends React.Component<any, Store> {
method constructor (line 12) | constructor(props) {
method render (line 19) | render() {
FILE: step2-04/exercise/src/components/TodoHeader.tsx
type TodoHeaderState (line 6) | interface TodoHeaderState {
class TodoHeader (line 10) | class TodoHeader extends React.Component<{}, TodoHeaderState> {
method constructor (line 11) | constructor(props: {}) {
method render (line 16) | render() {
FILE: step2-04/exercise/src/components/TodoListItem.tsx
type TodoListItemProps (line 5) | interface TodoListItemProps {
type TodoListItemState (line 9) | interface TodoListItemState {
class TodoListItem (line 14) | class TodoListItem extends React.Component<TodoListItemProps, TodoListIt...
method constructor (line 15) | constructor(props: TodoListItemProps) {
method render (line 20) | render() {
FILE: step2-04/exercise/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: step2-05/demo/src/reducers/index.ts
method addTodo (line 8) | addTodo(state, action) {
method remove (line 12) | remove(state, action) {
method clear (line 16) | clear(state, action) {
method complete (line 24) | complete(state, action) {
method edit (line 28) | edit(state, action) {
method setFilter (line 35) | setFilter(state, action) {
FILE: step2-05/demo/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: step2-05/exercise/src/reducers/index.ts
method addTodo (line 8) | addTodo(state, action) {
method remove (line 12) | remove(state, action) {
method clear (line 16) | clear(state, action) {
method complete (line 24) | complete(state, action) {
method edit (line 28) | edit(state, action) {
method setFilter (line 35) | setFilter(state, action) {
FILE: step2-05/exercise/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: step2-06/demo/src/components/TodoFooter.tsx
type TodoFooterProps (line 7) | interface TodoFooterProps {
FILE: step2-06/demo/src/components/TodoHeader.tsx
type TodoHeaderProps (line 7) | interface TodoHeaderProps {
type TodoHeaderState (line 12) | interface TodoHeaderState {
class TodoHeader (line 16) | class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderStat...
method constructor (line 17) | constructor(props: TodoHeaderProps) {
method render (line 22) | render() {
FILE: step2-06/demo/src/components/TodoList.tsx
type TodoListProps (line 7) | interface TodoListProps {
FILE: step2-06/demo/src/components/TodoListItem.tsx
type TodoListItemProps (line 7) | interface TodoListItemProps {
type TodoListItemState (line 15) | interface TodoListItemState {
class TodoListItem (line 20) | class TodoListItem extends React.Component<TodoListItemProps, TodoListIt...
method constructor (line 21) | constructor(props: TodoListItemProps) {
method render (line 26) | render() {
FILE: step2-06/demo/src/reducers/index.ts
method addTodo (line 8) | addTodo(state, action) {
method remove (line 12) | remove(state, action) {
method clear (line 16) | clear(state, action) {
method complete (line 24) | complete(state, action) {
method edit (line 28) | edit(state, action) {
method setFilter (line 35) | setFilter(state, action) {
FILE: step2-06/demo/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: step2-06/exercise/src/components/TodoFooter.tsx
type TodoFooterProps (line 9) | interface TodoFooterProps {
FILE: step2-06/exercise/src/components/TodoHeader.tsx
type TodoHeaderProps (line 9) | interface TodoHeaderProps {
type TodoHeaderState (line 14) | interface TodoHeaderState {
class TodoHeader (line 18) | class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderStat...
method constructor (line 19) | constructor(props: TodoHeaderProps) {
method render (line 24) | render() {
FILE: step2-06/exercise/src/components/TodoList.tsx
type TodoListProps (line 7) | interface TodoListProps {
FILE: step2-06/exercise/src/components/TodoListItem.tsx
type TodoListItemProps (line 7) | interface TodoListItemProps {
type TodoListItemState (line 15) | interface TodoListItemState {
class TodoListItem (line 20) | class TodoListItem extends React.Component<TodoListItemProps, TodoListIt...
method constructor (line 21) | constructor(props: TodoListItemProps) {
method render (line 26) | render() {
FILE: step2-06/exercise/src/reducers/index.ts
method addTodo (line 8) | addTodo(state, action) {
method remove (line 12) | remove(state, action) {
method clear (line 16) | clear(state, action) {
method complete (line 24) | complete(state, action) {
method edit (line 28) | edit(state, action) {
method setFilter (line 35) | setFilter(state, action) {
FILE: step2-06/exercise/src/store/index.ts
type FilterTypes (line 1) | type FilterTypes = 'all' | 'active' | 'completed';
type TodoItem (line 3) | interface TodoItem {
type Store (line 8) | interface Store {
FILE: webpack.config.js
function isValidLessonFolder (line 12) | function isValidLessonFolder(folder) {
Condensed preview — 253 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (319K chars).
[
{
"path": ".gitignore",
"chars": 47,
"preview": "node_modules\ndist\nlib\n*.log\n.DS_Store\ntmp.json\n"
},
{
"path": ".vscode/extensions.json",
"chars": 256,
"preview": "{\n // See http://go.microsoft.com/fwlink/?LinkId=827846\n // for the documentation about the extensions.json format\n \""
},
{
"path": ".vscode/settings.json",
"chars": 145,
"preview": "{\n \"prettier.printWidth\": 140,\n \"prettier.tabWidth\": 2,\n \"prettier.singleQuote\": true,\n \"editor.tabSize\": 2,\n \"edit"
},
{
"path": "LICENSE",
"chars": 18646,
"preview": "Attribution 4.0 International\n\n=======================================================================\n\nCreative Commons"
},
{
"path": "LICENSE-CODE",
"chars": 1085,
"preview": "MIT License\n\nCopyright (c) 2019-present Microsoft Corporation\n\nPermission is hereby granted, free of charge, to any pers"
},
{
"path": "README.md",
"chars": 6424,
"preview": "# Frontend Bootcamp / Days in the Web\n\n## Welcome\n\nIn this two-day workshop you'll learn the basics of frontend developm"
},
{
"path": "assets/scripts.js",
"chars": 1270,
"preview": "// prettier-ignore\nvar appInsights = window.appInsights || function (a) {\n function b(a) { c[a] = function () { var b ="
},
{
"path": "assets/shared.css",
"chars": 2051,
"preview": "html {\n box-sizing: border-box;\n}\n*,\n*:before,\n*:after {\n box-sizing: inherit;\n}\n\nbody {\n background-color: #f3f2f1;\n"
},
{
"path": "assets/step.css",
"chars": 2531,
"preview": "@import url(https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css);\n\nbody {\n "
},
{
"path": "azure-pipelines.pr.yml",
"chars": 439,
"preview": "# Node.js\n# Build a general Node.js project with npm.\n# Add steps that analyze code, save build artifacts, deploy, and m"
},
{
"path": "azure-pipelines.yml",
"chars": 943,
"preview": "# Node.js\n# Build a general Node.js project with npm.\n# Add steps that analyze code, save build artifacts, deploy, and m"
},
{
"path": "bonus-jest/demo/README.md",
"chars": 5294,
"preview": "# Bonus: Testing TypeScript code with Jest (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\n[Jest](https://jestjs.i"
},
{
"path": "bonus-jest/demo/index.html",
"chars": 390,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "bonus-jest/demo/src/TestMe.spec.tsx",
"chars": 394,
"preview": "import React from 'react';\nimport { mount } from 'enzyme';\nimport { TestMe } from './TestMe';\n\ndescribe('TestMe Componen"
},
{
"path": "bonus-jest/demo/src/TestMe.tsx",
"chars": 655,
"preview": "import React from 'react';\n\nexport interface TestMeProps {\n name: string;\n}\n\nexport interface TestMeState {\n clicked: "
},
{
"path": "bonus-jest/demo/src/index.spec.tsx",
"chars": 124,
"preview": "import React from 'react';\nimport { mount } from 'enzyme';\n\ndescribe('index', () => {\n it('placeholder', () => {\n });\n"
},
{
"path": "bonus-jest/demo/src/index.ts",
"chars": 277,
"preview": "import { multiply } from './multiply';\n\nlet counter = 0;\n\nexport function getCount() {\n return counter;\n}\n\nexport funct"
},
{
"path": "bonus-jest/demo/src/multiply.ts",
"chars": 67,
"preview": "export function multiply(x: number, y: number) {\n return x * y;\n}\n"
},
{
"path": "bonus-jest/exercise/README.md",
"chars": 487,
"preview": "# Bonus: Testing TypeScript code with Jest (Exercise)\n\n[Lessons](../../) | [Demo](../demo/)\n\nStart the test runner by ru"
},
{
"path": "bonus-jest/exercise/index.html",
"chars": 407,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "bonus-jest/exercise/src/TestMe.spec.tsx",
"chars": 477,
"preview": "import React from 'react';\nimport { mount } from 'enzyme';\nimport { TestMe } from './TestMe';\n\ndescribe('TestMe Componen"
},
{
"path": "bonus-jest/exercise/src/TestMe.tsx",
"chars": 672,
"preview": "import React from 'react';\n\nexport interface TestMeProps {\n name: string;\n}\n\nexport interface TestMeState {\n enabled: "
},
{
"path": "bonus-jest/exercise/src/index.ts",
"chars": 68,
"preview": "export { Stack } from './stack';\nexport { TestMe } from './TestMe';\n"
},
{
"path": "bonus-jest/exercise/src/stack.spec.ts",
"chars": 670,
"preview": "// TODO: Import the stack here\n\ndescribe('Stack', () => {\n it('should push item to the top of the stack', () => {\n /"
},
{
"path": "bonus-jest/exercise/src/stack.ts",
"chars": 581,
"preview": "export class Stack<T> {\n private _items: T[] = [];\n\n /** Add an item to the top of the stack. */\n push(item: T) {\n "
},
{
"path": "bonus-servicecalls/demo/README.md",
"chars": 2268,
"preview": "# Bonus: Service calls (Demo)\n\n[Lessons](../../)\n\n> Note: this step doesn't work with the live site on github.io. Clone "
},
{
"path": "bonus-servicecalls/demo/index.html",
"chars": 282,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "bonus-servicecalls/demo/src/actions/index.ts",
"chars": 1531,
"preview": "import uuid from 'uuid/v4';\nimport { Store } from '../store';\nimport * as service from '../service';\n\nexport const actio"
},
{
"path": "bonus-servicecalls/demo/src/components/TodoApp.tsx",
"chars": 429,
"preview": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nim"
},
{
"path": "bonus-servicecalls/demo/src/components/TodoFooter.tsx",
"chars": 947,
"preview": "import React from 'react';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabric-react';\nimport { actionsWithServ"
},
{
"path": "bonus-servicecalls/demo/src/components/TodoHeader.tsx",
"chars": 2195,
"preview": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-rea"
},
{
"path": "bonus-servicecalls/demo/src/components/TodoList.tsx",
"chars": 811,
"preview": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem'"
},
{
"path": "bonus-servicecalls/demo/src/components/TodoListItem.tsx",
"chars": 2574,
"preview": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react"
},
{
"path": "bonus-servicecalls/demo/src/index.tsx",
"chars": 857,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { reducer } from './reducers';\nimport { createStore,"
},
{
"path": "bonus-servicecalls/demo/src/reducers/index.ts",
"chars": 942,
"preview": "import { Store } from '../store';\nimport { combineReducers } from 'redux';\nimport { createReducer } from 'redux-starter-"
},
{
"path": "bonus-servicecalls/demo/src/service/index.ts",
"chars": 1159,
"preview": "import { TodoItem, Store } from '../store';\nconst HOST = 'http://localhost:3000';\n\nexport async function add(id: string,"
},
{
"path": "bonus-servicecalls/demo/src/store/index.ts",
"chars": 224,
"preview": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n label: string;\n completed: boo"
},
{
"path": "index.html",
"chars": 6690,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, init"
},
{
"path": "jest.config.js",
"chars": 161,
"preview": "module.exports = {\n preset: 'ts-jest',\n setupFiles: ['./jest.setup.js'],\n testEnvironment: 'jsdom',\n testPathIgnoreP"
},
{
"path": "jest.setup.js",
"chars": 143,
"preview": "// setup file\nvar enzyme = require('enzyme');\nvar Adapter = require('enzyme-adapter-react-16');\n\nenzyme.configure({ adap"
},
{
"path": "markdownReadme/src/index.ts",
"chars": 1822,
"preview": "import marked, { Renderer } from 'marked';\nimport hljs from 'highlight.js/lib/highlight';\nimport javascript from 'highli"
},
{
"path": "package.json",
"chars": 2182,
"preview": "{\n \"name\": \"bootcamp\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"http"
},
{
"path": "playground/index.html",
"chars": 430,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <style>\n html,\n body {\n margin: 0;\n padding: 0;\n }\n "
},
{
"path": "prettier.config.js",
"chars": 76,
"preview": "module.exports = {\n singleQuote: true,\n tabWidth: 2,\n printWidth: 140\n};\n"
},
{
"path": "server/index.js",
"chars": 1258,
"preview": "// @ts-check\nconst fs = require('fs');\nconst express = require('express');\nconst bodyParser = require('body-parser');\nco"
},
{
"path": "server/now.json",
"chars": 149,
"preview": "{\n \"version\": 2,\n \"name\": \"todo-server\",\n \"builds\": [{ \"src\": \"*.js\", \"use\": \"@now/node-server\" }],\n \"env\": {\n \"N"
},
{
"path": "step1-01/demo/index.html",
"chars": 9136,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <title>Intro to HTML</title>\n <link rel=\"stylesheet\" href=\"./style.css\" />\n\n <"
},
{
"path": "step1-01/demo/style.css",
"chars": 289,
"preview": "aside {\n float: right;\n width: 33%;\n padding: 10px;\n background: #eee;\n}\n\nform > div {\n margin-bottom: 20px;\n}\n\nh2 "
},
{
"path": "step1-01/exercise/README.md",
"chars": 222,
"preview": "# Step 1.1 - Introduction to HTML (Exercise)\n\nSee index.html from [npm start](http://localhost:8080/step1-01/exercise/) "
},
{
"path": "step1-01/exercise/answers.html",
"chars": 1796,
"preview": "<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 o"
},
{
"path": "step1-01/exercise/index.html",
"chars": 2408,
"preview": "<html>\n <body>\n <div\n class=\"codepen\"\n data-theme-id=\"36294\"\n data-prefill\n data-editable=\"true\""
},
{
"path": "step1-01/lesson/README.md",
"chars": 3212,
"preview": "# Step 1.1 - Introduction to HTML\n\n[Demo](../demo/) | [Exercise](../exercise/)\n\n## How the web works\n\nA simple web page "
},
{
"path": "step1-01/lesson/index.html",
"chars": 258,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step1-01/lesson/src/index.tsx",
"chars": 0,
"preview": ""
},
{
"path": "step1-02/demo/index.html",
"chars": 2879,
"preview": "<html>\n <body>\n <div\n class=\"codepen\"\n data-theme-id=\"36294\"\n data-prefill\n data-editable=\"true\""
},
{
"path": "step1-02/exercise/README.md",
"chars": 221,
"preview": "# Step 1.2 - Introduction to CSS (Exercise)\n\nSee index.html from [npm start](http://localhost:8080/step1-02/exercise/) o"
},
{
"path": "step1-02/exercise/answers.css",
"chars": 494,
"preview": "/* 1. Text Color: Red */\nh2 {\n color: red;\n}\n\n/* 2. Color Green (hint: Sibling Selector) */\nh2 + div {\n color: green;\n"
},
{
"path": "step1-02/exercise/index.html",
"chars": 1339,
"preview": "<html>\n <body>\n <div\n class=\"codepen\"\n data-theme-id=\"36294\"\n data-prefill\n data-editable=\"true\""
},
{
"path": "step1-02/lesson/README.md",
"chars": 1948,
"preview": "# Step 1.2 - Introduction to CSS (Demo)\n\n[Demo](../demo/) | [Exercise](../exercise/)\n\n## CSS properties\n\nNow that we've "
},
{
"path": "step1-02/lesson/index.html",
"chars": 258,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step1-02/lesson/src/index.tsx",
"chars": 0,
"preview": ""
},
{
"path": "step1-03/demo/index.html",
"chars": 1275,
"preview": "<html>\n <body>\n <div\n class=\"codepen\"\n data-theme-id=\"36294\"\n data-prefill\n data-editable=\"true\""
},
{
"path": "step1-03/exercise/README.md",
"chars": 228,
"preview": "# Step 1.3 - Introduction to JavaScript (Exercise)\n\nSee index.html from [npm start](http://localhost:8080/step1-03/exerc"
},
{
"path": "step1-03/exercise/answer.js",
"chars": 386,
"preview": "function getFavs() {\n let favList = [];\n const inputs = document.querySelectorAll('input');\n for (const input of inpu"
},
{
"path": "step1-03/exercise/index.html",
"chars": 2210,
"preview": "<html>\n <body>\n <div\n class=\"codepen\"\n data-theme-id=\"36294\"\n data-prefill\n data-editable=\"true\""
},
{
"path": "step1-03/lesson/README.md",
"chars": 8945,
"preview": "# Step 1.3 - Introduction to JavaScript (Demo)\n\nIt's entirely possible to create a website with nothing but HTML and CSS"
},
{
"path": "step1-03/lesson/index.html",
"chars": 258,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step1-03/lesson/src/index.tsx",
"chars": 0,
"preview": ""
},
{
"path": "step1-04/demo/index.html",
"chars": 757,
"preview": "\n<html>\n <body>\n <div\n class=\"codepen\"\n data-theme-id=\"36294\"\n data-prefill\n data-editable=\"true"
},
{
"path": "step1-04/final/README.md",
"chars": 181,
"preview": "# Step 1.4 - Introduction to React (Final)\n\nTake a look at the contents of the `src` folder to see final versions of the"
},
{
"path": "step1-04/final/index.html",
"chars": 75,
"preview": "<!DOCTYPE html>\n<html>\n <body>\n <div id=\"app\"></div>\n </body>\n</html>\n"
},
{
"path": "step1-04/final/src/App.tsx",
"chars": 211,
"preview": "import React from 'react';\nimport { Counter } from './components/Counter';\n\nexport const App = props => {\n return (\n "
},
{
"path": "step1-04/final/src/components/Button.css",
"chars": 207,
"preview": ".Button {\n display: block;\n background: #0078d4;\n color: white;\n padding: 5px 10px;\n outline: none;\n border: none;"
},
{
"path": "step1-04/final/src/components/Button.tsx",
"chars": 196,
"preview": "import React from 'react';\nimport './Button.css';\n\nexport const Button = props => {\n return (\n <button className=\"Bu"
},
{
"path": "step1-04/final/src/components/Counter.tsx",
"chars": 336,
"preview": "import React from 'react';\nimport { Button } from './Button';\n\nexport const Counter = props => {\n const [clicks, setCli"
},
{
"path": "step1-04/final/src/index.tsx",
"chars": 149,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { App } from './App';\n\nReactDOM.render(<App />, docu"
},
{
"path": "step1-04/lesson/README.md",
"chars": 7617,
"preview": "# Step 1.4 - Introduction to React (Demo)\n\nIn this demo we'll be creating a simple counter that will display a count and"
},
{
"path": "step1-04/lesson/index.html",
"chars": 258,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step1-04/lesson/src/index.tsx",
"chars": 0,
"preview": ""
},
{
"path": "step1-05/TodoApp.html",
"chars": 931,
"preview": "<!DOCTYPE html>\n<html>\n <body>\n <header>\n <h1>todos <small>(1.5)</small></h1>\n <div class=\"addTodo\">\n "
},
{
"path": "step1-05/demo/README.md",
"chars": 1907,
"preview": "# Step 1.5 - Building a static page in React (Demo)\n\nTo start building our todo application, we'll follow the steps outl"
},
{
"path": "step1-05/demo/index.html",
"chars": 128,
"preview": "<!DOCTYPE html>\n<html>\n <link rel=\"stylesheet\" href=\"./src/style.css\" />\n <body>\n <div id=\"app\"></div>\n </body>\n</"
},
{
"path": "step1-05/demo/src/App.tsx",
"chars": 123,
"preview": "import React from 'react';\n\nexport const TodoApp = () => {\n return (\n <div>\n <p>Hello World</p>\n </div>\n );"
},
{
"path": "step1-05/demo/src/index.tsx",
"chars": 156,
"preview": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { TodoApp } from \"./App\";\nReactDOM.render(<TodoApp /"
},
{
"path": "step1-05/demo/src/style.css",
"chars": 535,
"preview": "body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n width: 400px;\n margin: 20px auto;\n}\n\nh1 {\n te"
},
{
"path": "step1-05/exercise/README.md",
"chars": 1326,
"preview": "# Step 1.5 - Building a static page in React (Exercise)\n\nFrom this exercise on, we'll be working in VS Code instead of C"
},
{
"path": "step1-05/exercise/index.html",
"chars": 128,
"preview": "<!DOCTYPE html>\n<html>\n <link rel=\"stylesheet\" href=\"./src/style.css\" />\n <body>\n <div id=\"app\"></div>\n </body>\n</"
},
{
"path": "step1-05/exercise/src/App.tsx",
"chars": 173,
"preview": "import React from 'react';\nimport { TodoHeader } from './components/TodoHeader';\n\nexport const TodoApp = () => {\n retur"
},
{
"path": "step1-05/exercise/src/components/TodoHeader.tsx",
"chars": 474,
"preview": "import React from 'react';\n\nexport const TodoHeader = () => {\n return (\n <header>\n <h1>todos <small>(1.5 exerci"
},
{
"path": "step1-05/exercise/src/components/TodoListItem.tsx",
"chars": 188,
"preview": "import React from \"react\";\n\nexport const TodoListItem = () => {\n return (\n <li className=\"todo\">\n <label>\n "
},
{
"path": "step1-05/exercise/src/index.tsx",
"chars": 156,
"preview": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { TodoApp } from \"./App\";\nReactDOM.render(<TodoApp /"
},
{
"path": "step1-05/exercise/src/style.css",
"chars": 566,
"preview": "body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n width: 400px;\n margin: 20px auto;\n}\n\nh1 {\n te"
},
{
"path": "step1-06/demo/README.md",
"chars": 5203,
"preview": "# Step 1.6 - Creating a state-driven UI (Demo)\n\nIn React, the data travels in one direction: top-down in the form of sta"
},
{
"path": "step1-06/demo/index.html",
"chars": 128,
"preview": "<!DOCTYPE html>\n<html>\n <link rel=\"stylesheet\" href=\"./src/style.css\" />\n <body>\n <div id=\"app\"></div>\n </body>\n</"
},
{
"path": "step1-06/demo/src/TodoApp.tsx",
"chars": 317,
"preview": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './component"
},
{
"path": "step1-06/demo/src/components/TodoFooter.tsx",
"chars": 305,
"preview": "import React from 'react';\n\nexport const TodoFooter = (props: any) => {\n // const itemCount = Object.keys(props.todos)."
},
{
"path": "step1-06/demo/src/components/TodoHeader.tsx",
"chars": 630,
"preview": "import React from 'react';\n\nexport const TodoHeader = (props) => {\n\n const [inputText, setInputText] = React.useState('"
},
{
"path": "step1-06/demo/src/components/TodoList.tsx",
"chars": 480,
"preview": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\n\nexport const TodoList = (props) => {\n const "
},
{
"path": "step1-06/demo/src/components/TodoListItem.tsx",
"chars": 190,
"preview": "import React from \"react\";\n\nexport const TodoListItem = () => {\n return (\n <li className=\"todo\">\n <label>\n "
},
{
"path": "step1-06/demo/src/index.tsx",
"chars": 160,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoA"
},
{
"path": "step1-06/demo/src/style.css",
"chars": 566,
"preview": "body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n width: 400px;\n margin: 20px auto;\n}\n\nh1 {\n te"
},
{
"path": "step1-06/exercise/README.md",
"chars": 950,
"preview": "# Step 1.6 - Creating a state-driven UI (Exercise)\n\nIf you don't already have the app running, start it by running `npm "
},
{
"path": "step1-06/exercise/index.html",
"chars": 128,
"preview": "<!DOCTYPE html>\n<html>\n <link rel=\"stylesheet\" href=\"./src/style.css\" />\n <body>\n <div id=\"app\"></div>\n </body>\n</"
},
{
"path": "step1-06/exercise/src/TodoApp.tsx",
"chars": 782,
"preview": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './component"
},
{
"path": "step1-06/exercise/src/components/TodoFooter.tsx",
"chars": 286,
"preview": "import React from 'react';\n\nexport const TodoFooter = (props) => {\n const itemCount = props.todos.filter((todo) => todo"
},
{
"path": "step1-06/exercise/src/components/TodoHeader.tsx",
"chars": 804,
"preview": "import React from 'react';\n\nexport const TodoHeader = (props) => {\n const [inputText, setInputText] = React.useState<st"
},
{
"path": "step1-06/exercise/src/components/TodoList.tsx",
"chars": 557,
"preview": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\n\nexport const TodoList = (props) => {\n const "
},
{
"path": "step1-06/exercise/src/components/TodoListItem.tsx",
"chars": 195,
"preview": "import React from 'react';\n\nexport const TodoListItem = (props) => {\n return (\n <li className=\"todo\">\n <label>\n"
},
{
"path": "step1-06/exercise/src/index.tsx",
"chars": 160,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoA"
},
{
"path": "step1-06/exercise/src/style.css",
"chars": 566,
"preview": "body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n width: 400px;\n margin: 20px auto;\n}\n\nh1 {\n te"
},
{
"path": "step1-06/index.html",
"chars": 518,
"preview": "<html>\n <head>\n <link rel=\"stylesheet\" href=\"../assets/shared.css\" />\n <link rel=\"stylesheet\" href=\"https://stati"
},
{
"path": "step1-07/demo/README.md",
"chars": 7426,
"preview": "# 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 ou"
},
{
"path": "step1-07/demo/index.html",
"chars": 128,
"preview": "<!DOCTYPE html>\n<html>\n <link rel=\"stylesheet\" href=\"./src/style.css\" />\n <body>\n <div id=\"app\"></div>\n </body>\n</"
},
{
"path": "step1-07/demo/src/TodoApp.tsx",
"chars": 1841,
"preview": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './component"
},
{
"path": "step1-07/demo/src/TodoApp.types.ts",
"chars": 424,
"preview": "export type FilterTypes = 'all' | 'active' | 'completed';\nexport type TodoType = 'active' | 'completed' | 'cleared';\n\nex"
},
{
"path": "step1-07/demo/src/components/TodoFooter.tsx",
"chars": 395,
"preview": "import React from 'react';\n\nexport const TodoFooter = (props) => {\n const { clearCompleted, todos } = props;\n\n const i"
},
{
"path": "step1-07/demo/src/components/TodoHeader.tsx",
"chars": 1014,
"preview": "import React from 'react';\n\nexport const TodoHeader = (props) => {\n const [inputText, setInputText] = React.useState<st"
},
{
"path": "step1-07/demo/src/components/TodoList.tsx",
"chars": 557,
"preview": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\n\nexport const TodoList = (props) => {\n const "
},
{
"path": "step1-07/demo/src/components/TodoListItem.tsx",
"chars": 268,
"preview": "import React from 'react';\n\nexport const TodoListItem = (props) => {\n const { label, status, id } = props;\n\n return (\n"
},
{
"path": "step1-07/demo/src/index.tsx",
"chars": 160,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoA"
},
{
"path": "step1-07/demo/src/style.css",
"chars": 566,
"preview": "body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n width: 400px;\n margin: 20px auto;\n}\n\nh1 {\n te"
},
{
"path": "step1-07/exercise/README.md",
"chars": 1085,
"preview": "# Step 1.7 - Types and creating a UI-driven state (Exercise)\n\nIf you don't already have the app running, start it by run"
},
{
"path": "step1-07/exercise/index.html",
"chars": 128,
"preview": "<!DOCTYPE html>\n<html>\n <link rel=\"stylesheet\" href=\"./src/style.css\" />\n <body>\n <div id=\"app\"></div>\n </body>\n</"
},
{
"path": "step1-07/exercise/src/TodoApp.tsx",
"chars": 1827,
"preview": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './component"
},
{
"path": "step1-07/exercise/src/TodoApp.types.ts",
"chars": 424,
"preview": "export type FilterTypes = 'all' | 'active' | 'completed';\nexport type TodoType = 'active' | 'completed' | 'cleared';\n\nex"
},
{
"path": "step1-07/exercise/src/components/TodoFooter.tsx",
"chars": 395,
"preview": "import React from 'react';\n\nexport const TodoFooter = (props) => {\n const { clearCompleted, todos } = props;\n\n const i"
},
{
"path": "step1-07/exercise/src/components/TodoHeader.tsx",
"chars": 1014,
"preview": "import React from 'react';\n\nexport const TodoHeader = (props) => {\n const [inputText, setInputText] = React.useState<st"
},
{
"path": "step1-07/exercise/src/components/TodoList.tsx",
"chars": 787,
"preview": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\nimport { FilterTypes, Todos } from '../TodoApp"
},
{
"path": "step1-07/exercise/src/components/TodoListItem.tsx",
"chars": 517,
"preview": "import React from 'react';\nimport { Todo, ToggleCompleted } from '../TodoApp.types';\n\ninterface TodoListItemProps extend"
},
{
"path": "step1-07/exercise/src/index.tsx",
"chars": 160,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoA"
},
{
"path": "step1-07/exercise/src/style.css",
"chars": 566,
"preview": "body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n width: 400px;\n margin: 20px auto;\n}\n\nh1 {\n te"
},
{
"path": "step1-07/final/index.html",
"chars": 128,
"preview": "<!DOCTYPE html>\n<html>\n <link rel=\"stylesheet\" href=\"./src/style.css\" />\n <body>\n <div id=\"app\"></div>\n </body>\n</"
},
{
"path": "step1-07/final/src/TodoApp.tsx",
"chars": 2058,
"preview": "import React from 'react';\nimport { TodoFooter } from './components/TodoFooter';\nimport { TodoHeader } from './component"
},
{
"path": "step1-07/final/src/TodoApp.types.ts",
"chars": 474,
"preview": "export type FilterTypes = 'all' | 'active' | 'completed';\nexport type TodoType = 'active' | 'completed' | 'cleared';\n\nex"
},
{
"path": "step1-07/final/src/components/TodoFooter.tsx",
"chars": 540,
"preview": "import React from 'react';\nimport { AppContext } from '../TodoApp';\n\nexport const TodoFooter = () => {\n const { clearCo"
},
{
"path": "step1-07/final/src/components/TodoHeader.tsx",
"chars": 1393,
"preview": "import React, { ChangeEventHandler, MouseEventHandler, useState, useContext } from 'react';\nimport { FilterTypes } from "
},
{
"path": "step1-07/final/src/components/TodoList.tsx",
"chars": 643,
"preview": "import React from 'react';\nimport { TodoListItem } from './TodoListItem';\nimport { AppContext } from '../TodoApp';\n\nexpo"
},
{
"path": "step1-07/final/src/components/TodoListItem.tsx",
"chars": 453,
"preview": "import React from 'react';\nimport { Todo } from '../TodoApp.types';\nimport { AppContext } from '../TodoApp';\n\nexport con"
},
{
"path": "step1-07/final/src/index.tsx",
"chars": 160,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './TodoApp';\nReactDOM.render(<TodoA"
},
{
"path": "step1-07/final/src/style.css",
"chars": 566,
"preview": "body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n width: 400px;\n margin: 20px auto;\n}\n\nh1 {\n te"
},
{
"path": "step2-01/demo/README.md",
"chars": 5637,
"preview": "# Step 2.1 - Introduction to TypeScript (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/) | [Final](../final/)\n\nIn th"
},
{
"path": "step2-01/demo/index.html",
"chars": 427,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step2-01/demo/src/async/index.ts",
"chars": 310,
"preview": "async function fetchSomething() {\n const response = await fetch('http://localhost:3000/hello');\n return await response"
},
{
"path": "step2-01/demo/src/generics/index.ts",
"chars": 446,
"preview": "// Generics for classes\nclass Stack<T = number> {\n private data: T[] = [];\n\n push(item: T) {\n this.data.push(item);"
},
{
"path": "step2-01/demo/src/index.tsx",
"chars": 240,
"preview": "// Interesting TypeScript Topics\n\n// types\nimport './types';\n\n// interface\nimport './interfaces';\n\n// modularity\nimport "
},
{
"path": "step2-01/demo/src/interfaces/index.ts",
"chars": 612,
"preview": "// Interface for an object or class\ninterface Car {\n make: string;\n model: string;\n}\n\nclass MyCar implements Car {\n m"
},
{
"path": "step2-01/demo/src/modules/default.ts",
"chars": 57,
"preview": "export default class DefaultClass {\n hello = 'world';\n}\n"
},
{
"path": "step2-01/demo/src/modules/index.ts",
"chars": 1020,
"preview": "// These are named imports from a file relative to this file\nimport { namedConst, namedFn, namedObj, namedConstBracket }"
},
{
"path": "step2-01/demo/src/modules/named.ts",
"chars": 181,
"preview": "export const namedConst = 5;\n\nexport function namedFn() {\n return 5;\n}\n\nexport const namedObj = {\n hello: 'world'\n};\n\n"
},
{
"path": "step2-01/demo/src/spread/index.ts",
"chars": 496,
"preview": "// Destructuring\nvar [a, b, ...rest] = [1, 2, 3, 4];\nconsole.log(a, b, rest); // 1 2 [3,4]\n\n// Array assignment\nvar list"
},
{
"path": "step2-01/demo/src/types/index.ts",
"chars": 1250,
"preview": "// Basic Types\nlet isDone: boolean = false;\nlet decimal: number = 6;\nlet color: string = 'blue';\nlet sky: string = `the "
},
{
"path": "step2-01/exercise/README.md",
"chars": 2615,
"preview": "# Step 2.1 - Introduction to TypeScript (Exercise)\n\n[Lessons](../../) | [Demo](../demo/) | [Final](../final/)\n\nIf you do"
},
{
"path": "step2-01/exercise/index.html",
"chars": 454,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step2-01/exercise/src/fibonacci.ts",
"chars": 188,
"preview": "// TODO: create a named export of a function called fib(n)\n// export function fib(n: number) ...\n\n// TODO: create a defa"
},
{
"path": "step2-01/exercise/src/index.ts",
"chars": 1335,
"preview": "// TODO: import the fib(n) function and the constant from './fibonacci.ts'\n// import FibConst, {fib} from ...\n\n// TODO: "
},
{
"path": "step2-01/exercise/src/stack.ts",
"chars": 125,
"preview": "// TODO: create a Stack<T> generic class here:\n\n// export class Stack<T> {\n// push(...) { ... }\n// pop(...) { ... }\n"
},
{
"path": "step2-01/final/README.md",
"chars": 161,
"preview": "# Step 2.1 - Introduction to TypeScript (Final)\n\n[Lessons](../../) | [Demo](../demo/) | [Exercise](../exercise/)\n\nLook a"
},
{
"path": "step2-01/final/index.html",
"chars": 454,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step2-01/final/src/fibonacci.ts",
"chars": 136,
"preview": "export function fib(n: number) {\n return n <= 1 ? n : fib(n - 1) + fib(n - 2);\n}\n\nconst FibConst: number = 3;\nexport de"
},
{
"path": "step2-01/final/src/index.ts",
"chars": 1625,
"preview": "import FibConst, { fib } from './fibonacci';\nimport { Stack } from './stack';\n\nconsole.log('hello world');\n\n// ---- Modu"
},
{
"path": "step2-01/final/src/stack.ts",
"chars": 199,
"preview": "export class Stack<T> {\n private _store: T[];\n\n constructor() {\n this._store = [];\n }\n\n push(elem: T): void {\n "
},
{
"path": "step2-02/demo/README.md",
"chars": 3294,
"preview": "# Step 2.2 - UI Fabric component library (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\n[UI Fabric](https://devel"
},
{
"path": "step2-02/demo/index.html",
"chars": 282,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step2-02/demo/src/components/TodoApp.tsx",
"chars": 2062,
"preview": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nim"
},
{
"path": "step2-02/demo/src/components/TodoFooter.tsx",
"chars": 614,
"preview": "import React from 'react';\nimport { Store } from '../store';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabri"
},
{
"path": "step2-02/demo/src/components/TodoHeader.tsx",
"chars": 1618,
"preview": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-rea"
},
{
"path": "step2-02/demo/src/components/TodoList.tsx",
"chars": 863,
"preview": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem'"
},
{
"path": "step2-02/demo/src/components/TodoListItem.tsx",
"chars": 2156,
"preview": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react"
},
{
"path": "step2-02/demo/src/index.tsx",
"chars": 383,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { in"
},
{
"path": "step2-02/demo/src/store/index.ts",
"chars": 224,
"preview": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n label: string;\n completed: boo"
},
{
"path": "step2-02/exercise/README.md",
"chars": 1260,
"preview": "# Step 2.2 - UI Fabric component library (Exercise)\n\n[Lessons](../../) | [Demo](../demo/)\n\n# Exercise 1: Getting familia"
},
{
"path": "step2-02/exercise/index.html",
"chars": 299,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step2-02/exercise/src/components/TodoApp.tsx",
"chars": 2061,
"preview": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoFooter } from './TodoFooter';\nim"
},
{
"path": "step2-02/exercise/src/components/TodoFooter.tsx",
"chars": 768,
"preview": "import React from 'react';\nimport { Store } from '../store';\n\n// TODO: import DefaultButton, Stack, and Text\n\ninterface "
},
{
"path": "step2-02/exercise/src/components/TodoHeader.tsx",
"chars": 1622,
"preview": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-rea"
},
{
"path": "step2-02/exercise/src/components/TodoList.tsx",
"chars": 863,
"preview": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem'"
},
{
"path": "step2-02/exercise/src/components/TodoListItem.tsx",
"chars": 2156,
"preview": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react"
},
{
"path": "step2-02/exercise/src/index.tsx",
"chars": 383,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { in"
},
{
"path": "step2-02/exercise/src/store/index.ts",
"chars": 224,
"preview": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n label: string;\n completed: boo"
},
{
"path": "step2-03/demo/README.md",
"chars": 5543,
"preview": "# Step 2.3 - Theming and styling with UI Fabric (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\nIn this section, w"
},
{
"path": "step2-03/demo/index.html",
"chars": 282,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step2-03/demo/src/components/TodoApp.tsx",
"chars": 2982,
"preview": "import React from 'react';\nimport { Stack, Customizer, mergeStyles, getTheme, loadTheme } from 'office-ui-fabric-react';"
},
{
"path": "step2-03/demo/src/components/TodoFooter.tsx",
"chars": 738,
"preview": "import React from 'react';\nimport { Store } from '../store';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabri"
},
{
"path": "step2-03/demo/src/components/TodoHeader.tsx",
"chars": 1899,
"preview": "import React from 'react';\nimport { Stack, Text, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-rea"
},
{
"path": "step2-03/demo/src/components/TodoList.tsx",
"chars": 863,
"preview": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem'"
},
{
"path": "step2-03/demo/src/components/TodoListItem.tsx",
"chars": 2117,
"preview": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react"
},
{
"path": "step2-03/demo/src/index.tsx",
"chars": 383,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { in"
},
{
"path": "step2-03/demo/src/store/index.ts",
"chars": 224,
"preview": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n label: string;\n completed: boo"
},
{
"path": "step2-03/exercise/README.md",
"chars": 1937,
"preview": "# Step 2.3 - Theming and styling with UI Fabric (Exercise)\n\n[Lessons](../../) | [Demo](../demo/)\n\nIf you don't already h"
},
{
"path": "step2-03/exercise/index.html",
"chars": 299,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step2-03/exercise/src/components/TodoApp.tsx",
"chars": 2357,
"preview": "import React from 'react';\nimport { Stack, Customizer, mergeStyles, getTheme } from 'office-ui-fabric-react';\nimport { T"
},
{
"path": "step2-03/exercise/src/components/TodoFooter.tsx",
"chars": 826,
"preview": "import React from 'react';\nimport { Store } from '../store';\nimport { DefaultButton, Stack, Text } from 'office-ui-fabri"
},
{
"path": "step2-03/exercise/src/components/TodoHeader.tsx",
"chars": 1645,
"preview": "import React from 'react';\nimport { Text, Stack, Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-rea"
},
{
"path": "step2-03/exercise/src/components/TodoList.tsx",
"chars": 863,
"preview": "import React from 'react';\nimport { Stack } from 'office-ui-fabric-react';\nimport { TodoListItem } from './TodoListItem'"
},
{
"path": "step2-03/exercise/src/components/TodoListItem.tsx",
"chars": 2117,
"preview": "import React from 'react';\nimport { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react"
},
{
"path": "step2-03/exercise/src/index.tsx",
"chars": 383,
"preview": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { TodoApp } from './components/TodoApp';\nimport { in"
},
{
"path": "step2-03/exercise/src/store/index.ts",
"chars": 224,
"preview": "export type FilterTypes = 'all' | 'active' | 'completed';\n\nexport interface TodoItem {\n label: string;\n completed: boo"
},
{
"path": "step2-04/demo/README.md",
"chars": 4083,
"preview": "# Step 2.4 - React Context (Demo)\n\n[Lessons](../../) | [Exercise](../exercise/)\n\nIn this step, we describe some problems"
},
{
"path": "step2-04/demo/index.html",
"chars": 282,
"preview": "<!DOCTYPE html>\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"../../assets/step.css\" />\n </head>\n <body class=\"ms-F"
},
{
"path": "step2-04/demo/src/TodoContext.ts",
"chars": 173,
"preview": "import React from 'react';\n\n// The typing forces us to put something inside createContext(); start with undefined\nexport"
}
]
// ... and 53 more files (download for full content)
About this extraction
This page contains the full source code of the microsoft/frontend-bootcamp GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 253 files (284.4 KB), approximately 81.3k tokens, and a symbol index with 273 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.