Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-markup with all npm packages installed. Try it out:

var reactMarkup = require("react-markup")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-markup v1.1.0

Another one markup library for React.js inspired by hyperscript

react-markup

Build Status

Another one markup library for React.js inspired by hyperscript. It allows use valid JavaScript code instead of JSX, like this:

import {h} from 'react-markup'

h("div",
    h("div#header.highlighted.hover",
        h("div.title", "People List")
    ),
    h("div.body", people.map( person => (
        h("div.person", {key:person.id}, person.name)
    ))),
    h("div#footer.hidden", "(footer content)")
)

// which analogue in JSX is:
<div>
    <div id="header" className="highlighted hover">
        <div>People list</div>
    </div>
    <div className="body">
        {
            people.map( person => (
                <div className="person" key={person.id}>{person.name}</div>
            )))
        }
    </div>
    <div id="footer" className="hidden">(footer content)</div>
</div> 

Installation

npm install --save react-markup

Motivation

Facebook developers encourage everybody use JSX in React code. However, this approach has several disadvantages:

  • a lot of IDE's and text editors, which support JS syntax, work bad with JSX syntax

  • it could be harder to properly set up your build process to transpile from JSX and from ES6 at the same time

  • some people think, that mix of JS and JSX is harder to read

Advantages

This library was inspired by different hyperscript-like libraries, including react-hyperscript and
virtual-hyperscript, but it has several advantages:

  • it is possible to pass child elements as array and as varargs, and semantic of these methods corresponds to React.createElements semantics (e. g. it requires to pass key property for children, passed as array);

  • it doesn't mutate properties (which is not true for react-hyperscript);

  • it faster than analogues.

More examples

Simple element:

// JSX
<div>Text content</div>

// react-markup
h('div', 'Text content')
// ...or
div('Text content')

Div with class and id

// JSX
<div className='highlighted' id='header'>
    Text content
</div> 

// react-markup
h('div#header.highlighted', 
    'Text content'
)

Passing children as varargs

// JSX
<div className='container'>
    <div>Header</div>
    <div>Body</div>
</div> 

// react-markup
h('div.container', 
    h('div', 'Header'),
    h('div', 'Body'),
)

Passing children as array

// JSX
<div className='container'>
    {
        items.map(x => (
            <div key={x.id}>{x.title}<div>
        ))
    }
</div> 

// react-markup
h('div.container', items.map(x => (
    h('div', {key:x.id}, x.title)
)))

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free