Skip to main content

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.













Comments

Popular posts from this blog

Android Programmatically apply style to your view

Applying style to your view (button in this case) dynamically is pretty easy. All you have to do is place the following in your layout folder (res/layout)
Let's call this file : buttonstyle.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#449def" /> <stroke android:width="1dp" android:color="#2f6699" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#449def" a…

OpenCover code coverage for .Net Core

I know there are many post out there getting code coverage for .dotnetcore. I'm using opencover to address this needs.

In case, you do no want to use opencover and wanted to stick with vs2015 code coverage, you can try to copy Microsoft.VisualStudio.CodeCoverage.Shim.dll from C:\Program Files (x86)\Microsoft Visual Studio 14.0\Team Tools\Dynamic Code Coverage Tools\coreclr\ and drop it into your project "bin\Debug\netcoreapp1.0" folder.  Please note : you need to be on VS2015 Enterprise to do this. 

To get started, I guess we need to add OpenCover and ReportGenerator for our test projects, as shown in diagram below :-



When nuget packge gets restored, we will have some binaries downloaded to our machine and we going to use this to generate some statistics. I think the biggest issue is to getting those command lines work.

In dotnetcore, we run test project using "dotnet test" (assuming you are in the test project folder - if not please go there)  So we add this …

DataTable does not have AsEnumerable

I have problem locating my AsEnumerable extension method in my DataTabe (System.Data). Thank god for this post by Angel
(http://blogs.msdn.com/angelsb/archive/2007/02/23/does-not-contain-a-definition-for.aspx)

I was able to find this method once i have added reference to the following assembly.

C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Data.DataSetExtensions.dll

Try to do a dummy Build and you should be able to get it.