How to properly use React and Flow with ES6 syntax?

Question

JavaScript

Trying to use React and Flow with ES6 syntax and getting error:
line 9 col 3 React element: Hello - Error:
in app.jsx file:

/* @flow */
var React = require('react');
var Hello = require('../src/components_flow/hello/hello');

//var Input = require('../src/components_flow/input/input');
//React.renderComponent(<Hello name="World" />, document.getElementById('react-container'));

React.render(
  <Hello name="World"/>,
  document.getElementById('react-container'));

hello.jsx:

/* @flow */

var React = require('react');

class Hello extends React.Component {
  render(): any {
    return <div>Hello {this.props.name}</div>;
  }
}

module.exports = Hello;

gulp task:

gulp.task('react', function () {
    return gulp.src([
      './src/components_flow/hello/hello.jsx',
      './src/components_flow/input/input.jsx',
      './src/app.jsx'],
      function (er, files) {
          // files is an array of filenames.
          // If the `nonull` option is set, and nothing
          // was found, then files is ["**/*.js"]
          // er is an error object or null.
          //console.log(files);
        })
        .pipe(flow({
            all: false,
            weak: false,
            killFlow: false,
            beep: false,
            abort: false //abort the gulp task after the first Typecheck error
        }))
        .pipe(react({stripTypes: true, harmony: true}))       
        .pipe(gulp.dest(function(file) {
          return file.base;
    }));
});

Details in this branch of the repository: https://github.com/RinatMullayanov/react-typescrip...
To see this error in the console, you need to type
gulp react
:

/* @flow */

var React = require('react');

type HelloProps = {
  name: string
};

class Hello extends React.Component {
  static propTypes: { name: string };
  static defaultProps: { name: string };
 
  constructor(props: HelloProps) {
     super(props);
  }

  render(): any {
    return <div>Hello {this.props.name}</div>;
  }
}


module.exports = Hello;

And it works.
Can you please explain why this should be done (why it is required to declare propTypes and defaultProps)?
Is this some subtlety of implementing ES6 support in React?

Answer 1

Read what flowtype.org is for (A STATIC TYPE CHECKER FOR JAVASCRIPT)