react-obj
Represent DOM elements as objects in React, alternative to jsx.
Motivation
The great part of React, compared to other UI frameworks, is that it extends javascript instead of attempting to extend HTML. react-obj
takes this approach a step further by allowing components to be created with plain javascript objects allowing for a powerful and familiar development experience. Thus not needing XML, nor another file type.
Overview
One templating language
//jsx <div> propstext <div> //react-obj
Programmatically compose components inline (map, conditionals, etc)
const numbers = 'one' 'two' 'three' //jsx <div> numbers </div> //react-obj
Better use of es6 operators (spread, object literals)
//jsx const Component = { const text value = props return <div> <div ...props> Spread </div> <div text=text value=value> Object literals </div> </div> } //react-obj const Alternative = { const text value = props return }
Further Considerations
- Javascript everywhere, no XML
- Better linting
- One file type
- Simple wrapper around React.createElement
- Works with existing components written in jsx
- Can use with Stateless Components, React createClass, and extending React.Component
Usage
Installing
npm install react-obj
Initializing
component must be initialized before using tranform
Documentation
Every object is required to have a comp
property which represents the component that you want to render. The comp
property can either be a string for standard elements(div, span, etc) or a react component. The other important property is children
. The children
property can either be a string you want rendered into the parent component, or it can be an array of further components to render. Every other property will be passed down as props.
comp
: either a string('div', 'span') or a React Component
children
: a string or an array of further compliant objects
Usage
//No need to import react if making a stateless component since react-obj will use internally const StatelessComponent =
//can be used similarly with React.createClassComponent { superprops } { return }
Future
- allow users to set the key in the object that represents the component
- Object validator
- possibly add better method of hooking into react (class, mixin), thus not needing to call transform directly