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 using npm or yarn. icons 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. React ; { Button } ; { ( <Button variant="contained" color="primary">
        Hello World!
      </Button> );
} App; import from 'react' import from '@material-ui/core' ( ) function App return < = > div className "App" </ > div export default 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: React ; { Button } ; { Rating } ; { ( <Button variant="contained" color="primary">
        Hello World!
      </Button> <Rating name="size-large" defaultValue={2} size="large" />
    </div> import from 'react' import from '@material-ui/core' import from '@material-ui/lab' ( ) function App return < = > div className "App" );
}

export default App; Happy coding!

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Bootstrap Vs. Material UI For React Based Project

Too Long; Didn't Read

Lucas

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Bootstrap Vs. Material UI For React Based Project

Too Long; Didn't Read

Lucas

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES