TypeScript, React and Gulp.js - define the reaction

Question

I am trying to create a workflow where I can write React modules using TypeScript and automatically compile in JavaScript via Gulp.js. I am using TypeScript 1.6.2, gulp-react and gulp-typescript.

Now my .tsx file looks like this:

 /// <reference path="../../../../typings/react/react.d.ts" /> import React = __React; interface HelloWorldProps { name: string; } var HelloMessage = React.createClass<HelloWorldProps, any>({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="helloooo" />, document.getElementById('test')); 

My problem in this line: import React = __React;

When I leave this, I get an error

error TS2304: Cannot find the name "React".

when compiling .tsx to .js (but it still compiles in JSX and I can use the output). When I insert it, I can compile without errors, but when I try to use the file inside the browser, I get an Uncaught ReferenceError: __React is not defined , of course.

This is what my gulptask looks like:

 gulp.task('gui-tsx', function () { var tsResult = gulp.src(config.guiSrcPath + 'tsx/app.tsx') .pipe(ts({ jsx: 'react' })); return tsResult.js.pipe(gulp.dest(config.guiSrcPath + 'jsx')); }); 

Is there a workaround for this? Or am I missing something here?

Answer 1

Ok, I found a solution. First install the global React definition via tsd :

 tsd install react-global 

This will create the react-global.d.ts in your typings directory, which you should reference in the component root file (the path is relative, so configure it to your needs):

 /// <reference path="../../../../typings/react/react-global.d.ts" /> 

After that, it compiles without errors.

Answer 2

where I can write reactive modules using typescript and automatically compile in js via gulp

We strongly recommend that you do not use global modules. Instead, compile with --module commonjs and enable the / webpack / nodejs reaction ecosystem.

You can check the sample application here: https://github.com/basarat/tsb/tree/master