Создание базового приложения react

Заметки для себя

Итак, у меня уже установлены npm, yarn и create-react-app. И я даже неоднократно в процессе изучения попробовал create-react-app для создания базового приложения. Легче не бывает.

Начало

Пробуем создание базового приложения с помощью yarn.

[root@devel ReactJS]# mkdir reactApp
[root@devel ReactJS]# cd reactApp
[root@devel 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.
[root@devel reactApp]# 

 Тоже очень просто.

Смотрим что у нас в каталоге.  Один единственный файл - package.json.

{
"name": "reactApp",
"version": "0.0.1",
"description": "React Application",
"main": "index.js",
"author": "Dusty Attic",
"license": "MIT"
}

Тоже не впечатляет.

Зависимости

Но большего, собственно, и не нужно. Добавляем самое необходимое:

[root@devel 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.
├─ asap@2.0.6
├─ core-js@1.2.7
├─ encoding@0.1.12
├─ fbjs@0.8.16
├─ iconv-lite@0.4.19
├─ is-stream@1.1.0
├─ isomorphic-fetch@2.2.1
├─ js-tokens@3.0.2
├─ loose-envify@1.3.1
├─ node-fetch@1.7.3
├─ object-assign@4.1.1
├─ promise@7.3.1
├─ prop-types@15.6.0
├─ react-dom@16.2.0
├─ react@16.2.0
├─ setimmediate@1.0.5
├─ ua-parser-js@0.7.17
└─ whatwg-fetch@2.0.3
Done in 3.91s.
[root@devel reactApp]#

 В package.json ниже "license": "MIT" добавились зависимости:

  . . .
"dependencies"
: {
"react": "^16.2.0",
"react-dom": "^16.2.0"
}

 А также в папке с будущим приложением добавился каталог node_modules, в котором в числе прочих папок, присутствуют установленные нами react и react-dom.

Устанавливаем дополнительно react-srcipts а он, в свою очередь, "подтянет" и все необходимое:

[root@devel reactApp]# yarn add react-scripts
yarn add v1.3.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.1.3: The platform "linux" is incompatible with this module.
info "fsevents@1.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.1.2: The platform "linux" is incompatible with this module.
info "fsevents@1.1.2" 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.
├─ abab@1.0.4
. . .
[root@devel reactApp]# 

 В корне нашего проекта создаём файл .babelrc со следующим содержимым:

{
"presets": ["env"]
}

Папка public

Нам необходима папка public, в которую мы поместим файл index.html. Сюда же мы поместим папку vendor с подпапками css и js, в которой разместятся файлы библиотек bootstrap и jquery.

Резонный вопрос: зачем нам jquery, если мы собрались использовать react?

Ответ простой, он нужен для полноценной работы bootstrap.

Итак, продолжим:

[root@devel reactApp]# mkdir public
[root@devel reactApp]# mkdir public/vendor
[root@devel reactApp]# mkdir public/vendor/css
[root@devel reactApp]# mkdir public/vendor/js
[root@devel 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. Для этого в командной строке выполняем следующие команды:

[root@devel reactApp]# cd public/vendor/js
[root@devel 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]
[root@devel 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]
[root@devel 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:

[root@devel js]# cd ../../..        {/* переходим в корень проекта */}
[root@devel reactApp]# mkdir src
[root@devel reactApp]# touch src/index.js
[root@devel 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-сборки:

[root@devel 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 вышеописанному способу. 

Несмотря на факт, что наша программа работает, следует признаться, что все было не так гладко, как описано выше. Были некоторые нестыковки, возможно, была проделана какая-то лишняя работа, без чего-то можно было бы обойтись. Тем не менее все заработало, и определённый опыт мы все-же получили.

На этом всё!