Репозиторий Git: https://github.com/b-tiwari/react-ts-mobx-bootstrap

Специальная ветка Git для этого сообщения: https://github.com/b-tiwari/react-ts-mobx-bootstrap/tree/initial-setup-installations

Первоначальная установка и конфигурация

  1. Откройте свою рабочую папку в терминале / командном окне

Создайте папку проекта и cd к ней

mkdir react-ts-webpack
cd react-ts-webpack

2. Предполагая, что у вас установлена ​​пряжа (или вы используете npm), инициализируйте проект:

yarn init

Ответьте на заданные вопросы и в конце нажмите Enter. В папке будет создан package.json файл.

3. Начните установку зависимостей проекта:

yarn add react react-dom
yarn add [email protected] reactstrap@next
yarn add --dev typescript typings tslint
yarn add --dev @types/react @types/react-dom @types/reactstrap
yarn add --dev webpack  webpack-dev-server  html-webpack-plugin extract-text-webpack-plugin  raw-loader  css-loader  style-loader sass-loader  node-sass  url-loader  file-loader  awesome-typescript-loader

4. Мы будем следовать настройкам tslint AirBnB:

yarn add --dev tslint-config-airbnb

Добавьте tslint.json в корневую папку проекта (содержимое файла можно скопировать отсюда.)

5. Запустите команду tsc init, чтобы создать tsconfig.json, или просто создайте файл вручную в корневой папке проекта.

Добавьте ниже конфигурацию в tsconfig.json:

6. Настройка webpack.config.js

Добавьте папку webpack в корневую папку проекта и создайте в этой папке новый файл webpack.config.js с указанным ниже содержимым. (Изучите настройки Webpack)

7. Добавьте приведенный ниже сценарий в package.json:

....
"scripts": {
  "start":"webpack-dev-server -w --config webpack/webpack.config.js"
},
....

Написание кода приложения

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

1. Компонент React - приветствовать

Добавьте папку src в корневую папку проекта.
В папке src добавьте еще одну папку с именем components.
В components создайте файл компонента реакции - greet.tsx с приведенным ниже кодом:

Мы хотим использовать компоненты начальной загрузки Listgroup и ListGroupItem в указанном выше компоненте реакции. Следовательно, мы импортируем их из reactstrap (строка №2 выше).

2. Компонент Root React - app.tsx

Добавьте файл app.tsx в папку src с приведенным ниже кодом:

👆 в app.tsx мы импортировали компонент Greet, который мы создали в строке №6, предоставив ему его опору techs значение [‘React’, ‘Typescript’, ‘Webpack’, ‘Bootstrap’].

Также обратите внимание: мы импортировали bootstrap/dist/css/bootstrap.css (строка №1👆)

3. index.html

В папке src создайте index.html:

Момент истины

У нас есть все наши конфигурации и готовый исходный код базового реагирующего приложения, чтобы проверить, работает ли выбранный нами технологический стек React, Typescript и Webpack вместе:

В командной строке запустите команду yarn start. Если все прошло хорошо, вы должны увидеть, как webpack компилирует и упаковывает наше приложение, и webpack-dev-server должен обслуживать его через настроенный порт 2222:

Откройте URL-адрес http://localhost:2222 в своем браузере, и должна появиться страница ниже:

👏👏👏 У нас есть все необходимое для разработки приложения React с использованием Typescript, Bootstrap и упаковки с использованием Webpack.