Initial commit

markogresak · Sep 10, 2015 · 7de09ec · 7de09ec
commit 7de09ec
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+*.log
+node_modules
+typings
+dist
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Marko Grešak
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,22 @@
+# TypeScript with React and JSX
+
+This example repo is illustrating usage of TypeScript with React and upcoming JSX syntax support in TypeScript's compiler via `.tsx` file extension.
+
+## Running
+
+ - *Have node.js installed.*
+
+
+ 1. Clone this repo.
+ 2. Run `npm install` to get all dependencies and install typings.
+ 3. Run `npm start` to run Webpack dev server.
+ 4. Navigate to [localhost:8080](http://localhost:8080) to view the page (it's nothing impressive, really).
+
+## Problems or errors
+
+If you notice anything wrong with this example, please report it under issues.
+
+And if you're feeling extra helpful, pull requests are always welcome!
+
+
+### [License (MIT)](LICENSE.md)
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>TypeScript + React with JSX example</title>
+  </head>
+  <body>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/index.tsx b/index.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+
+// Render a simple React h1 component into the body.
+React.render(<h1>Hello, TypeScript!</h1>, document.getElementsByTagName('body')[0]);
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "typescript-react-jsx-example",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "postinstall": "tsd reinstall --overwrite --save",
+    "start": "webpack-dev-server"
+  },
+  "author": "Marko Gresak <marko@gresak.io> (http://gresak.io/)",
+  "license": "MIT",
+  "devDependencies": {
+    "react": "^0.13.3",
+    "ts-loader": "^0.5.4",
+    "tsd": "^0.6.4",
+    "typescript": "^1.6.0-dev.20150909",
+    "webpack": "^1.12.1",
+    "webpack-dev-server": "^1.10.1"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "outDir": "dist",
+        "target": "es5",
+        "module": "commonjs",
+        "jsx": "react",
+        "declaration": false,
+        "noImplicitAny": false,
+        "removeComments": true,
+        "noLib": false,
+        "preserveConstEnums": true,
+        "suppressImplicitAnyIndexErrors": true
+    },
+    "filesGlob": [
+        "./**/*.ts",
+        "./**/*.tsx",
+        "!./node_modules/**/*"
+    ],
+    "files": [
+        "./typings/react/react.d.ts",
+        "./typings/tsd.d.ts",
+        "./index.tsx"
+    ]
+}
diff --git a/tsd.json b/tsd.json
@@ -0,0 +1,12 @@
+{
+  "version": "v4",
+  "repo": "borisyankov/DefinitelyTyped",
+  "ref": "master",
+  "path": "typings",
+  "bundle": "typings/tsd.d.ts",
+  "installed": {
+    "react/react.d.ts": {
+      "commit": "b3aeee64552e324581fdbe0926f4a96e981e451b"
+    }
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,20 @@
+module.exports = {
+  resolve: {
+    // .js is required for react imports.
+    // .tsx is for our app entry point.
+    // .ts is optional, in case you will be importing any regular ts files.
+    extensions: ['', '.js', '.ts', '.tsx']
+  },
+  module: {
+    loaders: [{
+      // Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
+      test: /\.tsx?$/,
+      loader: 'ts-loader',
+      exclude: /node_modules/
+    }]
+  },
+  entry: {
+    // Set index.tsx as application entry point.
+    app: './index.tsx'
+  }
+};