script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js" でサーバなしのローカルでもreactが実行できる
view source
JavaScript
//※この記法はES6より前の古い書き方
//https://codepen.io/pjmtokyo/pen/ZGVjVV
var FilteredList = React.createClass({ displayName: "FilteredList",
filterList: function filterList(event) {
var updatedList = this.state.initialItems;
updatedList = updatedList.filter(function (item) {
return item.toLowerCase().search(
event.target.value.toLowerCase()) !== -1;
});
this.setState({ items: updatedList });
},
getInitialState: function getInitialState() {
return {
initialItems: [
"Apples",
"Broccoli",
"Chicken",
"Bacon",
"Eggs",
"Salmon",
"Granola",
"Bananas",
"Beer",
"Wine",
"Yogurt"],
items: [] };
},
componentWillMount: function componentWillMount() {
this.setState({ items: this.state.initialItems });
},
render: function render() {
return (
React.createElement("div", { className: "filter-list" },
React.createElement("input", { type: "text", placeholder: "Search", onChange: this.filterList }),
React.createElement(List, { items: this.state.items })));
} });
var List = React.createClass({ displayName: "List",
render: function render() {
return (
React.createElement("ul", null,
this.props.items.map(function (item) {
return React.createElement("li", { key: item }, item);
})));
} });
React.render(React.createElement(FilteredList, null), document.getElementById('mount-point'));
CSS
HTML
ページのソースを表示 : Ctrl+U , DevTools : F12
view-source:https://hi0a.com/demo/-js/js-react-babel2/
ABOUT
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
必要な機能の関数をコピペ利用したり勉強に活用できます。
プログラムの動作サンプル結果は画面上部に出力表示されています。
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。