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.
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.)
Create your UI
Write your demo button .tsx file:
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.
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).
Let’s see the magical tsconfig.json file that we could use for the command line compiler and for the gulp task as well.
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.