In order to follow along with this tutorial, you'll need a basic knowledge of HTML, CSS, and JavaScript/ES6. You should also know the fundamentals of React, which you can learn by reading Quick Start with React.
In this tutorial we will make a simple CRUD app. We will fetch users from the remote API and you will be able to add, update or delete them.
While implementing this app we will use:
Here is a diagram of what we will implement.
As you can see, here are two sections each with its own responsibility. One for create and edit user data and another for visualize the list of users.
First, let's a component responsible for all users data on the page.
components/users.js
import { Container } from '@mui/material';
export const Users = () => {
return (
<Container
maxWidth="md"
sx={{ margin: '20px auto' }}>
</Container>
);
}
The Container
component is used to center your content horizontally.
maxWidth="md"
: This sets the maximum width of the container. The md
value means that the maximum width is set to the value defined for medium-sized screens in Material-UI's theme. This is a way to make the component responsive.sx={{ margin: '20px auto' }}
: This is a shorthand for inline styles. sx
is a special property provided by Material-UI for customizing styles.Then, let's implement a component to render list of users.
components/users-table.js
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow
} from "@mui/material"
export const UsersTable = () => {
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Email</TableCell>
</TableRow>
</TableHead>
<TableBody></TableBody>
</Table>
</TableContainer>
);
}
Let's explain the code above.
<TableContainer component={Paper}>
: The TableContainer
component is used as a container for the Table
. It uses the Paper
component as its base, which gives it a Material design look with a shadow and background.Table
, TableHead
, TableBody
, TableRow
and TableCell
are just wrappers for native elements of the table.Now, import UsersTable
inside Users
.
components/users.js
import { Container } from '@mui/material';
import { UsersTable } from './users-table';
export const Users = () => {
return (
<Container
maxWidth="md"
sx={{ margin: '20px auto' }}>
<UsersTable />
</Container>
);
}
And Users
inside App
.
App.js
import { Users } from './components/users';
export default function App() {
return <Users />;
}
At this moment you should see three table head sections without any data inside the table. It is an expected behaviour.
export default function App() { return <h1>Hello world</h1> }