Bootstrap Vs. Material UI For React Based Project

Do you enjoy building fast and professional looking pages using React and Bootstrap? What if I tell you that there is a more efficient way (and in my opinion, that looks more professional) to build websites.

Material UI

Material UI is a library with components, icons, and themes (many of them, free) for fast building websites. It has many elements, from basic ones like buttons and input fields; to sliders, menus, and suggestion inputs. You can check them here.

Usage

To use Material UI, you must be familiar with the JS modularized way of coding (using import/export). You can install the core packages (containing the components) or the icons using npm or yarn.

Building your first component

Go to the component list and start looking at all of them (You will find cool ones). For the sake of this example, let's click on the button component. At the end of that page, you will find a link that has the text <Button /> and will link you to the button API. In there, you will have how to import the element, for this case, it says import { Button } from '@material-ui/core';. You will have all the props that the feature can receive for it to work as you want. If you are stuck, you can look back at the examples given in the components page; they have their code.

Let's go to our React project and add this element.

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

function App() {
  return (
    <div className="App">
      <Button variant="contained" color="primary">
        Hello World!
      </Button>
    </div>
  );
}

export default App;

I will not detail this since this was to show you Material UI and its basic structure. Unlock the full potential in your next project!

Bonus

Did you like it? Rate it yourself in the page:

import React from 'react';
import { Button } from '@material-ui/core';
import { Rating } from '@material-ui/lab';

function App() {
  return (
    <div className="App">
      <Button variant="contained" color="primary">
        Hello World!
      </Button>
      <Rating name="size-large" defaultValue={2} size="large" />
    </div>
  );
}

export default App;

Happy coding!