Skip to content

Instantly share code, notes, and snippets.

/index.html

Created September 22, 2016 07:18
Show Gist options
  • Save anonymous/66812471464bc7e582cdc3050ae16457 to your computer and use it in GitHub Desktop.
Save anonymous/66812471464bc7e582cdc3050ae16457 to your computer and use it in GitHub Desktop.
Download ZIP
React handson // source https://jsbin.com/yelacuyoxe
Raw
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>
Raw
jsbin.yelacuyoxe.css
.f-size14 {
font-size: 14px;
}
Raw
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 />
*/
@tanish-kr
Copy link

Redux -> Immutabilityに状態を管理することでパフォーマンスがあがるらしい

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment