Project 52 of 100 - A (brief) Introduction to Material UI

Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!

Link to the deployed project: Link
Link to the repo: github

Material UI is, as the website says, "the most popular React UI framework". It's also built around React and front-end best practices so after learning it you don't have to worry as much if you're building in a sustainable way. While I've always been more of a Bootstrap person, I'm currently building a longer project in Material UI so I thought I'd do a quick project with it.

For the more experienced developer who has worked with Material UI before this won't be much substance, but if you're getting started in React and haven't used it this is a great little (tiny) primer.

First, head on over to the Material UI website (material-ui.com) to check out what they're all about. Click on "Get Started" in the side menu to check out the brief checklist before using the framework. You need to have a React project open and working. I almost always use create-react-app and it plays well with those bundlers so feel free to use the standard React starter project. Then you'll need to install Material UI:

npm i @material-ui/core

As the Getting Started page notes, "Material-UI components work without any additional setup, and don't pollute the global scope." That means you can feel free to just use one component from their large library without loading in the rest of the components. You can also load in a pre-built Material UI module (UI component) into a React component without having to import the core files in any other component and it will all still work.

We can get started with their simple example. To get a Material UI style button to appear on the screen in a component, just use the following 2 lines of code:

1. Import the Button's specific files

import { Button } from '@material-ui/core';

1. Then to use the button in JSX

function myComponent = () => {
  return (
    ...
      <Button color="primary">Hello World</Button>
    ...
  )
}

The above will render the button anywhere you put it. For those familiar with Bootstrap, you'll notice that there are some similarities, but instead of specifying the color in a class, we pass the Button, which is a pre-made component, a color prop.

To get a little Material UI project off the ground in less than 10 minutes, check out their templates page. Here you can see how some simple demo pages are put together, and use the code in your own project. It looked to me like the Blog page offers a meaningful example of a full-featured page so I went with that. Simply click the "Source Code" button on the Templates page and you will be led to Github page for that project.

On the source code page, you can see the file structure they use to make that blog main page out of individual components. Open up the Blog.js file. I won't copy the whole function but we can talk about the return statement:

  return (
    <React.Fragment>
      <CssBaseline />
      <Container maxWidth="lg">
        <Header title="Blog" sections={sections} />
        <main>
          <MainFeaturedPost post={mainFeaturedPost} />
          <Grid container spacing={4}>
            {featuredPosts.map((post) => (
              <FeaturedPost key={post.title} post={post} />
            ))}
          </Grid>
          <Grid container spacing={5} className={classes.mainGrid}>
            <Main title="From the firehose" posts={posts} />
            <Sidebar
              title={sidebar.title}
              description={sidebar.description}
              archives={sidebar.archives}
              social={sidebar.social}
            />
          </Grid>
        </main>
      </Container>
      <Footer title="Footer" description="Something here to give the footer a purpose!" />
    </React.Fragment>
  );

Like a good React project, you can see that this whole page is divided into a series of components that can later be used and reused at your discretion. Like Bootstrap, it's common to wrap an element in a container to give it a good amount of padding. In Material UI this is done with a component <Container></Container>.

To use the files this blog page depends on simply copy the code from each file into a separate JS file with the same filename. Within minutes you'll see the entire webpage take shape. For anyone who's used to building in React, you'll see a series of components which you can now edit as you please.

Change the title of the page in the title prop in the <Header> component where it's written in the return function of the main page. Change the sections you'd like to list in the sections array. Change up the main image in MainFeaturedPost and change the blog post contents themselves in the Markdown files in the same folder. This separates your writing concerns from your UI concerns.

That's it for now. I have another post coming later today so hopefully for the Material UI newbies this is a useful starting place. They also have a solid free Youtube intro course for anyone looking to dive deeper or use it as their base framework in their next project.

Disclaimer: I realize that the package React Bootstrap also divides things up into actual components as well in the optional package, but Bootstrap CSS can still be used in React without this packaged component-based approach.