tanish-kr/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>React handson</title>
<style id="jsbin-css">
.f-size14 {
  font-size: 14px;
}
</style>
</head>
<body>
  <div id="app"></div>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://fb.me/react-15.1.0.js"></script>
  <script src="https://fb.me/react-dom-15.1.0.js"></script>
<script id="jsbin-javascript">
'use strict';

var textData = '';
var nameData = '';
var colorData = 'black';

var helloStyle = {
  color: 'red',
  marginLeft: 100,
  backgroundColor: '#ccc'
};

var items = [{ name: 'aaa', color: 'black', fontSize: '10px' }, { name: 'bbb', color: 'green', fontSize: '11px' }, { name: 'ccc', color: 'pink', fontSize: '12px' }, { name: 'ddd', color: 'yellow', fontSize: '13px' }, { name: 'eee', color: 'cyan', fontSize: '14px' }];

var items2 = [['aaa', 'black', '10px'], ['bbb', 'green', '11px'], ['ccc', 'pink', '12px']];

var setTextData = function setTextData(event) {
  textData = event.target.value.toUpperCase();
  if (textData.match(/^[a-zA-Z]+$/)) {
    if (textData.length > 20) {
      textData = textData.slice(0, 20);
    }
    render();
  }
};

var setNameData = function setNameData(event) {
  nameData = event.target.value;
  render();
};

var setColorData = function setColorData(event) {
  colorData = event.target.value;
  render();
};

var addData = function addData(event) {
  items.push({ name: nameData, color: colorData, fontSize: '10px' });
  nameData = '';
  render();
};

// Hello Component
var Hello = function Hello(_ref) {
  var name = _ref.name;
  var color = _ref.color;
  var fontSize = _ref.fontSize;
  return React.createElement(
    'div',
    { className: 'hello', style: helloStyle },
    React.createElement(
      'p',
      { style: { color: color, fontSize: fontSize } },
      'Hello ',
      name,
      '!'
    )
  );
};

var Hello2 = function Hello2(_ref2) {
  var name = _ref2.name;
  var color = _ref2.color;
  var fontSize = _ref2.fontSize;
  var onDelete = _ref2.onDelete;
  return React.createElement(
    'div',
    null,
    React.createElement(
      'p',
      null,
      React.createElement(
        'span',
        { style: { color: color, fontSize: fontSize } },
        'Hello ',
        name,
        '!'
      ),
      React.createElement(
        'button',
        {
          className: 'btn btn-warning',
          onClick: function () {
            return onDelete();
          } },
        'Mofify'
      ),
      React.createElement(
        'button',
        {
          className: 'btn btn-danger',
          onClick: function () {
            return onDelete();
          } },
        'Delete'
      )
    )
  );
};

var deleteItem = function deleteItem(index) {
  res = window.confirm("Do you really want to delete?");
  console.log(res);
  if (res == true) {
    items.splice(index, 1);
    render();
  }
};

// MyButton Component
var MyButton = function MyButton() {
  return React.createElement(
    'div',
    null,
    React.createElement(
      'button',
      { className: 'btn btn-default', onClick: function () {
          return alert('clicked');
        } },
      'Click Me'
    )
  );
};

var MyBox = function MyBox() {
  return React.createElement(
    'div',
    null,
    React.createElement('input', { type: 'text', className: 'form-control', value: textData, onChange: setTextData })
  );
};

var MyForm = function MyForm() {
  return React.createElement(
    'div',
    { className: 'form' },
    React.createElement(
      'div',
      { className: 'form-group' },
      React.createElement(
        'label',
        { 'for': 'addName' },
        'name'
      ),
      React.createElement('input', { id: 'addName', type: 'text',
        className: 'form-control',
        value: nameData,
        onChange: setNameData })
    ),
    React.createElement(
      'div',
      { className: 'form-group' },
      React.createElement(
        'label',
        { 'for': 'addColor' },
        'color'
      ),
      React.createElement('input', { id: 'addColor', type: 'text',
        className: 'form-control',
        value: colorData,
        onChange: setColorData })
    ),
    React.createElement(
      'button',
      { type: 'submit', className: 'btn btn-primary', onClick: addData },
      'Add Data'
    )
  );
};

// Now Component
var Now = function Now() {
  return React.createElement(
    'p',
    { className: 'f-size14' },
    ' Now Time is '
  );
};

// App Component
var App = function App() {
  return React.createElement(
    'div',
    null,
    React.createElement(MyForm, null),
    items.map(function (item, index) {
      return React.createElement(Hello2, {
        name: item.name,
        color: item.color,
        fontSize: item.fontSize,
        onDelete: function () {
          return deleteItem(index);
        }
      });
    })
  );
};

var render = function render() {
  return ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
};
render();
/*
     {items.map((item) => (
      <Hello name={item.name} color={item.color} fontSize={item.fontSize} />
    ))}
*/ /*
      {for (var i = 0; i < items2.length; i++){
        <Hello name={item[i][0]} color={item[i][1]} fontSize={item[i][2]}/>
      }}
      <MyButton />
      <MyButton />
      <MyBox />
      <Now />
   */
</script>


<script id="jsbin-source-css" type="text/css">.f-size14 {
  font-size: 14px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">let textData = '';
let nameData = '';
let colorData = 'black';

const helloStyle = {
  color: 'red',
  marginLeft: 100,
  backgroundColor: '#ccc',
};

const items = [
  { name: 'aaa', color: 'black', fontSize: '10px' },
  { name: 'bbb', color: 'green', fontSize: '11px' },
  { name: 'ccc', color: 'pink', fontSize: '12px' },
  { name: 'ddd', color: 'yellow', fontSize: '13px' },
  { name: 'eee', color: 'cyan', fontSize: '14px' },
];

const items2 = [
  ['aaa', 'black', '10px'],
  ['bbb', 'green', '11px'],
  ['ccc', 'pink', '12px'],
];

const setTextData = (event) => {
  textData = event.target.value.toUpperCase();
  if (textData.match( /^[a-zA-Z]+$/ )){
    if (textData.length > 20) {
      textData = textData.slice(0, 20);
    }
    render();
  }
};

const setNameData = (event) => {
  nameData = event.target.value;
  render();
};

const setColorData = (event) => {
  colorData = event.target.value;
  render();
};


const addData = (event) => {
  items.push({name: nameData, color: colorData, fontSize: '10px'});
  nameData = '';
  render();
};

// Hello Component
const Hello = ({name, color, fontSize}) => (
  <div className="hello" style={helloStyle}>
    <p style={{color, fontSize}}>Hello {name}!</p>
  </div>
);

const Hello2 = ({name, color, fontSize, onDelete}) => (
  <div>
    <p>
      <span style={{ color, fontSize }}>Hello {name}!</span>
      <button
        className="btn btn-warning"
        onClick={() => onDelete()}>
          Mofify
      </button>
      <button
        className="btn btn-danger"
        onClick={() => onDelete()}>
          Delete
      </button>
    </p>
  </div>
);

const deleteItem = (index) => {
  res = window.confirm("Do you really want to delete?");
  console.log(res);
  if (res == true) {
    items.splice(index, 1);
    render();
  }
};


// MyButton Component
const MyButton = () => (
  <div>
    <button className="btn btn-default" onClick={() => alert('clicked')}>Click Me</button>
  </div>
);

const MyBox = () => (
  <div>
    <input type="text" className="form-control" value={textData} onChange={setTextData} />
  </div>
);

const MyForm = () => (
  <div className="form">
    <div className="form-group">
      <label for="addName">name</label>
      <input id="addName" type="text"
        className="form-control"
        value={nameData}
        onChange={setNameData} />
    </div>
    <div className="form-group">
      <label for="addColor">color</label>
      <input id="addColor" type="text"
        className="form-control"
        value={colorData}
        onChange={setColorData} />
    </div>

    <button type="submit" className="btn btn-primary" onClick={addData}>Add Data</button>
  </div>
);

// Now Component
const Now = () => (
  <p className="f-size14"> Now Time is {}</p>
);

// App Component
const App = () => (
  <div>
    <MyForm />
    {items.map((item, index) => (
       <Hello2
         name={item.name}
         color={item.color}
         fontSize={item.fontSize}
         onDelete={() => deleteItem(index)}
       />
    ))}
{/*
      {items.map((item) => (
       <Hello name={item.name} color={item.color} fontSize={item.fontSize} />
     ))}
*/}

{/*
    {for (var i = 0; i < items2.length; i++){
      <Hello name={item[i][0]} color={item[i][1]} fontSize={item[i][2]}/>
    }}
    <MyButton />
    <MyButton />
    <MyBox />
    <Now />
*/}
  </div>
);


const render = () => ReactDOM.render(<App />, document.getElementById('app'));
render();</script></body>
</html>

## jsbin.yelacuyoxe.css
.f-size14 {
  font-size: 14px;
}

## jsbin.yelacuyoxe.js
'use strict';

var textData = '';
var nameData = '';
var colorData = 'black';

var helloStyle = {
  color: 'red',
  marginLeft: 100,
  backgroundColor: '#ccc'
};

var items = [{ name: 'aaa', color: 'black', fontSize: '10px' }, { name: 'bbb', color: 'green', fontSize: '11px' }, { name: 'ccc', color: 'pink', fontSize: '12px' }, { name: 'ddd', color: 'yellow', fontSize: '13px' }, { name: 'eee', color: 'cyan', fontSize: '14px' }];

var items2 = [['aaa', 'black', '10px'], ['bbb', 'green', '11px'], ['ccc', 'pink', '12px']];

var setTextData = function setTextData(event) {
  textData = event.target.value.toUpperCase();
  if (textData.match(/^[a-zA-Z]+$/)) {
    if (textData.length > 20) {
      textData = textData.slice(0, 20);
    }
    render();
  }
};

var setNameData = function setNameData(event) {
  nameData = event.target.value;
  render();
};

var setColorData = function setColorData(event) {
  colorData = event.target.value;
  render();
};

var addData = function addData(event) {
  items.push({ name: nameData, color: colorData, fontSize: '10px' });
  nameData = '';
  render();
};

// Hello Component
var Hello = function Hello(_ref) {
  var name = _ref.name;
  var color = _ref.color;
  var fontSize = _ref.fontSize;
  return React.createElement(
    'div',
    { className: 'hello', style: helloStyle },
    React.createElement(
      'p',
      { style: { color: color, fontSize: fontSize } },
      'Hello ',
      name,
      '!'
    )
  );
};

var Hello2 = function Hello2(_ref2) {
  var name = _ref2.name;
  var color = _ref2.color;
  var fontSize = _ref2.fontSize;
  var onDelete = _ref2.onDelete;
  return React.createElement(
    'div',
    null,
    React.createElement(
      'p',
      null,
      React.createElement(
        'span',
        { style: { color: color, fontSize: fontSize } },
        'Hello ',
        name,
        '!'
      ),
      React.createElement(
        'button',
        {
          className: 'btn btn-warning',
          onClick: function () {
            return onDelete();
          } },
        'Mofify'
      ),
      React.createElement(
        'button',
        {
          className: 'btn btn-danger',
          onClick: function () {
            return onDelete();
          } },
        'Delete'
      )
    )
  );
};

var deleteItem = function deleteItem(index) {
  res = window.confirm("Do you really want to delete?");
  console.log(res);
  if (res == true) {
    items.splice(index, 1);
    render();
  }
};

// MyButton Component
var MyButton = function MyButton() {
  return React.createElement(
    'div',
    null,
    React.createElement(
      'button',
      { className: 'btn btn-default', onClick: function () {
          return alert('clicked');
        } },
      'Click Me'
    )
  );
};

var MyBox = function MyBox() {
  return React.createElement(
    'div',
    null,
    React.createElement('input', { type: 'text', className: 'form-control', value: textData, onChange: setTextData })
  );
};

var MyForm = function MyForm() {
  return React.createElement(
    'div',
    { className: 'form' },
    React.createElement(
      'div',
      { className: 'form-group' },
      React.createElement(
        'label',
        { 'for': 'addName' },
        'name'
      ),
      React.createElement('input', { id: 'addName', type: 'text',
        className: 'form-control',
        value: nameData,
        onChange: setNameData })
    ),
    React.createElement(
      'div',
      { className: 'form-group' },
      React.createElement(
        'label',
        { 'for': 'addColor' },
        'color'
      ),
      React.createElement('input', { id: 'addColor', type: 'text',
        className: 'form-control',
        value: colorData,
        onChange: setColorData })
    ),
    React.createElement(
      'button',
      { type: 'submit', className: 'btn btn-primary', onClick: addData },
      'Add Data'
    )
  );
};

// Now Component
var Now = function Now() {
  return React.createElement(
    'p',
    { className: 'f-size14' },
    ' Now Time is '
  );
};

// App Component
var App = function App() {
  return React.createElement(
    'div',
    null,
    React.createElement(MyForm, null),
    items.map(function (item, index) {
      return React.createElement(Hello2, {
        name: item.name,
        color: item.color,
        fontSize: item.fontSize,
        onDelete: function () {
          return deleteItem(index);
        }
      });
    })
  );
};

var render = function render() {
  return ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
};
render();
/*
     {items.map((item) => (
      <Hello name={item.name} color={item.color} fontSize={item.fontSize} />
    ))}
*/ /*
      {for (var i = 0; i < items2.length; i++){
        <Hello name={item[i][0]} color={item[i][1]} fontSize={item[i][2]}/>
      }}
      <MyButton />
      <MyButton />
      <MyBox />
      <Now />
   */
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>React handson</title>
	<style id="jsbin-css">
	.f-size14 {
	font-size: 14px;
	}
	</style>
	</head>
	<body>
	<div id="app"></div>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="https://fb.me/react-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>
	<script id="jsbin-javascript">
	'use strict';

	var textData = '';
	var nameData = '';
	var colorData = 'black';

	var helloStyle = {
	color: 'red',
	marginLeft: 100,
	backgroundColor: '#ccc'
	};

	var items = [{ name: 'aaa', color: 'black', fontSize: '10px' }, { name: 'bbb', color: 'green', fontSize: '11px' }, { name: 'ccc', color: 'pink', fontSize: '12px' }, { name: 'ddd', color: 'yellow', fontSize: '13px' }, { name: 'eee', color: 'cyan', fontSize: '14px' }];

	var items2 = [['aaa', 'black', '10px'], ['bbb', 'green', '11px'], ['ccc', 'pink', '12px']];

	var setTextData = function setTextData(event) {
	textData = event.target.value.toUpperCase();
	if (textData.match(/^[a-zA-Z]+$/)) {
	if (textData.length > 20) {
	textData = textData.slice(0, 20);
	}
	render();
	}
	};

	var setNameData = function setNameData(event) {
	nameData = event.target.value;
	render();
	};

	var setColorData = function setColorData(event) {
	colorData = event.target.value;
	render();
	};

	var addData = function addData(event) {
	items.push({ name: nameData, color: colorData, fontSize: '10px' });
	nameData = '';
	render();
	};

	// Hello Component
	var Hello = function Hello(_ref) {
	var name = _ref.name;
	var color = _ref.color;
	var fontSize = _ref.fontSize;
	return React.createElement(
	'div',
	{ className: 'hello', style: helloStyle },
	React.createElement(
	'p',
	{ style: { color: color, fontSize: fontSize } },
	'Hello ',
	name,
	'!'
	)
	);
	};

	var Hello2 = function Hello2(_ref2) {
	var name = _ref2.name;
	var color = _ref2.color;
	var fontSize = _ref2.fontSize;
	var onDelete = _ref2.onDelete;
	return React.createElement(
	'div',
	null,
	React.createElement(
	'p',
	null,
	React.createElement(
	'span',
	{ style: { color: color, fontSize: fontSize } },
	'Hello ',
	name,
	'!'
	),
	React.createElement(
	'button',
	{
	className: 'btn btn-warning',
	onClick: function () {
	return onDelete();
	} },
	'Mofify'
	),
	React.createElement(
	'button',
	{
	className: 'btn btn-danger',
	onClick: function () {
	return onDelete();
	} },
	'Delete'
	)
	)
	);
	};

	var deleteItem = function deleteItem(index) {
	res = window.confirm("Do you really want to delete?");
	console.log(res);
	if (res == true) {
	items.splice(index, 1);
	render();
	}
	};

	// MyButton Component
	var MyButton = function MyButton() {
	return React.createElement(
	'div',
	null,
	React.createElement(
	'button',
	{ className: 'btn btn-default', onClick: function () {
	return alert('clicked');
	} },
	'Click Me'
	)
	);
	};

	var MyBox = function MyBox() {
	return React.createElement(
	'div',
	null,
	React.createElement('input', { type: 'text', className: 'form-control', value: textData, onChange: setTextData })
	);
	};

	var MyForm = function MyForm() {
	return React.createElement(
	'div',
	{ className: 'form' },
	React.createElement(
	'div',
	{ className: 'form-group' },
	React.createElement(
	'label',
	{ 'for': 'addName' },
	'name'
	),
	React.createElement('input', { id: 'addName', type: 'text',
	className: 'form-control',
	value: nameData,
	onChange: setNameData })
	),
	React.createElement(
	'div',
	{ className: 'form-group' },
	React.createElement(
	'label',
	{ 'for': 'addColor' },
	'color'
	),
	React.createElement('input', { id: 'addColor', type: 'text',
	className: 'form-control',
	value: colorData,
	onChange: setColorData })
	),
	React.createElement(
	'button',
	{ type: 'submit', className: 'btn btn-primary', onClick: addData },
	'Add Data'
	)
	);
	};

	// Now Component
	var Now = function Now() {
	return React.createElement(
	'p',
	{ className: 'f-size14' },
	' Now Time is '
	);
	};

	// App Component
	var App = function App() {
	return React.createElement(
	'div',
	null,
	React.createElement(MyForm, null),
	items.map(function (item, index) {
	return React.createElement(Hello2, {
	name: item.name,
	color: item.color,
	fontSize: item.fontSize,
	onDelete: function () {
	return deleteItem(index);
	}
	});
	})
	);
	};

	var render = function render() {
	return ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
	};
	render();
	/*
	{items.map((item) => (
	<Hello name={item.name} color={item.color} fontSize={item.fontSize} />
	))}
	/ /
	{for (var i = 0; i < items2.length; i++){
	<Hello name={item[i][0]} color={item[i][1]} fontSize={item[i][2]}/>
	}}
	<MyButton />
	<MyButton />
	<MyBox />
	<Now />
	*/
	</script>


	<script id="jsbin-source-css" type="text/css">.f-size14 {
	font-size: 14px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">let textData = '';
	let nameData = '';
	let colorData = 'black';

	const helloStyle = {
	color: 'red',
	marginLeft: 100,
	backgroundColor: '#ccc',
	};

	const items = [
	{ name: 'aaa', color: 'black', fontSize: '10px' },
	{ name: 'bbb', color: 'green', fontSize: '11px' },
	{ name: 'ccc', color: 'pink', fontSize: '12px' },
	{ name: 'ddd', color: 'yellow', fontSize: '13px' },
	{ name: 'eee', color: 'cyan', fontSize: '14px' },
	];

	const items2 = [
	['aaa', 'black', '10px'],
	['bbb', 'green', '11px'],
	['ccc', 'pink', '12px'],
	];

	const setTextData = (event) => {
	textData = event.target.value.toUpperCase();
	if (textData.match( /^[a-zA-Z]+$/ )){
	if (textData.length > 20) {
	textData = textData.slice(0, 20);
	}
	render();
	}
	};

	const setNameData = (event) => {
	nameData = event.target.value;
	render();
	};

	const setColorData = (event) => {
	colorData = event.target.value;
	render();
	};


	const addData = (event) => {
	items.push({name: nameData, color: colorData, fontSize: '10px'});
	nameData = '';
	render();
	};

	// Hello Component
	const Hello = ({name, color, fontSize}) => (
	<div className="hello" style={helloStyle}>
	<p style={{color, fontSize}}>Hello {name}!</p>
	</div>
	);

	const Hello2 = ({name, color, fontSize, onDelete}) => (
	<div>
	<p>
	<span style={{ color, fontSize }}>Hello {name}!</span>
	<button
	className="btn btn-warning"
	onClick={() => onDelete()}>
	Mofify
	</button>
	<button
	className="btn btn-danger"
	onClick={() => onDelete()}>
	Delete
	</button>
	</p>
	</div>
	);

	const deleteItem = (index) => {
	res = window.confirm("Do you really want to delete?");
	console.log(res);
	if (res == true) {
	items.splice(index, 1);
	render();
	}
	};


	// MyButton Component
	const MyButton = () => (
	<div>
	<button className="btn btn-default" onClick={() => alert('clicked')}>Click Me</button>
	</div>
	);

	const MyBox = () => (
	<div>
	<input type="text" className="form-control" value={textData} onChange={setTextData} />
	</div>
	);

	const MyForm = () => (
	<div className="form">
	<div className="form-group">
	<label for="addName">name</label>
	<input id="addName" type="text"
	className="form-control"
	value={nameData}
	onChange={setNameData} />
	</div>
	<div className="form-group">
	<label for="addColor">color</label>
	<input id="addColor" type="text"
	className="form-control"
	value={colorData}
	onChange={setColorData} />
	</div>

	<button type="submit" className="btn btn-primary" onClick={addData}>Add Data</button>
	</div>
	);

	// Now Component
	const Now = () => (
	<p className="f-size14"> Now Time is {}</p>
	);

	// App Component
	const App = () => (
	<div>
	<MyForm />
	{items.map((item, index) => (
	<Hello2
	name={item.name}
	color={item.color}
	fontSize={item.fontSize}
	onDelete={() => deleteItem(index)}
	/>
	))}
	{/*
	{items.map((item) => (
	<Hello name={item.name} color={item.color} fontSize={item.fontSize} />
	))}
	*/}

	{/*
	{for (var i = 0; i < items2.length; i++){
	<Hello name={item[i][0]} color={item[i][1]} fontSize={item[i][2]}/>
	}}
	<MyButton />
	<MyButton />
	<MyBox />
	<Now />
	*/}
	</div>
	);


	const render = () => ReactDOM.render(<App />, document.getElementById('app'));
	render();</script></body>
	</html>