macmillan78/react-transform-typescript-boilerplate

A new Webpack boilerplate with hot reloading React components written in Typescript, and error handling on module and component level.

React Transform Typescript Boilerplate

Enables React development with Typescript featuring Hot Module Replacement and CSS modules.

Based on react-transform-boilerplate

Integrates following technologies:

• Webpack
• Typescript
• React
• Sass - (To replace extension in line 32 and sass-loader in line 33 of webpack.config.*.js)
• CSS Modules

To import Sass files in JS use the require function instead of ES2015 import syntax, due to conflicts with typescripts module checking.

• react-transform-hmr - enables hot reloading react components
• react-transform-catch-errors - catches errors inside render()

For convenience they are packed in a single preset called react-transform-hmre but you can make your own.

Syntax errors are displayed in an overlay using @glenjamin’s webpack-hot-middleware, which replaces Webpack Dev Server. This project does not use React Hot Loader.

Installation

git clone https://github.com/gaearon/react-transform-boilerplate.git
cd react-transform-boilerplate
npm install
npm start
open http://localhost:3000

Proxying another project:

git clone https://github.com/gaearon/react-transform-boilerplate.git
cd react-transform-boilerplate
npm install
npm start -- --proxyTarget http://yourdomain.tld
open http://localhost:3000

and integrate script reference to http://localhost:3000/static/bundle.js in the proxied project in dev mode.

Discussion

You can discuss React Transform and related projects in #react-transform channel on Reactiflux Discord.

License

CC0 (public domain)