(React啓蒙シリーズの翻訳)ReactとBabelの基本使用

JSX

コンポーネントは、Reactは、React.createClass()とReact.createElement()の2つの を しないでください.このコードは、ブラウザで してもいいです.
JSXを すると、React の が に され、JSXはReact.createElement() の を し、その スタイルはHTML スタイルに している. のコードと べて、この をよりよく できます.

//   React.createElement()

return React.createElement('div',null,'Hello',this.props.name);

//  JSX

return 
Hello {this.props.name}

    

        

        

        

    



    


    

        var HelloMessage = React.createClass({

            render: function() {

                return <div>Hello {this.props.name}</div>;

            }

        });

        ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));

    




 
 
 
  
      babel.js            ，           ，      ，      ，               。   JSFiddle     ，    React        。
 
 
 
 
    
 
 
 
  
Babel React        React     ES* JSX ES5     ，   Babel handbook  Babel     。
 
  
 
  JSX     
 
   
 
    
       ， CSS     ；
 
    
 JavaScript   HTML        ，JSX      ，        UI      JavaScript    。
 
    
  JSX，              ；
 
    
JSX  inline styles   ，           ；
 
   
 
 
  
JSX Gotchas       JSX；
 
  
JSX    ECMAScript     XML     ，       ；
 
 
 
 
  ES6 RS*
 
 
Babel  React    ，   ，Babel         JSX     。Babel     JavaScript   ，       ES*          ES  。     ，Babel     ES6 ES7   ES5  ，  JSX              。
 
 
  Babel，        React      ES   。
 
 
     ES6       ，         ，Babel       。
 
 





    

        

        

        

    



    


    

        class HelloMessage extends React.Component { //notice use of React.Component

            render(){

                return <div>Hello {this.props.name}</div>;

            }

        };

        ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));

        /*** ES5   ***/

        /*var HelloMessage = React.createClass({

            render: function() {

                return <div>Hello {this.props.name}</div>;

            }

        });

        ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));*/

    




Babelは のコードに  されます.

class HelloMessage extends React.Component {

    render(){

        return 
Hello {this.props.name}
;

    }

};

ReactDOM.render(, document.getElementById('app'));
   の  は  の りです.

"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var HelloMessage = (function (_React$Component) {

    _inherits(HelloMessage, _React$Component);

    function HelloMessage() {

        _classCallCheck(this, HelloMessage);

        _get(Object.getPrototypeOf(HelloMessage.prototype), "constructor", this).apply(this, arguments);

    }

    _createClass(HelloMessage, [{

        key: "render",

        value: function render() {

            return React.createElement(

                "div",

                null,

                "Hello ",

                this.props.name

            );

        }

    }]);

    return HelloMessage;

})(React.Component);

;

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), document.getElementById('app'));
ほとんどのES 6の  はBabel 5.8.23に  に  されます.
ノート
 Babelの な  は、 しい  を  するJavaScriptコードがブラウザの  の   のあるコードであると  に、JSX の  も  される.
 Babel hadbookを むと、Babelに するより くの  が られます.
JSFiddleでReactを う  をします.
   で べた   な  はJSFiddleですでに  されており、JSFiddleは、type="text/babel"、react.js、react-dom.jsを  している.これにより、 たちは  にこのサイトでReactを  する  をすることができる.  はホームページに め まれているJSFiddleです.  はやはり  がずっと  しているbrower.jsコンポーネントです.Resultをクリックしてレンダリング  を ることができます.
JSFiddleをクリックしてもっと べてください.
JSFiddleは たちのためにより いReact  の を  します.たくさん  してください.  たち.
リンク
React      React&Babel Baic setupHelloMessage