- Testing with jest
+ React Context
@@ -117,7 +118,7 @@
- Redux: Reducers
+ Redux: The Store
@@ -125,35 +126,16 @@
-
-
-
-
-
-
-
+
diff --git a/markdownReadme/src/index.js b/markdownReadme/src/index.js
deleted file mode 100644
index 1771fec..0000000
--- a/markdownReadme/src/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-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';
-
-hljs.registerLanguage('javascript', javascript);
-hljs.registerLanguage('typescript', typescript);
-
-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 `${highlighted}
+
+
+
+
diff --git a/step1-02/README.md b/step1-02/README.md
index 09bf1d0..76a85b1 100644
--- a/step1-02/README.md
+++ b/step1-02/README.md
@@ -48,98 +48,6 @@ Selectors can be a single tag, class, ID, or attribute. It can also be a [combin
Below is a series of selectors and property/value combinations that we'll apply to our CSS demo page.
```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;
-}
```
## Next Step
diff --git a/step1-02/demo/index..html b/step1-02/demo/index..html
deleted file mode 100644
index 54e6eda..0000000
--- a/step1-02/demo/index..html
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
-
-
- +/* +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 title, header, main, footer, headings (h1/h2 etc), paragraphs, lists +3. Use ordered and unordered lists appropriately +4. Add the `baked_beans.jpg` image included in this folder: `https://raw.githubusercontent.com/Microsoft/frontend-bootcamp/master/step1-01/exercise/baked_beans.jpg` +5. Add an anchor tag around 'Wisconsin Beer Brats' + +## 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 +2 ground garlic cloves +3 Tablespoons of mustard +2 Tablespoons of molasses +3 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 + +*/ + ++
Add Recipe Here+
-
-
-
diff --git a/step1-02/demo/index.html b/step1-02/demo/index.html
new file mode 100644
index 0000000..3c78bc1
--- /dev/null
+++ b/step1-02/demo/index.html
@@ -0,0 +1,132 @@
+
+
+ This is my Title
-
-
-
-
- 
-
- Our Logo
-
-
-
- Contact Us
-
-
-
-
-
+
+
+
+
+
diff --git a/step1-02/demo/style.css b/step1-02/demo/style.css
deleted file mode 100644
index 35bb9de..0000000
--- a/step1-02/demo/style.css
+++ /dev/null
@@ -1,62 +0,0 @@
-/* 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;
-} */
-
-/* a ~ a {
- display: block;
-} */
-
-/* .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;
- border: 1px solid white;
-} */
-
-/* div.important-links {
- background: #004578;
-} */
-
-/* a {
- color: white;
-} */
-
-/* a:hover {
- color: #ccc;
-} */
-
-/* .tiles > div:last-child {
- margin-right: 0;
-} */
-
-/* #contact-form {
- display: flex;
- flex-direction: column;
-} */
-
-/* input[type='submit'] {
- margin-top: 10px;
-} */
diff --git a/step1-02/exercise/answers.css b/step1-02/exercise/answers.css
new file mode 100644
index 0000000..7648302
--- /dev/null
+++ b/step1-02/exercise/answers.css
@@ -0,0 +1,27 @@
+h2 {
+ color: red;
+}
+
+h2 + div {
+ color: green;
+}
+
+.myList li {
+ border: 1px solid green;
+}
+
+.myClass {
+ background: green;
+}
+
+#myId {
+ background: yellow;
+}
+
+.myClass.otherClass {
+ color: white;
+}
+
+section > div:last-child {
+ border: 1px solid pink;
+}
diff --git a/step1-02/exercise/index.html b/step1-02/exercise/index.html
new file mode 100644
index 0000000..02cf8d4
--- /dev/null
+++ b/step1-02/exercise/index.html
@@ -0,0 +1,56 @@
+
+
+
+/* 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;
+}
+
+ +<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="../../assets/fabric.jpg" 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> ++
+
+
+
+
+
diff --git a/step1-03/demo/README.md b/step1-03/demo/README.md
index efc5b24..fd3feef 100644
--- a/step1-03/demo/README.md
+++ b/step1-03/demo/README.md
@@ -52,11 +52,10 @@ let myFunction = function(myNumberParam) {
### Adding Variables
-Let's start off our demo by adding some variables to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). The other examples on this page will reference these 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';
-let matches = 0;
```
## Functions
@@ -65,6 +64,8 @@ Functions are reusable pieces of functionality. Functions can take inputs (param
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 `alert("I'm Clicked")`, which is a function that creates an alert in your browser.
+> Note that we want to place `matches` inside of the function so that it resets to 0 each time the function is called
+
```js
function displayMatches() {
alert("I'm Clicked");
@@ -118,7 +119,7 @@ button.onclick = displayMatches();
You can also combine these together like this:
```js
-document.querySelector('.submit').onclick = displayMatches();
+document.querySelector('.submit').onclick = displayMatches;
```
Wire this up and see you function in action!
@@ -138,11 +139,12 @@ function displayMatches() {
## Conditionals
-Next we want to compare each `letter` with our `match` value, and if they are the same, we will increment our `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 `===`.
+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++;
diff --git a/step1-03/demo/index.html b/step1-03/demo/index.html
index e46faab..c1f6b3d 100644
--- a/step1-03/demo/index.html
+++ b/step1-03/demo/index.html
@@ -1,19 +1,58 @@
-
-
-
- +/* 1. */ + +/* 2. */ + +/* 3. */ + +/* 4. */ + +/* 5. */ + +/* 6. */ + +/* Bonus */ ++
+<section> + <h2>1. Text Color: Red</h2> + <div>2. Color Green (hint: Sibling Selector)</div> + <ul class="myList"> + <li> + 3. Border Green + </li> + </ul> + <main> + <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> ++
-
+
+
+ {
render() {
return (
-
+
);
}
}
```
-We'll start off with all of the files scaffolded and imported into our App. This will let us dive right into each control and see updates quickly.
-
-### TodoHeader
-
-Our objective for now is to create a static version of our application, so we'll copy over the entire header tag from a previous step, minus any function calls we added.
-
> Note that since this is React we had to change `class` to `className`, but nothing else changes.
-```jsx
-return (
-
-
-);
-```
-
-### TodoListItem
+## 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
-return (
-
-
-
-);
+import React from 'react';
+
+export class TodolistItem extends React.Component {
+ render() {
+ return (
+
+
+
+ );
+ }
+}
```
-> Note that I've removed the title span as it was only needed to make targeting that text easier.
+> Note that this control could also be created as a function instead of a class: `export const TodoListItem = (props) => {}`
diff --git a/step1-05/demo/src/App.tsx b/step1-05/demo/src/App.tsx
index 6e797ed..190c0e1 100644
--- a/step1-05/demo/src/App.tsx
+++ b/step1-05/demo/src/App.tsx
@@ -1,15 +1,10 @@
import React from 'react';
-import { TodoFooter } from './components/TodoFooter';
-import { TodoHeader } from './components/TodoHeader';
-import { TodoList } from './components/TodoList';
export class TodoApp extends React.Component {
render() {
return (
{
- render() {
- return (
-
-
- );
- }
-}
diff --git a/step1-05/demo/src/components/TodoList.tsx b/step1-05/demo/src/components/TodoList.tsx
deleted file mode 100644
index 1afff2b..0000000
--- a/step1-05/demo/src/components/TodoList.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-export class TodoList extends React.Component {
- render() {
- return (
- {
- render() {
- return ;
- }
-}
diff --git a/step1-05/exercise/README.md b/step1-05/exercise/README.md
index 06a6990..4b9bed1 100644
--- a/step1-05/exercise/README.md
+++ b/step1-05/exercise/README.md
@@ -1,14 +1,12 @@
## Exercise
-If you already have the app running from a previous step, stop it with `ctrl+C`. Start the app version used in this step 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. Update the TodoFooter component, copying over the `
-
+
-
- Contact Us
-
-
-
-
-
+
+
+
-
diff --git a/step1-03/exercise/README.md b/step1-03/exercise/README.md
index e69de29..08f0e67 100644
--- a/step1-03/exercise/README.md
+++ b/step1-03/exercise/README.md
@@ -0,0 +1,9 @@
+1. Create a function named `getFavs` and set its contents to `alert('clicked')`
+2. Create a variable `button` and set it to a reference to our button by using `document.querySelector('button')`
+3. Add a click event listener to the button that calls `getFavs`. Click the button and make sure it calls our alert.
+4. Replace the alert 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. For 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` onto the `favList` array. Pass that text into `favList.push()` as the parameter to add it to the array
+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.
diff --git a/step1-03/exercise/answer.js b/step1-03/exercise/answer.js
new file mode 100644
index 0000000..e809728
--- /dev/null
+++ b/step1-03/exercise/answer.js
@@ -0,0 +1,14 @@
+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);
diff --git a/step1-03/exercise/index.html b/step1-03/exercise/index.html
index 8714ec4..1315cb5 100644
--- a/step1-03/exercise/index.html
+++ b/step1-03/exercise/index.html
@@ -1,37 +1,48 @@
-
-
-
-
-
-
+
+
+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;
+}
+
+ +<div class="tiles"> + <div> + <h2>Contact Us</h2> + <div id="contact-form"> + <label>Email</label><input id="email" type="email" /> + <input class="submit" value="Submit" type="submit" /> + </div> + </div> +</div> ++
+// Count the number of 'a' characters in the email form. +// Update button to reflect that number. + +
+
+
+
-
-
diff --git a/step1-04/demo/README.md b/step1-04/demo/README.md
index 2ab9eec..08eb3db 100644
--- a/step1-04/demo/README.md
+++ b/step1-04/demo/README.md
@@ -1,36 +1,10 @@
# Step 4 - Introduction To React Demo
-In our last example we saw how we could take a static HTML page and turn it into an interactive page with some buttons and their `onclick` handlers.
-
-In this example we'll see how React turns that paradigm completely around. With React, the entire DOM is generated and maintained by JavaScript, directly inside the browser. This makes it easier to assemble your application out of reusable pieces, maintain state within a component, and pass data between them.
-
In this demo we'll be creating a simple counter that will display a count and increment on click.
-## Building the App
+## React Hello World
-If you already have the app running from a previous step, stop it with `ctrl+C`. Start the app version used in this step by running `npm start` from the root of the `frontend-bootcamp` folder. Click the "demo" link under day 1 step 4 to see results.
-
-## index.html
-
-The `index.html` file in a React project is going to be pretty mimimal. React is loading all of the application onto the page, so the only content you'll find in the page source is a div with an `id` of "app".
-
-> Note that our bundling tool, webpack, is adding this script tag to the HTML file we provided
-
-```html
-
-
-
-
-
-
-
-```
-
-## index.tsx
-
-This is the entry point to your application.
-
-```ts
+```js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
+label,
+button {
+ display: block;
+ margin-bottom: 10px;
+}
+
+ +<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> ++
+/*
+1. Create a function named `getFavs` and set its contents to `alert('clicked')`
+2. Create a variable `button` and set it to a reference to our button by using `document.querySelector('button')`
+3. Add a click event listener to the button that calls `getFavs`. Click the button and make sure it calls our alert.
+4. Replace the alert 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. For 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` onto the `favList` array. Pass that text into `favList.push()` as the parameter to add it to the array
+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.
+*/
+
+
+ Hello World
, document.getElementById('app')); @@ -90,9 +64,9 @@ export class App extends React.Component { ## Counter Component -In this example we'll start with an already scaffolded-out control. The goal of our counter is to track how many times the counter button is clicked. In the past JavaScript demo we might have accessed the counter element using `document.querySelector('.counter')` and manually incremented the number found there. While using the DOM as your data store works, it's REALLY hard to scale past the most basic demo. +In this example we'll start with an already scaffolded-out control. The goal of our counter is to track how many times the counter button is clicked. -React solves this by allowing each control to specify its own data store, called **state**. We can reference values in state when we render our UI, and we can also update state over the lifetime of our application. +React allows each control to specify its own data store, called **state**. We can reference values in state when we render our UI, and we can also update state over the lifetime of our application. ### Adding State @@ -113,7 +87,7 @@ constructor(props) { #### Using [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) for props and state -Both `props` are `state` are JavaScript objects. They have a bunch of key/value pairs in them which you can access via `this.props.foo` or `this.state.bar`. Sometimes they have MANY values inside of them which you need access to. You could do this: +Both `props` and `state` are JavaScript objects. They have a bunch of key/value pairs in them which you can access via `this.props.foo` or `this.state.bar`. Sometimes they have MANY values inside of them which you need access to. You could do this: ```js let cat = this.props.cat; @@ -205,11 +179,13 @@ This function will update our component's state, incrementing the counter value ```jsx _onButtonClick = () => { - this.setState(prevState => ({ counter: prevState.counter + 1 })); + this.setState({ + counter: this.state.counter + 1 + }); }; ``` -> This isn't exactly a method, but a class property that is set to an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions). This mostly works the same as `onButtonClick() { }` but eliminates the need for [extra boilerplate](https://medium.freecodecamp.org/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb) used to avoid potential "gotchas" with [how `this` works in JavaScript](https://codeburst.io/javascript-the-keyword-this-for-beginners-fb5238d99f85).) +> Note that this could also be written as `this.setState(prevState => ({ counter: prevState.counter + 1 }));` to ensure that state is not updated until the previous state has been determined Now that we have a function to increment our count, all that's left is to connect it to our button. @@ -217,11 +193,9 @@ Now that we have a function to increment our count, all that's left is to connec ``` -> Note the syntax is a bit different than in HTML: `onclick="funcName()"` in HTML vs `onClick={this.funcName}` in JSX. - > Also note that each `Counter` maintains its own state! You can modify the state inside of one counter without affecting the others. -## Bonus: Using a Button component +## Using 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. diff --git a/step1-05/TodoApp.html b/step1-05/TodoApp.html new file mode 100644 index 0000000..44b2d66 --- /dev/null +++ b/step1-05/TodoApp.html @@ -0,0 +1,36 @@ + + + +todos
+
+
+
+
+
+ -
+
- + + +
- + + +
- + + +
- + + +
-
+ todos
+
+
+
+
+
+ todos
-
-
-
-
-
-
-
);
}
diff --git a/step1-05/demo/src/components/TodoFooter.tsx b/step1-05/demo/src/components/TodoFooter.tsx
deleted file mode 100644
index a3044c1..0000000
--- a/step1-05/demo/src/components/TodoFooter.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-export const TodoFooter = (props: any) => {
- return (
-
- );
-};
diff --git a/step1-05/demo/src/components/TodoHeader.tsx b/step1-05/demo/src/components/TodoHeader.tsx
deleted file mode 100644
index 013b567..0000000
--- a/step1-05/demo/src/components/TodoHeader.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-export class TodoHeader extends React.ComponentHello World
Header
-
- List
-
- );
- }
-}
diff --git a/step1-05/demo/src/components/TodoListItem.tsx b/step1-05/demo/src/components/TodoListItem.tsx
deleted file mode 100644
index 1b7fb5c..0000000
--- a/step1-05/demo/src/components/TodoListItem.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-export class TodoListItem extends React.Component