Creating a Todos application is all the buzz now days. Getting with the times requires learning different ways to do things. We will code some React components that will use Google Material Design to quickly get some awesome looking interfaces.

The entire code base is located at:

https://gitlab.com/nthchildconsulting/material-ui-todos

We will be using the following technologies:

  • Create React App
  • Material UI
  • Redux

React App

index.js

In this file we import our main App container and our Redux store. We then inject the store in a Provider component so that all the child components will have access to the Redux store.

We will focus on React components in this article. In the next article we will focus on the Redux store.

containers/App/App.js

In the main App component we will start with some Material UI grids. We use the grid system for consistency between layouts. You can read more about grids here:

https://material-ui.com/layout/grid/

First create a Grid container then next the children under the container with Grid item

Our main app grid will just contain one item that will include add todo, and todo list components.

containers/AddTodo/AddTodo.js

In the AddTodo component we will have another grid container with two grid items. The great thing about Material UI is that you can use its breakpoints to use for different width devices.

Then using the state through React, once the button is clicked, it will dispatch a Redux action to add the todo to the store.

components/TodoList/TodoList.js

In the TodoList we bring in the List component which has many customizable properties. You can read more here:

https://material-ui.com/demos/lists/

components/Todo/Todo.js

In the Todo component we use the ListItem and ListItemTextcomponents. This makes it easy for material ui to line up components.

Conclusion

With just a few Material UI components you can quickly make an expressive UI for use on modern browsers and mobile devices.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store