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


Apr 21, 2024

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

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

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

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

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

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

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

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

  1. Установка React и ReactDOM с помощью npm:
npm install react react-dom

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

  1. Установка различных пакетов для Babel и Parcel в проекте:
npm install --save-dev parcel-bundler @babel/preset-typescript @babel/preset-react @babel/preset-env @babel/core

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

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

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

  1. Добавление настроек пресетов в файл .babelrc.json:
{
    "presets": [
        "@babel/preset-env",
       ["@babel/preset-react", {"runtime": "automatic"}]
    ]
}

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

  1. Добавление скрипта start в package.json:
"scripts": {
	"start": "parcel index.html --open"
}

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

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

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

  1. Добавление файла 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 приложения.

  1. Создание файла App.tsx:
import React from 'react';

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

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

  1. Создание файла 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 на странице.

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

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