React Material-UI Cookbook

Build captivating user experiences using React and Material-UI

Adam Boduch 지음

Packt(GCO Science) 2019년 01월 31일 출간

작품소개

책소개

▶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 primary objective of this book is to help you use several Material-UI components to build larger UI functionality. We will also focus on React best practices in conjunction with Material-UI components ？ using state, context, and other new React 16.8 features properly. This book will start with layout and navigation and then dive into presenting the information with Material-UI components. It will then talk about the different components for user interactions. By the end of this book, you will know how to improve the look and feel of your applications using Material-UI components.

▶What You Will Learn
？ Learn to build the overall structure and navigation for your Material-UI app
？ Learn to present simple and complex information in a variety of ways
？ Build interactive and intuitive controls
？ Design portable themes and styles for all of your Material-UI apps
？ Group content into sections using tabs and expansion panels
？ Learn how to design a general page layout with Material-UI grids
？ Use lists for complex data, and cards for detailed information

▶Key Features
？ Grasp the needs React components for UI elements
？ Master the style and theme of the tools to go along with these components
？ Get to grips with all the React best practices to build a modern application

▶Who This Book Is For
They are JavaScript developers who have some basic knowledge of React and would want to implement Material Design principles in React applications using Material-UI. The reader wants to build a user interface using React components but doesn't want to invent their own style or UX framework.

목차

▶TABLE of CONTENTS
1 Grids - Placing Components on the Page
2 App Bars - The Top Level of Every Page
3 Drawers - A Place for Navigation Controls
4 Tabs - Grouping Content into Tab Sections
5 Expansion Panels - Group Content into Panel Sections
6 Lists - Display Simple Collection Data
7 Tables - Display Complex Collection Data
8 Cards - Display Detailed Information
9 Snackbars - Temporary Messages
10 Buttons - Initiating Actions
11 Text - Collecting Text Input
12 Autocomplete and Chips - Text Input Suggestions for Multiple Items
13 Selection - Make Selections from Choices
14 Pickers - Selecting Dates and Times
15 Dialogs - Modal Screens for User Interactions
16 Menus - Display Actions That Pop Out
17 Typography - Control Font Look and Feel
18 Icons - Enhance Icons to Match Your Look and Feel
19 Themes - Centralize the Look and Feel of Your App
20 Styles - Applying Styles to Components

책 속으로

▶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-toread 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.

출판사 서평

▶ 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.

작가정보

저자(글) Adam Boduch

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.