mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
Merge in latest 'master'
This commit is contained in:
Mike Wheaton
BIN
assets/css-syntax.png
Normal file
BIN
assets/css-syntax.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
36
index.html
36
index.html
@@ -21,34 +21,42 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="Tile Tile--numbered">
|
||||
<a target="_blank" href="./step1-02/" class="Tile-link">
|
||||
<div class="Tile-link">
|
||||
Todo HTML & CSS
|
||||
</a>
|
||||
<div class="Tile-links"><a target="_blank" href="./step1-02/demo/">demo</a> | <a target="_blank" href="./step1-01/exercise/">exercise</a> | <a target="_blank" href="./step1-02/final/">final</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile Tile--numbered">
|
||||
<a target="_blank" href="./step1-03/" class="Tile-link">
|
||||
<div class="Tile-link">
|
||||
Todo JS
|
||||
</a>
|
||||
<div class="Tile-links"><a target="_blank" href="./step1-03/demo/">demo</a> | <a target="_blank" href="./step1-03/exercise/">exercise</a> |
|
||||
<a target="_blank" href="./step1-03/final/">final</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile Tile--numbered">
|
||||
<a target="_blank" href="./step1-04/" class="Tile-link">
|
||||
<div class="Tile-link">
|
||||
React Intro
|
||||
</a>
|
||||
<div class="Tile-links"><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">
|
||||
<a target="_blank" href="./step1-05/" class="Tile-link">
|
||||
<div class="Tile-link">
|
||||
React Components
|
||||
</a>
|
||||
<div class="Tile-links"><a target="_blank" href="./step1-05/demo/">demo</a> | <a target="_blank" href="./step1-05/exercise/">exercise</a> | <a target="_blank" href="./step1-05/final/">final</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile Tile--numbered">
|
||||
<a target="_blank" href="./step1-06/" class="Tile-link">
|
||||
State Driven UI
|
||||
</a>
|
||||
<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> | <a target="_blank" href="./step1-06/final/">final</a></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="Tile Tile--numbered">
|
||||
<a target="_blank" href="./step1-07/" class="Tile-link">
|
||||
UI Driven State
|
||||
</a>
|
||||
<div class="Tile-link">
|
||||
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>
|
||||
|
||||
@@ -40,16 +40,19 @@ app.put('/todos/:id', (req, res) => {
|
||||
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 => {
|
||||
app.post('/todos', (req, res) => {
|
||||
store.todos = req.body;
|
||||
store.save();
|
||||
res.json('ok');
|
||||
});
|
||||
|
||||
app.get('/hello', (req, res) => {
|
||||
|
||||
@@ -21,3 +21,8 @@ A simple web page is rendered on the screen via the following steps
|
||||
7. Once the browser gets to the bottom of the page it can start rendering, and then load the page
|
||||
|
||||
|
||||
|
||||
|
||||
## Next Step
|
||||
|
||||
[HTML Demo](./html-demo)
|
||||
|
||||
@@ -20,17 +20,32 @@ CSS is always applied in `property: value` pairs, like `background: blue;` and a
|
||||
CSS can be applied to HTML tags in three different ways.
|
||||
|
||||
1. Inline - Styles are applied directly to the HTML tag
|
||||
|
||||
- `<div style="background: blue; color: white;">Hello </div>`
|
||||
|
||||
- `<div style="background: blue; color: white;">Hello </div>`
|
||||
2. Via a `<style>` tag in the HTML page
|
||||
3. Through an externally loaded CSS file
|
||||
|
||||
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
|
||||
- `<link rel="stylesheet" href="./css-demo-finished.css" />`
|
||||
|
||||
### Targeting specific HTML tags
|
||||
|
||||
Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "selectors", and they are just as important to learn as the properties/values themselves. Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
|
||||
Inline styles are always applied directly to the element you place them on, style tags and external CSS files need a method for matching HTML elements with their prospective style sets. We call these "[CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)", and they are just as important to learn as the properties/values themselves. 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="../../assets/css-syntax.png"/>
|
||||
|
||||
Selectors 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.
|
||||
|
||||
Below are a series of selectors and property/value combinations that we'll apply to our CSS Demo page
|
||||
|
||||
```css
|
||||
/* Targeting the entire page */
|
||||
@@ -125,3 +140,6 @@ input[type='submit'] {
|
||||
margin-top: 10px;
|
||||
}
|
||||
```
|
||||
## Next Step
|
||||
|
||||
[JavaScript Demo](../js-demo)
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
/* https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors */
|
||||
|
||||
/* body {
|
||||
font: 1.2em sans-serif;
|
||||
} */
|
||||
|
||||
/* h1 {
|
||||
color: black;
|
||||
background: #ababab;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
} */
|
||||
|
||||
/* span {
|
||||
color: #004578;
|
||||
} */
|
||||
|
||||
/* .tiles {
|
||||
display: flex;
|
||||
} */
|
||||
|
||||
/* .tiles img {
|
||||
width: 100%;
|
||||
} */
|
||||
|
||||
/* .tiles > div {
|
||||
background: rgb(10, 10, 10);
|
||||
color: white;
|
||||
flex-basis: 100%;
|
||||
padding: 10px 20px 15px;
|
||||
margin: 10px 20px 10px 0;
|
||||
} */
|
||||
|
||||
/* div.links {
|
||||
background: #004578;
|
||||
} */
|
||||
|
||||
/* a {
|
||||
color: white;
|
||||
} */
|
||||
|
||||
/* a:hover {
|
||||
color: #ccc;
|
||||
} */
|
||||
|
||||
/* a ~ a {
|
||||
display: block;
|
||||
} */
|
||||
|
||||
/* .tiles > div:last-child {
|
||||
margin-right: 0;
|
||||
} */
|
||||
|
||||
/* #contact-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
} */
|
||||
|
||||
/* input[type='submit'] {
|
||||
margin-top: 10px;
|
||||
} */
|
||||
|
||||
@@ -69,3 +69,8 @@ To learn more about each element, click on the elements below.
|
||||
- date
|
||||
- radio
|
||||
- submit
|
||||
|
||||
|
||||
## Next Step
|
||||
|
||||
[CSS Demo](../css-demo)
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
|
||||
<div>
|
||||
<header>
|
||||
<h1>My Website</h1>
|
||||
<h1>My Website H1 inside Header</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="page1">About Me</a></li>
|
||||
@@ -32,9 +32,9 @@
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>My Blog</h2>
|
||||
<h2>My Blog H2 inside Main</h2>
|
||||
<article>
|
||||
<header><h3>Blog Title 1</h3></header>
|
||||
<header><h3>Blog Title 1 H3 in Article Header</h3></header>
|
||||
<aside><p>Aside</p></aside>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur architecto mollitia ducimus. Tempora dignissimos incidunt
|
||||
@@ -48,7 +48,7 @@
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
<footer>Copyright 2019</footer>
|
||||
<footer>Copyright 2019 in the Footer</footer>
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
@@ -112,15 +112,18 @@
|
||||
|
||||
<h3>Anchor tag, br and span</h3>
|
||||
|
||||
<a target="_blank" href="https://example.com"> Website <span style="color: red">address</span> </a><br />
|
||||
<a target="_blank" href="mailto:m.bluth@example.com">Email</a><br />
|
||||
<a target="_blank" href="tel:+123456789">Phone</a><br />
|
||||
<a target="_blank" href="https://example.com"> Website <span style="color: red">address in span tag</span> </a><br />
|
||||
<a target="_blank" href="mailto:m.bluth@example.com">Email</a> (no <br>) <a target="_blank" href="tel:+123456789">Phone</a
|
||||
><br />
|
||||
|
||||
<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" width="100" />
|
||||
<img src="../../assets/fabric.jpg" width="50" />
|
||||
<img src="../../assets/fabric.jpg" width="150" />
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
|
||||
@@ -121,3 +121,7 @@ If you are curious, we could have done this in a single line by chaining these m
|
||||
```js
|
||||
document.querySelector('.submit').value = matches + ' matches';
|
||||
```
|
||||
|
||||
## Next Step
|
||||
|
||||
[Start our Todo App](../../step1-02/demo/)
|
||||
|
||||
@@ -18,14 +18,14 @@ Facebook invented a the Flux pattern to solve this shared state issue. Redux is
|
||||
|
||||
These are the React Components that consume the store as its data. There is a special way Redux will map its data from the state tree into the different React Components. The Components will know to re-render when these bits of state are changed.
|
||||
|
||||
## Action
|
||||
|
||||
Actions are messages that represent some event, such as a user's action or a network request. With the aid of _reducers_, they affect the overall state.
|
||||
|
||||
## Store
|
||||
|
||||
This is a singleton state tree. The state tree is immutable and needs to be re-created at every action. This helps connected views to know when to update itself - just doing a simple reference comparison rather than a deep comparison.
|
||||
|
||||
## Action
|
||||
|
||||
Actions are messages to be dispatched to the store to let reducers to change (replace reference of) the state tree.
|
||||
|
||||
## Reducers
|
||||
|
||||
These are simple stateless, pure functions that takes state + action message and returns a copy of state some modifications according to the action message type and payload.
|
||||
|
||||
@@ -15,9 +15,11 @@ https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfk
|
||||
|
||||
## Visualize the state changes with Chrome extension
|
||||
|
||||
1. Install that Chrome extension
|
||||
1. Install [Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
|
||||
|
||||
2.
|
||||
2. Open the inspector panel entitled **Redux**
|
||||
|
||||
3. Modify `exercise/src/index.tsx` to dispatch actions
|
||||
|
||||
## Playing with dispatching actions inside tests
|
||||
|
||||
|
||||
@@ -18,6 +18,8 @@ This `mapStateToProps` function selects out portions of the state tree. This fun
|
||||
|
||||
2. open up `exercise/src/components/TodoFooter.tsx` and erase the "nullable" type modifier (i.e. the ?) in the interface definition of `TodoFooterProps`
|
||||
|
||||
3. uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide
|
||||
3. Remove the `export` from `export const TodoFooter = (props: TodoFooterProps) => {`
|
||||
|
||||
4. do steps 2 and 3 for the `TodoHeader.tsx` file
|
||||
4. uncomment the bottom bits of code and fill in the implementation for `mapStateToProps()` and `mapDispatchToProps()` - feel free to use `TodoListItem.tsx` as a guide
|
||||
|
||||
5. do steps 2, 3, and 4 for the `TodoHeader.tsx` file
|
||||
|
||||
@@ -43,11 +43,7 @@ export const reducer = combineReducers({
|
||||
});
|
||||
```
|
||||
|
||||
# Take a peek at useful helpers and middleware created by community are:
|
||||
|
||||
- immer: https://github.com/mweststrate/immer - improves ergonomics of working with immutables by introducing the concept of mutating a draft
|
||||
|
||||
- redux-starter-kit: https://github.com/reduxjs/redux-starter-kit - help address common concerns of Redux in boilerplate and complexity
|
||||
`combineReducers` handles the grunt-work of sending *actions* to each combined reducer. Therefore, when an action arrives, each reducer is given the opportunity to modify its own state tree based on the incoming action.
|
||||
|
||||
# Exercise
|
||||
|
||||
@@ -68,3 +64,9 @@ The Redux team came up with `redux-starter-kit` to address a lot of boilerplate
|
||||
3. run `npm test` in the root folder to see if it still works!
|
||||
|
||||
4. look at the web app to make sure it still works!
|
||||
|
||||
# Further reading
|
||||
|
||||
- immer: https://github.com/mweststrate/immer - improves ergonomics of working with immutables by introducing the concept of mutating a draft
|
||||
|
||||
- redux-starter-kit: https://github.com/reduxjs/redux-starter-kit - help address common concerns of Redux in boilerplate and complexity
|
||||
|
||||
Reference in New Issue
Block a user