使用React Redux构建的会议报名页面

Building your first React Redux App. 一个Redux应用开发入门实例教程。

react, redux, 教程

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

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

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

var _Redux = Redux;
var createStore = _Redux.createStore;
var bindActionCreators = _Redux.bindActionCreators;
var _ReactRedux = ReactRedux;
var Provider = _ReactRedux.Provider;
var connect = _ReactRedux.connect;
var _ReactDOM = ReactDOM;
var render = _ReactDOM.render;

// Dummy data for app

var attendeeList = [{
    name: 'Charlie Kelly',
    color: '#E74C3C',
    id: uuid.v4()
}, {
    name: 'Mac',
    color: '#553285',
    id: uuid.v4()
}, {
    name: 'Frank Reynolds',
    color: '#296AA8',
    id: uuid.v4()
}, {
    name: 'Deandra Reynolds',
    color: '#202020',
    id: uuid.v4()
}, {
    name: 'Dennis Reynolds',
    color: '#287572',
    id: uuid.v4()
}];

/* --- COMPONENTS --- */

var App = function(_React$Component) {
    _inherits(App, _React$Component);

function App() {
        _classCallCheck(this, App);

return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
    }

App.prototype.render = function render() {
        return React.createElement(
            'div',
            null,
            React.createElement(
                'h1',
                null,
                'Attendees'
            ),
            React.createElement('hr', null),
            React.createElement(AddAttendee, {
                addAttendee: this.props.addAttendee
            }),
            React.createElement('hr', null),
            React.createElement(Attendees, {
                attendees: this.props.attendees,
                removeAttendee: this.props.removeAttendee
            })
        );
    };

return App;
}(React.Component);

var Attendees = function(_React$Component2) {
    _inherits(Attendees, _React$Component2);

function Attendees() {
        _classCallCheck(this, Attendees);

return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
    }

Attendees.prototype.render = function render() {
        var _this3 = this;

return React.createElement(
            'ul', {
                className: 'attendees'
            },
            this.props.attendees.map(function(attendee, index) {
                return React.createElement(
                    'li', {
                        className: 'attendees__attendee',
                        key: index
                    },
                    React.createElement(Badge, {
                        attendee: attendee
                    }),
                    React.createElement(RemoveAttendee, {
                        removeAttendee: _this3.props.removeAttendee,
                        index: index
                    })
                );
            })
        );
    };

return Attendees;
}(React.Component);

var AddAttendee = function(_React$Component3) {
    _inherits(AddAttendee, _React$Component3);

function AddAttendee() {
        _classCallCheck(this, AddAttendee);

return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
    }

AddAttendee.prototype.handleSubmit = function handleSubmit(e) {
        // Stop page refreshing
        e.preventDefault();

var refs = this.refs;
        var name = refs.name.value;
        var color = refs.color.value;

// Trigger action
        this.props.addAttendee(name, color);

// Reset form
        refs.addAttendee.reset();
    };

AddAttendee.prototype.render = function render() {
        return React.createElement(
            'div', {
                className: 'row'
            },
            React.createElement(
                'div', {
                    className: 'medium-6 medium-offset-3 columns'
                },
                React.createElement(
                    'form', {
                        ref: 'addAttendee',
                        onSubmit: this.handleSubmit.bind(this)
                    },
                    React.createElement(
                        'label', {
                            'for': 'name'
                        },
                        'Name'
                    ),
                    React.createElement('input', {
                        id: 'name',
                        type: 'text',
                        ref: 'name',
                        placeholder: 'John Doe'
                    }),
                    React.createElement(
                        'label', {
                            'for': 'color'
                        },
                        'Favourite color'
                    ),
                    React.createElement('input', {
                        id: 'color',
                        type: 'text',
                        ref: 'color',
                        placeholder: '#2e2e2e'
                    }),
                    React.createElement(
                        'button', {
                            type: 'submit',
                            className: 'button'
                        },
                        'Add attendee'
                    )
                )
            )
        );
    };

return AddAttendee;
}(React.Component);

var RemoveAttendee = function(_React$Component4) {
    _inherits(RemoveAttendee, _React$Component4);

function RemoveAttendee() {
        _classCallCheck(this, RemoveAttendee);

return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments));
    }

RemoveAttendee.prototype.handleOnClick = function handleOnClick() {
        var index = this.props.index;

this.props.removeAttendee(index);
    };

RemoveAttendee.prototype.render = function render() {
        return React.createElement(
            'button', {
                className: 'alert button tiny',
                onClick: this.handleOnClick.bind(this)
            },
            ' × Remove attendee'
        );
    };

return RemoveAttendee;
}(React.Component);

var Badge = function(_React$Component5) {
    _inherits(Badge, _React$Component5);

function Badge() {
        _classCallCheck(this, Badge);

return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments));
    }

Badge.prototype.render = function render() {
        var style = {
            backgroundColor: this.props.attendee.color
        };

return React.createElement(
            'div', {
                className: 'hello-badge',
                style: style
            },
            React.createElement(
                'p', {
                    className: 'hello-badge__title'
                },
                React.createElement(
                    'span', {
                        className: 'hello-badge__hello'
                    },
                    'Hello'
                ),
                React.createElement('br', null),
                ' my name is'
            ),
            React.createElement(
                'p', {
                    className: 'hello-badge__name'
                },
                this.props.attendee.name
            )
        );
    };

return Badge;
}(React.Component);

/* --- ACTIONS --- */

/* --- REDUCERS --- */
function reducer() {
    var state = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
    var action = arguments[1];

switch (action.type) {
        case 'ADD_ATTENDEE':
            // Return a new array with old state and added attendee.
            return [{
                name: action.name,
                color: action.color
            }].concat(state);
        case 'REMOVE_ATTENDEE':
            return [].concat(state.slice(0, action.index), state.slice(action.index + 1));
        default:
            return state;
    }
}

/* --- STORE --- */

var store = createStore(reducer, attendeeList);

/* --- OTHER --- */

// Render the app
render(React.createElement(
    Provider, {
        store: store
    },
    React.createElement(AppContainer, null)
), document.getElementById('app'));

编译

CSS

HTML

Building your first React Redux App. 一个Redux应用开发入门实例教程。

react, redux, 教程

编辑器支持Emmet

快捷键

Building your first React Redux App. 一个Redux应用开发入门实例教程。

react, redux, 教程

使用React加Redux实现的待办事项（任务管理）小应用

使用React+Redux实现的无尽地牢游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：