Nesting your application inside <RapidMain />
<RapidMain /> component is the main component used for Scoffolding and Bootstrapping the RapidAdminReact® into your react app. All your components should be nested inside this component to get access to RapidAdminReact® features inside your app.
Usage
import React from 'react';
import { RapidMain , RapidRouter } from '../@rapidAdmin/components'
import routes from "../config/routes/routes";
let isAuth = true;
function App ()
{
return (
<RapidMain>
<RapidRouter routes = { routes } isAuth = { isAuth } />
</RapidMain>
);
}
export default App;
Note About RapidRouter: <RapidRouter /> makes routing with RapidAdminReact® super easy and manageable. It uses the react-router inside but avoids you of the painstaking task of setting the routes and redirecting the private routes. Read more about this in the Routing Section to understand how routing works.
RapidMain API
RapidMain component bootstraps the following by default into your application:
| Component | Library | Utility |
|---|---|---|
| CssBaseline | @material-ui/core | Inject the material ui CssBaseline component for entire container of the application. It is used for providing default props or style overrides at the theme level. You can read more about the CssBaseline component. Read More: CssBaseline |
| ThemeProvider | @material-ui/core | This component takes a theme property, and makes it available down the React tree thanks to the context. Read More: ThemeProvider You also have the ability to switch between the light and dark theme see how you can do this: Read More: Configuration |
| BrowserRouter or HashRouter | react-router-dom | All the react router routes and links can be nested under the BrowserRouter component. So once you nest your application under RapidMain component you don’t meed to use this component again. You also have a choice to switch between BrowserRouter and HashRouter Read More: Configuration |
| Provider | react-redux | Attaches the redux store to the entire application Read More: Provider |
store |
redux | This is the const used for the store using the redux createStore() method |
applyMiddleware |
redux | Function used to apply middleware to Redux |
composeWithDevTools |
redux-devtools-extension | Triggers Redux Development Tools into your react app. For more details refer to Redux Dev Tools Extension |
