Это 8-й урок из серии «Основы программирования».

Я научу вас быстро и быстро, как использовать React, TypeScript и Webpack вместе.

Предпосылки: убедитесь, что вы поняли предыдущие семьуроков. Если вы их не читали, то загляните. Все лекции вы найдете на codegodzilla.com

Кстати ты потрясающий! ❤️ Читать дальше.

Шаг 1/3 — установка кода

Чтобы все прошло гладко, давайте удостоверимся, что у нас одинаковый код.

Стартовый код для этого урока вы найдете по адресу https://github.com/programming-online-courses/lbs-to-kg/tree/beginning-of-lesson-8/client.

  1. Филиал beginning-of-lesson-8
  2. /client папка
  3. Краткое руководство по среде разработки находится в /client/README.md

В итоге:

npm install
npm run start:dev

Шаг 2/3 — туториал «Hello World» в React

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

Кстати, как я узнал, я только что прочитал всю официальную документацию React: https://reactjs.org/docs/hello-world.html

Быстрые шаги:

  1. Удалите app.ts и utils.ts, потому что это устаревшие файлы из предыдущих уроков.
  2. Установить зависимости
npm install react react-dom

3. Нам также нужны типы TypeScript. Итак, давайте установим их тоже

npm install @types/react @types/react-dom

4. Создадим простой файл index.tsx

// index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello world</h1>,
  document.getElementById('app')
);

5. Убедитесь, что идентификатор элемента такой же, как в index.html

// index.html
...
<body>
  <div id="app"></div>
  ...
</body>
...

6. Если попробовать запустить сейчас npm run start:dev то ничего не получится, нужно обновить конфиги webpack и TS.

Продолжим, вы почти у цели! 😙

Шаг 3/3 — Обновим конфигурационные файлы Webpack и TS

1. Во-первых, давайте убедимся, что ts-loader ищет правильные файлы. Расширение имени файла для файлов React, написанных на TypeScript, называется .tsx.

// webpack.dev.config.js
module: {
  rules: [
     ...
    { test: /\.tsx?$/, loader: "ts-loader" },
  ],
}

Сейчас ts-loader просматривает .ts , .tsx файлов.

2. Убедитесь, что компилятор вебпака ищет правильные файлы — для этого добавьте .tsx в массив extensions.

// webpack.dev.config.js
...
resolve: {
  ...
  extensions: ['.ts', ".js", '.tsx'],
},

3. Убедитесь, что путь входа указан правильно.

// webpack.dev.config.js
...
module.exports = {
  ...
  entry: './src/index.tsx'
  ...
}

4. И, наконец, нам нужно updatetsconfig.jsonfile. Самый упрощенный файл tsconfig выглядит следующим образом:

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react"
}

5. Выполните: npm run start:dev — он должен открыть веб-сайт в вашем браузере и отобразить приложение с тегом h1: «Hello world».

Шаг 4/3. Делаем его более интересным: типы TS

Ваш код работает, но давайте добавим еще немного кода TypeScript.

  1. Файл обновления index.tsx
// index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface Props {
  title: string;
}

const App = (props: Props) => {
  return <h1>{props.title}</h1>
}

ReactDOM.render(
  <App title={'hello world'}/>,
  document.getElementById('app')
);

Поздравляем, 🚀Теперь у вас есть навыки создания приложений с помощью Webpack, React и TypeScript.

Бонус: окончательный код

Окончательный код можно найти на Github, здесь 👈

Версии зависимостей

Версии зависимостей имеют значение, потому что одни версии могут не работать с другими.

Поэтому, чтобы быть уверенным, что этот туториал будет работать и в будущем, я перечисляю все версии:

"dependencies": {
  "react": "17.0.1",
  "react-dom": "17.0.1"
},
"devDependencies": {
  "typescript": "4.0.3",
  "@types/node": "14.11.1",
  "@types/react": "16.9.56",
  "@types/react-dom": "16.9.9",
  "@typescript-eslint/eslint-plugin": "4.3.0",
  "@typescript-eslint/parser": "4.3.0",
  "clean-webpack-plugin": "3.0.0",
  "copy-webpack-plugin": "6.2.1",
  "eslint": "7.10.0",
  "ts-loader": "8.0.4",
  "webpack": "4.44.2",
  "webpack-cli": "3.3.12",
  "webpack-dev-server": "3.11.0"
}

Как с помощью Webpack скомпилировать код, который работает и в старых браузерах?

Для этого вам нужно прочитать следующий урок. Все они перечислены на моем сайте codegodzilla.com.

Спросите меня о чем угодно в Twitter/codegodzilla

Мир 🍀

Я хочу иметь положительное влияние на мир. Следуйте за мной, чтобы помочь :)