Пятая часть технической части моей серии для младших разработчиков. О себе: я родом из нетрадиционных компьютерных наук, являюсь активистом и сторонником борьбы за разнообразие и включение в технологическое пространство. Я веду блог на технические темы, связанные с JavaScript, ReactJS, а также на социально-политические темы, такие как включение технологий.

Система React Eco глубока. Я начал изучать React в 2016 году, как раз тогда, когда библиотека JavaScript привлекала к себе большое внимание. Я посетила курс Girl Develop It, который был потрясающим, И я потратил около 90% времени, просто впитывая термины, которые казались концептуально интуитивными. Итак, 2 года спустя я изучал React от новичка до опытного пользователя (определенно не на уровне эксперта… пока).

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

  1. Принцип единой ответственности
  2. Проверка типов
  3. Однонаправленный поток данных
  4. Компонентная архитектура

Моя цель в этом мини-приложении — закрепить и попрактиковаться в основах React. Поэтому я хочу тратить свое время на это, а не на концептуализацию приложения и реализацию оригинальных функций пользовательского интерфейса.

Шаг 1. Настройте сборку

Мне не хотелось тратить много времени на изучение Webpack и настройку моей сборки. Я хочу сразу приступить к созданию React, НО я не хотел использовать приложение Facebook Create React, потому что под капотом происходило слишком много вещей. Я также не чувствовал, что их конфигурация супер масштабируема. Поэтому я выбрал React-Redux Starter от Cory House, который является отличным вариантом, поскольку у меня есть доступ к соответствующему Учебнику по Pluralsight.

npm install

Пишите свои сценарии

"scripts": {
  "prestart": "babel-node tools/startMessage.js",
  "start": "npm-run-all --parallel test:watch open:src lint:watch",
  "open:src": "babel-node tools/srcServer.js",
  "lint": "node_modules/.bin/esw webpack.config.* src tools",
  "lint:watch": "npm run lint -- --watch",
  "test": "mocha --reporter progress tools/testSetup.js \"src/**/*.test.js\"",
  "test:watch": "npm run test -- --watch"
}

Что происходит ^^? Что мне нравится в этой сборке, так это то, что она облегчает мою жизнь. Скрипт prestart показывает мне, что сервер Webpack работает. Команда start использует пакет npm под названием npm-run-all, который позволяет мне параллельно запускать все мои сценарии, включая линтинг, тесты, его наблюдатели и веб-пакет, довольно мощный.

В следующем выпуске мы поговорим о маршрутизации и архитектуре на основе компонентов.