DEV Community

Cover image for Let's Get Started with SharePoint Framework (SPFx) + React 🚀
Deependra Singh
Deependra Singh

Posted on

Let's Get Started with SharePoint Framework (SPFx) + React 🚀

#webdev #spfx #sharepointframework #programming

👩‍💻 Goal: Build your first Hello World web part in SPFx with React.
⚡ Time: ~15 mins
🔧 Tools: Node.js • Yeoman • Gulp • VS Code

🛠 1. Environment Setup

📌 SPFx requires the right Node.js LTS (currently Node 18 for SPFx 1.18.2).
👉 If you install the wrong version, you’ll see scary gulp errors ❌.



**npm install -g yo gulp @microsoft/generator-sharepoint**
Enter fullscreen mode Exit fullscreen mode

📂 2. Scaffold a New Project

mkdir spfx-helloworld
cd spfx-helloworld
yo @microsoft/sharepoint
Enter fullscreen mode Exit fullscreen mode

👀 You’ll get a wizard:

📦 Solution Name → spfx-helloworld
🌐 Target → SharePoint Online only
🧩 Component type → WebPart
⚛️ Framework → React
🏷 WebPart Name → HelloWorld

▶️ 3. Run the Project

**gulp serve**
Enter fullscreen mode Exit fullscreen mode

👋 4. Hello World in React

src/webparts/helloWorld/components/HelloWorld.tsx
Enter fullscreen mode Exit fullscreen mode 
import * as React from "react";

export default function HelloWorld(): JSX.Element {
  return (
    <div style={{ padding: 20, fontSize: 20 }}>
      👋 Hello, SPFx + React World!
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

🎨 5. Add Some Style

npm install @fluentui/react
Enter fullscreen mode Exit fullscreen mode 
import { PrimaryButton } from "@fluentui/react";

export default function HelloWorld() {
  return (
    <div>
      <h2>Welcome to SPFx + Fluent UI</h2>
      <PrimaryButton text="Click Me 🚀" />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Congrats 🎊 you’ve just unlocked the power of SPFx. Keep experimenting and building.

Top comments (0)