React.js加Bootstrap3实现的简单应用实例

Basic React.js example: item list 本例可用来学习react.js的基本知识。

react, bootstrap, example

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 2578
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

/**
  A ListItem component
*/
var ListItem = React.createClass({
    displayName: "ListItem",

render: function render() {
        return React.createElement(
            "div", {
                className: "listItem"
            },
            React.createElement(
                "div", {
                    "class": "page-header"
                },
                React.createElement(
                    "h1",
                    null,
                    this.props.title,
                    " ",
                    React.createElement(
                        "small",
                        null,
                        this.props.content
                    )
                )
            )
        );
    }
});

/**
  A List component which renders a set of properties
*/
var List = React.createClass({
    displayName: "List",

render: function render() {
        if (typeof this.props.items !== "undefined" && this.props.items.length > 0) {
            return React.createElement(
                "div", {
                    className: "itemList"
                },
                this.props.items.map(function(v) {
                    return React.createElement(ListItem, {
                        title: v.title,
                        content: v.content
                    });
                })
            );
        }

return React.createElement(
            "span",
            null,
            "No items in this component..."
        );
    }
});

/**
  The main containing component
*/
var Component = React.createClass({
    displayName: "Component",

getInitialState: function getInitialState() {
        return {
            items: []
        };
    },

handleClick: function handleClick(event) {
        event.preventDefault();

var items = this.state.items;
        items.push({
            title: "New random item " + (items.length + 1),
            content: Math.random() * 1000000 + ''
        });
        this.setState({
            items: items
        });
    },

handleClearClick: function handleClearClick(event) {
        event.preventDefault();

if (this.state.items.length === 0 || !confirm("Are you sure you want to clear all the items in the list?")) {
            return;
        }

this.setState({
            items: []
        });
    },

render: function render() {
        return React.createElement(
            "div", {
                className: "component panel panel-default"
            },
            React.createElement(
                "div", {
                    className: "panel-body"
                },
                React.createElement(
                    "h1",
                    null,
                    this.props.title,
                    " ",
                    React.createElement(
                        "small",
                        null,
                        this.props.subtitle
                    )
                ),
                React.createElement(
                    "div", {
                        className: "panel panel-primary"
                    },
                    React.createElement(
                        "div", {
                            className: "panel-heading"
                        },
                        "Controls"
                    ),
                    React.createElement(
                        "div", {
                            className: "panel-body"
                        },
                        React.createElement(
                            "button", {
                                type: "button",
                                className: "btn btn-default",
                                onClick: this.handleClick
                            },
                            "Add Random Item"
                        ),
                        React.createElement(
                            "button", {
                                type: "button",
                                disabled: this.state.items.length <= 0,
                                className: 'btn ' + (this.state.items.length > 0 ? 'btn-danger' : 'btn-disabled'),
                                onClick: this.handleClearClick
                            },
                            "Clear Items"
                        )
                    )
                ),
                React.createElement(
                    "div", {
                        className: "panel panel-primary"
                    },
                    React.createElement(
                        "div", {
                            className: "panel-heading"
                        },
                        "Items"
                    ),
                    React.createElement(
                        "div", {
                            className: "panel-body"
                        },
                        React.createElement(List, {
                            items: this.state.items
                        })
                    )
                ),
                React.createElement(
                    "div", {
                        className: "panel panel-info"
                    },
                    React.createElement(
                        "div", {
                            className: "panel-heading"
                        },
                        "Debug"
                    ),
                    React.createElement(
                        "div", {
                            className: "panel-body"
                        },
                        React.createElement(
                            "div", {
                                className: "row"
                            },
                            React.createElement(
                                "div", {
                                    className: "col-md-6"
                                },
                                React.createElement(
                                    "h6",
                                    null,
                                    "Props:"
                                ),
                                React.createElement(
                                    "pre",
                                    null,
                                    JSON.stringify(this.props, null, 2)
                                )
                            ),
                            React.createElement(
                                "div", {
                                    className: "col-md-6"
                                },
                                React.createElement(
                                    "h6",
                                    null,
                                    "State:"
                                ),
                                React.createElement(
                                    "pre",
                                    null,
                                    JSON.stringify(this.state, null, 2)
                                )
                            )
                        )
                    )
                )
            )
        );
    }
});

/**
  The Main application
*/
var Main = React.createClass({
    displayName: "Main",

render: function render() {
        return React.createElement(
            "div", {
                className: "container main"
            },
            React.createElement(Component, {
                title: "Hello World!",
                subtitle: "A random subtitle"
            }),
            React.createElement(Component, {
                title: "Main Component",
                subtitle: "This is extra context..."
            }),
            React.createElement(Component, {
                title: "Another component",
                subtitle: "Howdy..."
            })
        );
    }
});

React.render(React.createElement(Main, null), document.getElementById('example'));

编译

CSS

HTML

Basic React.js example: item list 本例可用来学习react.js的基本知识。

react, bootstrap, example

编辑器支持Emmet

快捷键

Basic React.js example: item list 本例可用来学习react.js的基本知识。

react, bootstrap, example

基于ReactJS和Bootstrap实现的移动图表应用

使用React.js实现的电子商务订单跟踪系统应用程序

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：