React custom type definition

Question

I'm a newbie in React, and I got an issue with a custom type definition in my React app. I learn with the Stoyan Stefanov book, and there is an example of a custom type definition, but when I tried to build app, there is an error:

SyntaxError: js/source/components/Button.js: Unexpected token, expected ";" (9:5)

My code (starts from 9 line):

type Props = {
    href: ?string,
    className: ?string,
}

const Button = (props: Props) =>
    props.href
        ? <a {...props} className={classNames('Button', props.className)}/>
        : <button {...props} className={classNames('Button', props.className)}/>

Is it possible to create my own type or it is some old standard? Thanks for any comment!

Answer 1

The example code you see in the book is using flowtype by Facebook. It is an augmented syntax on top of standard js, and it needs to be transpiled back to normal js code by babel before you can actually run it.

I believe Stefanov includes setup instructions in his book. Check the part you skipped, or visit flowtype's site for instructions.

As of up-to-date-ness, well, I'd say typescript by Microsoft is getting more attention. These two are competitors, solving same problem. I personally think typescript is doing a better job.