From 7cea32428e16b33a2ae4e54d2a87274a8171559b Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Thu, 13 Jan 2022 09:22:50 -0800 Subject: [PATCH] Rewrite of Day 1 to use modern React (#294) * update to hooks * more class to function * cleanup * finish ts final * update html lesson * add lessons page * clean up * move getters into context * adding type * fix bug * step 5 cleanup * init final pass * text tweak * fix ternaries * readme cleanup * fixed root readme --- README.md | 12 +- assets/scripts.js | 6 +- assets/step.css | 15 +- index.html | 18 +-- markdownReadme/src/index.ts | 4 + step1-01/demo/index.html | 49 +++++++ step1-01/{demo => lesson}/README.md | 12 +- step1-01/lesson/index.html | 11 ++ step1-01/lesson/src/index.tsx | 0 step1-02/demo/index.html | 2 +- step1-02/{demo => lesson}/README.md | 4 + step1-02/lesson/index.html | 11 ++ step1-02/lesson/src/index.tsx | 0 step1-03/{demo => lesson}/README.md | 21 ++- step1-03/lesson/index.html | 11 ++ step1-03/lesson/src/index.tsx | 0 step1-04/demo/index.html | 2 +- step1-04/final/src/components/Counter.tsx | 33 ++--- step1-04/{demo => lesson}/README.md | 113 +++++---------- step1-04/lesson/index.html | 11 ++ step1-04/lesson/src/index.tsx | 0 step1-05/demo/README.md | 69 ++++----- step1-05/demo/src/App.tsx | 14 +- step1-05/exercise/README.md | 8 +- step1-05/exercise/src/App.tsx | 14 +- .../exercise/src/components/TodoHeader.tsx | 32 ++--- .../exercise/src/components/TodoListItem.tsx | 18 ++- step1-06/demo/README.md | 109 +++++++------- step1-06/demo/src/TodoApp.tsx | 18 ++- step1-06/demo/src/components/TodoHeader.tsx | 43 +++--- step1-06/demo/src/components/TodoList.tsx | 25 ++-- step1-06/demo/src/components/TodoListItem.tsx | 16 +-- step1-06/exercise/README.md | 4 +- step1-06/exercise/src/TodoApp.tsx | 68 +++++---- .../exercise/src/components/TodoFooter.tsx | 4 +- .../exercise/src/components/TodoHeader.tsx | 47 +++---- step1-06/exercise/src/components/TodoList.tsx | 31 ++-- .../exercise/src/components/TodoListItem.tsx | 16 +-- step1-07/demo/README.md | 78 +++++----- step1-07/demo/index.html | 2 + step1-07/demo/src/TodoApp.tsx | 132 ++++++++--------- step1-07/demo/src/TodoApp.types.ts | 18 ++- step1-07/demo/src/components/TodoFooter.tsx | 13 +- step1-07/demo/src/components/TodoHeader.tsx | 57 ++++---- step1-07/demo/src/components/TodoList.tsx | 31 ++-- step1-07/demo/src/components/TodoListItem.tsx | 23 ++- step1-07/exercise/README.md | 20 +-- step1-07/exercise/src/TodoApp.tsx | 131 ++++++++--------- step1-07/exercise/src/TodoApp.types.ts | 18 ++- .../exercise/src/components/TodoFooter.tsx | 13 +- .../exercise/src/components/TodoHeader.tsx | 58 ++++---- step1-07/exercise/src/components/TodoList.tsx | 34 ++--- .../exercise/src/components/TodoListItem.tsx | 31 ++-- step1-07/final/src/TodoApp.tsx | 133 +++++++++++------- step1-07/final/src/TodoApp.types.ts | 18 ++- step1-07/final/src/components/TodoFooter.tsx | 18 ++- step1-07/final/src/components/TodoHeader.tsx | 81 ++++------- step1-07/final/src/components/TodoList.tsx | 39 +++-- .../final/src/components/TodoListItem.tsx | 31 ++-- webpack.config.js | 2 +- 60 files changed, 923 insertions(+), 929 deletions(-) rename step1-01/{demo => lesson}/README.md (90%) create mode 100644 step1-01/lesson/index.html create mode 100644 step1-01/lesson/src/index.tsx rename step1-02/{demo => lesson}/README.md (93%) create mode 100644 step1-02/lesson/index.html create mode 100644 step1-02/lesson/src/index.tsx rename step1-03/{demo => lesson}/README.md (94%) create mode 100644 step1-03/lesson/index.html create mode 100644 step1-03/lesson/src/index.tsx rename step1-04/{demo => lesson}/README.md (58%) create mode 100644 step1-04/lesson/index.html create mode 100644 step1-04/lesson/src/index.tsx diff --git a/README.md b/README.md index f74b3b0..aa2f817 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # Frontend Bootcamp / Days in the Web -> 🚨🚨 This project is a work in progress! Issues and pull requests are encouraged. 🚨🚨 - ## Welcome In this two-day workshop you'll learn the basics of frontend development while building a working web app. @@ -73,7 +71,7 @@ Day one covers the basics of HTML, CSS and JavaScript, as well as an introductio ### Day two 1. [TypeScript basics](step2-01) -2. [UI Fabric component library](step2-02) +2. [Fluent UI component library](step2-02) 3. [Theming and styling](step2-03) 4. [React Context](step2-04) 5. [Redux: Store](step2-05) @@ -97,12 +95,6 @@ If you are interested in JavaScript, TypeScript, React, Redux, or Design Systems - [@kenneth_chau](https://twitter.com/kenneth_chau) - [@micahgodbolt](https://twitter.com/micahgodbolt) -## Other projects from the UI Fabric team at Microsoft - -- [UI Fabric](https://developer.microsoft.com/en-us/fabric) - [github repo](https://github.com/officedev/office-ui-fabric-react) -- [Just](https://microsoft.github.io/just): The task library that just works - [github repo](https://github.com/Microsoft/just) -- [Rush](https://rushjs.io): A scalable monorepo manager for the web - [github repo](https://github.com/Microsoft/web-build-tools/) - ## Contributing This project welcomes contributions and suggestions. Most contributions require you to agree to a @@ -132,4 +124,4 @@ Microsoft's general trademark guidelines can be found at http://go.microsoft.com 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. +or trademarks, whether by implication, estoppel or otherwise. \ No newline at end of file diff --git a/assets/scripts.js b/assets/scripts.js index 1c3cfda..743b39a 100644 --- a/assets/scripts.js +++ b/assets/scripts.js @@ -1,11 +1,11 @@ // 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 +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}); + window.appInsights = appInsights, appInsights.queue && 0 === appInsights.queue.length && appInsights.trackPageView(null, null, { urlReferrer: document.referrer }); } diff --git a/assets/step.css b/assets/step.css index db9feca..bc04602 100644 --- a/assets/step.css +++ b/assets/step.css @@ -7,8 +7,21 @@ body { padding: 0; } +img { + max-width: 100%; +} + +li { + margin-bottom: 3px; +} + +blockquote { + background: white; + padding: 0px 5px; +} + body.ms-Fabric { - font-size: 14px; + font-size: 16px; line-height: 20px; } diff --git a/index.html b/index.html index 451024f..39d64f2 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,8 @@
Intro to HTML
- demo | exercise + lesson | demo | + exercise
@@ -29,7 +30,8 @@
Intro to CSS
- demo | exercise + lesson | demo | + exercise
@@ -37,7 +39,8 @@
Intro to JS
- demo | exercise + lesson | demo | + exercise
@@ -45,7 +48,7 @@
React Intro
- demo | + lesson | demo | final
@@ -87,7 +90,8 @@
TypeScript Basics
- demo | exercise | final + demo | exercise | + final
@@ -140,9 +144,7 @@ Some Extra Bonus Lessons!! Yay! Bonus!!
  • - - Redux: Service Calls - + Redux: Service Calls
  • diff --git a/markdownReadme/src/index.ts b/markdownReadme/src/index.ts index eda520b..1854248 100644 --- a/markdownReadme/src/index.ts +++ b/markdownReadme/src/index.ts @@ -2,9 +2,13 @@ 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'); diff --git a/step1-01/demo/index.html b/step1-01/demo/index.html index 6cfdbba..bffa350 100644 --- a/step1-01/demo/index.html +++ b/step1-01/demo/index.html @@ -5,6 +5,9 @@