Hello! This article explains how to use the React MUI Library and code a simple, responsive landing page. The page will be built with MUI components only, no HTML element will be used. For newcomers,
MUI is a popular components library powered by
React. Thanks for Reading!
Before React.js, building web applications can be a daunting task. There was no ability to re-use web layouts or follow the
DRY (Don't Repeat Yourself) principle with HTML. Therefore, we wrote repeated lines of code that were difficult to understand.
React.js make building web applications easier? Let's find out via the following topics:
- ✅ What is
MUIIntroduction - Reasons to use it
- ✅ Generate the project via
- ✅ Styling in
- ✅ Coding Sections: Header, Hero, Information, Contact, Footer
- ✅ How to change
- ✅ Presents
Open-SourceMUI Dashboard: Berry
- ✅ Links & Resources (all free)
✨ What is React
It also allows us to pass data into these components to create dynamic content for our web pages. These data are called props. React.js has excellent documentation with tons of helpful resources and a large community of users willing to help you learn effectively.
New to React?Check out this comprehensive React Starting Guide
✨ Material UI Library
Material UI is a library that contains several React components that are flexible, mobile responsive, and production-ready. These components allow you to create stunning user interfaces with ease, and you always have complete control over their appearance and behavior.
With over 2000 contributors to its documentation, MUI is developer-friendly and provides an exciting experience for new users.
However, before we proceed, let's look at five reasons you should use the MUI library in React.js.
✨ MUI - Reasons to use it
MUI Library stands out from the rest because it provides the following:
MUI encourages a uniform and user-friendly layout across different platforms and screen sizes. It provides several helpers that enable you to build a mobile-friendly web application. MUI comes with different breakpoints for different screen sizes, and you can edit the default screen sizes to your preferred choice if necessary.
Faster build time
MUI has every web component you need to build any web application, and it's easy to integrate into your web applications. MUI speeds up your development process and enables you to ship beautiful and modern web applications faster.
MUI's documentation is straightforward. So you don't have to go elsewhere to search for how to implement any feature you need. Every web component, how to use them, and code samples are available in the documentation.
MUI components are highly customizable. You have complete control over their appearance and behavior. MUI allows you to write custom CSS styles to edit the components or pass some props stated in the documentation.
Beautiful ready-made components
MUI provides beautiful production-ready components for you. By simply copying and pasting the code, you can build a complex layout in a few minutes.
✨ MUI Installation and Set up
In order to start coding or using the free sample provided by this tutorial, we need NodeJS properly installed and accessible in the terminal.
New to NodeJS?Check out this comprehensive Node JS Starting Guide
Once the NodeJS tools are accessible, we can move forward and code our sample. Here are the steps:
- Generate the app skeleton using
- Install MUI Components and SVG Icons
- Open the project using a modern editor like
App.jsto include the newly installed assets
The App.js will be edited to include all the components coded in the next sections:
The web application is divided into six components:
contact us, and
CSS Baseline component adds simple base styles provided by MUI to the web application. It removes the margin in all browsers and sets the box-sizing property to
✨ Styling in MUI
Styling MUI components may seem confusing at first to beginners because it's quite different from the conventional way of styling
React applications. But don't worry, the aim of this article is to explain it clearly.
To edit these components provided by MUI, you have to do the following:
- 👉 Install
- 👉 Create a new folder named
- 👉 Create a
stylesdir and add the code:
The above code does the following:
makeStyles, a higher-order function that accepts a sub-function (another function) that returns an object containing classNames and the styles applied.
stylesis our sub-function used by
useStylesa custom hook that passes the styles created above into the makeStyles function.
useStylesbasically, helps us to style all the new components coded in the next sections.
How to use custom styling hook in MUI
Let's see a quick demo on how to apply the styles above in React components.
Using this mechanism, we can inject styling into every component using a clean syntax thanks to MUI's beautiful architecture.
✨ Coding MUI Header component
Here, the header component is our navigation bar, but building a navigation bar in
MUI is quite different from HTML. In
MUI, the navigation bar is called the App bar, and it has different types. I will be using the Elevate App Bar.
Header Component - Source Code
The (simplified) above code does the following:
MUIApp Bar segment elevates the navigation bar on scroll - when the user is not at the top of the page.
- Using this type of
Appbar requires you to wrap your
Typographyis used for texts. It takes the
variantparameter to specify whether it's a heading or a paragraph tag.
Boxis similar to the
HTML. It serves as a parent element.
Linkis similar to the
HTML. It creates a hyperlink to internal and external resources in your web application.
MUIcomponent that wraps all the elements in the
- I also imported the
useStyleshook we created in the previous section. This hook is declared inside the component and passed into a variable, like this const
classes = useStyles()the classes variable becomes an object containing all the classNames declared in the stylesheet.
Let's edit the styles in styles.js
✨ Coding MUI Hero Component
In this section, I introduced the Grid layout. The Grid component displays contents in a responsive layout by dividing the screen into 12 cells.
Hero Component - Source Code
The code is fairly simple compared to the (previous) Header Component
✨ Coding MUI Section Component
This component displays a Grid container containing three Grid items.
Section Component - Source Code
The source code for this component defines three cells managed by a parent MUI Grid component.
✨ Coding MUI Contact Component
This component implements a simple form with a
Title, three input fields and a
Contact Form Component - Source Code
Here is the code for this simple form powered by MUI:
✨ Coding MUI Footer
Our MUI sample page provides a simple footer with a centered text crafted on top of
Link MUI Components.
Footer Component - Source Code
Relevant Source code for the MUI Footer Component
✨ How to change MUI Font
Material UI allows you to use any font you want to use. To change the font of all Material UI components, do the following:
App.jsand import the
- Edit the
font-familyof the typography component via
Here is the code for our
App.js landing page with all components styled with the new font:
Poppins instead of the default font
✨ Conclusions and Free Resources
In this article, we've been able to build a complete webpage using various Material UI components. Material UI provides a comprehensive set of UI tools you may need to create a modern web application.
With its straightforward documentation, you can easily find the web layouts you need and build a complete web application in a shorter amount of time.
Berry is a creative React Dashboard built using the Material-UI. It is meant to be the best User Experience with highly customizable feature-riched pages. It is a complete game-changer React Dashboard with an easy and intuitive responsive design on retina screens or laptops.
The product comes with a simple JWT authentication flow:
logout powered by an open-source Node JS API Backend via