Components

a7 Components

creating or adding new components is actually quite easy to do.

This is how to do it with the cli:

$ a7 nc componentName
$ a7 newcomponent componentName

As of right now A7JS adds the imports to index.js file. You may want to turn on auto save in your IDE / Text editor since you may overwrite the component import. If you think this way is problematic open a new issue.

Importing Example

$ a7 nc appMain

you can now use it in your index file like this

appMain({[...]})
a7.createElement("appMain", {[...]})

Now lets talk about the component in it self

JS

The javascript componentName.js file will handle all the logic of the application.

only the exported function will be imported.

So write your logic inside that function

CSS

The css componentName.css file stores the component specific styles.

The styles defined in the css file are not scoped to the component.

HTML and Template

The html componentName.html file is the template of the component.

Components HTML

Writing components

Other

You can call other components by

<componentName></componentName>

to display a value defined in the js file use

<div> {{ valueName }} </div>

And refering to the props that were fed to the component use

<div> {{ props.propName }} </div>

To pass props to other components you add an attribute:

<componentName @propname="value"></componentName>

Note that A7JS is not a reactive framework and is a lower level framework compared to Vue, React and Angular.

We are going to add a feature that addresses this issue in version 5.0.0.