cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              /** @jsx React.DOM */
var ComponentBox = React.createClass({
        getInitialState: function () {
            console.log('-------getInitalState execute-------');
            return {
               stateValue: 'zhangmeng'
        getDefaultProps: function () {
            console.log('-------getDefaultProps execute-------')
            return {
                propValue: 'beijing',
                weather: ''
        /**** 生命周期方法 mounting update render Unmounting*****/
        componentWillMount: function () {
            console.log('-------componentWillMount execute-------','propValue:' + this.props.propValue, 'stateValue:' + this.state.stateValue)
//            this.setState({
//                stateValue: 'jiangyu'//render前会执行,改变初始值但是不会触发额外的render
//            })
        //什么时候会被调用 已加载组件收到新的参数时调用 Use setState() here 例子??
        componentWillReceiveProps: function (nextProps) {
            console.log('-------componentWillReceiveProps execute-------', 'old weather is this.props.weather:', this.props.weather, 'new props is nextProps.weahter:' + nextProps.weather);
        //组件判断是否重新渲染时调用 Skips render() if returns false
        shouldComponentUpdate: function (nextProps, nextState) {
            console.log('-------shouldComponentUpdate execute-------')
            var flag = true;
//            if (nextProps.weather == 'light rain' ) {
//                flag = false;
//            }
            return flag;
        componentWillUpdate: function (nextProps, nextState) {
            console.log('-------componentWillUpdate execute-------');
        render: function () {
            console.log('-------render execute-------', 'propValue:' + this.props.propValue, 'weather:', this.props.weather, 'stateValue:' + this.state.stateValue);
            return (<div>
                      <input type="text" ref="myTextInput" defaultValue={this.props.propValue} />
                      <input type="button" ref="myButton" value="提交"/>
                      <div>propValue is: {this.props.propValue}</div>
                      <div>ajaxResult is: {this.props.weather}</div>
        //Operate on the DOM here
        componentDidUpdate: function (prevProps, prevState) {
            console.log('-------componentDidUpdate execute-------')
        componentDidMount: function () {
            console.log('-------componentDidMount execute-------')
            var input = $('input[type="text"]');
            var cityName = this.props.propValue;
            $.get('http://api.openweathermap.org/data/2.5/weather?q=' + cityName , function (data,status) {
                    if (status === 'success') {
                        var weather = data.weather || [];
                        if (weather.length && weather[0]) {
                            console.log('**** props weather changed *****');
                                weather: weather[0].description

        //Invoked before DOM removal
        componentWillUnmount: function () {
            console.log('-------componentWillUnmount execute-------')
    var compInstance = React.render(
            <ComponentBox />,
            document.getElementById('content') //DOM Element

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................