Babel plugin that lets you create files with JSX only

Babel plugin that lets you write files with JSX only and converts them into components at compile time.

Sometimes I need the power of components but miss the simplicity of writing HTML files. (especially for presentation components).

This is a let the bots do the work solution.

You can create a file called about.js and put only the JSX you need, feels like HTML ❤️

<div>Hi, My name is Sid</div>

This will be transpiled to:

import React from 'react'

function About(props) {
  return <div>Hi, my name is Sid</div>
}

export default About

That component name is picked up from the file name.

  <div>Hi my name is {props.name}</div>

  const name = "Sid";

  <div>Hi my name is {name}</div>

  import Input from './input';

  <form>
    <label for="name">Name</label>
    <Input id="name"/>
  </form>

my-input.js

  <input type="text" {...props} />

form.js

  import Input from './my-input';

  <form>
    <label for="name">Name</label>
    <Input id="name"/>
  </form>

Step 1. Install dependency

npm install babel-plugin-jsxo --dev

yarn add babel-plugin-jsxo --dev

Step 2. Drop it in your babel config as a plugin

{
  "presets": ["@babel/preset-react"],
  "plugins": ["jsxo"]
}

Package detail

babel-plugin-jsxo