vidItem test

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");
// ===================================

body {
	color: white;
	font-family: "Segoe UI";
}

.item {
	outline: 1px solid #000;
	margin:  10px;
	padding:  4px;
}

ul, li {
	margin:  0;
	padding: 0;
	list-style-type: none;
}

a {
	color: orange;
	text-decoration: none;
}

// ===================================
// 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 ic-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 ic-size(50);
  @include ic-size(100);
  @include ic-size(150);
  @include ic-size(200);
}

Babel + JSX

const CONFIG = {
	yt: {
		videoUrl:     'https://www.youtube.com/watch?v=',
		thumbnailUrl: 'https://img.youtube.com/vi/',
	},
	thumbnail: {
		size: 'default' // as ('default'|'medium'|'high') as string,
	},
}

//==============================================================================
// HELPERS

const utils = {
	getVideoUrl (videoId) { return (
		(typeof videoId === 'string')
			? `https://www.youtube.com/watch?v=${videoId}`
			: ''
	)},
	getThumbUrl (videoId, quality = 'default') { return (
		(typeof videoId === 'string')
			? `https://img.youtube.com/vi/${videoId}/${quality}.jpg`
			: ''
	)},
}

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

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

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

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

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

function Item (props)
{
	let {
		url,
		title,
		description,
		thumbnailUrl,

    children,
    ...rest,
  } = props || {}

	const vid = url

	if (url)
		url = utils.getVideoUrl(vid)
	if (thumbnailUrl)
		thumbnailUrl = utils.getThumbUrl(vid)

	if (!title)
		title = url

	return (
		<li className={'item'}>
			<a
				href = {url}
			>
				{title && (
					<div>{title}</div>
				)}

				{thumbnailUrl && (
					<img
						src = {thumbnailUrl}
					/>
				)}

				{description && (
					<p>{description}</p>
				)}
			</a>
		</li>
	)
}//----------------------------------

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

function Main (props)
{
	return (
		<main>
			<ul>
				<Item
					title        = {'Video Title'}
				/>
				<Item
					url          = {'ZhhXku2Pj5E'}
				/>
				<Item
					url          = {'ZhhXku2Pj5E'}
					title        = {'Video Title'}
				/>
				<Item
					url          = {'ZhhXku2Pj5E'}
					title        = {'Video...