React handson// source https://jsbin.com/yelacuyoxe

9/22/2016 - 11:44 AM

React handson // source https://jsbin.com/yelacuyoxe

React handson

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 />
   */

jsbin.yelacuyoxe.css

.f-size14 {
  font-size: 14px;
}

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>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

React handson // source https://jsbin.com/yelacuyoxe