https://github.com/jeffersonmourak/ribs
Template Generator for React
https://github.com/jeffersonmourak/ribs
jsx jsx-templates react react-components reactjs ribs-lang template-engine
Last synced: about 1 month ago
JSON representation
Template Generator for React
- Host: GitHub
- URL: https://github.com/jeffersonmourak/ribs
- Owner: jeffersonmourak
- License: mit
- Created: 2018-03-08T14:44:25.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-04T01:52:09.000Z (almost 7 years ago)
- Last Synced: 2023-12-12T04:50:23.951Z (over 1 year ago)
- Topics: jsx, jsx-templates, react, react-components, reactjs, ribs-lang, template-engine
- Language: JavaScript
- Size: 62.5 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ribs
Template Generator for Stateless React Components
### DO NOT USE IN PRODUCTION YET!
## Is that true?
Yep, it is, you just need to write one simple file and Done!
## How to use?
Firs intall it!
`$ sudo npm install -g ribs-lang`
then you're ready to use it,
Now you can write your first `.rib` file
> example.rib
```
<-- @include "./Component.jsx" as Component -->
<-- for item in list -->
<-- end for -->
```
since you have done it, just translate :)
`$ ribs example.rib example.jsx`
and done :tada: your file will be converted to a `.jsx` file
## Functions
### Import
Usage: `<-- @include "" as -->`
*__Important:__* Do not use the word __Component__ as the name for a imported component, it's a reserved word!
### For statement
Usage: `<-- for in -->`
You can use a property or a `range()` function for this statement
e.g. `<-- for in range(10) -->` <-- it uses the range
e.g. `<-- for in prop -->` <-- it uses the prop `this.props.prop`
### Get Statement
Usage: `<-- get -->`
it render the prop into the file
### Roadmap
- [x] Add support for import
- [x] Add support for FOR-STATEMENT
- [x] Add support for get props
- [ ] Add support for IF-Statement
- [ ] Add support for webpack