React-TSX is a typescript library that makes writing compiled react code using Typescript simple and look very close to html, if it were functional programming.
Reason for react-tsx
The reason react-tsx was created is that Typescript does not always play well with jsx,
and at the time I started learning React it was almost impossible to use both. I personally do not like
the look, feel, syntax, and the extra build step that is required to use jsx.
Screw IDEs I only code in vim, nano, less, vi, etc..
You need to manually add the following to your files section of your tsconfig.json
If you are taking advantage of your IDE all you need is a properly configured tsconfig.json
List of IDEs I know of
Atom
Visual Studio
Visual Studio Code
WebStorm
IDE re write
"your-ide": {
"rewriteTsconfig":true
}
compilerOptions
The required compiler options you can use es5 or es6, it's your choice!
"compilerOptions": {
"target":"es5",
"module":"commonjs",
"isolatedModules":false,
"moduleResolution":"node",
"jsx":"react"
}
filesGlob if you are using a supported IDE
The last line in the fileGlobs is what picks up react.d.ts, react-dom.d.ts, react-router.d.ts, and react-tap-event-plugin.d.ts. This is so you do not have to deal with the definition files and can use import React = require("react") etc. anywhere.
"filesGlob": [
"<insert path to source dir/>/**/*.ts",
"<insert path to source dir/>/**/*.tsx",
"<insert path to node_modules/>/react-tsx/**/*.d.ts"
],
My starter tsconfig.json
Please note that I did not fill out files:[], my IDE did!
You will need to use a commonjs bundler, this is agnostic so pick your poison.
Full Example
For a full example please see my example using react-toolbox(http://react-toolbox.com/#/) and webpack (https://github.com/Thecavepeanut/react-tsx-basic-example)