- Internationalization loading files from backend with i18next
- Easy to add new routes
- Easy to add new menus
- Create a CRUD very easy
- Forms such as Sign in, Sign up and Recovery password, connected with the store
- React (Create React App)
- Rematch
- React Router v5
- Ant Design
- Less for Ant Design customization
- Axios
git clone https://github.com/miguelcast/cra-init-dashboard.git
yarn
or
npm install
yarn start
or
npm start
src
|-- components
| |-- Crud
| | |-- Form.js
| | |-- index.js
| | |-- List.js
| | |-- typeForms.js
| | |-- DateTableFilter.js
| | |-- SearchTableFilter.js
| | `-- hooks.js
| |-- Auth
| | |-- index.js
| | |-- hooks.js
| | |-- Register.js
| | `-- Login.js
| |-- Shared
| | |-- Title.js
| | |-- index.js
| | `-- ChangeLanguage.js
| `-- Layout
| |-- Logo.js
| |-- index.js
| |-- hooks.js
| |-- MenuHeader.js
| |-- MenuPrimary.js
| |-- Header.js
| `-- HeaderUser.js
|-- img
| `-- logo.png
|-- registerServiceWorker.js
|-- utils
| `-- general.js
|-- models
| |-- home.js
| |-- index.js
| `-- auth.js
|-- config
| |-- services.js
| |-- routes.js
| |-- constants.js
| |-- menus.js
| |-- store.js
| |-- cruds
| | `-- user.js
| `-- localization
| |-- antdLocale.js
| `-- i18n.js
|-- index.js
|-- services
| |-- auth.js
| `-- instance.js
|-- styles
| |-- auth.less
| |-- title.less
| |-- index.less
| |-- table.less
| `-- layout.less
`-- pages
|-- Form.js
|-- Register.js
|-- Login.js
|-- List.js
|-- 404.js
|-- Layout.js
|-- About.js
|-- Home.js
`-- ForgotPassword.js
Adding routes, modify src/config/routes.js file:
import { LOGGED, GUEST } from './constants';
import Home from './pages/Home';
import Login from './pages/login';
import List from './pages/List';
export default [
createRoute('/', Home, null, true),
createRoute('/login', Login, GUEST),
createRoute('/list', List, LOGGED),
];This example shows you how config you routes using the function createRoute, this function receives a string as the first parameter with the URL route, the second parameter is a React Component, the third parameter must be a string with a value of "logged" to show that component when the user is logged in or "guest" when the user is not logged in or null when both apply, the fourth parameter is a boolean type, which is the same as "exact" in React Router.
Code Splitting:
const AsyncAbout = lazy(() => import('../pages/About.js'));
export default [
createRoute('/about', AsyncAbout),
];Adding menus, modify src/config/menus.js file:
const menus = {
primary: [
createMenu(
'/', // (string) URL to navigate (previously configured in the routes )
'Home', // (string) Title
'home', // (string) Icon name from https://feathericons.com/
GUEST // (string "logged" or "guest") The same as explained in the paragraph above
),
],
header: [
createMenu('/register', 'Register', 'user', GUEST),
createComponent(
() => HeaderUser, // (function () return ReactElement) Render this component in the menu
LOGGED // The same as createMenu
),
],
};For custom Ant Design styles, modify src/styles/index.less, the Less variables that you can modify here.
Do not import axios directly but import the instance of axios from api/instance.js.
For Url API config add Key REACT_APP_API to .env files.
REACT_APP_API=http://localhost/my-api
MIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent