You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.2 KiB
66 lines
1.2 KiB
7 years ago
|
<p align="center">
|
||
|
|
<img alt="PillarJS" title="PillarJS" src="http://stuffs.fivepointseven.com/i/pillar.svg" width="550">
|
||
|
|
</p>
|
||
|
|
<p align="center">"Batteries-included" library for Web Components inspired by React.</p>
|
||
|
|
|
||
|
|
## Getting started
|
||
|
|
|
||
|
|
Getting started with Pillar is extremely easy.
|
||
|
|
|
||
|
|
1. Install Babel preset:
|
||
|
|
|
||
|
|
```
|
||
|
|
npm install --save-dev babel-preset-pillar
|
||
|
|
```
|
||
|
|
|
||
|
|
and add it to your `.babelrc`:
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
"presets": ["pillar"]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
2. Create a component:
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
import Pillar from 'pillarjs';
|
||
|
|
|
||
|
|
class SuperHeader extends Pillar {
|
||
|
|
render(props) {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<h1>{props.mainContent}</h1>
|
||
|
|
<h1>It's Superpowered!</h1>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Pillar.register(SuperHeader, 'super-header');
|
||
|
|
```
|
||
|
|
|
||
|
|
3. Use it in your HTML:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<main>
|
||
|
|
...
|
||
|
|
<super-header main-content="It's not a simple header."></super-header>
|
||
|
|
...
|
||
|
|
</main>
|
||
|
|
```
|
||
|
|
|
||
|
|
The resulting HTML will be:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<div>
|
||
|
|
<h1>It's not a simple header.</h1>
|
||
|
|
<h1>It's Superpowered!</h1>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Documentation
|
||
|
|
|
||
|
|
[Check out the docs](https://storehubnet.github.io/pillarjs/) to learn about rendering from strings
|
||
|
|
and template tags, alternative build configurations and everything else.
|