load-jsx

A real-time transform pipeline for JSX -> JavaScript in NodeJs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
load-jsx
001.0.02 years ago2 years agoMinified + gzip package size for load-jsx in KB

Popular Searches

Readme

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