7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

React на курс для начинающих, часть 1

Read Time: 7 mins
This post is part of a series called React Crash Course for Beginners.
React Crash Course for Beginners, Part 2

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

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

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

Мы создадим совершенно новое приложение React, используя инструмент create-react-app, разработанный Facebook, а также подробно рассмотрим следующие темы React:

  • Компоненты
  • JSX
  • Props
  • State
  • Правильное структурирование вашего приложения
  • Использование функций ES6 для разработки современных приложений

Что мы будем строить

Чтобы увлечение разработкой React было более увлекательным, мы будем создавать полностью работающее приложение, а не представлять общие фрагменты кода, когда будут рассмотрены новые аспекты React.

Вместе мы построим «Movie Mojo», приложение для отображения галереи хороших фильмов. По завершении приложение загрузит несколько фильмов при загрузке страницы, а затем по нажатию кнопки загрузится больше. Наконец, вы сможете вводить свои собственные названия фильмов с помощью настраиваемой формы, которая при отправке будет динамически вставлять новый фильм в галерею.

Finished Movie Mojo AppFinished Movie Mojo AppFinished Movie Mojo App

Предпосылки

Это учебное пособие промежуточного уровня, и вы получите много преимуществ, если у вас есть некоторые предварительные знания по следующим темам:

  • ES6, такие как стрелочные функции, классы и модули.
  • Знаете что такое компоненты, props и состояние React.
  • Некоторый опыт использования Node.js и NPM.
  • По крайней мере, базовый уровень владения JavaScript.

Большинство из них подробно будут освещены по ходу дела.

Давайте настроим

Мы будем использовать инструмент create-react-app для настройки нашего приложения React. Он чрезвычайно прост в использовании и позволит нам сразу же сосредоточиться на кодировании нашего приложения без необходимости навигации по сложному процессу настройки.

Чтобы использовать приложение create-react-app, вам необходимо установить Node.js и npm. Вы можете проверить, доступны ли они оба, введя следующее в окне командной строки:

А потом:

Если они оба установлены, вы увидите текущий номер версии для каждого.

Если вам нужно установить или обновить Node.js и npm, тогда самый простой способ - загрузить Node.js с официальной веб-страницы. Node.js поставляется вместе с npm, поэтому вам не нужно выполнять отдельную установку.

Чтобы установить приложение create-response-app глобально, введите его в любое окно командной строки:

npm install -g create-react-app

Теперь мы можем использовать приложение create-react-app для разработки нашего нового приложения React. Он также создаст папку верхнего уровня для хранения наших файлов проекта. Откройте окно командной строки и перейдите к папке, в которой находится ваше приложение (например, /Desktop), и введите следующее:

create-react-app movie-mojo

Это займет минуту или около того, но когда это произойдет, вы увидите сообщение, подобное этому:

Новая папка movie-mojo будет создана со следующей структурой файлов:

Project file structureProject file structureProject file structure

В папке src вы редактируете файлы проекта, и когда вы приступите к развертыванию приложения, они будут добавлены в папку public, готовые к распространению.

Чтобы просмотреть пример приложения в вашем браузере, давайте воспользуемся мини-веб-сервером, включенным в приложение create-react-app. Мы должны находиться внутри папки проекта, которую мы только что создали, поэтому в окне командной строки введите:

cd movie-mojo

А потом:

npm start

Эта простая команда выполняет три основные функции. Будет:

  • Скомпилирует наше приложение с образцом React.
  • Откроет новое окно браузера и отобразите наше приложение.
  • Мониторинг изменений файлов проекта.

После компиляции вы увидите следующий вывод:

И вот пример приложения, запущенного в браузере.

Sample appSample appSample app

Когда какие-либо изменения будут внесены в ваше приложение, оно будет автоматически перекомпилировано и перезагружено в окне браузера. Это действительно классная функция create-react-app и сэкономит вам много времени на разработке!

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

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

Попробуем внести изменения в наш образец проекта.

Внутри папки src откройте App.js в текстовом редакторе. Попробуйте изменить строку:

Чтобы начать, отредактируйте <code> src/App.js</code> и сохраните для перезагрузки.

чтобы:

Добро пожаловать в приложение «Movie Mojo»!

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

Updated sample appUpdated sample appUpdated sample app

Структурирование нашего приложения

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

Инструмент create-react-app отлично справляется с нашим подходом, но у нас есть все возможности гибко настраивать его в соответствии с нашими потребностями.

Во-первых, давайте избавимся от файлов, которые нам больше не нужны в нашей папке src. Нам не нужны воркеры служб в нашем приложении, поэтому удалите файл registerServiceWorker.js. На этот файл ссылается на index.js, поэтому откройте его в редакторе и удалите все ссылки, чтобы он выглядел так:

Затем удалите файл logo.svg и отредактируйте App.js, чтобы удалить ссылки на него. Ваш обновленный файл должен выглядеть следующим образом:

Мы также можем избавиться от файла App.test.js. Это оставит нас со следующими файлами в src:

  • index.js
  • index.css
  • App.js
  • App.css

Мы будем создавать несколько компонентов, поэтому давайте создадим выделенную папку для их хранения. Внутри src создайте новую папку components и добавьте к ней файл App.js. Наше приложение не будет правильно компилироваться, пока мы не обновим пару ссылок.

В index.js обновите путь для импорта компонента <App />:

И в App.js обновите путь к App.css:

Сохраните изменения и убедитесь, что ваше приложение успешно перекомпилируется.

Теперь мы почти готовы начать кодирование нашего приложения «Movie Mojo». Во-первых, давайте познакомимся с тем, как визуализируется наше приложение.

Взгляните на index.js. Это файл, который фактически отображает наше приложение в DOM. Он делает это с помощью метода ReactDom.render(), который принимает два аргумента. Первый аргумент - это компонент, который мы хотим отобразить. В нашем случае это компонент <App />, который является компонентом верхнего уровня (и только для текущего) в нашем приложении.

Второй аргумент указывает элемент цели DOM, к которому мы хотим подключить наше приложение React. По умолчанию «create-react-app» автоматически создает этот элемент. Если вы заглянете в папку public, то есть index.html, который содержит элемент <div> с id равным root.

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

index.js загружается в наш компонент <App /> из App.js, и мы будем следовать вместе с этим шаблоном проектирования, разделив каждый компонент, содержащийся в нашем приложении, в свой собственный файл.

App.js будет нашим компонентом верхнего уровня, который будет содержать другие компоненты, которые, в свою очередь, могут содержать ссылки на другие компоненты. Представьте, что компоненты похожи на теги HTML, где у вас есть элемент <body> верхнего уровня, который может содержать один или несколько элементов <div>, которые могут включать элемент меню <nav> и т.д.

Заключение

Этот учебник содержал все основы, необходимые для настройки нашего приложения React. Использование приложения create-react-app сделало невероятно легким создание рабочего примера приложения со всей конфигурацией, обработанной для нас. Затем мы изменили настройку по умолчанию в соответствии с нашими конкретными потребностями.

Следите за частью 2, где мы начнем создавать компоненты для нашего приложения «Movie Mojo» и взглянем на добавление props, чтобы сделать наши компоненты динамичными!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.