linkInstallation

linkPrerequisites

Render-JSX is all about transpiling JSX, which needs to happen on the server-side (before you ship transpiled JavaScript to the client-side, for example). This means you need Node.js and some Node.js package manager (such as NPM or Yarn).

linkInstallation

Setting up Render-JSX is pretty simple: you need to install the package render-jsx and then configure your transpiler properly. Easiest way to do that is to use one of the following starter projects:

You can also just get the package via NPM, though this would mean you would need to configure your transpiler as well (see the following section).

1linknpm i render-jsx

linkConfiguration

For configuration, you can include these pragmas at the beginning of your .jsx/.tsx files. Most common transpilers understand these pragmas:

1link/** @jsx renderer.create */

2link/** @jsxFrag renderer.fragment */

For project wide configuration, you need to configure your transpiler accordingly. Here is how sample configuration for TypeScript and Babel (with @babel/plugin-transform-react-jsx) look like:

tsconfig.json
1link{

2link "compilerOptions": {

3link    "jsx": "react",

4link    "jsxFactory": "renderer.create",

5link    "jsxFragmentFactory": "renderer.fragment",

6link   "target": "es6",

7link   "declaration": false,

8link   "sourceMap": true,

9link   "moduleResolution": "node",

10link   "esModuleInterop": true,

11link   "allowSyntheticDefaultImports": true,

12link   "lib": [

13link     "es2017",

14link     "dom"

15link   ]

16link },

17link "include": [

18link   "./src/**/*",

19link ]

20link}

.babelrc
1link{

2link  "plugins": [

3link     ["@babel/plugin-transform-react-jsx", {

4link       "pragma": "renderer.create",

5link       "pargmaFrag": "renderer.fragment"

6link     }]

7link  ]

8link}