Пятая часть технической части моей серии для младших разработчиков. О себе: я родом из нетрадиционных компьютерных наук, являюсь активистом и сторонником борьбы за разнообразие и включение в технологическое пространство. Я веду блог на технические темы, связанные с JavaScript, ReactJS, а также на социально-политические темы, такие как включение технологий.
Система React Eco глубока. Я начал изучать React в 2016 году, как раз тогда, когда библиотека JavaScript привлекала к себе большое внимание. Я посетила курс Girl Develop It, который был потрясающим, И я потратил около 90% времени, просто впитывая термины, которые казались концептуально интуитивными. Итак, 2 года спустя я изучал React от новичка до опытного пользователя (определенно не на уровне эксперта… пока).
Поэтому я решил создать собственное мини-приложение, чтобы практиковать основы React. Основные принципы программирования React:
- Принцип единой ответственности
- Проверка типов
- Однонаправленный поток данных
- Компонентная архитектура
Моя цель в этом мини-приложении — закрепить и попрактиковаться в основах 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
, который позволяет мне параллельно запускать все мои сценарии, включая линтинг, тесты, его наблюдатели и веб-пакет, довольно мощный.
В следующем выпуске мы поговорим о маршрутизации и архитектуре на основе компонентов.