Initial Commit

2026-08-26 19:23:40 +00:00 · 2016-12-29 20:04:49 +01:00
commit 21937b1c65
8 changed files with 151 additions and 0 deletions
@@ -0,0 +1,3 @@
+node_modules
+dist
+npm-debug.log
@@ -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>
@@ -0,0 +1,22 @@
+{
+  "name": "livesplit",
+  "version": "1.0.0",
+  "description": "",
+  "main": "dist/bundle.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@types/react": "^0.14.55",
+    "@types/react-dom": "^0.14.19",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1"
+  },
+  "devDependencies": {
+    "awesome-typescript-loader": "^3.0.0-beta.17",
+    "source-map-loader": "^0.1.5",
+    "typescript": "^2.1.4"
+  }
+}
@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export interface HelloProps { compiler: string; framework: string; }
+
+// '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 from {this.props.compiler} and {this.props.framework}!</h1>;
+    }
+}
@@ -0,0 +1,36 @@
+import * as React from "react";
+
+export interface LoggingProps { initialValue: number }
+export interface LoggingState { value: number }
+
+export class LoggingButton extends React.Component<LoggingProps, LoggingState> {
+    constructor(props: LoggingProps) {
+        super(props);
+        this.state = {
+            value: props.initialValue
+        };
+    }
+
+    componentDidMount() {
+        console.log("hi");
+    }
+
+    componentWillUnmount() {
+        console.log("bye");
+    }
+
+    handleClick(e: any) {
+        this.setState({
+            value: this.state.value + 1
+        });
+    }
+
+    render() {
+        // This syntax ensures `this` is bound within handleClick
+        return (
+            <button onClick={(e) => this.handleClick(e)}>
+                {this.state.value}
+            </button>
+        );
+    }
+}
@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { Hello } from "./components/Hello";
+import { LoggingButton } from "./components/LoggingButton";
+
+ReactDOM.render(
+    <div>
+        <Hello compiler="TypeScript" framework="React" />
+        <LoggingButton initialValue={5} />
+    </div>,
+    document.getElementById("example")
+);
@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "commonjs",
+        "target": "es5",
+        "jsx": "react"
+    },
+    "include": [
+        "./src/**/*"
+    ]
+}
@@ -0,0 +1,36 @@
+module.exports = {
+    entry: "./src/index.tsx",
+    output: {
+        filename: "bundle.js",
+        path: __dirname + "/dist"
+    },
+
+    // Enable sourcemaps for debugging webpack's output.
+    devtool: "source-map",
+
+    resolve: {
+        // Add '.ts' and '.tsx' as resolvable extensions.
+        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
+    },
+
+    module: {
+        loaders: [
+            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
+            { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
+        ],
+
+        preLoaders: [
+            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+            { test: /\.js$/, loader: "source-map-loader" }
+        ]
+    },
+
+    // When importing a module whose path matches one of the following, just
+    // assume a corresponding global variable exists and use that instead.
+    // This is important because it allows us to avoid bundling all of our
+    // dependencies, which allows browsers to cache those libraries between builds.
+    externals: {
+        "react": "React",
+        "react-dom": "ReactDOM"
+    },
+};