load-jsx
v1.0.0
Published
A real-time transform pipeline for JSX -> JavaScript in NodeJs
Downloads
1
Maintainers
codemeasandwichReadme
load-jsx
A real-time transform for JSX ➜ JavaScript in NodeJs
The Problem:
Setting up webpack and babel for a node project can be complicated, when maybe all you want is to render some react elements.
The Solution:
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
Features
- No configuration / bundle step needed
- plug-and-play with just ONE import
- Import files(.jsx, .js) using JSX markup within your NodeJs projects
Bonus
- Can insert
Import React from '{react}'at the top of files that use JSX
Install
yarn add load-jsx
or
npm install --save load-jsx
constructor / setup
⚠ load-jsx Should be included before you import files with JSX markup in them.
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
You only need to require('load-jsx') once on the first JS file loaded ツ
Example
index.js
//Enable JSX
require("load-jsx")("react");
//Load server
require("./server");Elem.jsx
const Elem = () => (<>
<div>Hi World</div>
<button onClick={(e) => alert('Hello You!')}>Click!</button>
</>)
export default Elemserver.js
import 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}`))