React Base Fiddle (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");
#page-slides { display: block; }
/*
https://www.sassmeister.com/

const data = {
	author:  'Ola Nordmann',
	name:    'Exercise 5',
	created: 1511207706442,
	pages:   [
		{body: 'page content'},
		{body: 'page content'}
	]
}
*/

#profile-root {
  display: flex;
  flex-flow: row nowrap;
}

.page {
  display: none;
}

.page.page-visible {
  display: block;
}

.menu-item {
  display: block;
  margin: 0;
  padding: 2px 5px;

  border: 1px solid black;

  color: #FFF;
  line-height: 2;
  text-decoration: none;
}

nav {
  margin: 0px 6px;
}

.menu-item.menu-item-current {
  color: #000;
}

.page {
  margin: 0;
  padding: 2px 5px;

  border: 1px solid black;

  input {
    display: block;
  }
}

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

#preview,
#root,
{
  * {
    //outline: 1px solid red;
  }
  .item {
    display: inline-block;
    margin: 4px 4px;
    outline: 1px solid #aaa;
  }
}

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

/*
<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);
}

/*
{
	username:      "usr123",
	password:      "sfoidfu3453oeriuf234",
	firstName:     "Vegard",
	lastName:      "Schau",
	mail:          "[email protected]",
	profileImg:    "path_on_serv/img.jpg",
	lastLogin:     "34598374958734",
	presentations: [pres_object, pres_object]
}
*/

Babel + JSX

function Icon (props) {
  const classList = ['fa', `fa-${props.name || 'address-book'}-o`]
  if (props.className) classList.push(props.className)
	return <i className = {classList.join(' ')} />
}
//-----------------------------------

function SlideItem (props)
{
  if (!props.data) throw new Error('Invalid prop "data"')

	const { data, onDelete } = props || {}

  const classList = [props.className || 'item']
	const date      = new Date(data.created)

	return (
  	<div className = {classList.join(' ')}>
  	  <Icon className = {['ic', 'ic-50'].join(' ')} />
      <div>{data.name}</div>
      <time dateTime={date.toISOString()}>{date.toLocaleDateString("nb-NO")}</time>
      {(typeof onDelete !== 'function') ? undefined :
        <button
          onClick  = {onDelete && ((event) => { onDelete(data) })}
          children = 'delete'
        />
      }
  	</div>
  )
}
//-----------------------------------

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

	onDeleteHandler = (data) => {
		console.log('[DELETED]:', data)
  }

	render ()
  {
    return (
    	<Page
        className = {this.props.className}
        title     = 'Browse'
      >
        {this.props.data.slides.map((data, i) => 
          <SlideItem
            key      = {i}
            data     = {data}
            onDelete = {this.onDeleteHandler}
          />
      	)}
    	</Page>
    )
  }
}//----------------------------------

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

	render ()
  {

    return (
    	<Page
        className = {this.props.className}
        title     = 'Settings'
      >
        <p>EMPTY</p>
    	</Page>
    )
  }
}//----------------------------------

function Page404 (props)
{//----------------------------------
  return (
    <Page
      className = {props.className}
      title     = 'Error 404'
    >
    </Page>
  )
}//----------------------------------

class Main extends...