jsxo: A JavaScript repository from siddharthkp

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

siddharthkp/jsxo