I know many might be asking about this, here's a quick guide for you to do it.
1. Issue the following command af
npm install -g typescript typings webpack
npm install --save react react-dom
// allowing interoperability between typescript and webpack
npm install --save-dev ts-loader source-map-loader
npm link typescript
// get typings files for working with react. Warning this might give you error so used steps below - using tsd instead
typings install --ambient --save react
typings install --ambient --save react-dom
--ambients tells typings to grab from DefinitelyTyped
The command above was failing when i was working with it, so i used tsd. So go ahead and install tsd.
npm install -g tsd
Get react typings with the following command
tsd install react
tsd install react-dom
2. Add your tsconfig.json typescript configuration as follows :-
3. Create your first component using code as follow, please name it Hello.tsx (.tsx is an typescript supported file extension for react)
4. Create your index.tsx which will render your components to the right dom object
5. Next we are going to create index.html and we can see our react compoent in action.
6. Configure our webpack by creating webpack.config.jsfile.
7. We done, run webpack from the command line and open index.html to see our react/typescript component integration.
Phew!! Here a github project for this.