User
import React, {Component} from 'react';
import {connect as vBooConnect} from 'react-validation-boo';
import {connect as reduxConnect} from 'react-redux';
import {InputBlock, InputCheckboxBlock, InputRadioGroupBlock, TextareaBlock, SelectBlock} from '../form/default';
class MyForm extends Component {
constructor() {
super();
this.genderOptions = [
{value: '', label: 'Ваш пол?'},
{value: 1, label: 'Мужской'},
{value: 2, label: 'Женский'}
];
this.familyRadioList = [
{value: 1, label: 'холост'},
{value: 2, label: 'сожительство'},
{value: 3, label: 'брак'}
];
}
componentWillMount() {
this.props.vBoo.subscribe('change:input', this.props.onChangeVBooInput);
this.props.vBoo.subscribe('valid:form', this.props.onChangeVBooValid);
}
render() {
let s = this.props.myStore.inputs;
return <Form connect={this.props.vBoo.connect}>
<InputBlock name="name" value={s.name} />
<InputBlock name="email" value={s.email} />
<SelectBlock name="gender" options={this.genderOptions} value={s.gender} />
<InputRadioGroupBlock name="familyStatus" items={this.familyRadioList} value={s.familyStatus} />
<TextareaBlock name="comment" value={s.comment} />
<InputCheckboxBlock name="addition" value="yes" checked={s.addition==='yes'} />
<button onClick={this.sendForm}>
{this.props.vBoo.isValid() ? 'Можно отправлять': 'Будьте внимательны!!!'}
</button>
</Form>
}
}
export default reduxConnect(
store => ({
myStore: { // для наглядности
isValid: false,
inputs: {
email: 'test@mail.ru',
gender: 0,
familyStatus: 1
}
}
}),
dispatch => ({
onChangeVBooInput: (input) => {...},
onChangeVBooValid: (isValid) => {...}
})
)(vBooConnect({
rules: () => ([...]),
labels: () => ({...}),
})(MyForm));
import React, {Component} from 'react';
import {connect, Form, Input, logger} from 'react-validation-boo';
class MyForm extends Component {
sendForm = (event) => {
event.preventDefault();
if(this.props.vBoo.isValid()) {
console.log('Получаем введённые значения и отправляем их на сервер', this.props.vBoo.getValues());
} else {
console.log('Выведем в консоль ошибки', this.props.vBoo.getErrors());
}
};
getError = (name) => {
return this.props.vBoo.hasError(name) ? <div className="error">{this.props.vBoo.getError(name)}</div> : '';
};
render() {
return <Form connect={this.props.vBoo.connect}>
<div>
<Input type="text" name="name" />
{this.getError('name')}
</div>
<button onClick={this.sendForm}>
{this.props.vBoo.isValid() ? 'Можно отправлять': 'Будьте внимательны!!!'}
</button>
</Form>
}
}
export default connect({
rules: () => (
[
['name', 'required'],
]
),
middleware: logger
})(MyForm);
- Простые компоненты — Stateless function
- JSX распределение атрибутов — JSX Spread Attributes
- Деструктуризация аргументов — Destructuring Arguments
- Условный рендеринг — Conditional Rendering
- Типы потомков — Children Types
- Массив как потомок — Array as children
- Функция как потомок — Function as children
- Функция в render — Render callback
- Проход по потомкам — Children pass-through
- Перенаправление компонента — Proxy component
- Стилизация компонентов — Style component
- Переключатель событий — Event switch
- Компонент-макет — Layout component
- Компонент-контейнер — Container component
- Компоненты высшего порядка — Higher-order component
Продолжение: Рассказ о том, как не дать мне украсть номера кредиток и пароли у посетителей ваших сайтовПредставляем вам перевод статьи человека, который несколько лет воровал имена пользователей, пароли и номера кредитных карт с различных сайтов.
Col-sm-4, col-md-8) или создавать медиа-запросы для каждого размера экрана.
От переводчика:
Предлагаю вашему вниманию перевод краткого (действительно краткого) руководства по ES6. В нём можно ознакомиться с основными понятиями стандарта.
Оригинальный текст в некоторых случаях был дополнен или заменён на более подходящий источник. Например, часть определения ключевого слова const является переводом документации с MDN.
Чтобы лучше разобраться в некоторых концепциях (для выполнения качественного перевода) использовалось описание стандарта на сайте MDN, руководство "You Don't Know JS: ES6 & Beyond" и учебник Ильи Кантора.
Перевод выложил на Гитхаб: https://github.com/etnolover/ES6-for-humans-translation. В случае нахождения ошибок пишите, исправлю.
Ссылка на оригинальный текст: https://github.com/metagrover/ES6-for-humans
Update 22.07.2016: добавил опрос про const
let, const и блочная область видимостиconst?
Этот пост просто шутка и не пытается выставить инструменты, упомянутые здесь, в дурном свете. Я использую их постоянно, они великолепны, и я рекомендую их использовать. По мотивам It's the future @ CircleCI Blog
— Эй, я бы хотел научиться писать крутые веб-приложения. Слышал, у тебя есть опыт.
— Да, я как раз занимаюсь фронтендом, юзаю пару тулз.
— Круто. Я щас делаю простое приложение — обычный TODO-лист, используя HTML, CSS и JavaScript, и планирую заюзать JQuery. Это норм?
— Не-не-не. Это олдскул. Джиквери мёртв — никто не использует его теперь! Тебе нужен React. Это будущее.
— Окей, лады. А что это?