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

Commitd68cbc2

Browse files
authored
Merge pull request#16 from rjz/fix/demo
Clean up demo, a bit
2 parents000b0b5 +f300161 commitd68cbc2

File tree

4 files changed

+43
-18
lines changed

4 files changed

+43
-18
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/api.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ export const api: Api = {
2929
returnnull
3030
}),
3131
load:():Promise<{value:number}>=>flakify(()=>{
32-
constvalue=parseInt(localStorage.getItem('__counterValue'),10)
33-
return{ value}
32+
conststoredValue=parseInt(localStorage.getItem('__counterValue'),10)
33+
return{
34+
value:storedValue||0,
35+
}
3436
}),
3537
}

‎src/components/counter.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
import{Store}from'../reducers'
1212

1313
typeOwnProps={
14-
label:string
1514
}
1615

1716
typeConnectedState={
@@ -65,15 +64,25 @@ class CounterComponent extends React.Component<ConnectedState & ConnectedDispatc
6564
}
6665

6766
render(){
68-
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>
67+
const{ counter, isSaving, isLoading, error}=this.props
68+
return<div>
69+
<divclassName='hero'>
70+
<strong>{counter.value}</strong>
71+
</div>
72+
<form>
73+
<buttonref='increment'onClick={this._onClickIncrement}>click me!</button>
74+
<buttonref='save'disabled={isSaving}onClick={this._onClickSave}>{isSaving ?'saving...' :'save'}</button>
75+
<buttonref='load'disabled={isLoading}onClick={this._onClickLoad}>{isLoading ?'loading...' :'load'}</button>
76+
{error ?<divclassName='error'>{error}</div> :null}
77+
<pre>
78+
{JSON.stringify({
79+
counter,
80+
isSaving,
81+
isLoading,
82+
},null,2)}
83+
</pre>
84+
</form>
85+
</div>
7786
}
7887
}
7988

‎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+
<Counter/>
2626
</Provider>
2727
,rootEl)
2828
})

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp