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.

 

Example:

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.

 

Supports props:

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

Supports local variables:

const name = "Sid";

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

Supports imports:

import Input from './input';

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

Can be imported into other files

my-input.js

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

form.js

import Input from './my-input';

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

 

Usage

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"]
}

 

Usage with create-react-app

It might be possible to write a babel macro for this, I'm not sure 🤷

 

like it?

⭐ this repo

 

license

MIT © siddharthkp