React Fiddle Template (JSX)

Starting point for creating JSFiddles with React.

by kontrax

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

SCSS

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
// ===================================



// ===================================
// TOOLS: ICONS

/*
<i class="fa fa-address-book-o ic ic-50" aria-hidden="true"></i>
<i class="fa fa-address-book-o ic ic-100" aria-hidden="true"></i>
<i class="fa fa-address-book-o ic ic-200" aria-hidden="true"></i>
*/

@mixin size ($w, $h: $w) {
  &-#{$w} {
    width:   $w + px;
    height:  $h + px;
  }
}

.ic {
	display: inline-block;
	font-size: 30px;
	line-height: 50px;
	text-align: center;
	outline: 1px solid black;
  
  @include size(50);
  @include size(100);
  @include size(150);
  @include size(200);
}

Babel + JSX

//==============================================================================

class MyComponent extends React.Component
{//----------------------------------

	//constructor (props) {
  //	super(props)
  //  this.state = {}
  //}

	render ()
  {
    return (
			<div>
				MyComponent
			</div>
    )
  }
}

//==============================================================================

function MyStatelessComponent (props)
{
	const {
  	title = 'untitled',
    children,
    ...rest,
  } = props || {}

	return (
  	<div>
  		MyStatelessComponent
  	</div>
  )
}//----------------------------------

//==============================================================================

function Main (props)
{
	return (
		<main>
			<MyStatelessComponent>
				Empty Compoment
			</MyStatelessComponent>
		</main>
  )
}

//==============================================================================
// TOOLS: Mock Data

const mockData = {
}

//==============================================================================
// TOOLS: Components

function Icon (props)
{
	const {
		name = 'address-book',
	} = props

	return (
		<i className = {classNames(props.className, 'fa', `fa-${name}-o`)} />
	)
}

//==============================================================================
// TOOLS: Utility Functions

function classNames (...args)
{
	const classList = []
	
	for (let value of args)
	{
		if (!value) continue

		if (typeof value === 'function') {
			value = value()
			if (!value) continue
		}

		if (typeof value === 'object' && Array.isArray(value)) {
			value = classNames(...value)
		}

		if (typeof value === 'string') {
			value = value.trim()
			if (value.length > 0)
				classList.push(value)
			continue
		}
	}
	
	return classList.join(' ')
}

//==============================================================================
// TOOLS: Event Handlers

function clickHandler (...args) {
	console.log('[CLICKED]:',...