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

breaking up into stages

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-21 14:29:33 -08:00
parent 102c14648a
commit 37598e5812
62 changed files with 906 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
step1-04/README.md Normal file
View File

@@ -0,0 +1,12 @@
## React quick demo
already done:
Button.css
scaffold app.tsx (my app)
write index.tsx
write index.html
demo 'hello world'
Write Counter Component with button
Demo Button, import into Component

6
step1-04/demo/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>

3
step1-04/src/App.tsx → step1-04/demo/src/App.tsx
View File

@@ -6,7 +6,8 @@ export class App extends React.Component {
return (
<div>
<h2>My App</h2>
<Counter start={2} />
<Counter text="Chickens" />
<Counter text="Ducks" />
</div>
);
}

1
step1-04/src/components/Button.css → step1-04/demo/src/components/Button.css
View File

@@ -1,4 +1,5 @@
.Button {
display: block;
background: #0078d4;
color: white;
padding: 5px 10px;

0
step1-04/src/components/Button.tsx → step1-04/demo/src/components/Button.tsx
View File

12
step1-04/src/components/Counter.tsx → step1-04/demo/src/components/Counter.tsx
View File

@@ -1,23 +1,25 @@
import React from 'react';
import { Button } from './Button';
export class Counter extends React.Component<any, any> {
export class Counter extends React.Component<{ text: string }, { counter: number }> {
constructor(props) {
super(props);
this.state = {
counter: props.start
counter: 0
};
}
render() {
const { counter } = this.state;
const { text } = this.props;
return (
<div>
<span> {this.state.counter} </span>
{text}: {counter}
<Button
onClick={() => {
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: counter + 1 });
}}
>
Click Me
Click
</Button>
</div>
);

0
step1-04/src/index.tsx → step1-04/demo/src/index.tsx
View File

6
step1-04/final/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>

14
step1-04/final/src/App.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { Counter } from './components/Counter';
export class App extends React.Component {
render() {
return (
<div>
<h2>My App</h2>
<Counter text="Chickens" />
<Counter text="Ducks" />
</div>
);
}
}

15
step1-04/final/src/components/Button.css Normal file
View File

@@ -0,0 +1,15 @@
.Button {
display: block;
background: #0078d4;
color: white;
padding: 5px 10px;
outline: none;
border: none;
}
.Button:hover {
background: #005a9e;
}
.Button:active {
background: #004578;
}

10
step1-04/final/src/components/Button.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import './Button.css';
export const Button = props => {
return (
<button className="Button" onClick={props.onClick}>
{props.children}
</button>
);
};

27
step1-04/final/src/components/Counter.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { Button } from './Button';
export class Counter extends React.Component<{ text: string }, { counter: number }> {
constructor(props) {
super(props);
this.state = {
counter: 0
};
}
render() {
const { counter } = this.state;
const { text } = this.props;
return (
<div>
{text}: {counter}
<Button
onClick={() => {
this.setState({ counter: counter + 1 });
}}
>
Click
</Button>
</div>
);
}
}

4
step1-04/final/src/index.tsx Normal file
View File

@@ -0,0 +1,4 @@
import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.render(<App />, document.getElementById("app"));

17
step1-04/index.html
View File

@@ -1,8 +1,15 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<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>