React + Antd + Redux Boilerplate

Boilerplate was bootstrapped with Create React App

This boilerplate lets you easily start project with React, Redux, Antd and etc. tools included and configured.

Included:

• Redux - state container
• Redux Starter Kit - for simple redux boilerplate handle
• Redux thunk - Thunk middleware for Redux
• Reselect - Selector library for Redux
• Antd - React UI Library
• React Router Dom - Routing
• history - Manage session history with JavaScript
• Axios - Promise based HTTP client for the browser and node.js
• React Hook Form - Performant, flexible and extensible forms with easy to use for validation.
• i18next - internationalization-framework
• react-i18next - Higher order component and append i18next to context.
• i18next-browser-languagedetector - language detector used in browser environment for i18next
• framer-motion - React library to power production-ready animations.
• react-transition-group - simple components useful for defining entering and exiting transitions.
• node-sass - Node.js bindings to libsass
• moment - Parse, validate, manipulate, and display dates and times in JavaScript.
• prop-types - Runtime type checking for React props and similar objects
• react-icons - Include popular icons in your React projects
• react-text-mask - input mask library
• @sweetalert/with-react - Declarative SweetAlert in React
• universal-cookie - Load and save cookies within your React application
• @craco/craco - Create React App Configuration Override
• craco-antd - A craco plugin to use Ant Design with create-react-app

Getting Started

Clone repo

git clone https://github.com/Haqverdi/react-antd-boilerplate

Make it your own

rm -rf .git

git add remote ...

Install dependencies

npm install

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

npm test

Launches the test runner in the interactive watch mode.

npm run build

Builds the app for production to the build folder.

npm run eject

It will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

Folder Structure

.
├── public                  # Public folder
├── src                     # Source files
  ├── components            # React Components
    ├── SomeComponent       # Component folder
      ── SomeComponent.js   # Component file
    ── index.js             # Components root
  ├── assets                # Assets(images, icons)
  ├── containers            # eg. Pages (contains multiple components, control main flow)
    ├── Home                # ex. Home page (/home)
      ── index.js           # Home Route(page) main file
  ├── hooks                 # Custom `hooks`
  ├── context               # Context files (If used)
  ├── i18n                  # Localization
  ├── store                 # Redux store
    ├── actions             # actions folder
      ├── auth              # auth actions folder
        ── index.js         # auth actions file
    ├── constants           # constants folder
    ├── middleware          # middlewares folder
    ├── reducers            # reducers folder
      ├── auth              # auth reducers folder
        ── index.js         # auth reducer file
     ── apiConfig.js        # axios config (base route and etc.)
     ── index.js            # main store configure file
  ├── theme                 # Theme files(main.scss, antd.customize.less and etc.)
  ├── utils                 # Utils (helpers)
  ── App.js                 # Authorized App
  ── UnAuthorizedApp.js     # UnAuthorized App
  ── Routes.js              # main routes
  ── serviceWorker.js       # CRA servceWorker
  ── index.js               # root file
├── .prettierrc             # Prettier config file
├── package.json
└── README.md