New video post on Office 365 Pattern & Practices, here is my sumary of it [youtube https://www.youtube.com/watch?v=1YRu4-nZot4&w=560&h=315]  

Tutorial objective

Teach you how easy it is to create a webpart using SharePoint Framework (aka SPFX) in Office 365 and SharePoint 2016. So how to create a webpart for sharepoint 2016 or office 365 ? This option is available for developer that can’t leverage out of the box feature (such as power apps / flow / sharepoint list etc.)

Tutorial target

Create a webpart using react in sharepoint workbench (the localhost of office 365)

Tutorial

Pre requisite :

• Install node.js
• Install visual studio code (optional)
• Install git (optional)

From cmd, type

Md documentcardexample

Cd documentcardexample

Yo @microsoft/sharepoint

Npm shrinkwrap

Gulp serve

Command Explanations

Yo to get the sharepoint project scaffold,

npm shrinkwrap 

to lock the dependencies and avoid broken solution in future. Chris O brien have some good writings about it.

Once in the code

Use some office UI code to generate such beautiful cards

Edit your gulpfile.js

Gulp serve

Et voila

To go further

• To deploy this webpart in office 365 you can use pnp commands or gulp-spsynch
• Official documentation from msdn about SharePoint Framework

Please let me know if this was useful and which kind of article you would like to see

Sharing is caring / Start small, think big, fail fast / Adopt THEN adapt