Adding the Material UI CSS framework to a React application
Introduction
React is an open source JavaScript library for building user interfaces in WEB and mobile applications. Currently, React is at version 17 and Meta (formerly Facebook) is the main maintainer of the project.
Material UI is a CSS framework with foundational and advanced components, enabling you to develop applications faster.
Prerequisites
Before you start, you need to install and configure the tools:
- git
- Node.js and npm
- IDE (e.g. Visual Studio Code or WebStorm)
Getting started
Create the React application
1. Let’s create the application with the React base structure using the create-react-app tool.
2. Install the @mui/material, @mui/icons-material, @mui/lab, @emotion/react, @emotion/styled and @types/date-fns libraries.
3. Remove the contents of the src/App.tsx file. Add some components as below.
4. Run the application with the command below.
5. Ready! Access the URL http://localhost:300/react-mui and check if the application is working. See the application working on GitHub Pages and Stackblitz.
The application repository is available at https://github.com/rodrigokamada/react-mui.
This tutorial was posted on my blog in portuguese.
