ameon_react

Перейти на страницу: Проекты

Шаг 1 - Инициализация проекта на шаблоне typescript

1. Переходим в папку с проектами

   1

   proj

2. Создадим пустую папку

   1	mkdir ameon_react

3. Откроем проект с помощью VSCode

   1	code ameon_react

4. Создаем проект на typescript с помощью шаблона

   1	yarn create vite . --template react-ts

Шаг 2 - Запуск приложения

1. Запустим приложение и посмотрим как оно работает в браузере

   1

   yarn dev

Шаг 3 - Подготовка

1. Заменим содержимое файла /src/App.tsx на

   1 2 3 4 5 6 7

   const App = () => { return ( <h1>Hello World!</h1> ) } export default App;

2. Создадим папку для стилей

   1	mkdir src/styles

3. Переместим в созданную папку styles файл index.css

   1	mi src/index.css src/styles/index.css

4. И обновим import в файле main.tsc

   1	import './styles/index.css'

5. Очистим файл index.css от стилей

Шаг 4 - Установка tailwindcss

1. Устанавливаем tailwindcss, postcss, autoprefixer

   1	yarn add -D tailwindcss postcss autoprefixer

2. В папке src создадим папку для стилей styles и в

   1	yarn add -D tailwindcss postcss autoprefixer

3. Генерируем конфигурационные файлы

   1	npx tailwindcss init -p

4. Настраиваем пути к шаблонам

   1 2 3 4 5 6 7 8 9 10 11

   /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

5. Добавим директивы CSS в файл /src/style/index.css

   1 2 3

   @tailwind base; @tailwind components; @tailwind utilities;

Шаг 5 - Установка sass

1. Установим sass в dev

   1	yarn add -D sass

Шаг 6 - Подключаем библиотеку для сброса стилей

1. Установим normalize.css в dev зависимости

   1	yarn add -D normalize.css

2. Создадим файл global.scss для глобальных стилей

   1	ni src/styles/global.scss

3. Подключим файл global.scss в файле main.tsx

   1	import "./styles/global.scss"

4. Импортируем normalize.css в файле global.scss

   1	@import "normalize.css";

Шаг 7 - Установка Ant Design

1. Подключаем библиотеку Ant Design

   1	yarn add antd

2. Подключаем стили в файле точки входа main.tsx

   1	import "antd/dist/antd.css";

3. Устанавливаем библиотеку с иконками

   1	yarn add @ant-design/icons

Шаг 8 - Отключим строгий режим в файле main.tsx

import "./styles/index.css"
import "./styles/global.scss"
import "antd/dist/antd.css";
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <App />
)

Шаг 9 - Маршрутизация

1. Установим React Router

   1	yarn add react-router-dom@6

2. Импортируем библиотеку в файле точки входа main.tsx

   1	import { BrowserRouter } from "react-router-dom"

3. В этом же файле оборачиваем наше приложение в

   1 2 3

   <BrowserRouter> <App /> </BrowserRouter>

4. Далее создадим файл для маршрутизации

   1 2 3

   <BrowserRouter> <App /> </BrowserRouter>

routes.tsx

Шаг 10 - Установка Redux

1. Установим React Router

   1	yarn add react-redux

1. Запуск на определенному порту

   1	vite --port 3007