{`npm install -g ejsx`}
5 | {props.description}
4 |5 | Create a Root.jsx template. 6 | This file should not include any wrapping JavaScript. 7 |
8 |{`
9 | Hello
10 | `}
11 | 12 | Run the ejsx command on the folder that contains the Root.jsx file, and write the output to an HTML file. 13 |
14 |{`ejsx components > index.html`}
15 |
17 | To create reusable components, add files to the folder that begin with a capital letter and have the .jsx file extension.
18 | Components have access to the props passed in from their parent.
19 |
21 |{props.title}
22 | `} /> 23 |{` 24 |26 |25 | `} Passing in Data Props
27 |28 | To pass props to the Root component, create a JSON file and use the --props flag. 29 |
30 | 33 |ejsx components --props data.json > index.html34 |Loops
35 |36 | {props.items.map((item, i) => ( 37 |
44 | {props.foo % 2 ? Odd : Even}
45 | `} />
46 |
47 | {props.foo && Hidden when props.foo is falsy}
48 | `} />
49 | Pure JSX templates for rendering static HTML
npm install -g ejsx
Create a Root.jsx template. This file should not include any wrapping JavaScript.
<html> 61 | <h1>Hello</h1> 62 | </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
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>
63 | <h1>{props.title}</h1>
64 | </header><html> 65 | <Header title='Hello' /> 66 | </html>
To pass props to the Root component, create a JSON file and use the --props flag.
{
67 | "title": "Hello"
68 | }ejsx components --props data.json > index.html
<ul>
69 | {props.items.map((item, i) => (
70 | <li key={i}>
71 | {item}
72 | </li>
73 | ))}
74 | </ul><div>
75 | {props.foo % 2 ? <span>Odd</span> : <span>Even</span>}
76 | </div><div>
77 | {props.foo && <div>Hidden when props.foo is falsy</div>}
78 | </div>