refactored examples

piotrwitek · piotrwitek · commit 5dc930b7fdec · 2017-05-15T22:03:07.000+02:00
diff --git a/examples/index.html b/examples/index.html
@@ -7,6 +7,8 @@
   <title>React, Redux, Typescript Guide</title>
 </head>
 <body>
+  <div id="app"></div>
+  
   <script src="/out/index.js"></script>
 </body>
 </html>
diff --git a/examples/package.json b/examples/package.json
@@ -1,8 +1,14 @@
 {
+  "name": "react-redux-typescript-guide",
+  "version": "1.0.0",
+  "author": "Piotr Witek <piotrek.witek@gmail.com> (http://piotrwitek.github.io/)",
+  "repository": "https://github.com/piotrwitek/react-redux-typescript-guide.git",
+  "license": "MIT",
   "scripts": {
     "rei": "rm -rf node_modules && yarn install",
     "clear": "rm -rf out",
     "build": "npm run clear && tsc -p ./",
+    "check": "npm run tsc & npm run lint",
     "tsc": "tsc -p ./ --noEmit",
     "lint": "tslint -p ./"
   },
diff --git a/examples/src/app.tsx b/examples/src/app.tsx
@@ -1,9 +1,12 @@
 import * as React from 'react';
 import { render } from 'react-dom';
 
-import { ConnectedComponent } from './containers';
+import { StatelessComponent, ClassComponent } from './components';
+import { ConnectedStatelessComponent } from './containers';
 
-render(
-  <ConnectedComponent label="Primary" />,
-  document.getElementById('app'),
+export const App = (
+  <div>
+    <ClassComponent label="ClassComponent" initialCount={10} />
+    <ConnectedStatelessComponent label="ConnectedStatelessComponent" />
+  </div>
 );
diff --git a/examples/src/components/class-component.tsx b/examples/src/components/class-component.tsx
@@ -3,8 +3,8 @@ import * as React from 'react';
 type Props = {
   className?: string,
   style?: React.CSSProperties,
+  label: string,
   initialCount?: number,
-  title: string,
 };
 
 type State = {
@@ -29,15 +29,20 @@ export class ClassComponent extends React.Component<Props, State> {
   }
 
   // handlers using Class Fields with arrow functions
-  increaseCounter = () => { this.setState({ counter: this.state.counter + 1 }); };
+  handleIncrement = () => { this.setState({ counter: this.state.counter + 1 }); };
 
   render() {
-    const { children, title, initialCount, ...restProps } = this.props;
+    const { children, label, initialCount, ...restProps } = this.props;
+    const { counter } = this.state;
 
     return (
-      <div {...restProps} onClick={this.increaseCounter} >
-        <h2>{title}</h2>
-        Clicks: {this.state.counter}
+      <div {...restProps} >
+        <div>
+          {label}: {counter}
+          <button type="button" onClick={this.handleIncrement}>
+            Increment
+          </button>
+        </div>
         <hr />
         {children}
       </div>
diff --git a/examples/src/components/stateless-component.tsx b/examples/src/components/stateless-component.tsx
@@ -10,6 +10,7 @@ type Props = {
 
 export const StatelessComponent: React.StatelessComponent<Props> = (props) => {
   const { children, label, counter, incrementCounter, ...restProps } = props;
+
   const handleIncrement = () => { incrementCounter(); };
 
   return (
@@ -20,6 +21,7 @@ export const StatelessComponent: React.StatelessComponent<Props> = (props) => {
           Increment
         </button>
       </div>
+      <hr />
       {children}
     </div>
   );
diff --git a/examples/src/containers/connected-stateless-component.tsx b/examples/src/containers/connected-stateless-component.tsx
@@ -18,4 +18,4 @@ const dispatchProps = {
   increaseCounter: actionCreators.increaseCounter,
 };
 
-export const ConnectedComponent = connect(mapStateToProps, dispatchProps)(StatelessComponent);
+export const ConnectedStatelessComponent = connect(mapStateToProps, dispatchProps)(StatelessComponent);
diff --git a/examples/src/containers/home.tsx b/examples/src/containers/home.tsx
diff --git a/examples/src/containers/index.ts b/examples/src/containers/index.ts
@@ -1 +1 @@
-export * from './connected-component';
+export * from './connected-stateless-component';
diff --git a/examples/src/index.tsx b/examples/src/index.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+
+import { App } from './app';
+
+render(App, document.getElementById('app'));

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-export * from './connected-component';`
	`1`	`+export * from './connected-stateless-component';`