Admin / Central Dashboard made in react
- In the terminal run
npx create-react-app ./
-
Install the Material Icons
yarn add @material-ui/icons
yarn add @material-ui/core
-
Install recharts
yarn add recharts
-
Clean application directories by removing the files we don't need from the public directory
-
Install the fonts from google fonts and copy them in index.html
-
In index.js delete the imports for the file that we're deleted before
1. TopBar
a. Create Topbar.jsx - we are using JSX because it's more easier to use html inside of the components.
b. Topbar.jsx - Type in rfc - this is a special command for React, which can be installed from the VS Extension tab. It's called ES7 React/Redux
Your code should look like:
import React from 'react'
export default function Topbar() {
return (
<div>Topbar</div>
)
}
c. App.js - Import the Topbar component in App.js
import Topbar from './components/topbar/Topbar'
function App() {
return (
<div>
<Topbar/>
</div>
)
}
export default App;
d. topbar.css - inside the topbar folder create a new file topbar.css
e. Topbar.jsx - import the topbar.css file created
import './topbar.css'
1. Reports with webdata-rocks
Install yarn add webdata-rocks
Create Report.jsx and add code :
import React from 'react'
import * as WebDataRocksReact from 'react-webdatarocks';
import "./reports.css"
import 'webdatarocks/webdatarocks.css'
export default function Reports() {
return (
<div className="reports">
<div className="App">
<WebDataRocksReact.Pivot
toolbar={true}
componentFolder="https://cdn.webdatarocks.com/"
width="100%"
report="https://cdn.webdatarocks.com/reports/report.json"
/>
</div>
</div>
)
}
-
Unreachable code no-unreachable in App.js and the Topbar.jsx component is not loading in the App.js screen
Possible you forgot to add the parenthesis's to the return () -
react-router-dom
Please install the [email protected] instead of the latest version of react-router-dom -
yarn add @mui-material
You might have an error regarding the material ui icons,
Install the @mui-material package as well because the latest version was renamed to mui from material -
Can't resolve '@mui/data-grid'
Import asimport { DataGrid } from "@mui/x-data-grid";
-
The users page is not showing up
In the userList.jsx import the DataGrid from material-uiimport { DataGrid } from "@material-ui/data-grid";
-
The Users and Products pages etc from the sidebar are not routing when clicked but work on direct link
Have [email protected] installed
Add this code into your index.js
The problem is the ReactDOM component which is created by default
Wrap your component in BrowserRouter and it should work
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
- Netlify Deploy Fail with error
Can't resolve '@emotion/styled
Creating a process.env and adding CI=true; - meaning Continous Integration to detect which build is locally and which one is executing in a CI environment.