Создаём минимальное React приложение с TypeScript 5.4.5

Apr 21, 2024

Создаём минимальное React приложение с TypeScript 5.4.5

Эти шаги описывают процесс установки и настройки React-приложения с использованием TypeScript, Parcel и Babel для сборки и разработки.

Создание новой директории newapp:

mkdir newapp

Создается директория newapp для вашего нового проекта.

Переход в созданную директорию:

cd newapp

Вы переходите в директорию newapp, где будет разрабатываться ваш проект.

Инициализация проекта npm с использованием параметра -y для создания файла package.json по умолчанию:

npm init -y

Это инициирует ваш проект с настройками по умолчанию, создавая файл package.json.

Установка React и ReactDOM с помощью npm:

npm install react react-dom

Реакт и ReactDOM устанавливаются в ваш проект как зависимости.

Установка различных пакетов для Babel и Parcel в проекте:

npm install --save-dev parcel-bundler @babel/preset-typescript @babel/preset-react @babel/preset-env @babel/core

Эти пакеты устанавливаются как зависимости разработки для обработки TypeScript, React и других современных функций JavaScript.

Создание файлов .babelrc.json и babel.rc:

touch .babelrc.json

Эти команды создают файлы конфигурации Babel-а для вашего проекта.

Добавление настроек пресетов в файл .babelrc.json:

{
    "presets": [
        "@babel/preset-env",
       ["@babel/preset-react", {"runtime": "automatic"}]
    ]
}

Задаются настройки пресетов для Babel в формате JSON.

Добавление скрипта start в package.json:

"scripts": {
	"start": "parcel index.html --open"
}

Этот скрипт будет запускать Parcel для вашего проекта, открывая страницу в браузере.

Создание директории src:

mkdir src

Создается директория src, где будут храниться исходники вашего приложения.

Добавление файла index.html:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React and Parcel</title>
  </head>

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

Этот HTML файл представляет вашу основную страницу для отображения React приложения.

Создание файла App.tsx:

import React from 'react';

const App = () => (
  <h1>React and Parcel project</h1>
);
export default App;

Этот файл содержит компонент React App, который будет отображаться на странице.

Создание файла index.tsx:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';

const root = createRoot(document.getElementById('app'));
root.render(<App />);

Этот файл использует ReactDOM для отображения компонента App в указанном элементе app на странице.

Запуск проекта с помощью команды npm start:

npm start

Эта команда запустит ваш проект, используя Parcel в качестве сервера разработки.