Чек-лист первичной конфигурации React

Опубликовано автором

Установка React глобально

sudo npm i -g react --force

Создание проекта в текущей директории

npx create-react-app .

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

npx create-react-app my_project

для просмотра в браузере выполнить команду

npm run dev
npm run start

забилдить

npm run build

готовый проект для публикации располагается в папке: build

 

указать порт для npm start:

открыть файл package.json на редактирование, изменить параметр scripts.start на:

...
  "scripts": {
    "start": "PORT=3001 react-scripts start",
...

 

Tailwind CSS

Документация по Tailwind: https://tailwindcss.com/docs/

установка

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Открыть файл tailwind.config.js и в content добавить «./src/**/*.{js,jsx,ts,tsx}», пример:

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

В начало файла ./src/index.css добавить:

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

 

Bootstrap

Документация по компонентам: https://react-bootstrap.github.io/components/alerts/

установка

npm install react-bootstrap bootstrap

подключение стилей к App.js

import 'bootstrap/dist/css/bootstrap.min.css';

примеры подключения компонентов

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';
import Dropdown from 'react-bootstrap/Dropdown'

//...
                        <Dropdown>
                            <Dropdown.Toggle
                                variant='success'
                                id={'dropdown-' + row.id}
                            >
                                {<FontAwesomeIcon icon={faEllipsisVertical} />}
                            </Dropdown.Toggle>
                            <Dropdown.Menu>
                                <Dropdown.Item
                                    onClick={() => props.setPage(<props.editPage
                                        objId={row.id}
                                        setPage={props.setPage}
                                    />)}
                                >
                                    Изменить
                                </Dropdown.Item>
                            </Dropdown.Menu>
                        </Dropdown>

//...

 

Перейти с CSS на SCSS

установить модуль sass:

npm install sass

переименовать файл App.css в App.scss

изменить в файле App.js import ‘./App.css’; на import ‘./App.css’;

 

FontAwesome

поиск иконок: https://fontawesome.com/icons

установка пакета ядра:

npm i --save @fortawesome/fontawesome-svg-core

установка пакетов бесплатных иконок:

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons

установка Font Awesome React Component

npm i --save @fortawesome/react-fontawesome@latest

импорт на примере иконок «fa-solid fa-warehouse» и «fa-solid fa-house»

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouse, faWarehouse } from '@fortawesome/free-solid-svg-icons'

// ...
            <div className="Lk-nav">
                <div className='Lk-nav-logo'>
                    HoverHost
                </div>
                <ul>
                    <li className='hover:text-teal-300'>
                        <FontAwesomeIcon icon={faHouse} />
                        <span>Домены</span>
                    </li>
                    <li className='hover:text-teal-300'>
                        <FontAwesomeIcon icon={faWarehouse} />
                        <span>Хостинг</span>
                    </li>
                </ul>
            </div>
// ...

в результате: