├── .gitignore
├── README.md
├── index.html
├── package.json
├── src
├── Hello.tsx
└── app.tsx
├── tsconfig.json
├── typings.json
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | /build/
2 | /node_modules/
3 | /typings/
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Typescript-ReactJS-Webpack
2 | Repo for Getting Started with React, Typescript and Webpack Medium [blog post](https://medium.com/@fay_jai/getting-started-with-reactjs-typescript-and-webpack-95dcaa0ed33c#.cp7sr9ewx)
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Getting Started with Typescript, ReactJS, and Webpack
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "typescript-react-webpack",
3 | "scripts": {
4 | "build": "webpack"
5 | },
6 | "devDependencies": {
7 | "ts-loader": "^0.8.1",
8 | "typescript": "^1.8.9",
9 | "typings": "^0.7.9",
10 | "webpack": "^1.12.14"
11 | },
12 | "dependencies": {
13 | "react": "^0.14.8",
14 | "react-dom": "^0.14.8"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/Hello.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | interface HelloProps {
4 | name: string;
5 | }
6 |
7 | class Hello extends React.Component {
8 | render() {
9 | return Hello, {this.props.name}
;
10 | }
11 | }
12 |
13 | export default Hello;
14 |
--------------------------------------------------------------------------------
/src/app.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as ReactDOM from "react-dom";
3 | import Hello from "./Hello";
4 |
5 | ReactDOM.render(
6 | ,
7 | document.getElementById("root")
8 | );
9 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react",
4 | "module": "commonjs",
5 | "noImplicitAny": true,
6 | "outDir": "./build/",
7 | "preserveConstEnums": true,
8 | "removeComments": true,
9 | "target": "ES5"
10 | },
11 | "exclude": [
12 | "node_modules",
13 | "typings/browser.d.ts",
14 | "typings/browser"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "ambientDependencies": {
3 | "react": "registry:dt/react#0.14.0+20160319053454",
4 | "react-dom": "registry:dt/react-dom#0.14.0+20160316155526"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require("path");
2 |
3 | var config = {
4 | entry: [
5 | "./src/app.tsx"
6 | ],
7 | output: {
8 | path: path.resolve(__dirname, "build"),
9 | filename: "bundle.js"
10 | },
11 | resolve: {
12 | extensions: ["", ".ts", ".tsx", ".js", ".jsx"]
13 | },
14 | module: {
15 | loaders: [
16 | {
17 | test: /\.tsx?$/,
18 | loader: "ts-loader",
19 | exclude: /node_modules/
20 | }
21 | ]
22 | }
23 | };
24 |
25 | module.exports = config;
26 |
--------------------------------------------------------------------------------