Начало работы с React: руководство для начинающих

 // src/messages/message-view.js import React from 'react'; import PropTypes from 'prop-types'; export default function MessageView({message}) { return ( <div className="container"> <div className="from"> <span className="label">From: </span> <span className="value">{message.from}</span> </div> <div className="status"> <span className="label">Status: </span> <span className="value">{message.status}</span> </div> <div className="message"> <span className="label">Message: </span> <span className="value">{message.content}</span> </div> </div> ); } MessageView.propTypes = { message: PropTypes.object.isRequired } 

Обратите внимание, что я удалил импорт Component , так как это не требуется в функциональном синтаксисе. Поначалу этот стиль может сбивать с толку, но вы быстро поймете, что так быстрее писать компоненты React.

Вы успешно создали компонент React без состояния. Однако он не завершен, так как для правильной интеграции с компонентом или контейнером с состоянием требуется еще немного работы. В настоящее время MessageView отображает статические данные. Нам нужно изменить так, чтобы он мог принимать входные параметры. Мы делаем это, используя this.props . Мы собираемся назначить переменную с именем message для реквизита. Мы также пометим переменную message как required используя пакет prop-types . Это должно облегчить отладку нашего проекта по мере его роста. Обновите message-view.js следующим кодом:

 // src/messages/message-view.js … import PropTypes from 'prop-types'; class MessageView extends Component { render() { const message = this.props.message; return( <div className="container"> <div className="from"> <span className="label">From: </span> <span className="value">{message.from}</span> </div> <div className="status"> <span className="label">Status: </span> <span className="value">{message.status}</span> </div> <div className="message"> <span className="label">Message: </span> <span className="value">{message.content}</span> </div> </div> ) } // Mark message input parameter as required MessageView.propTypes = { message: PropTypes.object.isRequired } } … 

Далее мы создадим компонент с состоянием, который будет выступать в качестве родителя для компонента MessageView . Мы будем использовать тип данных state для хранения сообщения, которое мы передадим в MessageView . Для этого создайте файл message-list.js внутри src/messages и введите следующий код:

 // src/messages/message-list.js import React, { Component } from 'react'; import MessageView from './message-view'; class MessageList extends Component { state = { message: { from: 'Martha', content: 'I will be traveling soon', status: 'read' } } render() { return( <div> <h1>List of Messages</h1> <MessageView message={this.state.message} /> </div> ) } } export default MessageList; 

Затем обновите src/App.js , чтобы MessageList него отображался MessageList (который, в свою очередь, отображает его дочерний компонент, MessageView ).

 // src/App.js … import MessageList from './messages/message-list'; class App extends Component { render(){ return ( <MessageList /> ) } } … 

После сохранения изменений, проверьте ваш браузер, чтобы увидеть результат.

Теперь давайте посмотрим, как мы можем отображать несколько сообщений, используя экземпляры MessageView . Сначала мы изменим state.message на массив и переименуем его в messages . Затем мы будем использовать функцию map для генерации нескольких экземпляров MessageView каждый из которых соответствует сообщению в массиве state.messages . Нам также необходимо заполнить специальный атрибут с именем key уникальным значением, таким как index . Это нужно React, чтобы отслеживать, какие элементы в списке были изменены, добавлены или удалены. Обновите код MessageList следующим образом:

 class MessageList extends Component { state = { messages: [ { from: 'John', message: 'The event will start next week', status: 'unread' }, { from: 'Martha', message: 'I will be traveling soon', status: 'read' }, { from: 'Jacob', message: 'Talk later. Have a great day!', status: 'read' } ] } render() { const messageViews = this.state.messages.map(function(message, index) { return( <MessageView key={index} message={message} /> ) }) return( <div> <h1>List of Messages</h1> {messageViews} </div> ) } } 

Проверьте ваш браузер, чтобы увидеть результаты:

Как видите, легко определить строительные блоки для создания мощных и сложных интерфейсов пользовательского интерфейса с помощью React. Не стесняйтесь добавлять больше стилей, таких как размещение пробелов и разделителей между каждым экземпляром MessageView .

Резюме

Теперь мы подошли к концу этого вводного руководства. Есть намного больше концепций React, которые я не смог охватить, таких как методы жизненного цикла . Если вам интересно, куда идти, ознакомьтесь с другими нашими статьями, чтобы узнать больше о React и его экосистеме:

• Как работать с государством и управлять им в действии
• Оптимизация производительности React с помощью компонентов без сохранения состояния
• Создайте приложение CRUD, используя React, Redux и FeathersJS

Вы также можете просмотреть все наши статьи о React для более углубленных тем. Я надеюсь, что это вступление достаточно взволновало вас, чтобы начать использовать React в своих проектах.

Мы объединились с Open SourceCraft, чтобы предложить вам 6 профессиональных советов от разработчиков React . Для более открытого контента, проверьте Open SourceCraft .