React template

Реакт

import React, { Component } from 'react';

REDUX

npm install redux

npm install react-redux;

Redux Toolkit устанавливается как стандартный NPM пакет.

npm install @reduxjs/toolkit react-redux

Если вы инициализируете создание стартовых файлов приложения используя Create React App, без заранее заготовленного шаблона проекта, как например для домашних работ, в таком случае стоит использовать официальный шаблон. Для этого команде npx create-react-app нужно передать флаг --template со значением redux.

npx create-react-app my-app --template redux

Axios

npm i axios

Стайл компоненты

npm install --save styled-components

import styled from 'styled-components';

Проп тайпс

import PropTypes from 'prop-types';

Реакт-Роутер

npm install react-router-dom

import { Routes, Route } from "react-router-dom";

Все что необходимо сделать, это обернуть компонентом BrowserRouter все приложение.

<BrowserRouter basename="/your_repo_name/">
  <App />
</BrowserRouter>

Импорт Иконок

npm install react-icons --save

import { Имя иконки} from "react-icons/io";

Добавлять уведомления в приложение

Toastyfy

npm i react-toastify

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Notiflix

npm i notiflix

import Notiflix from 'notiflix';

Nano ID

npm i nanoid

import { nanoid } from 'nanoid';

ThemeProvider

В index.js

import { ThemeProvider } from 'styled-components';
import { theme } from './Utils/Theme';

// и покрываем APP в 
<ThemeProvider theme={theme}></ThemeProvider>

Loader spiner

npm i react-loader-spinner

import { Blocks } from 'react-loader-spinner'
// в разметке:
<Blocks
  visible={true}
  height="80"
  width="80"
  ariaLabel="blocks-loading"
  wrapperStyle={{}}
  wrapperClass="blocks-wrapper"
/>

выбрать спинер можно здесь.

Аватарки юзера

npm i react-avatar

import Avatar from 'react-avatar';

<Avatar name="{name}" />

Bootstrap

npm install react-bootstrap bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'; // в индекс.js

Getting Started Bootstrap link.