commit 21937b1c657cbda7b10abf7abfa5ea24095dee6b Author: Christopher Serr Date: Thu Dec 29 20:04:49 2016 +0100 Initial Commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b6dddf6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +npm-debug.log diff --git a/index.html b/index.html new file mode 100644 index 0000000..ae30de6 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + Hello React! + + +
+ + + + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..b955635 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/src/components/Hello.tsx b/src/components/Hello.tsx new file mode 100644 index 0000000..5ee1e0c --- /dev/null +++ b/src/components/Hello.tsx @@ -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 { + render() { + return

Hello from {this.props.compiler} and {this.props.framework}!

; + } +} diff --git a/src/components/LoggingButton.tsx b/src/components/LoggingButton.tsx new file mode 100644 index 0000000..e7e17de --- /dev/null +++ b/src/components/LoggingButton.tsx @@ -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 { + 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 ( + + ); + } +} diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..9593c85 --- /dev/null +++ b/src/index.tsx @@ -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( +
+ + +
, + document.getElementById("example") +); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..f121299 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "outDir": "./dist/", + "sourceMap": true, + "noImplicitAny": true, + "module": "commonjs", + "target": "es5", + "jsx": "react" + }, + "include": [ + "./src/**/*" + ] +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..71f1856 --- /dev/null +++ b/webpack.config.js @@ -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" + }, +};