React基本

//React.createClass(specification)
//React.createElement(type,[props],[...children])
//ReactDOM.render(element, container, [callback])

var Hello = React.createClass({
    render: function(){
        return React.createElement('h2', {style:{color:'red',fontStyle:'italic'}}, 'Hello, '+ this.props.name);
    }
});
ReactDOM.render(
    React.createElement(Hello,{name: 'World!'}),
    document.getElementById('hoge1')
);

//複数の要素表示
var Hoge2 = React.createClass({    
    render: function(){
        return React.createElement('div', null,
            React.createElement('h3',null, 'Hello World!'),
            React.createElement('h4', null, 'Hello World!')
        );
    }
});
ReactDOM.render(
    React.createElement(Hoge2),
    document.getElementById('hoge2')
);

See the Pen React: 基本 by nwstcode (@nwst) on CodePen.

 

TagTimes

Simple time tracking tool
Developed by Namu Works