Add a quick-start guide on React with webpack #153
Conversation
| ``` | ||
|
|
||
| You'll be given a series of prompts. | ||
| For your entry point, use `./lib/bundle.js`. |
There was a problem hiding this comment.
Add "Use the defaults, except for entry point. For your entry point, ..."
|
Nice! It worked for me with only one hiccup. |
|
👍 w/ Nathan's comments |
|
:+!: |
| @@ -0,0 +1,168 @@ | |||
| This quick start guide will teach you wire up TypeScript with [React](http://facebook.github.io/react/) and [webpack](http://webpack.github.io/). | |||
There was a problem hiding this comment.
will teach how to you wire up TypeScript with?
|
👍 |
| # Write some code | ||
|
|
||
| Let's write our first TypeScript file using React. | ||
| Create a new file in your `src` directory named `index.tsx`. |
There was a problem hiding this comment.
we should add link here to more information about tsx/jsx support.
|
how about debugging? you should enable soruceMap support in tsconfig step, and make sure we have that working as well through webpack. |
|
@basarat @pspeter3 do you have any feedback on this? Do you have any opinions between ts-loader and awesome-typescript-loader? |
|
I have used ts-loader before but only casually. Asana uses Bazel for our TypeScript compilation |
| 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), both will let TypeScript and webpack play well together. | ||
|
|
||
| ```shell | ||
| npm install --save-dev ts-loader |
There was a problem hiding this comment.
npm install --save-dev ts-loader source-map-loader
| npm install --save react react-dom | ||
| ``` | ||
|
|
||
| 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), both will let TypeScript and webpack play well together. |
There was a problem hiding this comment.
both will let TypeScript and webpack play well together
Extend a bit that? Maybe a one-sentence addition like 'webpack uses ts-loader to load tsconfig and compile your TypeScript upon running webpack' and something similar for source-map (I don't know what ts-loader does, this is my guess).
@DanielRosenwasser awesome-typescript-loader was deprecated to put everyone in to community backing one defacto loader : https://github.com/TypeStrong/ts-loader 🌹 I personally wrote : https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html of the top of my head once but I didn't test it ... haven't heard any complaints :) 🌹 |
|
I'm not seeing anything about deprecation - both look like good/well-maintained projects. Mostly, I was trying to get an idea what an introductory react workflow might be like, but ts-loader seems to be the weapon of choice for both of you. Thanks! |
|
@DanielRosenwasser My bad. Deprecation was TypeScript-loader : andreypopp/typescript-loader#27 However I just saw s-panferov/awesome-typescript-loader#94 in awesome-typescript-loader Personally I just do |
Add a quick-start guide on React with webpack
|
@DanielRosenwasser @basarat |
|
In the two years since this was closed, is awesome-typescript-loader still preferred to ts-loader? Or perhaps better said, have the missing atl features been added to ts loader? |
|
I still use ts-loader anytime I use Webpack outside Asana. (We compile the TypeScript before Webpack with Bazel at Asana) |
This is the first of several tutorials in starting up a project using several different frameworks. The idea is to reduce JavaScript fatigue in beginners and those taking a cursory glance at TypeScript.
Also, thanks for helping me out with this @yuit!