React with TypeScript

Introduction

 

If you red my previous posts you probably know that I currently develop an extension in TypeScript.

For implementing the UI part of the extension I chose React. React because it is super hyped nowadays, I was interested and always good to learn something new.

About React itself and about the development details developing with React it will be an other post as it is planed. But I thought this part of my journey with React deserves a separated post.

Let’s see how I get together React and TypeScript for my extension.

 

Start getting TypeScript together with React

 

The release of TypeScript 1.6 includes support for React components.

That means you don’t need to use any module dependency handler, like Browserify to handle React modules.

It’s really nice. Let’s try it out!

You install typescript with npm:

npm install –g typescript

You check the version you have installed:

npm view typescript version

It is the newest. 1.6. Cool!

Try to use the tsc compiler with ––jsx or with ––project (including jsx handling as well).

 

The first problem

 

Do you have Visual Studio installed to work sometimes with that too?

Yes? – That’s the problem!

I work on Windows with WebStorm 11 but for other projects I have Visual Studio 2015 installed as well.

Visual Studio makes its compiler for windows as default. Command line will try to use it first.

 

Solutions

 

Check your Visual Studio folder:

C:\Program Files (x86)\Microsoft SDKs\TypeScript

Does it contains any TypeScript versions under 1.6?  Yes?

  • Solution 1

Upgrade the Visual Studio’s TypeScript from here.

  • Solution 2

Just delete the older TypeScript versions.

  • Solution 3

Set an explicit system variable pointing to the npm installed version of TypeScript compiler.

 

 

Getting TypeScript together with React

 

After letting this problem behind you can try out the TypeScript compiler.

Install React and ReactDOM with npm.

npm install –save react react-dom

Install typescript definitions for them with tsd.

tsd install — save react react-dom

If you are using modules you should use react.d.ts, react-dom.d.ts and any of the react-addon-*.d.ts definition files.

Use them in modules you need:

import React = __React;

import ReactDOM = __React.__DOM;

If you are using the global React variable, you should use react-global.d.ts.

You need to download the react-global.d.ts file from the DT site and copy it under the typings/react folder.

Include React and ReactDOM in index.html. (From CDN or from your sources.)

https://fb.me/react-0.14.3.js
https://fb.me/react-dom-0.14.3.js

 

Create your UI

 

Write your demo button .tsx file:

react from extension

If you didn’t handle page load in your code and include your scripts into the head, you probably will face the following error in your inspector console.

Uncaught Error: Invariant Violation: _registerComponent(…): Target container is not a DOM element.

A quick fix could be if you write your script tags at the bottom of the body tag. Handling all of this is better from code I think. I wrote it down just because if you see this error this is the fastest way to move on.

react from extension

Including scripts at this point of your site isn’t from the devil. With React you have the option to do that and you can read a lot of good thoughts about the benefits of including scripts this way.

Having to code is one thing you. You need to create a deploy-able package from your source.

 

Compile for publish

 

You can do it from command line manually with tsc. You only need a good configuration json.

tsc –project tsconfig.json

Or you can choose an automated way, using Gulp. Gulp could be good for handling other automatized tasks as well. In this post we will check only the typescript compiler task of it.

You need to require the TypeScript compiler:

var ts = require(‘gulp-typescript’);

And use the “createProject” method of it. It will create a configured project according to the settings in your json file.

The project’s src is defined in the files section of the json config file (if not all files will be included).

react from extension

Let’s see the magical tsconfig.json file that we could use for the command line compiler and for the gulp task as well.

react from extension

For all setting options detailed, visit the following sites.

Schema description. Just the facts.

Github wiki with more explanations.

If you don’t have a lot of options and you don’t want to outsource it to a json file, you can configure the ts compile in the gulp file as well.

react from extension

 

Run it and it will work fine!

Advertisements

One thought on “React with TypeScript

  1. Pingback: Browse Wisely – The Extension | My Journey InTo JavaScript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s