Getting Started:

Your First SPFx Web Part

Are you ready? In this lesson, we’ll build our very first SharePoint Framework web part. First, we’ll use Microsoft’s Yeoman SharePoint generator to set up a new project and browse through the project structure so that we can understand how SPFx projects are organized. We’ll also fire up both the local and remote SharePoint workbenches to see and test our new web part in real time. Finally, we’ll take a quick look at web part properties and understand how we can display a simple percentage as a donut-style chart visualization.

Learn More

  1. Scratch-made SVG Donut & Pie Charts in HTML5 by Mark Caron
  2. Lesson Source Code

Donut Chart HTML

<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut">
  <circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle>
  <circle
    class="donut-ring"
    cx="21"
    cy="21"
    r="15.91549430918954"
    fill="transparent"
    stroke="#eee"
    stroke-width="4"
  ></circle>
  <circle
    class="donut-segment"
    cx="21"
    cy="21"
    r="15.91549430918954"
    fill="transparent"
    stroke="#47c3f0"
    stroke-width="4"
    stroke-dasharray="85 15"
    stroke-dashoffset="25"
  ></circle>
  <text class="donut-number" x="50%" y="50%" text-anchor="middle">85%</text>
</svg>

Terminal Commands Used in This Lesson

  1. mkdir meter
  2. cd meter
  3. yo @microsoft/sharepoint
  4. gulp trust-dev-cert
  5. gulp serve
Lesson 4 of 26