# 100DaysOfCode: создание приложения на React (продолжение)…
Проект (1 час): продолжайте развивать приложение, добавляя компонент создания заметок, который синхронизирует реальное время с firebase. Запускайте события от корня для управления состоянием вместе с проверкой каждого компонента.
Весь код этого проекта можно найти на моем github
Шаг 1. Проверка с использованием PropTypes
Укажите необходимые / необязательные свойства и их тип данных для каждого компонента.
<Repos username={this.props.params.username} repos={this.state.repos}/>
propTypes: {
username: React.PropTypes.string.isRequired,
repos: React.PropTypes.array.isRequired
}
Здесь, если мы используем «Repos» без имени пользователя, он теперь выдаст ошибку на консоль. Добавьте аналогичную проверку для всех компонентов.
Шаг 2: Управление состоянием компонента
В React состояние управляется на уровне верхнего компонента, который передается потомку. Итак, для нашего варианта использования, чтобы добавить заметку из текстового поля в firebase на уровне компонента заметок, нам нужно добавить метод в компонент корневого уровня, которым в нашем случае является Profile.js.
handleAddNote: function(newNote){
this.ref.child(this.props.params.username).child(this.state.notes.ength).set(newNote)
}
Этот метод добавления «newNote» к дочернему элементу имени пользователя затем передается в качестве опоры компоненту Notes.
<Notes
username={this.props.params.username}
notes={this.state.notes}
addNote={this.handleAddNote} />
Не забудьте добавить его в PropTypes для проверки в Notes.js.
addNote: React.PropTypes.func.isRequired
Шаг 3. Добавьте компонент Note
Наконец, создайте простой компонент с текстовым полем и кнопкой, который позволяет вам добавлять заметки в хранилище данных firebase.
Событие onClick на кнопке здесь вызовет «handleSubmit», который получает состояние управляемой функции «addNote», передаваемое ему из профиля - ›Заметки -› AddNote
handleSubmit: function(){
var newNote = this.note.value;
this.note.value = ‘’; //Empty textbox
this.props.addNote(newNote)
}
Теперь запуск webpack и запуск профиля должны позволить вам добавлять заметки, которые синхронизируются в реальном времени.
День 4 из # 100DaysOfCode DONE
Если вам это понравилось, нажмите 👏 , чтобы другим понравилось. Подписывайтесь на меня в Twitter @ HariniLabs, чтобы получать последние новости или просто поздороваться :)
PS: я курирую еженедельный информационный бюллетень # WomenInTech, чтобы получить немного вдохновения из мира технологий, и да, мужчины тоже могут подписаться! Получите здесь :)
