React MUI Layout Components

React Material-UI (MUI) is a popular library that provides a set of reusable components for building user interfaces in React applications. These components are based on Material Design, a design system developed by Google that provides guidelines for creating visually appealing, user-friendly interfaces.

Layout components refer to a type of component that is used to organize the structure and layout of an application's UI. 

MUI provides various types of Layout Components:

Installing React App: Use this command to create React App:

npx create-react-app example

Installing the MUI library in our app:

Use this command to set/install the MUI library in our app:

npm install @mui/material @emotion/react @emotion/styled

Importing the material UI library:

import Box from '@mui/material/Box';

Project Structure: Now your project structure should look like the following:

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Example: Changing Box from being ‘div’ to another component.

import React from 'react';
import Box from "@mui/material/Box";
  
function App() {
    return (
        <div>
            <Box component='h2'>
                Hello GFG
            </Box>
        </div>
    );
}
  
export default App;

Output: