Setting up webpack and babel for a node project can be complicated, when maybe all you want is to render some react elements.
load-jsx is a plug-n-play module that will dynamically parse all JSX imports. This will allow you to use JSX markup across your project without needing to worry about build or compile steps
- No configuration / bundle step needed
- plug-and-play with just ONE import
- Import files(.jsx, .js) using JSX markup within your NodeJs projects
- Can insert
Import React from '{react}'at the top of files that use JSX
yarn add load-jsx
or
npm install --save load-jsx
The first step to import the lib
require('load-jsx')If you want to have you React'ish libarty imported at the top of you JSX, use.
require('load-jsx')('preact')this will add "import React from 'preact'" for example
//Enable JSX
require("load-jsx")("react");
//Load server
require("./server");const Elem = () => (<>
<div>Hi World</div>
<button onClick={(e) => alert('Hello You!')}>Click!</button>
</>)
export default Elemimport ReactDOMServer from 'react-dom/server'
import express from 'express'
import Elem from './Elem.jsx'
const app = express()
app.get('/', (req, res) => {
const jsx = ReactDOMServer.renderToString(<Elem />)
res.send(`
<!DOCTYPE html>
<html> <body> ${jsx} </body> </html>
`)
})
app.listen(3000, () => console.log(`App listening on http://localhost:3000}`))