microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

misc fixes

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-26 11:21:28 -08:00
parent 60041f1ba3
commit d8702ec24e
39 changed files with 99 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -17,7 +17,8 @@ This workshop starts as a very high level introduction to the core principles of
- Current version of [Node/NPM](https://nodejs.org/en/) - Current version of [Node/NPM](https://nodejs.org/en/)
- Install [Git](https://git-scm.com/downloads) - Install [Git](https://git-scm.com/downloads)
- [VSCode Editor](https://code.visualstudio.com) - [VSCode Editor](https://code.visualstudio.com)
- Up to date browser with dev tools (some demos will be shown using Chrome) - Up to date browser with React Developer Tools
- React Developer Tools: [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/)
### Getting Set Up ### Getting Set Up
@@ -48,13 +49,13 @@ This workshop starts as a very high level introduction to the core principles of
- [Exercise](step1-03/exercise) - [Exercise](step1-03/exercise)
4. [React Introduction](step1-04) 4. [React Introduction](step1-04)
- [Demo](step1-04/demo) - [Demo](step1-04/demo)
5. [Thinking in React: Building a Static Page](step1-05) 5. [Building a Static Page](step1-05)
- [Demo](step1-05/demo) - [Demo](step1-05/demo)
- [Exercise](step1-05/exercise) - [Exercise](step1-05/exercise)
6. [Thinking in React: State Driven UI](step1-06) 6. [State Driven UI](step1-06)
- [Demo](step1-06/demo) - [Demo](step1-06/demo)
- [Exercise](step1-06/exercise) - [Exercise](step1-06/exercise)
7. [Thinking in React: UI Driven State](step1-07) 7. [Types & UI Driven State](step1-07)
- [Demo](step1-07/demo) - [Demo](step1-07/demo)
- [Exercise](step1-07/exercise) - [Exercise](step1-07/exercise)

0
assets/track.js → assets/scripts.js
View File

4
index.html
View File

@@ -67,7 +67,7 @@
</li> </li>
<li class="Tile Tile--numbered"> <li class="Tile Tile--numbered">
<div class="Tile-link"> <div class="Tile-link">
UI-Driven State Types & <br />UI-Driven State
<div class="Tile-links"> <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/demo/">demo</a> | <a target="_blank" href="./step1-07/exercise/">exercise</a> |
<a target="_blank" href="./step1-07/final/">final</a> <a target="_blank" href="./step1-07/final/">final</a>
@@ -165,6 +165,6 @@
<li class="Tile Tile--unnumbered"><a target="_blank" href="./playground/" class="Tile-link">Playground</a></li> <li class="Tile Tile--unnumbered"><a target="_blank" href="./playground/" class="Tile-link">Playground</a></li>
</ul> </ul>
</div> </div>
<script src="./assets/track.js"></script> <script src="./assets/scripts.js"></script>
</body> </body>
</html> </html>

13
step1-01/html-demo/html-demo.html
View File

@@ -13,7 +13,18 @@
<body> <body>
<section> <section>
<h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2> <h2><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata">Document Meta Data</a></h2>
<p>head, title, link, style</p> <pre>
&lt;head&gt;
&lt;title&gt;Intro to HTML&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;./style.css&quot; /&gt;
&lt;style&gt;
hr {
margin: 40px;
}
&lt;/style&gt;
&lt;/head&gt;
</pre>
</section> </section>
<hr /> <hr />

1
step1-01/index.html
View File

@@ -15,5 +15,6 @@
</ul> </ul>
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
</div> </div>
<script src="../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step1-01/js-demo/js-demo-final.html
View File

@@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="../css-demo/css-demo-finished.css" /> <link rel="stylesheet" href="../css-demo/css-demo-final.css" />
</head> </head>
<body> <body>
<div> <div>

16
step1-02/index.html
View File

@@ -1,16 +0,0 @@
<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="./exercise/index.html" class="Tile-link">Exercise Start</a></li>
<li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
</ul>
</div>
</body>
</html>

16
step1-03/index.html
View File

@@ -1,16 +0,0 @@
<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="./exercise/index.html" class="Tile-link">Exercise Start</a></li>
<li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
</ul>
</div>
</body>
</html>

15
step1-04/index.html
View File

@@ -1,15 +0,0 @@
<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>

15
step1-05/index.html
View File

@@ -1,15 +0,0 @@
<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>

14
step1-06/demo/README.md
View File

@@ -71,10 +71,10 @@ I've already pulled out our props into `filter` and `todos` variables, and writt
} }
``` ```
- A JavaScript map takes in an array and transforms it into a new array - **map**: A JavaScript map takes in an array (filteredTodos) and transforms it into a new array (our rendered TodoListItems)
- We use the `id` from the `filterTodos` array as the [list key](https://reactjs.org/docs/lists-and-keys.html) to help React track each item as state changes. - **key**: We use the `id` from the `filterTodos` array as the [list key](https://reactjs.org/docs/lists-and-keys.html) to help React track each item as state changes.
- The key is not actually passed into the component, so we pass the key in as `id` as well. This will help us out later. - **id**: The key is not actually passed into the component, so we pass the key in as `id` as well. This will help us out later.
- Lastly we use the `id` to grab the todo from our `todos` object, then use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to pass through the todo's `label` and `completed` values. - **todos[id]**: Lastly we use the `id` to grab the todo from our `todos` object, then use the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to pass through the todo's `label` and `completed` values.
> This spread operator is the same as saying `label={todos[id].label} completed={todos[id].completed}`. Pretty obvious why spread is so handy! > This spread operator is the same as saying `label={todos[id].label} completed={todos[id].completed}`. Pretty obvious why spread is so handy!
### State Driven and Stateful Header ### State Driven and Stateful Header
@@ -87,9 +87,9 @@ In CSS based styling, visual states are applied by adding and removing classes.
```jsx ```jsx
<nav className="filter"> <nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button> <button className={filter == 'all' ? 'selected' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button> <button className={filter == 'active' ? 'selected' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button> <button className={filter == 'completed' ? 'selected' : ''}>completed</button>
</nav> </nav>
``` ```

2
step1-06/demo/src/components/TodoFooter.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
export const TodoFooter = (props: any) => { export const TodoFooter = (props: any) => {
const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length; // const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
return ( return (
<footer> <footer>
<span>4 items left</span> <span>4 items left</span>

6
step1-06/demo/src/components/TodoList.tsx
View File

@@ -5,9 +5,9 @@ export class TodoList extends React.Component<any, any> {
render() { render() {
const { filter, todos } = this.props; const { filter, todos } = this.props;
const filteredTodos = Object.keys(todos).filter(id => { // const filteredTodos = Object.keys(todos).filter(id => {
return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed); // return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
}); // });
return ( return (
<ul className="todos"> <ul className="todos">
<TodoListItem /> <TodoListItem />

6
step1-06/exercise/src/components/TodoHeader.tsx
View File

@@ -17,9 +17,9 @@ export class TodoHeader extends React.Component<any, any> {
<button className="submit">Add</button> <button className="submit">Add</button>
</div> </div>
<nav className="filter"> <nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button> <button className={filter == 'all' ? 'selected' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button> <button className={filter == 'active' ? 'selected' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button> <button className={filter == 'completed' ? 'selected' : ''}>completed</button>
</nav> </nav>
</header> </header>
); );

6
step1-06/final/src/components/TodoHeader.tsx
View File

@@ -17,9 +17,9 @@ export class TodoHeader extends React.Component<any, any> {
<button className="submit">Add</button> <button className="submit">Add</button>
</div> </div>
<nav className="filter"> <nav className="filter">
<button className={filter == 'all' ? 'completed' : ''}>all</button> <button className={filter == 'all' ? 'selected' : ''}>all</button>
<button className={filter == 'active' ? 'completed' : ''}>active</button> <button className={filter == 'active' ? 'selected' : ''}>active</button>
<button className={filter == 'completed' ? 'completed' : ''}>completed</button> <button className={filter == 'completed' ? 'selected' : ''}>completed</button>
</nav> </nav>
</header> </header>
); );

4
step1-07/demo/README.md
View File

@@ -160,8 +160,12 @@ const { label, completed, complete, id } = this.props;
And then use the input's `onChange` event to fire our `complete` callback. We can see in the signature that we expect and `id` of type string, so we'll pass our `id` prop in. And then use the input's `onChange` event to fire our `complete` callback. We can see in the signature that we expect and `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
```tsx ```tsx
<input type="checkbox" checked={completed} onChange={() => complete(id)} /> <input type="checkbox" checked={completed} onChange={() => complete(id)} />
``` ```
> Note that the function param and prop name just happen to be the same. This isn't required. > Note that the function param and prop name just happen to be the same. This isn't required.
Now that our todos are firing the `onChange` callback, give them a click and take look at how the app response. Since our footer text is driven off of the number of unchecked todos, the footer will automatically update to reflect the new state.

19
step1-07/demo/src/TodoApp.tsx
View File

@@ -10,7 +10,24 @@ export class TodoApp extends React.Component<any, any> {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
todos: {}, todos: {
'04': {
label: 'Todo 4',
completed: true
},
'03': {
label: 'Todo 3',
completed: false
},
'02': {
label: 'Todo 2',
completed: false
},
'01': {
label: 'Todo 1',
completed: false
}
},
filter: 'all' filter: 'all'
}; };
} }

19
step1-07/exercise/src/TodoApp.tsx
View File

@@ -10,7 +10,24 @@ export class TodoApp extends React.Component<any, { todos: Todos; filter: Filter
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
todos: {}, todos: {
'04': {
label: 'Todo 4',
completed: true
},
'03': {
label: 'Todo 3',
completed: false
},
'02': {
label: 'Todo 2',
completed: false
},
'01': {
label: 'Todo 1',
completed: false
}
},
filter: 'all' filter: 'all'
}; };
} }

2
step1-07/exercise/src/components/TodoHeader.tsx
View File

@@ -26,7 +26,7 @@ export class TodoHeader extends React.Component<any, any> {
} }
_onFilter = evt => { _onFilter = evt => {
this.props.setFilter(evt.target.textContet); this.props.setFilter(evt.target.innerText);
}; };
_onChange = evt => { _onChange = evt => {

2
step1-07/final/src/components/TodoHeader.tsx
View File

@@ -44,7 +44,7 @@ export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState
} }
_onFilter = evt => { _onFilter = evt => {
this.props.setFilter(evt.target.textContet); this.props.setFilter(evt.target.innerText);
}; };
_onChange = evt => { _onChange = evt => {

15
step1-07/index.html
View File

@@ -1,15 +0,0 @@
<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>

2
step2-01/demo/index.html
View File

@@ -8,6 +8,6 @@
<div id="app"> <div id="app">
Nothing to show here, just look at your console window for output. Hit F12 to open console window. Nothing to show here, just look at your console window for output. Hit F12 to open console window.
</div> </div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-01/exercise/index.html
View File

@@ -8,6 +8,6 @@
<div id="app"> <div id="app">
Nothing to show here, just look at your console window for output. Hit F12 to open console window. Nothing to show here, just look at your console window for output. Hit F12 to open console window.
</div> </div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-02/demo/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-02/exercise/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-03/demo/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-03/exercise/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-04/demo/index.html
View File

@@ -10,6 +10,6 @@
<pre>npm test</pre> <pre>npm test</pre>
in the command line. in the command line.
</div> </div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-04/exercise/index.html
View File

@@ -10,6 +10,6 @@
<pre>npm test</pre> <pre>npm test</pre>
in the command line. in the command line.
</div> </div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-05/demo/index.html
View File

@@ -10,6 +10,6 @@
<pre>npm test</pre> <pre>npm test</pre>
in the command line. in the command line.
</div> </div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-05/exercise/index.html
View File

@@ -10,6 +10,6 @@
<pre>npm test</pre> <pre>npm test</pre>
in the command line. in the command line.
</div> </div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-06/demo/index.html
View File

@@ -10,6 +10,6 @@
<pre>npm test</pre> <pre>npm test</pre>
in the command line. in the command line.
</div> </div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-06/exercise/index.html
View File

@@ -10,6 +10,6 @@
<pre>npm test</pre> <pre>npm test</pre>
in the command line. in the command line.
</div> </div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-07/demo/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-07/exercise/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-08/demo/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-08/exercise/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-09/demo/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>

2
step2-09/exercise/index.html
View File

@@ -6,6 +6,6 @@
<body class="ms-Fabric"> <body class="ms-Fabric">
<div id="markdownReadme"></div> <div id="markdownReadme"></div>
<div id="app"></div> <div id="app"></div>
<script src="../../assets/track.js"></script> <script src="../../assets/scripts.js"></script>
</body> </body>
</html> </html>