Setup Typescript and React for your project with typings support

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 init

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.