Создание базового приложения react
Итак, у меня уже установлены npm, yarn и create-react-app. И я даже неоднократно в процессе изучения попробовал create-react-app для создания базового приложения. Легче не бывает.
Начало
Пробуем создание базового приложения с помощью yarn.
[[email protected] ReactJS]# mkdir reactApp
[[email protected] ReactJS]# cd reactApp
[[email protected] reactApp]# yarn init
yarn init v1.3.2
question name (reactApp):
question version (1.0.0): 0.0.1
question description: React Application
question entry point (index.js):
question repository url:
question author: Dusty Attic
question license (MIT):
question private:
success Saved package.json
Done in 68.42s.
[[email protected] reactApp]#
Тоже очень просто.
Смотрим что у нас в каталоге. Один единственный файл - package.json.
{
"name": "reactApp",
"version": "0.0.1",
"description": "React Application",
"main": "index.js",
"author": "Dusty Attic",
"license": "MIT"
}
Тоже не впечатляет.
Зависимости
Но большего, собственно, и не нужно. Добавляем самое необходимое:
[[email protected] reactApp]# yarn add react react-dom
yarn add v1.3.2
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 18 new dependencies.
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 3.91s.
[[email protected] reactApp]#
В package.json ниже "license": "MIT" добавились зависимости:
. . .
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
А также в папке с будущим приложением добавился каталог node_modules, в котором в числе прочих папок, присутствуют установленные нами react и react-dom.
Устанавливаем дополнительно react-srcipts а он, в свою очередь, "подтянет" и все необходимое:
[[email protected] reactApp]# yarn add react-scripts
yarn add v1.3.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fseven[email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info fseven[email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 874 new dependencies.
├─ [email protected]
. . .
[[email protected] reactApp]#
В корне нашего проекта создаём файл .babelrc со следующим содержимым:
{
"presets": ["env"]
}
Папка public
Нам необходима папка public, в которую мы поместим файл index.html. Сюда же мы поместим папку vendor с подпапками css и js, в которой разместятся файлы библиотек bootstrap и jquery.
Резонный вопрос: зачем нам jquery, если мы собрались использовать react?
Ответ простой, он нужен для полноценной работы bootstrap.
Итак, продолжим:
[[email protected] reactApp]# mkdir public
[[email protected] reactApp]# mkdir public/vendor
[[email protected] reactApp]# mkdir public/vendor/css
[[email protected] reactApp]# mkdir public/vendor/js
[[email protected] reactApp]#
Идем на ресурс https://getbootstrap.com/ и скачиваем архив с последней версией bootstrap. В данном случае доступна только что вышедшая v4.0. Распаковываем архив и копируем все файлы из папки css в папку public/vendor/css, содержимое папки js соответственно в public/vendor/js.
Дополнительно устанавливаем в public/vendor/js jquery-3.3.1.min.js и popper.min.js. Эти файлы необходимы для нормальной работы bootstrap. Для этого в командной строке выполняем следующие команды:
[[email protected] reactApp]# cd public/vendor/js
[[email protected] js]# wget https://unpkg.com/popper.js/dist/umd/popper.min.js
. . .
2018-02-08 11:00:38 (664 KB/s) - «popper.min.js» сохранён [19188/19188]
[[email protected] js]# wget https://code.jquery.com/jquery-3.3.1.min.js
. . .
2018-02-08 11:02:00 (1,15 MB/s) - «jquery-3.3.1.min.js» сохранён [86927/86927]
[[email protected] js]#
Ну вот, все необходимые файлы получены.
Осталось скопировать в папку public файлы из созданного ранее командой create-react-app проекта. Это три файла: favicon.ico, manifest.json и index.html. Последний мы слегка "причесываем", удалив лишнее.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
<link rel="stylesheet" href="%PUBLIC_URL%/vendor/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div id="root"></div>
</div>
<script src="%PUBLIC_URL%/vendor/js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/vendor/js/popper.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/vendor/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
Есть некоторые сомнения в необходимости файлов favicon.ico и manifest.json, но пока оставим все как есть.
Вот это сделано специально:
<div class="container">
<div id="root"></div>
</div>
Таким образом мы сможем проверить работу нашего react-приложения в связке с bootstrap.
Папка src
Остался последний штрих - проверка работоспособности нашего приложения. Переходим в корень нашего проекта и создаём папку src и в файл index.js:
[[email protected] js]# cd ../../.. {/* переходим в корень проекта */}
[[email protected] reactApp]# mkdir src
[[email protected] reactApp]# touchsrc/index.js
[[email protected] reactApp]#
В только что созданный файл index.js добавляем следующее содержимое:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Проверка работоспособности
И обязательно проверяем содержимое package.json. Оно должно быть приблизительно следующего содержания:
{
"name": "reactApp",
"version": "0.0.1",
"description": "React Application",
"main": "index.js",
"author": "Dusty Attic",
"license": "MIT",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "^1.1.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Если это не так, то необходимо отредактировать содержимое.
Осталось убедиться в работоспособности приложения. Для этого в корне проекта выпоняем команду:
npm start
или
yarn start
Все должно работать!
Сборка production
Сконфигурируем на пробу production-сборку нашего приложения:
npm run build
Ранее я установил пакет serve командой:
npm install -g serve
и теперь проверим работу нашего приложения в виде production-сборки:
[[email protected] reactApp]# serve -s build
┌───────────────────────────────────────────────────┐
│ │
│ Serving! │
│ │
│ - Local: http://localhost:5000 │
│ - On Your Network: http://192.168.0.253:5000 │
│ │
│ Copied local address to clipboard! │
│ │
└───────────────────────────────────────────────────┘
И в данном случае все работает!
Изменение порта
Чтобы сменить стандартный порт 3000 на необходимый нам 8081 (привычка - вторая натура!), создаем в корне проекта файл .env и вписываем туда строку:
PORT=8081
Этого достаточно. При следующем выполнении программа будет выполнена по адресу: http://localhost:8081
Подведём черту
Конечно, с помощью create-react-app создание основы для react-приложения выполняется не в пример легче, и в дальнейшем я предпочту все-таки именно create-react-app вышеописанному способу.
Несмотря на факт, что наша программа работает, следует признаться, что все было не так гладко, как описано выше. Были некоторые нестыковки, возможно, была проделана какая-то лишняя работа, без чего-то можно было бы обойтись. Тем не менее все заработало, и определённый опыт мы все-же получили.
На этом всё!