Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit1f0b26d

Browse files
committed
Cleans up demo, a bit
1 parentca602b0 commit1f0b26d

File tree

3 files changed

+38
-14
lines changed

3 files changed

+38
-14
lines changed

‎index.html‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>Counter Demo</title>
4+
<title>TypeScript, React, and Redux -Counter Demo</title>
55
</head>
66
<body>
7+
<h1>Counter Demo</h1>
78
<divclass="demo">
89
<divid="redux-app-root">
9-
Try building the demo:
10+
Build the demo:
1011
<pre>
12+
$ npm run build
1113
</pre>
12-
...andrefreshing this page!
14+
...and<ahref="#">refresh</a> this page!
1315
</div>
1416
</div>
1517
<scriptsrc="node_modules/react/dist/react.js"></script>
@@ -19,12 +21,20 @@
1921
<linkrel="stylesheet"href="node_modules/zakalwe/zakalwe.css"/>
2022
<style>
2123
.demo {
22-
height:95vh;
2324
display: flex;
2425
align-items: center;
2526
justify-content: center;
2627
}
2728

29+
.hero {
30+
font-size:96pt;
31+
font-weight: bold;
32+
font-family: courier, mono;
33+
line-height:0.5em;
34+
height:0.9em;
35+
text-align: center;
36+
}
37+
2838
.error {
2939
color:#a00;
3040
font-style: italic;
@@ -35,9 +45,12 @@
3545
border:1px solid#231f20;
3646
border-radius:3px;
3747
background:#fff;
48+
cursor: pointer;
3849
margin:10px;
39-
padding:10px20px;
50+
padding:10px;
4051
transition: all linear0.2s;
52+
width:128px;
53+
text-align: center;
4154
}
4255

4356
button:focus {
@@ -74,6 +87,7 @@
7487
<sectionclass="container copyright">
7588
Another unrepentant production from
7689
<ahref="https://rjzaworski.com">rj zaworski</a>
90+
&middot;<ahref="https://github.com/rjz/typescript-react-redux">source code</a>
7791
<!-- :^) -->
7892
</section>
7993
</footer>

‎src/components/counter.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,14 +66,24 @@ class CounterComponent extends React.Component<ConnectedState & ConnectedDispatc
6666

6767
render(){
6868
const{ counter, label, isSaving, isLoading, error}=this.props
69-
return<form>
70-
<legend>{label}</legend>
71-
<pre>{JSON.stringify({ counter, isSaving, isLoading},null,2)}</pre>
72-
<buttonref='increment'onClick={this._onClickIncrement}>click me!</button>
73-
<buttonref='save'disabled={isSaving}onClick={this._onClickSave}>{isSaving ?'saving...' :'save'}</button>
74-
<buttonref='load'disabled={isLoading}onClick={this._onClickLoad}>{isLoading ?'loading...' :'load'}</button>
75-
{error ?<divclassName='error'>{error}</div> :null}
76-
</form>
69+
return<div>
70+
<divclassName='hero'>
71+
<strong>{counter.value}</strong>
72+
</div>
73+
<form>
74+
<buttonref='increment'onClick={this._onClickIncrement}>click me!</button>
75+
<buttonref='save'disabled={isSaving}onClick={this._onClickSave}>{isSaving ?'saving...' :'save'}</button>
76+
<buttonref='load'disabled={isLoading}onClick={this._onClickLoad}>{isLoading ?'loading...' :'load'}</button>
77+
{error ?<divclassName='error'>{error}</div> :null}
78+
<pre>
79+
{JSON.stringify({
80+
counter,
81+
isSaving,
82+
isLoading
83+
},null,2)}
84+
</pre>
85+
</form>
86+
</div>
7787
}
7888
}
7989

‎src/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ window.addEventListener('DOMContentLoaded', () => {
2222
constrootEl=document.getElementById('redux-app-root')
2323
if(rootEl)ReactDOM.render(
2424
<Providerstore={store}>
25-
<Counterlabel='count:'/>
25+
<Counterlabel='state'/>
2626
</Provider>
2727
,rootEl)
2828
})

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp