Designing in React App with Material-UI
What are we creating?
In the previous episode, we created a custom hook to fetch from Countries API. In this tutorial, we will take the API response and render it into the Material-UI table. Before moving forward, what is Material-UI?
Material-UI
Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display. They don’t rely on any global style-sheets such as normalize.css.
Pre-requisites:
For this tutorial, we will be assuming that you already have familiarity with the basic concepts of Javascript and React.
Setup for the Tutorial:
To install and save in your package.json dependencies, run:
// with npm
npm install @material-ui/core// with yarn
yarn add @material-ui/core
Please note that react >= 16.8.0 and react-dom >= 16.8.0 are peer dependencies.
Step 1: Passing props to the Table component for rendering.
Step 2: Create function component “countryTable.js” and restructure props.
Note: you can use arrow functions also.
Step 3: Import Material-UI components.
Step 4: Render table with UI components.
Here, we could also create different functional components for the table head and body. Below is the styling class “table” used above,
Step 5: Run the code.
Congratulations, you just learned a new tool for designing your React App. For further documentation on Material-UI, visit the link below:
For any queries or suggestions, feel free to comment.
