Найти в Дзене

React по быстрому. #2 - Создаём каркас приложения

В этом уроке мы создадим React-приложение и очистим его код для будушей разработки.
Оглавление

Введение

После того, как мы разобрались с тем, что такое React JS, можно посмотреть, что он из себя представляет в коде.

Перед выполнением дальнейших инструкций вам нужно подготовится. Запустите текстовый редактор и терминал(или командную строку в Windows). Также у вас должна быть установлена Node JS.

Поехали!

Create-react-app

После всех приготовлений, мы наконец можем установить React библиотеку.

Для этого нужно перейти в нужную директорию с помощью cd и выполнить команду:

npx create-react-app [Имя вашего приложения]

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

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

Запуск приложения

После окончания загрузки перейдите в директорию с проектом с помощью команды cd (также откройте папку с проектом через текстовый редактор) .

В корне проекта сразу же можно увидеть кучу файлов. Но не стоит пугаться. Нам понадобятся только несколько из них.

Теперь можно запустить проект. Для этого выполним команду:

npm start

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

Вы увидите это
Вы увидите это

Очистка приложения

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

Для этого откройте файл App.js в текстовом редакторе. Код в нём будет примерно такой:

-3

Нам нужно убрать весь код в первом теге <div></div>, а также удалить ненужный import в начале кода.

В итоге файл будет выглядеть вот так:

-4

Мы очистили приложение!

Заключение

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