![Массивы
JSON SCHEMA
const schema = {
type: 'object',
properties: {
arrayField: {
type: 'array',
items: {
type: 'string',
},
},
},
};
const formData = {
arrayField: ['arr1', 'arr2', 'arr3'],
};
16](https://image.slidesharecdn.com/finalpressss1-171031104748/85/80-React-15-320.jpg)
![Описание структуры формы
Валидация формы с помощью jsonSchema
const schema = {
type: 'object',
properties: {
login: {
type: 'string',
},
password: {
type: 'string',
},
},
required: ['login', 'password'],
};
20](https://image.slidesharecdn.com/finalpressss1-171031104748/85/80-React-19-320.jpg)
![Результат валидации
Валидация формы с помощью jsonSchema
const result = {
errors: [],
instance: {
login: 'Ivan',
password: 'password',
},
schema: {
type: 'object',
properties: {
login: {
type: 'string',
},
password: {
type: 'string',
},
},
required: ['login', 'password'],
},
};
22](https://image.slidesharecdn.com/finalpressss1-171031104748/85/80-React-21-320.jpg)
![Результат валидации
Валидация формы с помощью jsonSchema
const result = {
errors: [
{
property: "instance",
message: 'requires property "password"',
schema: {...},
instance: {...},
name: "required",
argument: "password",
stack: "requires property "password",
},
],
};
27](https://image.slidesharecdn.com/finalpressss1-171031104748/85/80-React-26-320.jpg)
![formData в React-jsonschema-form
React-jsonschema-form
import JsonSchemaForm from 'react-
jsonschema-form';
const schema = {
type: 'object',
required: ['login', 'password'],
properties: {
login: {
type: 'string',
},
password: {
type: 'string',
},
},
};
<JsonSchemaForm schema={schema} />;
35](https://image.slidesharecdn.com/finalpressss1-171031104748/85/80-React-34-320.jpg)
Как запилить 80 React форм и иногда бывать дома
- 1. Как запилить 80 React форм и иногда бывать дома Создание React форм с помощью Json Schema
- 2. C чего все начиналось 3
- 3. - Сколько будет форм? - Не знаем! - Как будут выглядеть? - Не знаем! 4
- 5. 6
- 6. Требования сами придумаем • Должны строиться динамически • Конечно, есть ролевая система • Клиентская валидация • Цена добавления новой фичи • Принцип автобуса 7
- 7. Пути решения • jQuery 8
- 8. 9
- 9. Пути решения • Redux-Form • Formsy-React • React-Form • React-jsonschema-form 10
- 10. React-jsonschema- form Клиентская библиотека для построения форм основе jsonSchema https://github.com/mozilla-services/react- jsonschema-form 11
- 11. 12
- 12. Что такое Json- schema? Json-schema— это стандарт описания структур данных в формате JSON, разрабатываемый на основе XML- schema или простыми словами это валидатор данных 13
- 13. Простой пример JSON SCHEMA const schema = { type: 'object', properties: { stringField: { type: 'string', }, numberField: { type: 'number', }, boolField: { type: 'boolean', }, }, }; const formData = { stringField: 'user', numberField: 123, boolean: true, } 14
- 14. Вложенные объекты JSON SCHEMA const schema = { type: 'object', properties: { objectField: { type: 'object', properties: { childField_1: { type: 'string', }, childField_2: { type: 'number', }, }, }, }, }; const formData = { objectField: { childField_1: 'user', childField_2: 234, }, }; 15
- 15. Массивы JSON SCHEMA const schema = { type: 'object', properties: { arrayField: { type: 'array', items: { type: 'string', }, }, }, }; const formData = { arrayField: ['arr1', 'arr2', 'arr3'], }; 16
- 16. 17
- 17. Валидация формы с помощью jsonSchema 18
- 18. Данные формы Валидация формы с помощью jsonSchema const formData = { login: 'Ivan', password: 'password', }; 19
- 19. Описание структуры формы Валидация формы с помощью jsonSchema const schema = { type: 'object', properties: { login: { type: 'string', }, password: { type: 'string', }, }, required: ['login', 'password'], }; 20
- 20. Код валидации Валидация формы с помощью jsonSchema npm install jsonschema; import {validate} from 'jsonschema'; const result = validate(formData, schema); console.log(result); 21
- 21. Результат валидации Валидация формы с помощью jsonSchema const result = { errors: [], instance: { login: 'Ivan', password: 'password', }, schema: { type: 'object', properties: { login: { type: 'string', }, password: { type: 'string', }, }, required: ['login', 'password'], }, }; 22
- 22. 23
- 23. Данные формы Валидация формы с помощью jsonSchema const formData = { login: 'Ivan', password: 'password', }; 24
- 24. Неправильные данные формы Валидация формы с помощью jsonSchema const formData = { login: 'Ivan', }; 25
- 25. Код валидации Валидация формы с помощью jsonSchema npm install jsonschema; import {validate} from 'jsonschema'; const result = validate(formData, schema); console.log(result); 26
- 26. Результат валидации Валидация формы с помощью jsonSchema const result = { errors: [ { property: "instance", message: 'requires property "password"', schema: {...}, instance: {...}, name: "required", argument: "password", stack: "requires property "password", }, ], }; 27
- 28. Виды валидации maxLength – максимальная длина строки minLength – минимальная длина строки max – максимальное значение числа min – минимальное значение числа pattern – регулярное выражение const schema = { type: 'object', properties: { login: { type: 'string', maxLength: '10', minLength: '2', }, count: { type: 'number', max: 10, min: 2, }, email: { type: 'string', pattern: 'd+', }, }, }; 29
- 29. React-jsonschema- form Клиентская библиотека для построения форм на основе jsonschema https://github.com/mozilla-services/react- jsonschema-form 30
- 30. Основные props React-jsonschema-form const myForm = { schema: {...}, uiSchema: {...}, formData: {...}, }; 31
- 31. Schema в React-jsonschema- form React-jsonschema-form const schema = { type: 'object', properties: { login: { type: 'string', }, password: { type: 'string', }, }, }; 32
- 32. uiSchema в React-jsonschema- form React-jsonschema-form const uiSchema = { firstName: { 'ui:widget': 'text', }, password: { 'ui:widget': 'password', }, }; 33
- 33. formData в React-jsonschema- form React-jsonschema-form const formData = { login: 'Ivan', password: 'password', }; 34
- 34. formData в React-jsonschema-form React-jsonschema-form import JsonSchemaForm from 'react- jsonschema-form'; const schema = { type: 'object', required: ['login', 'password'], properties: { login: { type: 'string', }, password: { type: 'string', }, }, }; <JsonSchemaForm schema={schema} />; 35
- 37. Простая форма Кастомизация компонентов const schema = { type: 'object', properties: { firstName: { type: 'string', title: 'First name', }, }, }; 38
- 38. Простая форма Кастомизация компонентов const uiSchema = { firstName: 'ui:widget': ({ onChange, value }) => ( <input type={'text'} style={{ backgroudColor: 'red' }} onChange={onChange} value={value} /> ), }, }; 39
- 39. 40
- 40. Плюсы React-jsonschema- form • Динамическое построение форм • Динамическая валидация • Возможность кастомизации вывода компонентов 41
- 41. Минусы React-jsonschema- form • React-json-schema – умный компонент, не дружит с Redux • Нет возможности связывать поля 42
- 42. И что с этим делать? 43
- 43. 44
- 44. 45
- 45. 46
- 46. 47
- 47. 48
- 48. 49
- 49. Всем спасибо! 50
- 50. Мои контакты • 4456784345 (ICQ) • i.sychev (Мой мир) • i.sychev (Одноклассники) • i.sychev (Спрашивай.ру) https://goo.gl/RMTbdQ 51
- 51. https://goo.gl/RMTbdQ • Json Schema http://json-schema.org/ • Redux-form https://redux-form.com/ • React-jsonschema-form https://github.com/mozilla-services/react-jsonschema- form 52