Как создать свое первое приложение на React
Самый простой способ начать работу с популярной библиотекой Javascript
Эта статья проведет вас через каждый шаг создания простейшего из возможных приложений React. Даже проще, чем список дел. И в нем есть интерактивная прогулка, которую вы можете посмотреть здесь.
Если после этого урока вы захотите узнать больше о React, вы можете пройти наш бесплатный 4-часовой курс Learn React на Scrimba.
Почему так просто? Потому что я обнаружил, что когда я пытаюсь изучить новую технологию, даже самые простые функции могут добавить ненужной сложности.
Если вы никогда раньше не пробовали React, это руководство для вас.
Не требуется никаких предварительных условий, кроме базовых навыков Javascript и HTML. Хотя, если вы хотите прочитать некоторую основную теорию, прежде чем приступить к программированию, вы можете прочитать статью ниже, а затем вернуться.
Глядя на финальный проект
Утверждать, что вы будете создавать приложение, на самом деле является преувеличением. Как видно ниже, это всего лишь страница профиля. (Изображение взято случайным образом с http://lorempixel.com/)
Шаг 1. Разделение страницы на компоненты
React построен на компонентах; все, что вы видите на странице, является частью компонента. Прежде чем мы начнем кодировать, неплохо было бы создать набросок компонентов, как мы это делали выше.
Главный компонент, который охватывает все остальные компоненты, отмечен красным. Мы назовем это приложение App.
Как только мы выяснили, что App является нашим основным компонентом, нам нужно будет спросить себя: какие прямые дочерние элементы есть у App?
Я бы сказал, что имя и изображение профиля можно сгруппировать в один компонент, который мы назовем Профиль (зеленый прямоугольник) , и Хобби section может быть другим компонентом (синий прямоугольник).
Структуру наших компонентов также можно визуализировать так:
- App
- Profile
- Hobbies
Мы могли бы разделить компонент дальше; например ProfileImage и HobbyItem, но на этом мы остановимся для простоты.
Шаг 2: Привет, мир
Прежде чем приступить к кодированию, вам необходимо скачать исходный файл. Он доступен в этом репозитории GitHub. Просто скопируйте или клонируйте его и откройте файл index.html в браузере. (Полный код доступен в файле finished_project.html.)
Я настроил файл правильно, поэтому вы увидите ссылки на исходный код React и другие необходимые библиотеки в разделе ‹head /› файла. Ваш код начнется со строки 12.
Для правильного проекта React вы бы не использовали эту игрушечную установку. Но я не хочу, чтобы это руководство касалось чего-либо другого, кроме программирования на React, поэтому мы будем упрощать его.
Напишем наш первый компонент:
Как вы можете видеть в первой строке, мы создаем компонент, вызывающий метод createClass для объекта React.
Мы передаем один параметр, так называемый объект спецификации. Этот объект может иметь столько методов, сколько вы хотите, но наиболее важным из них является метод render. В методе render вы вернете то, что React будет рисовать на странице. В нашем случае нам просто нужен тег div с текстом «Hello World».
Затем выполните следующее:
Таким образом мы указываем, где на странице должен отображаться компонент App. Это делается путем вызова ReactDOM.render с передачей компонента App в качестве первого аргумента и ссылки на div с идентификатором content в качестве второго. Все наше приложение будет помещено в этот блок содержимого.
Этот синтаксис может показаться немного странным: мы берем переменную Javascript (App) и превращаем ее в то, что выглядит как тег HTML / XML. Это называется JSX. Подробнее о JSX читайте в статье React.js за 8 минут.
Обновите страницу, и на экране появится надпись «Hello World».
Шаг 3. Дополнительные компоненты
Давайте добавим еще несколько компонентов. Оглядываясь назад на наш обзор компонентов, мы видим, что у компонента App есть два дочерних элемента: Profile и Hobbies.
Давайте выпишем эти два компонента. Начнем с Профиль:
На самом деле здесь нет ничего нового. В операторе return немного больше содержимого, чем в приложении.
Напишем компонент Хобби:
Если вы снова обновите страницу, вы не увидите ни одного из этих компонентов.
Это потому, что только компонент App был отрисован в DOM.
Нам потребуется изменить компонент Приложение, чтобы фактически превратить Профиль и Хобби в дочерние элементы приложения.
Вот что нам нужно сделать:
Если вы обновите страницу еще раз, вы увидите, что все содержимое отображается на странице. (Хотя изображение не появится, поскольку мы добавили к нему только фиктивную ссылку).
Шаг 4. Получите данные
Теперь, когда у нас есть базовая настройка структуры, мы готовы добавить правильные данные в наш проект.
В React есть так называемый однонаправленный поток данных, что означает, что данные передаются от родительских компонентов к дочерним.
Перед всеми компонентами вставьте следующий код:
var DATA = {
name: 'John Smith',
imgURL: 'http://lorempixel.com/200/200/',
hobbyList: ['coding', 'writing', 'skiing']
}
Вы можете представить, что эти данные извлекаются из API чего-либо.
Следующее, что вам нужно сделать, это добавить эти данные в компоненты App в качестве своих свойств.
Данные в React обрабатываются либо как свойства, либо как состояние. В этом руководстве мы будем рассматривать только реквизит. Как правило, свойства неизменяемы и могут совместно использоваться компонентами, тогда как состояние является изменяемым и частным. Это лучше объяснить в этой статье.
Ниже вы увидите, как передать данные в компонент App, просто немного изменив метод ReactDOM.render. Это похоже на то, как вы добавляете атрибуты в обычном HTML.
Фигурная скобка сообщает React, что мы выходим из синтаксиса JSX, чтобы добавить выражение Javascript (DATA).
Теперь мы можем получить доступ к этим данным из компонента App через this.props.profileData. Однако компонент приложения - это просто оболочка для компонентов Профиль и Хобби, поэтому мы собираемся отправлять данные дальше по иерархии, используя тот же метод, что описан выше.
Вот как мы передаем данные из приложения его дочерним элементам:
Мы передаем profileImage и name компоненту Profile, а только массив hobbyList вниз Компонент Хобби. Это связано с тем, что компоненту Хобби не нужны остальные данные; он просто отображает список увлечений.
Давайте посмотрим, как нам нужно будет переписать порядок компонентов Profile, чтобы использовать данные, которые мы ему передали:
Мы просто выходим из синтаксиса JSX с помощью фигурных скобок и получаем данные из this.props.
В компоненте «Хобби» нам нужно будет использовать технику для циклического перебора хобби.
Как видите, мы перебираем массив hobbies, хранящийся в this.props.hobbies. Мы используем метод прототипа массива map, который создает новый массив на основе того, что мы возвращаем. в функции обратного вызова.
Обратите внимание, что мы создаем атрибут key, присваивая ему значение index. Это должен быть уникальный ключ для каждого элемента, так как React нужен для правильного отслеживания элементов, которые мы создали динамически. Однако не используйте индекс, если сопоставленные результаты могут измениться, так как это может привести к ошибкам. Тем не менее, в этом сценарии он будет работать нормально, поэтому мы будем использовать его для простоты.
После того, как мы сохранили все элементы списка в переменной hobbies, мы просто добавляем их в оператор return, чтобы он отображался на экране.
Это полный код:
Поздравляем, вы только что создали свой первый проект на React.js!
И обязательно подписывайтесь на меня здесь, на Medium, если вам понравилась эта статья!
Спасибо за прочтение! Меня зовут Пер, я соучредитель Scrimba - лучшего способа преподавать и изучать код.
Если вы дочитали до этого места, я бы порекомендовал вам пройти наш курс Learn React!
