Merge pull request #415 from Microsoft/updateReactWebpack

Use 'awesome-typescript-loader', use SFCs.

Author: mhegazy

pages/tutorials/React & Webpack.md

@@ -16,10 +16,9 @@ To start, we're going to structure our project in the following way:
 
 ```text
 proj/
-   ├─ src/
-   |    └─ components/
-   |
-   └─ dist/
+├─ dist/
+└─ src/
+   └─ components/
 ```
 
 TypeScript files will start out in your `src` folder, run through the TypeScript compiler, then webpack, and end up in a `bundle.js` file in `dist`.
@@ -32,9 +31,10 @@ mkdir src
 cd src
 mkdir components
 cd ..
-mkdir dist
 ```
 
+Webpack will eventually generate the `dist` directory for us.
+
 # Initialize the project
 
 Now we'll turn this folder into an npm package.
@@ -49,10 +49,10 @@ You can always go back and change these in the `package.json` file that's been g
 
 # Install our dependencies
 
-First ensure TypeScript and Webpack are installed globally.
+First ensure Webpack is installed globally.
 
 ```shell
-npm install -g typescript webpack
+npm install -g webpack
 ```
 
 Webpack is a tool that will bundle your code and optionally all of its dependencies into a single `.js` file.
@@ -68,20 +68,19 @@ Usually when you import a path like `"react"`, it will look inside of the `react
 however, not all packages include declaration files, so TypeScript also looks in the `@types/react` package as well.
 You'll see that we won't even have to think about this later on.
 
-Next, we'll add development-time dependencies on [ts-loader](https://www.npmjs.com/package/ts-loader) and [source-map-loader](https://www.npmjs.com/package/source-map-loader).
+Next, we'll add development-time dependencies on [awesome-typescript-loader](https://www.npmjs.com/package/awesome-typescript-loader) and [source-map-loader](https://www.npmjs.com/package/source-map-loader).
 
 ```shell
-npm install --save-dev ts-loader source-map-loader
-npm link typescript
+npm install --save-dev typescript awesome-typescript-loader source-map-loader
 ```
 
 Both of these dependencies will let TypeScript and webpack play well together.
-ts-loader helps webpack compile your TypeScript code using the TypeScript's standard configuration file named `tsconfig.json`.
+awesome-typescript-loader helps Webpack compile your TypeScript code using the TypeScript's standard configuration file named `tsconfig.json`.
 source-map-loader uses any sourcemap outputs from TypeScript to inform webpack when generating *its own* sourcemaps.
 This will allow you to debug your final output file as if you were debugging your original TypeScript source code.
 
-Linking TypeScript allows ts-loader to use your global installation of TypeScript instead of needing a separate local copy.
-If you want a local copy, just run `npm install typescript`.
+Notice that we installed TypeScript as a development dependency.
+We could also have linked TypeScript to a global copy with `npm link typescript`, but this is a less common scenario.
 
 # Add a TypeScript configuration file
 
@@ -100,9 +99,8 @@ Simply create a new file in your project root named `tsconfig.json` and fill it
         "target": "es5",
         "jsx": "react"
     },
-    "files": [
-        "./src/components/Hello.tsx",
-        "./src/index.tsx"
+    "include": [
+        "./**/*"
     ]
 }
 ```
@@ -119,16 +117,26 @@ import * as React from "react";
 
 export interface HelloProps { compiler: string; framework: string; }
 
-export class Hello extends React.Component<HelloProps, {}> {
+const Hello = (props: HelloProps) => <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
+
+```
+
+Note that while this example uses [stateless functional components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions)), we could also make our example a little *classier* as well.
+
+```ts
+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>;
     }
 }
 ```
 
-Note that while this example is quite *classy*, we didn't need to use a class.
-Other methods of using React (like [stateless functional components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions)) should work just as well.
-
 Next, let's create an `index.tsx` in `src` with the following source:
 
 ```ts
@@ -197,8 +205,8 @@ module.exports = {
 
     module: {
         loaders: [
-            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
-            { test: /\.tsx?$/, loader: "ts-loader" }
+            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
+            { test: /\.tsx?$/, loader: "awesome-typescript-loader" }
         ],
 
         preLoaders: [