{"id":2496,"date":"2016-12-12T12:08:11","date_gmt":"2016-12-12T03:08:11","guid":{"rendered":"http:\/\/www.whoocus.com\/blog\/?p=2496"},"modified":"2016-12-12T14:44:40","modified_gmt":"2016-12-12T05:44:40","slug":"react-%e4%ba%8b%e5%a7%8b%e3%82%81","status":"publish","type":"post","link":"https:\/\/www.blowfish.co.jp\/?p=2496","title":{"rendered":"React \u4e8b\u59cb\u3081"},"content":{"rendered":"

JavaScript\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u3057\u3066\u3001Angular\u3092\u5229\u7528\u3057\u3066\u3044\u305f\u304c\u3001React\u3082\u6c17\u306b\u306a\u3063\u305f\u306e\u3067\u30b5\u30f3\u30d7\u30eb\u3002
\n\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001CDN\u3092\u4f7f\u7528\u3059\u308b\u304c\u3001\u4e0b\u8a18\u306e\u8a18\u8ff0\u3067\u52d5\u4f5c\u3059\u308b\u3002<\/p>\n

babel\u7b49\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u9055\u3044\u7b49\u306b\u3088\u3063\u3066\u52d5\u4f5c\u3057\u306a\u304f\u306a\u308b\u306e\u3067\u60a9\u307e\u3057\u3044\u3002<\/p>\n

[javascript]
\n<!DOCTYPE html>
\n<html lang="ja">
\n<head>
\n <meta charset="UTF-8">
\n <script src="https:\/\/unpkg.com\/react@15\/dist\/react.min.js"><\/script>
\n <script src="https:\/\/unpkg.com\/react-dom@15\/dist\/react-dom.min.js"><\/script>
\n <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/babel-core\/5.8.38\/browser.min.js"><\/script><\/p>\n

<title>React Sample<\/title>
\n<\/head>
\n<body>
\n<div id="root">
\n <!– This div’s content will be managed by React. –>
\n<\/div><\/p>\n

<script type="text\/babel">
\n ReactDOM.render(
\n <h1>\u3053\u3093\u306b\u3061\u306f\u3002\u305f\u3062\u3055\u3093\u3002<\/h1>,
\n document.getElementById(‘root’)
\n );
\n<\/script><\/p>\n

<\/body>
\n<\/html>
\n[\/javascript]<\/p>\n

JS\u30d5\u30a1\u30a4\u30eb\u3092\u5916\u51fa\u3057\u306b\u3059\u308b\u5834\u5408\u306f\u3001\u4e0b\u8a18\u306e\u69d8\u306b\u5909\u66f4\u3059\u308b\u3002
\n[javascript]
\n<script type="text\/babel" src="js\/common.js"><\/script>
\n[\/javascript]<\/p>\n

\u307e\u305f\u3001\u81ea\u4f5c\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3066\u8868\u793a\u3059\u308b\u3002<\/p>\n

[javascript]
\n\/\/\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0
\nvar MyDiv = React.createClass({
\n displayName : ‘\u8868\u793a\u3055\u308c\u308b\u304b\u306a\uff1f’,
\n render: function(){
\n return (
\n <p>\u308f\u305f\u3057\u306f\u3069\u3053\u3078\uff1f<\/p>
\n );
\n }
\n});
\nReactDOM.render(
\n <MyDiv><\/MyDiv>,
\n document.getElementById(‘mydiv’)
\n);
\n[\/javascript]<\/p>\n

HTML\u306e\u8a18\u8ff0\u306f\u4e0b\u8a18\u3002
\n[html]
\n<div id="mydiv"><\/div>
\n[\/html]<\/p>\n

\u6b21\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3078\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u6e21\u3057\u3066\u307f\u308b\u3002
\n[javascript]<\/p>\n

var MyDiv2 = React.createClass({
\n displayName: ‘\u30d1\u30e9\u30e1\u30fc\u30bf\u6e21\u3057’,
\n render: function () {
\n return(
\n <p>\u30d1\u30e9\u30e1\u30fc\u30bf\u306f<span style={{color:’red’}}>{this.props.param}<\/span>\u3067\u3059\u3002<\/p>
\n );
\n }
\n});<\/p>\n

ReactDOM.render(
\n <MyDiv2 param="\u5f15\u6570"><\/MyDiv2>,
\n document.getElementById(‘mydiv2’)
\n);<\/p>\n

[\/javascript]<\/p>\n

HTML\u306e\u8a18\u8ff0\u306f\u4e0b\u8a18\u3002
\n[html]
\n<div id="mydiv2"><\/div>
\n[\/html]<\/p>\n

\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/a><\/p>\n

\u7d9a\u3044\u3066\u3001\u30a4\u30d9\u30f3\u30c8\u3092\u767a\u751f\u3055\u305b\u3066\u307f\u308b\u3002
\n[javascript]
\nvar MyButton = React.createClass({
\n displayName: ‘\u30a2\u30e9\u30fc\u30c8’,
\n clickHandler: function () {
\n alert(‘\u30af\u30ea\u30c3\u30af\u3055\u308c\u307e\u3057\u305f\u3002’);
\n },
\n render: function () {
\n return(
\n <input type="button" value="\u30af\u30ea\u30c3\u30af" onClick={this.clickHandler}\/>
\n );
\n }
\n});
\nReactDOM.render(
\n <MyButton><\/MyButton>,
\n document.getElementById(‘mybtn’)
\n);
\n[\/javascript]<\/p>\n

HTML\u306e\u8a18\u8ff0\u306f\u4e0b\u8a18\u3002
\n[html]
\n<div id="mybtn"><\/div>
\n[\/html]<\/p>\n

\u3055\u3089\u306b\u3001SELCT\u30dc\u30c3\u30af\u30b9\u306e\u5024\u3092\u5909\u66f4\u3057\u305f\u5834\u5408\u306e\u6319\u52d5\u3092\u8a66\u3057\u3066\u307f\u308b\u3002
\n\u30df\u30bd\u306f\u3001getInitialState \u3068 this.setState \u3067\u3042\u308b\u3002
\n[javascript]
\nvar MySelect = React.createClass({
\n selValue: ”,
\n displayName: ‘\u30bb\u30ec\u30af\u30bf’,
\n \/\/State\u521d\u671f\u5316
\n getInitialState: function () {
\n return {val: ”};
\n },
\n selectChangeHandler: function (event) {
\n this.selValue = event.target.value;
\n \/\/State\u66f4\u65b0
\n this.setState({
\n val: this.selValue
\n });
\n },
\n render: function () {
\n return(
\n <div>
\n <div>
\n <select onChange={this.selectChangeHandler}>
\n <option value=’1′>Java<\/option>
\n <option value=’2′>Ruby<\/option>
\n <option value=’3′>Python<\/option>
\n <option value=’4′>JavaScript<\/option>
\n <option value=’5′>C#<\/option>
\n <\/select>
\n <\/div>
\n <p>VALUE: {this.state.val}<\/p>
\n <\/div>
\n );
\n }
\n});
\nReactDOM.render(
\n <MySelect><\/MySelect>,
\n document.getElementById(‘myselect’)
\n);
\n[\/javascript]<\/p>\n

HTML\u306e\u8a18\u8ff0\u306f\u4e0b\u8a18\u3002
\n[html]
\n<div id="myselect"><\/div>
\n[\/html]<\/p>\n","protected":false},"excerpt":{"rendered":"

JavaScript\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u3057\u3066\u3001Angular\u3092\u5229\u7528\u3057\u3066\u3044\u305f\u304c\u3001React\u3082\u6c17\u306b\u306a\u3063\u305f\u306e\u3067\u30b5\u30f3\u30d7\u30eb\u3002 \u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001CDN\u3092\u4f7f\u7528\u3059\u308b\u304c\u3001\u4e0b\u8a18\u306e\u8a18\u8ff0\u3067\u52d5\u4f5c\u3059\u308b\u3002 babel\u7b49\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u9055\u3044\u7b49\u306b\u3088\u3063\u3066\u52d5\u4f5c\u3057\u306a\u304f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"saved_in_kubio":false,"footnotes":""},"categories":[10,61,4],"tags":[],"class_list":["post-2496","post","type-post","status-publish","format-standard","hentry","category-javascript","category-react-js","category-tech"],"_links":{"self":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts\/2496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2496"}],"version-history":[{"count":10,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts\/2496\/revisions"}],"predecessor-version":[{"id":2508,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=\/wp\/v2\/posts\/2496\/revisions\/2508"}],"wp:attachment":[{"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blowfish.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}