Hello world with react and typescript

athornburg · athornburg · commit cb1cd7017f4e · 2017-04-10T21:56:07.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+*.iml
+.idea/*
+dist/*
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Hello React!</title>
+    </head>
+    <body>
+        <div id="example"></div>
+
+        <!-- Dependencies -->
+        <script src="./node_modules/react/dist/react.js"></script>
+        <script src="./node_modules/react-dom/dist/react-dom.js"></script>
+
+        <!-- Main -->
+        <script src="./dist/bundle.js"></script>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "typescript-react-starter",
+  "version": "1.0.0",
+  "description": "React Typescript Setup",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest",
+    "serve": "node_modules/.bin/webpack-dev-server"
+  },
+  "keywords": [
+    "typescript",
+    "react",
+    "starter",
+    "example"
+  ],
+  "author": "Alex Thornburg",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/enzyme": "^2.7.7",
+    "@types/jasmine": "^2.5.47",
+    "awesome-typescript-loader": "^3.1.2",
+    "enzyme": "^2.8.0",
+    "jest": "^19.0.2",
+    "karma": "^1.6.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-typescript": "^3.0.0",
+    "karma-typescript-preprocessor": "^0.3.1",
+    "react-addons-test-utils": "^15.5.1",
+    "source-map-loader": "^0.2.1",
+    "typescript": "^2.2.2",
+    "webpack-dev-server": "^2.4.2"
+  },
+  "dependencies": {
+    "@types/react": "^15.0.21",
+    "@types/react-dom": "^0.14.23",
+    "react": "^15.5.3",
+    "react-dom": "^15.5.3",
+    "webpack": "^2.3.3"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ],
+    "transform": {
+      "^.+\\.(ts|tsx)$": "<rootDir>/preprocessor.js"
+    },
+    "testMatch": [
+      "**/__test__/*.(ts|tsx)"
+    ]
+  }
+}
diff --git a/preprocessor.js b/preprocessor.js
@@ -0,0 +1,16 @@
+const tsc = require('typescript');
+const tsConfig = require('./tsconfig.json');
+
+module.exports = {
+  process(src, path) {
+    if (path.endsWith('.ts') || path.endsWith('.tsx')) {
+      return tsc.transpile(
+        src,
+        tsConfig.compilerOptions,
+        path,
+        []
+      );
+    }
+    return src;
+  },
+};
diff --git a/src/components/__test__/hello.test.tsx b/src/components/__test__/hello.test.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import {shallow} from "enzyme";
+import {Hello} from "../hello";
+
+describe("Hello Component", () => {
+    let helloComponent: any;
+    beforeEach(() => {
+        helloComponent = shallow(<Hello/>);
+    });
+
+    it("says hello", () => {
+        expect(helloComponent.find("h1").text()).toContain("Hello typescript and react!");
+    });
+});
diff --git a/src/components/hello.tsx b/src/components/hello.tsx
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export interface HelloProps {}
+
+// 'HelloProps' describes the shape of props.
+// State is never set so we use the 'undefined' type.
+export class Hello extends React.Component<HelloProps, undefined> {
+    render() {
+        return <h1>Hello typescript and react!</h1>;
+    }
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { Hello } from "./components/hello";
+
+ReactDOM.render(
+    <Hello/>,
+    document.getElementById("example")
+);
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "es6",
+        "jsx": "react"
+    },
+    "include": [
+        "./src/**/*"
+    ],
+    "files": [
+        "src/**/*"
+    ]
+}
diff --git a/typings.json b/typings.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "enzyme": "registry:dt/enzyme#2.7.0+20170320235509"
+  }
+}
diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -0,0 +1 @@
+/// <reference path="modules/enzyme/index.d.ts" />
diff --git a/typings/modules/enzyme/index.d.ts b/typings/modules/enzyme/index.d.ts
diff --git a/typings/modules/enzyme/typings.json b/typings/modules/enzyme/typings.json
diff --git a/webpack.config.js b/webpack.config.js

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +node_modules/
 +*.iml
 +.idea/*
 +dist/*
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+/// <reference path="modules/enzyme/index.d.ts" />`