https://github.com/codemeasandwich/load-jsx
A basic real-time transform pipeline for JSX -> JavaScript in NodeJs
https://github.com/codemeasandwich/load-jsx
Last synced: over 1 year ago
JSON representation
A basic real-time transform pipeline for JSX -> JavaScript in NodeJs
- Host: GitHub
- URL: https://github.com/codemeasandwich/load-jsx
- Owner: codemeasandwich
- Created: 2022-02-27T00:58:11.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-01T13:26:13.000Z (over 4 years ago)
- Last Synced: 2025-02-04T14:23:31.161Z (over 1 year ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# load-jsx
## A real-time transform for JSX ➜ JavaScript in ***NodeJs***
[](https://www.npmjs.com/package/load-jsx) [](http://www.npmtrends.com/load-jsx) [](https://snyk.io/test/npm/load-jsx) [](https://www.buymeacoffee.com/codemeasandwich)
---
### The Problem:
#### Setup Server-side Rendering
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
The first step to import the lib
``` js
require('load-jsx')
```
If you want to have you React'ish libarty imported at the top of you JSX, use.
``` js
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
``` js
//Enable JSX
require("load-jsx")("react");
//Load server
require("./server");
```
### Elem.jsx
``` js
const Elem = () => (<>
Hi World
alert('Hello You!')}>Click!
>)
export default Elem
```
### server.js
``` 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()
res.send(`
${jsx}
`)
})
app.listen(3000, () => console.log(`App listening on http://localhost:3000}`))
```