Это 8-й урок из серии «Основы программирования».
Я научу вас быстро и быстро, как использовать React, TypeScript и Webpack вместе.
Предпосылки: убедитесь, что вы поняли предыдущие семьуроков. Если вы их не читали, то загляните. Все лекции вы найдете на codegodzilla.com
Кстати ты потрясающий! ❤️ Читать дальше.
Шаг 1/3 — установка кода
Чтобы все прошло гладко, давайте удостоверимся, что у нас одинаковый код.
Стартовый код для этого урока вы найдете по адресу https://github.com/programming-online-courses/lbs-to-kg/tree/beginning-of-lesson-8/client.
- Филиал
beginning-of-lesson-8
/client
папка- Краткое руководство по среде разработки находится в
/client/README.md
В итоге:
npm install npm run start:dev
Шаг 2/3 — туториал «Hello World» в React
Если вы не знаете, как использовать React, в Интернете есть тысячи руководств. Поэтому я не буду сейчас углубляться в глубины React.
Кстати, как я узнал, я только что прочитал всю официальную документацию React: https://reactjs.org/docs/hello-world.html
Быстрые шаги:
- Удалите
app.ts
иutils.ts
, потому что это устаревшие файлы из предыдущих уроков. - Установить зависимости
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.json
file. Самый упрощенный файл tsconfig выглядит следующим образом:
// tsconfig.json { "compilerOptions": { "jsx": "react" }
5. Выполните: npm run start:dev
— он должен открыть веб-сайт в вашем браузере и отобразить приложение с тегом h1: «Hello world».
Шаг 4/3. Делаем его более интересным: типы TS
Ваш код работает, но давайте добавим еще немного кода TypeScript.
- Файл обновления
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
Мир 🍀
Я хочу иметь положительное влияние на мир. Следуйте за мной, чтобы помочь :)