javascript - TypeScript, React and Gulp.js - defining react - Stack Overflow

admin管理员组

文章数量:1435859

I am trying to make a workflow, where I can write React modules using TypeScript and automatic piling to JavaScript via Gulp.js. I am using TypeScript 1.6.2, gulp-react and gulp-typescript.

My .tsx file looks like this now:

/// <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 is this line: import React = __React;

When I leave it out, I get the error

error TS2304: Cannot find name 'React'.`

when piling .tsx to .js (but it still piles to JSX, and I can use the output). When I put it in, I can pile 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 how 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?

I am trying to make a workflow, where I can write React modules using TypeScript and automatic piling to JavaScript via Gulp.js. I am using TypeScript 1.6.2, gulp-react and gulp-typescript.

My .tsx file looks like this now:

/// <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 is this line: import React = __React;

When I leave it out, I get the error

error TS2304: Cannot find name 'React'.`

when piling .tsx to .js (but it still piles to JSX, and I can use the output). When I put it in, I can pile 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 how 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?

• javascript
• reactjs
• typescript
• gulp

Share Improve this question Follow edited Apr 16, 2017 at 19:36 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Oct 4, 2015 at 10:23 Felix HagspielFelix Hagspiel 2,94722 gold badges3434 silver badges4848 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

tsd install react-global

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

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

After that it piles without errors.

where I can write react modules using typescript and automatic piling to js via gulp

Highly remend you don't use global modules. Instead pile with --module monjs and embrace the react / webpack / nodejs ecosystem.

You can checkout an example application here : https://github./basarat/tsb/tree/master

本文标签： javascriptTypeScriptReact and Gulpjsdefining reactStack Overflow