added examples

Author: piotrwitek

examples/package.json

@@ -0,0 +1,22 @@
+{
+  "scripts": {
+    "rei": "rm -rf node_modules && yarn install",
+    "clear": "rm -rf out",
+    "build": "npm run clean && tsc -p ./",
+    "tsc": "tsc -p ./ --noEmit",
+    "lint": "tslint -p ./"
+  },
+  "dependencies": {
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-redux-typescript": "^2.3.0",
+    "tslib": "^1.7.0"
+  },
+  "devDependencies": {
+    "@types/react": "^15.0.24",
+    "@types/react-dom": "^15.5.0",
+    "tslint": "^5.2.0",
+    "tslint-react": "^3.0.0",
+    "typescript": "^2.3.2"
+  }
+}

examples/src/class-component.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+type Props = {
+  className?: string,
+  style?: React.CSSProperties,
+  initialCount?: number,
+};
+
+type State = {
+  counter: number,
+};
+
+class MyComponent extends React.Component<Props, State> {
+  // default props using Property Initializers
+  static defaultProps: Partial<Props> = {
+    className: 'default-class',
+  };
+
+  // initial state using Property Initializers
+  state: State = {
+    counter: this.props.initialCount || 0,
+  };
+
+  // lifecycle methods should be declared as normal instance methods and it's fine
+  componentDidMount() {
+    // tslint:disable-next-line:no-console
+    console.log('Mounted!');
+  }
+
+  // handlers using Class Fields with arrow functions
+  increaseCounter = () => { this.setState({ counter: this.state.counter + 1 }); };
+
+  render() {
+    const { children, initialCount, ...restProps } = this.props;
+
+    return (
+      <div {...restProps} onClick={this.increaseCounter} >
+        Clicks: {this.state.counter}
+        <hr />
+        {children}
+      </div>
+    );
+  }
+}
+
+export default MyComponent;

examples/src/stateless-component.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+type Props = {
+  className?: string,
+  style?: React.CSSProperties,
+};
+
+const MyComponent: React.StatelessComponent<Props> = (props) => {
+  const { children, ...restProps } = props;
+  return (
+    <div {...restProps} >
+      {children}
+    </div>
+  );
+};
+
+export default MyComponent;

examples/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src/", // enables relative imports to root
+    "outDir": "out/", // target for compiled files
+    "allowSyntheticDefaultImports": true, // no errors on commonjs default import
+    "allowJs": true, // include js files
+    "checkJs": true, // typecheck js files
+    "declaration": false, // don't emit declarations
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "importHelpers": true, // importing helper functions from tslib
+    "noEmitHelpers": true, // disable emitting inline helper functions
+    "jsx": "react", // process JSX
+    "lib": [
+      "dom",
+      "es2016",
+      "es2017.object"
+    ],
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "pretty": true,
+    "removeComments": true,
+    "sourceMap": true
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

examples/tslint.json

@@ -0,0 +1,85 @@
+{
+  "extends": [
+    "tslint:latest",
+    "tslint-react"
+  ],
+  "rules": {
+    "arrow-parens": false,
+    "arrow-return-shorthand": [
+      false
+    ],
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "import-blacklist": [
+      true,
+      "rxjs"
+    ],
+    "interface-over-type-literal": false,
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": "statics-first"
+      }
+    ],
+    "newline-before-return": false,
+    "no-any": false,
+    "no-inferrable-types": [
+      true
+    ],
+    "no-import-side-effect": [
+      true,
+      {
+        "ignore-module": "^rxjs/"
+      }
+    ],
+    "no-invalid-this": [
+      true,
+      "check-function-in-method"
+    ],
+    "no-null-keyword": false,
+    "no-require-imports": false,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-variable": [
+      true,
+      "react"
+    ],
+    "object-literal-sort-keys": false,
+    "only-arrow-functions": [
+      true,
+      "allow-declarations"
+    ],
+    "ordered-imports": [
+      false
+    ],
+    "prefer-method-signature": false,
+    "prefer-template": [
+      true,
+      "allow-single-concat"
+    ],
+    "quotemark": [
+      true,
+      "single",
+      "jsx-double"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef": [
+      true,
+      "parameter",
+      "property-declaration",
+      "member-variable-declaration"
+    ],
+    "variable-name": [
+      true,
+      "ban-keywords",
+      "check-format",
+      "allow-pascal-case"
+    ]
+  }
+}