From db367dece2b10b1f81819cbb989ca575a24bcadb Mon Sep 17 00:00:00 2001 From: Tommy Parnell Date: Sat, 16 Dec 2017 12:07:56 -0500 Subject: [PATCH] init --- .gitignore | 2 ++ index.html | 17 +++++++++++++++++ package.json | 22 ++++++++++++++++++++++ src/components/Hello.tsx | 17 +++++++++++++++++ src/index.tsx | 19 +++++++++++++++++++ tsconfig.json | 13 +++++++++++++ webpack.config.js | 34 ++++++++++++++++++++++++++++++++++ 7 files changed, 124 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 package.json create mode 100644 src/components/Hello.tsx create mode 100644 src/index.tsx create mode 100644 tsconfig.json create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..76add87 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +node_modules +dist \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9943521 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + Hello React! + + +
+ + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..2195e22 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "minbin", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "react": "^16.2.0", + "react-dom": "^16.2.0", + "react-redux": "^5.0.6" + }, + "devDependencies": { + "awesome-typescript-loader": "^3.4.1", + "redux-devtools": "^3.4.1", + "source-map-loader": "^0.2.3", + "typescript": "^2.6.2" + } +} diff --git a/src/components/Hello.tsx b/src/components/Hello.tsx new file mode 100644 index 0000000..30713d9 --- /dev/null +++ b/src/components/Hello.tsx @@ -0,0 +1,17 @@ +import * as React from "react"; +import RaisedButton from 'material-ui/RaisedButton' +export interface HelloProps { compiler: string; framework: string; } + +// 'HelloProps' describes the shape of props. +// State is never set so we use the '{}' type. +export class Hello extends React.Component { + render() { + return ( +
+

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

+ +
+ ); + + } +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..292093c --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import * as ReactDOM from "react-dom"; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import { Hello } from "./components/Hello"; +import darkBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +const darkMuiTheme = getMuiTheme(darkBaseTheme); + + +const App = () => ( + + + + ); + +ReactDOM.render( + , + document.getElementById("example") +); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..864b7ef --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "outDir": "./dist/", + "sourceMap": true, + "noImplicitAny": true, + "module": "commonjs", + "target": "es6", + "jsx": "react" + }, + "include": [ + "./src/**/*" + ] +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..0bfdbcd --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,34 @@ +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: [".ts", ".tsx", ".js", ".json"] + }, + + module: { + rules: [ + // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. + { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, + + // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. + { enforce: "pre", 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" + }, +}; \ No newline at end of file