load-jsx

1.0.0 • Public • Published

load-jsx

A real-time transform for JSX ➜ JavaScript in NodeJs

npm version npm downloads Known Vulnerabilities Buy me a coffee


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 Elem

server.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}`))

Package Sidebar

Install

npm i load-jsx

Weekly Downloads

3

Version

1.0.0

License

MIT

Unpacked Size

9.4 kB

Total Files

9

Last publish

Collaborators

  • codemeasandwich