Project: Material-UI Dashboard > App Refactor

App Refactor

(Note: We have now hidden irrelevant files in the IDE file tabs)

As you can tell, we've now dramatically shrunk App.js by pulling components out into their own files.

Let's start with a simple component: Copyright. We've moved this to a Copyright.js file. We're simply copy and pasting the function and moving it to it's own file in the same directory. We also need to import Typography and the Link component which are used to link to your website.

Next, we moved Appbar and Drawer into their own files. However, we have to do a little refactoring since AppBar and Drawer both share toggleDrawer and open (in addition to drawerWidth). This is an opportunity to pass props into these new components we've abstracted out into new files. For AppBar, we now are calling this AppBarStyled, and wrap it in a new component called AppBar. Then, we pass the props we need into this new component, and AppBar can be exported as default. The same strategy happens for Drawer. We also need to import the relevant @mui components for these files. You'll also notice that we import drawerWidth instead of passing it as a prop. The reason being these contain references to React hook state values, which can only live inside functional components, whereas a static numeric value can be exported at the top of the file.

We also pull out all the markup inside the main content, which we render as MainContent. It does not require props.

Lastly, we keep the drawer toggling state management in the App for now.

Lesson 3/6

import React, { useState } from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";

import AppBar from "./AppBar";
import Drawer from "./Drawer";
import MainContent from "./MainContent";

export const drawerWidth = 240;

const mdTheme = createTheme();

function App() {
  const [open, setOpen] = useState(true);
  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <ThemeProvider theme={mdTheme}>
      <Box sx={{ display: "flex" }}>
        <CssBaseline />
        <AppBar toggleDrawer={toggleDrawer} open={open} />
        <Drawer toggleDrawer={toggleDrawer} open={open} />
        <MainContent />
      </Box>
    </ThemeProvider>
  );
}

export default App;

Open Sandbox