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

Все публикации этой серии:
Часть 1: Введение
Часть 2: Инициализация и первый файл
Часть 3: Использование синтаксиса ES2015
Часть 4: Применение руководства по стилю
Часть 5: Настройка сервера Express
Часть 6: Использование модуля сборки модулей
Часть 7 : Настройка React и лучшие практики
Часть 8: Настройка Redux
Часть 9: Настройка React Router
Часть 10: TDD и настройка Jest

Инициализация приложения

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

$ npm init

Интерфейс командной строки задаст вам несколько вопросов о вашем новом проекте, поэтому введите правильную информацию в каждое поле.

Примечание. Будьте любезны со своими коллегами-разработчиками и не нажимайте клавишу Enter несколько раз, введите что-нибудь значимое, хорошо?

Вероятно, вы привыкли запускать приложение, запустив npm start в окне терминала, но если вы попробуете это сейчас, вы получите сообщение об ошибке. Это просто потому, что вы не определили сценарий «start» в файле package.json, поэтому добавьте его:

{
  ...
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}

Вам не нужно пока беспокоиться о «тестовом» скрипте, мы изменим его позже. Создайте файл index.js в корне каталога проекта:

/**
 * index.js
 */
console.log('Hello, world!');

Если вы запустите npm start сейчас, сообщение «Hello, World!» Будет записано на консоль в окне терминала.

О npx

Лучший сценарий для нового разработчика, работающего над вашим проектом, - это клонировать проект, затем запустить npm install, а затем npm start, и все должно работать, но в определенных ситуациях ваш проект будет зависеть от модулей, которые необходимо установить глобально, таких как Bower, Gulp, Webpack, Jest и другие.

Проблема здесь в том, что глобальные модули не указаны в package.json как зависимости, и вам придется перечислить эти зависимости в документации проекта.

Вы можете обойти эту проблему, используя локально установленные двоичные файлы в ./node_modules/.bin. Лучше использовать npx, инструмент, позволяющий выполнять двоичные файлы пакета npm.

Как это используется

Обычно, если вы хотите запустить двоичный файл, который установлен локально вместе с вашим проектом, а не глобально на машине, вы должны сделать это:

$ ./node_modules/.bin/webpack --config config.js

Но с npx вы просто сделаете это:

$ npx webpack --config config.js

Аккуратно, правда? Давайте посмотрим, как вы можете заставить это работать на вашем компьютере, если он еще не работает.

Установка

Пакет npx доступен по умолчанию, если у вас npm 5.2 или новее. Выполните следующую команду, чтобы убедиться:

$ which npx

Если у вас еще не установлен npx, установите его из npm:

$ npm install -g npx

В этой серии

В этой серии сообщений мы будем использовать npx вместо того, чтобы устанавливать какие-либо модули глобально. Если вы хотите узнать больше о npx, ознакомьтесь с этой статьей.

Файл конфигурации редактора

Конфигурационный файл редактора помогает определять и поддерживать согласованные стили кодирования между различными редакторами и IDE, и он доступен для чтения всеми популярными редакторами кода, включая Sublime Text, Atom и VSCode.

Это должен быть первый файл, который вы создаете в каталоге приложения всякий раз, когда вы начинаете новый проект со своей командой. Идите вперед и создайте файл .editorconfig в корневом каталоге проекта.

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

root = true
# General settings for whole project
[*]
indent_style = space
end_of_line = lf
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
# Format specific overrides
[*.md]
max_line_length = 0
trim_trailing_whitespace = false

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

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

Теперь, когда мы инициализировали наше приложение, давайте включим синтаксис ES2015, установив первую зависимость в проекте - Babel. Перейдем к следующей части.

Заключение

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

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

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

Была ли эта статья полезной? Пожалуйста, нажмите кнопку Хлопать ниже или подписывайтесь на меня, чтобы узнать больше.

Спасибо за прочтение! Если у вас есть отзывы, оставьте комментарий ниже.

Переходите к части 3: Использование синтаксиса ES2015