Material Components for React

Google Material Design is a design system, that anyone can use, to create beautiful usable applications. MDC React is the open source component library, officially supported by the Material Design team at Google. Come learn all about Material Design, and MDC React, and how it can help you make beautiful websites faster.

Transcript

1. Material Components for React Lynn Mercier & Bonnie Zhou
2. Agenda 1. What is Material Design? 2. How does Material help developers? 3. How does Material help React developers? 4. How to use Material in a React code base
3. What is Material Design?
4. Material is a design system – backed by open-source code – that helps teams build digital experiences
5. Make beautiful products, faster.
6. material.io
7. material.io/design
8. material.io/tools
9. How does Material Design help developers?
10. Material is a design system – backed by open-source code – that helps teams build digital experiences
11. material.io/develop
12. material.io/develop/web
13. github.com/material-components/material-components-web
14. How does Material Design help React developers?
15. 3 Repositories MDC Web Material - Web Components MDC React!!!
16. github.com/material-components/material-components-web-react
17. Three Different Component Libraries?
18. Yes!
20. Example: Text Field
21. MDC Web: Text Field Foundation/Adapter interface TextFieldAdapter { addClass(className: string); ... } class TextFieldFoundation { constructor(adapter: TextFieldAdapter) { this.adapter = adapter; } activateFocus() { this.adapter.addClass(‘text-field--focused’); } }
22. MDC Web: Text Field Foundation/Adapter interface TextFieldAdapter { addClass(className: string); ... } class TextFieldFoundation { constructor(adapter: TextFieldAdapter) { this.adapter = adapter; } activateFocus() { this.adapter.addClass(‘text-field--focused’); } }
23. MDC Web: Text Field Foundation/Adapter interface TextFieldAdapter { addClass(className: string); ... } class TextFieldFoundation { constructor(adapter: TextFieldAdapter) { this.adapter = adapter; } activateFocus() { this.adapter.addClass(‘text-field--focused’); } }
24. MDC Web: Text Field Foundation/Adapter interface TextFieldAdapter { addClass(className: string); ... } class TextFieldFoundation { constructor(adapter: TextFieldAdapter) { this.adapter = adapter; } activateFocus() { this.adapter.addClass(‘text-field--focused’); } }
25. MDC Web: Text Field Foundation/Adapter interface TextFieldAdapter { addClass(className: string); ... } class TextFieldFoundation { constructor(adapter: TextFieldAdapter) { this.adapter = adapter; } activateFocus() { this.adapter.addClass(‘text-field--focused’); } }
26. MDC React: Text Field class TextField extends React.Component { state = {classList: new Set()}; componentDidMount() { this.foundation = new TextFieldFoundation({ addClass: (className) => { const classList = new Set(this.state.classList); classList.add(className); this.setState({classList}); }, }); } }
27. MDC React: Text Field class TextField extends React.Component { state = {classList: new Set()}; componentDidMount() { this.foundation = new TextFieldFoundation({ addClass: (className) => { const classList = new Set(this.state.classList); classList.add(className); this.setState({classList}); }, }); } }
28. MDC React: Text Field class TextField extends React.Component { state = {classList: new Set()}; componentDidMount() { this.foundation = new TextFieldFoundation({ addClass: (className) => { const classList = new Set(this.state.classList); classList.add(className); this.setState({classList}); }, }); } }
29. MDC React: Text Field class TextField extends React.Component { state = {classList: new Set()}; ... render() { return ( <div className={classNames(this.state.classList)}> <input onFocus={this.foundation.activateFocus} ... /> </div> ); } }
30. MDC React: Text Field class TextField extends React.Component { state = {classList: new Set()}; ... render() { return ( <div className={classNames(this.state.classList)}> <input onFocus={this.foundation.activateFocus} ... /> </div> ); } }
31. MDC React: Text Field class TextField extends React.Component { state = {classList: new Set()}; ... render() { return ( <div className={classNames(this.state.classList)}> <input onFocus={this.foundation.activateFocus} ... /> </div> ); } }
32. User focuses on text field React synthetic event fires TextFieldFoundation .activateFocus TextFieldAdapter .addClass React updates state and re-renders User sees text field with focused styling User React MDC Web
33. Share foundational code between MDC Web and MDC React
34. Aren’t there other Material React libraries?
35. Yes. Use pieces of MDC React with pieces of other React libraries
36. What makes MDC React different? • Official Google support • Dogfooded by Google teams (through MDC Web) • Strong focus on accessibility
37. How to use Material in a React code base
38. DEMO!
39. Takeaways material.io • Material helps you build beautiful (React) apps faster • Material works across platforms • Material wants to work with all you React developers!! • MDC React can easily be included in your existing React code
40. Thank You! Lynn Mercier @lynn__mercier Bonnie Zhou @bonniezzzhou