Репозиторий Git: https://github.com/b-tiwari/react-ts-mobx-bootstrap
Специальная ветка Git для этого сообщения: https://github.com/b-tiwari/react-ts-mobx-bootstrap/tree/initial-setup-installations
Первоначальная установка и конфигурация
- Откройте свою рабочую папку в терминале / командном окне
Создайте папку проекта и 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.