<Ejsx />

Pure JSX templates for rendering static HTML

Install

npm install -g ejsx

Usage

Create a Root.jsx template. This file should not include any wrapping JavaScript.

<html>
  <h1>Hello</h1>
</html>

Run the ejsx command on the folder that contains the Root.jsx file, and write the output to an HTML file.

ejsx components > index.html

Create Components

To create reusable components, add files to the folder that begin with a capital letter and have the .jsx file extension. Components have access to the props passed in from their parent.

<header>
  <h1>{props.title}</h1>
</header>
<html>
  <Header title='Hello' />
</html>

Passing in Data Props

To pass props to the Root component, create a JSON file and use the --props flag.

{
  "title": "Hello"
}
ejsx components --props data.json > index.html

Loops

<ul>
  {props.items.map((item, i) => (
    <li key={i}>
      {item}
    </li>
  ))}
</ul>

Conditionals

<div>
  {props.foo % 2 ? <span>Odd</span> : <span>Even</span>}
</div>
<div>
  {props.foo && <div>Hidden when props.foo is falsy</div>}
</div>