E-Book
36,59 €

React Material-UI Cookbook E-Book

Adam Boduch

0,0

36,59 €

Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.

Herausgeber: Packt Publishing
Kategorie: Wissenschaft und neue Technologien
Sprache: Englisch

Beschreibung

Develop modern-day applications by implementing Material Design principles in React using Material-UI

Key Features

Use React components to build intuitive UI elements
Explore a variety of styles and themes in the Material-UI framework using React components
Learn practical React recipes and best practices for building modern web applications

Book Description

Material-UI is a component library for rendering UI elements, using modern best practices from React and Material Design. This book will show you how you can create impressive and captivating modern-day web apps by implementing Material Design considerations. The book is designed to help you use a variety of Material-UI components to enhance UI functionality, along with guiding you through React best practices, and using state, context, and other new React 16.8 features.

You will start with layout and navigation, exploring the Grid component and understanding how it's used to build layouts for your Material-UI apps. Using Material-UI components, you'll then explore the technique of effectively presenting information. In later sections, you will also learn about the different components for user interactions such as the text input component and buttons. Finally, the book will get you up to speed with customizing the look and feel of your app, right from creating a Material-UI theme through to styling icons and text.

By the end of this book, you will have developed the skills you need to improve the look and feel of your applications using Material-UI components.

What you will learn

Build the overall structure and navigation for your Material-UI app
Present simple and complex information in a variety of ways
Develop interactive and intuitive controls
Group content into sections using tabs and expansion panels
Create a general page layout with Material-UI grids
Use lists for complex data, and cards for detailed information

Who this book is for

This book is for React developers who want to implement Material Design principles in their applications. You will also find this book helpful if you are a developer who wants to build a UI using React components without having to build your own UX framework.

Details

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB

Seitenzahl: 371

Veröffentlichungsjahr: 2019

Bewertungen

0,0

Rezensionen(0 Rezensionen)

Leseprobe

React Material-UI Cookbook

Build captivating user experiences using React and Material-UI

Adam Boduch

BIRMINGHAM - MUMBAI

React Material-UI Cookbook

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Content Development Editor:Pranay FereiraTechnical Editor:Aishwarya MoreCopy Editor: Safis EditingProject Coordinator:Pragati ShuklaProofreader: Safis EditingIndexer:Pratik ShirodkarGraphics:Alishon MendonsaProduction Coordinator:Jisha Chirayil

First published: March 2019

Production reference: 1290319

Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.

ISBN 978-1-78961-522-7

www.packtpub.com

For anyone whose lives have been touched by autism. Never give up.

– Adam Boduch

mapt.io

Mapt is an online digital library that gives you full access to over 5,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

Why subscribe?

Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals

Improve your learning with Skill Plans built especially for you

Get a free eBook or video every month

Mapt is fully searchable

Copy and paste, print, and bookmark content

Packt.com

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.

Contributors

About the author

Adam Boduch has been involved with large-scale JavaScript development for nearly 10 years. Before moving to the frontend, he worked on several large-scale cloud computing products using Python and Linux. No stranger to complexity, Adam has practical experience with real-world software systems and the scaling challenges they pose. He is the author of several JavaScript books, including React and React Native, by Packt Publishing and is passionate about innovative user experiences and high performance.

About the reviewers

Michel Engelen started off as a web designer and soon began to realize that frontend development is the course he wants to take. So, he started self-learning for the skills he would need for that. Nearly 8 years later, he is now a full-fledged JavaScript React/Redux developer and software architect with one additional year of experience in DevOps as well.

Jonatan Ezequiel Salas is a highly skilled developer and a passionate entrepreneur. He is the founder and CTO of BlackBox Vision, a software agency focusing mainly on high-quality products and user experience, and also working at Ingenia as a Software Architect. He is currently focusing on growing his company, and has been working with some major firms from Argentina. In his spare time, he loves contributing to open source software related to DevOps, Kubernetes, JavaScript, Node.js, and React. Find him on GitHub, Medium, or Twitter.

I would like to thank my family, my girlfriend, and my friends for their never-ending support. Without them, I could have never reached where I am today. I am also thankful to Packt Publishing and their amazing books. I'd especially like to thank the author of the book, as well as Pragati Shukla for giving me the opportunity to review this book.

Olivier Tassinari is a curious and persevering person who has always loved solving problems. His passion for building things started at a very young age, and he began to launch websites 10 years ago while studying math, physics, and computer science. He is a big fan of open source. He has been working on Material-UI since its inception.

I would like to thank all Material-UI's contributors for their devotion to the project.

Packt is searching for authors like you

If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.

Title Page

React Material-UI Cookbook

Dedication

About Packt

Why subscribe?

Packt.com

Contributors

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Get in touch

Reviews

Grids - Placing Components on the Page

Introduction

Applying breakpoints

How to do it...

How it works...

There's more...

See also

Filling space

How to do it...

How it works...

There's more...

See also

Abstracting containers and items

How to do it...

How it works...

There's more...

See also

Fixed column layout

How to do it...

How it works...

There's more...

See also

Changing column direction

How to do it...

How it works...

There's more...

See also

App Bars - The Top Level of Every Page

Introduction

Fixed position

How to do it...

How it works...

There's more...

See also

Hide on scroll

How to do it...

How it works...

There's more...

See also

Toolbar abstraction

How to do it...

How it works...

There's more...

See also

With navigation

How to do it...

How it works...

There's more...

See also

Drawers - A Place for Navigation Controls

Introduction

Drawer types

How to do it...

How it works...

There's more...

See also

Drawer item state

How to do it...

How it works...

There's more...

See also

Drawer item navigation

How to do it...

How it works...

There's more...

See also

Drawer sections

How to do it...

How it works...

There's more...

See also

AppBar interaction

How to do it...

How it works...

There's more...

See also

Tabs - Grouping Content into Tab Sections

Introduction

AppBar integration

How to do it...

How it works...

There's more...

See also

Tab alignment

How to do it...

How it works...

There's more...

See also

Rendering tabs based on state

How to do it...

How it works...

There's more...

See also

Abstracting tab content

How to do it...

How it works...

There's more...

See also

Tab navigation with routes

How to do it...

How it works...

There's more...

See also

Expansion Panels - Group Content into Panel Sections

Introduction

Stateful expansion panels

How to do it...

How it works...

There's more...

See also

Formatting panel headers

How to do it...

How it works...

There's more...

See also

Scrollable panel content

How to do it...

How it works...

See also

Lazy loading panel content

How to do it...

How it works...

There's more...

See also

Lists - Display Simple Collection Data

Introduction

Using state to render list items

How to do it...

How it works...

There's more...

See also

List icons

How to do it...

How it works...

There's more...

See also

List avatars and text

How to do it...

How it works...

There's more...

See also

List sections

How to do it...

How it works...

There's more...

See also

Nested lists

How to do it...

How it works...

There's more...

See also

List controls

How to do it...

How it works...

There's more...

See also

Scrolling lists

How to do it...

How it works...

See also

Tables - Display Complex Collection Data

Introduction

Stateful tables

How to do it...

How it works...

There's more...

See also

Sortable columns

How to do it...

How it works...

There's more...

See also

Filtering rows

How to do it...

How it works...

See also

Selecting rows

How to do it...

How it works...

See also

Row actions

How to do it...

How it works...

See also

Cards - Display Detailed Information

Introduction

Main content

How to do it...

How it works...

See also

Card header

How to do it...

How it works...

There's more...

See also

Performing actions

How to do it...

How it works...

There's more...

See also

Presenting media

How to do it...

How it works...

There's more...

See also

Expandable cards

How to do it...

How it works...

See also

Snackbars - Temporary Messages

Introduction

Snackbar content

How to do it...

How it works...

There's more...

See also

Controlling visibility with state

How to do it...

How it works...

There's more...

See also

Snackbar transitions

How to do it...

How it works...

See also

Positioning snackbars

How to do it...

How it works...

There's more...

See also

Error boundaries and error snackbars

How to do it...

How it works...

There's more...

See also

Snackbars with actions

How to do it...

How it works...

There's more...

See also

Queuing snackbars

How to do it...

How it works...

See also

Buttons - Initiating Actions

Introduction

Button variants

How to do it...

How it works...

See also

Button emphasis

How to do it...

How it works...

There's more...

See also

Link buttons

How to do it...

How it works...

There's more...

See also

Floating actions

How to do it...

How it works...

There's more...

See also

Icon buttons

How to do it... 

How it works...

See also

Button sizes

How to do it...

How it works...

There's more...

See also

Text - Collecting Text Input

Introduction

Controlling input with state

How to do it...

How it works...

There's more...

See also

Placeholder and helper text

How to do it...

How it works...

See also

Validation and error display

How to do it...

How it works...

There's more...

See also

Password fields

How to do it...

How it works...

There's more...

See also

Multiline input

How to do it...

How it works...

There's more...

See also

Input adornments

How to do it...

How it works...

There's more...

See also

Input masking

How to do it...

How it works...

See also

Autocomplete and Chips - Text Input Suggestions for Multiple Items

Introduction

Building an Autocomplete component

How to do it...

How it works...

Text input control

Options menu

No options available

Individual option

Placeholder text

SingleValue

ValueContainer

IndicatorSeparator

Clear option indicator

Show menu indicator

Styles

The Autocomplete

See also

Selecting autocomplete suggestions

How to do it...

How it works...

See also

API-driven Autocomplete

How to do it...

How it works...

See also

Highlighting search results

How to do it...

How it works...

See also

Standalone chip input

How to do it...

How it works...

See also

Selection - Make Selections from Choices

Introduction

Abstracting checkbox groups

How to do it...

How it works...

There's more...

See also

Customizing checkbox items

How to do it...

How it works...

There's more...

See also

Abstracting radio button groups

How it works...

There's more...

See also

Radio button types

How to do it...

How it works...

See also

Replacing checkboxes with switches

How to do it...

How it works...

There's more...

See also

Controlling selects with state

How to do it...

How it works...

See also

Pickers - Selecting Dates and Times

Introduction

Using date pickers

How to do it...

How it works...

There's more...

See also

Using time pickers

How to do it...

How it works...

See also

Setting initial date and time values

How to do it...

How it works...

See also

Combining date and time components

How to do it...

How it works...

See also

Integrating other date and time packages

How to do it...

How it works...

See also

Dialogs - Modal Screens for User Interactions

Introduction

Collecting form input

How to do it...

How it works...

See also

Confirming actions

How to do it...

How it works...

See also

Displaying alerts

How to do it...

How it works...

There's more...

See also

API integration

How to do it...

How it works...

See also

Creating fullscreen dialogs

How to do it...

How it works...

See also

Scrolling dialog content

How to do it...

How it works...

See also

Menus - Display Actions That Pop Out

Introduction

Composing menus with state

How to do it...

How it works...

There's more...

See also

Menu scrolling options

How to do it...

How it works...

See also

Using menu transitions

How to do it...

How it works...

See also

Customizing menu items

How to do it...

How it works...

See also

Typography - Control Font Look and Feel

Introduction

Types of typography

How to do it...

How it works...

There's more...

See also

Using theme colors

How to do it...

How it works...

See also

Aligning text

How to do it...

How it works...

See also

Wrapping text

How to do it...

How it works...

There's more...

See also

Icons - Enhance Icons to Match Your Look and Feel

Introduction

Coloring icons

How to do it...

How it works...

See also

Scaling icons

How to do it...

How it works...

Default

Inherit

Small

Large

See also

Dynamically loading icons

How to do it...

How it works...

See also

Themed icons

How to do it...

How it works...

See also

Installing more icons

How to do it...

How it works...

See also

Themes - Centralize the Look and Feel of Your App

Introduction

Understanding the palette

How to do it...

How it works...

See also

Comparing light and dark themes

How to do it...

How it works...

See also

Customizing typography

How to do it...

How it works...

See also

Nesting themes

How to do it...

How it works...

See also

Understanding component theme settings

How to do it

How it works...

See also

Styles - Applying Styles to Components

Introduction

Basic component styles

How to do it...

How it works...

There's more...

See also

Scoped component styles

How to do it...

How it works...

There's more...

See also

Extending component styles

How to do it...

How it works...

See also

Moving styles to themes

How to do it...

How it works...

See also

Other styling options

How to do it...

How it works...

See also

Other Books You May Enjoy

Leave a review - let other readers know what you think

Preface

Material-UI is the world's most popular React UI framework. It should come as no surprise that Material-UI skills are a valuable asset to have. There are countless projects in the open source space and in the commercial space that rely on this framework. So, what makes Material-UI so popular?

First and foremost, Material-UI does an excellent job of bringing together two of the best frontend technologies out there. In a nutshell, Material-UI exposes Google's Material Design as components in Facebook's React. Many developers know enough React to build something that works. Many designers know enough about Material Design to design an experience that looks incredible. Material-UI is the bridge between these two worlds, simplifying the task of shipping production applications that delight customers.

At a high level, this sales pitch is enough to intrigue developers at every level and of every specialization. What keeps developers engaged with Material-UI is the breadth of functionality and the depth of resources available to help you tackle any scenario. My hope is that this book serves as a valuable contribution to those resources.

Who this book is for

This book is for any developer who thinks that Material-UI could potentially help them produce a better user experience for their application. From seasoned professionals to the junior developers of the world, this book has something to teach you about Material-UI.

No Material Design knowledge is assumed. To get the most out of this book, you should have at least a working knowledge of React and modern JavaScript. While this book isn't meant to teach you React, I do try to explain the React-specific mechanism at work in cases where it might help illuminate the example as a whole.

What this book covers

Chapter 1, Grids – Placing Components on the Page, uses the grid system to place components on the page.

Chapter 2, App Bars – The Top Level of Every Page, adds App Bars to the top of your UI.

Chapter 3, Drawers – A Place for Navigation Controls, uses drawers as a place to display your main navigation.

Chapter 4, Tabs – Group Content into Tab Sections, organizes your content into tabs.

Chapter 5, Expansion Panels – Group Content into Panel Sections, organizes your content into panels.

Chapter 6, Lists – Display Simple Collection Data, renders lists of items that the user can read and interact with.

Chapter 7, Tables – Display Complex Collection Data, shows in-depth details about a data collection.

Chapter 8, Cards – Display Detailed Information, uses cards to display details about a specific entity/thing/object.

Chapter 9, Snackbars – Temporary Messages, notifies the user about what's going on in your application.

Chapter 10, Buttons – Initiating Actions, explains how pressing buttons is the most common way for users to do something.

Chapter 11, Text – Collecting Text Input, allows users to input information.

Chapter 12, Autocomplete and Chips – Text Input Suggestions for Multiple Items, gives the user choices to select from as they type.

Chapter 13, Selection – Make Selections from Choices, allows the user to select from a predefined set of options.

Chapter 14, Pickers – Selecting Dates and Times, chooses date and time values using easy-to-read formats.

Chapter 15, Dialogs – Modal Screens for User Interactions, displays modal screens to collect input or show information.

Chapter 16, Menus – Display Actions that Pop Out, saves space on the screen by putting actions in menus.

Chapter 17, Typography – Control Font Look and Feel, controls the font of your UI in a systematic way.

Chapter 18, Icons – Enhance Icons to Match Your Look and Feel, customizes Material-UI icons and adds new ones.

Chapter 19, Themes – Centralize the Look and Feel of Your App, uses themes to change the look and feel of components.

Chapter 20, Styles – Applying Styles to Components, uses one of many styling solutions to design your UI.

To get the most out of this book

Make sure you understand the fundamentals of React. The tutorial is a good starting point:

https://reactjs.org/tutorial/tutorial.html

Clone the repository for this book:

https://github.com/PacktPublishing/Material-UI-Cookbook

Install the package by changing into the

Material-UI-Cookbook

directory and running

npm install

Start Storybook by running

npm run storybook

. You can now navigate through each of the examples as you read through the book. Some examples have property editor controls in the Storybook UI, but feel free to tweak the code as you learn!

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

www.packt.com

Select the

SUPPORT

tab.

Click on

Code Downloads & Errata

Enter the name of the book in the

box and follow the onscreen instructions.

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

WinRAR/7-Zip for Windows

Zipeg/iZip/UnRarX for Mac

7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/React-Material-UI-Cookbook. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/9781789615227_ColorImages.pdf.

Sections

In this book, you will find several headings that appear frequently (Getting ready, How to do it..., How it works..., There's more..., and See also).

To give clear instructions on how to complete a recipe, use these sections as follows:

Getting ready

This section tells you what to expect in the recipe and describes how to set up any software or any preliminary settings required for the recipe.

How to do it…

This section contains the steps required to follow the recipe.

How it works…

This section usually consists of a detailed explanation of what happened in the previous section.

There's more…

This section consists of additional information about the recipe in order to make you more knowledgeable about the recipe.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in, and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packt.com.

Grids - Placing Components on the Page

In this chapter, we'll cover the following recipes:

Understanding breakpoints

Filling space

Abstracting containers and items

Fixed column layout

Column direction

Introduction

Material-UI grids are used to control the layout of screens in your app. Rather then implement your own styles to manage the layout of your Material-UI components, you can leverage the Grid component. Behind the scenes, it uses CSS flexbox properties to handle flexible layouts.

Applying breakpoints

A breakpoint is used by Material-UI to determine at what point to break the flow of content on the screen and continue it on the next line. Understanding how to apply breakpoints with Grid components is fundamental to implementing layouts in Material-UI applications.

There's more...

You can use the auto value for every breakpoint value if you're unsure of which value to use:

This will try to fit as many items as possible on each row. As the screen size changes, items are rearranged so that they fit on the screen accordingly. Here's what this looks like at a screen width of 725 pixels:

I would recommend replacing auto with a value from 1–12 at some point. The auto value is good enough that you can get started on other things without worrying too much about layout, but it's far from perfect for your production app. At least by setting up auto this way, you have all of your Grid components and breakpoint properties in place. You just need to play with the numbers until everything looks good.

Filling space

With some layouts, it is impossible to have your grid items occupy the entire width of the screen. Using the justify property, you can control how grid items fill the available space in the row.

How it works...

The flex-start value of the justify property aligns all of the Grid items at the start of the container. In this case, the three Chip components in each of the four containers are all crammed to the left of the row. None of the space to the left of the items is filled. Instead of changing the breakpoint property values of these items, which results in changed widths, you can change the justify property value to tell the Grid container how to fill empty spaces.

For example, you could use the center value to align Grid items in the center of the container as follows:

The following screenshot shows what this change to the justify property value results in:

This does a good job of evenly distributing the empty space to the left and right of the Grid items. But the items still feel crowded because there's no space in between them. Here's what it looks like if you use the space-around value of the justify property:

This value does the best job of filling all the available space in the Grid container, without having to change the width of the Grid items.

There's more...

A variation on the space-around value is the space-between value. The two are similar in that they're effective at filling all of the space in the row. Here's what the example in the preceding section looks like using space-between:

All of the excess space in the row goes in between the Grid items instead of around them. In other words, use this value when you want to make sure that there's no empty space to the left and right of each row.

Abstracting containers and items

You have lots of screens in your app, each with lots of Grid components, used to create complex layouts. Trying to read source code that has a ton of <Grid> elements in it can be daunting. Especially when a Grid component is used for both containers and for items.

Fixed column layout

When you use Grid components to build your layout, they often result in changes to your layout, depending on your breakpoint settings and the width of the screen. For example, if the user makes the browser window smaller, your layout might change from two columns to three. There might be times, however, when you would prefer a fixed number of columns, and that the width of each column changes in response to the screen size.

How it works...

If you want a fixed number of columns, you should only specify the xs breakpoint property. In this example, 3 is 25% of the screen width – or 4 columns. This will never change because xs is the smallest breakpoint there is. Anything larger is applied to xs as well, unless you specify a larger breakpoint.

Let's say that you want two columns. You can set the xs value to 6 as follows:

Here's what the result looks like at a pixel screen width of 960:

Because you've set the xs value to 6 (50%), these Grid items will only ever use two columns. The items themselves will change their width to accommodate the screen width, rather than changing the number of items per row.

There's more...

You can combine different widths in a fixed way. For example, you could have header and footer Grid items that use a full-width layout, while the Grid items in between use two columns:

The first and last Grid components have an xs value of 12 (100%), while the other Grid items have xs values of 6 (50%) for a two-column layout. Here's what the result looks like at a pixel width of 725:

Changing column direction

When using a fixed number of columns for your layout, content flows from left to right. The first grid item goes in the first column, the second item in the second column, and so on. There could be times when you need better control over which grid items go into which columns.

How to do it...

Let's say that you have a four-column layout, but you want the first and second items to go in the first column, the third and fourth items in the second, and so on. This involves using nested Grid containers, and changing the direction property, as follows: