Skip to content

Latest commit

 

History

History

05 Using React and Office UI Fabric React components

Readme.md

Using React and Office UI Fabric React components

Use Office UI Fabric Core styles and the Office UI Fabric React Components to build user interfaces in SharePoint Framework client-side web parts.

Topics and Videos

You can see videos around this module:

Key recommendations

  • Office UI Fabric is the official front-end framework for building experiences that fit seamlessly into Office and Office 365.
  • Office UI Fabric Core includes all of the base styling that’s used throughout Microsoft, including fonts, icons, type, colors, grid, and more.
  • Office UI Fabric React Components is a responsive, mobile-first collection of robust components, including navigation, commands, containers, and content.
  • Use the Office UI Fabric React Components when your web part uses the React framework.
  • Use the Office UI Fabric Core Styles when your web part is built with a framework other than react, or no framework.

Lab - Getting Started with the SharePoint Framework (SPFx)

These labs describe how use Office UI Fabric Core styles and the Office UI Fabric React Components to build user interfaces in SharePoint Framework client-side web parts.

Demos

The completed lab exercises are the demos for this module.

  • [Exercise 1: Office UI Fabric Core](./Demos/Exercise 1/helloworld-webpart-react)
  • [Exercise 2: Office UI Fabric React](./Demos/Exercise 2/helloworld-webpart-react)

Contributors

Roles Author(s)
Project Lead / Architect / Lab Manuals / Videos Todd Baginski (Microsoft MVP, Canviz) @tbag
PM / Dev Lead Alex Chen (Canviz) @alexchx
Lab Manuals / Source Code Luis Lu (Canviz) @stluislu
Lab Manuals / Source Code Theodore Shi (Canviz) @TheodoreShi
Lab Manuals / Source Code Max Liu (Canviz) @maxliu0621
Testing Cindy Yan (Canviz) @CindyYan
Testing Melody She (Canviz) @melodyshe
Testing Lucas Smith (Canviz) @lucas66
PM John Trivedi (Canviz) @johnt83
Sponsor / Support Vesa Juvonen (Microsoft) @VesaJuvonen
Sponsor / Support Chakkaradeep Chandran (Microsoft) @chakkaradeep
Sponsor / Support Mike Ammerlaan (Microsoft) @mammerla
Sponsor / Support Rob Howard (Microsoft) @robmhoward

Version history

Version Date Comments
1.0 November 18, 2016 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Notice that we will keep on updating this material based on your input and work being done in the Office 365 Developer Patterns and Practices program. You can provide us input directly using the Office 365 Developer Patterns & Practices Yammer group