DEV Community: Deependra Singh

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

Deependra Singh — Mon, 08 Sep 2025 13:33:44 +0000

👩‍💻 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**

📂 2. Scaffold a New Project

mkdir spfx-helloworld
cd spfx-helloworld
yo @microsoft/sharepoint

👀 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**

👋 4. Hello World in React

src/webparts/helloWorld/components/HelloWorld.tsx

import * as React from "react";

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

🎨 5. Add Some Style

npm install @fluentui/react

import { PrimaryButton } from "@fluentui/react";

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

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

Boost Your Productivity in VS Code with the Best Themes: A Developer's Guide 🚀

Deependra Singh — Thu, 12 Oct 2023 05:40:13 +0000

10 Best VSCode Themes in 2023 | How To Personalize VS Code

Visual Studio Code (VS Code) is a free and open-source code editor developed by Microsoft. It has quickly become the most popular text editor among developers due to its versatility and ease of use.

One of the cool features of VS Code is the ability to change its appearance with themes, with thousands of VSCode themes available to choose from. And while many choices are great, finding the perfect theme to suit your style can take time and effort.

Best VS Code Theme Packages in 2023

1.Github Theme

Main feature: Mimics the look and feel of GitHub’s UI

Number of installs: 8.1M+

2.Winter is coming

Main feature: Inspired by the Game of Thrones TV show

Number of installs: 2.1M+

3.Night Owl/Light Owl

Main feature: Dark and light options with distinctive designs.
**
Number of installs**: 1.8M+

4.Ayu

Main feature: Comes in 3 variations and is customizable

Number of installs: 1.7M+

5.Noctis

Main feature: Comes in nine different variations

Number of installs: 780K+
6.One Dark Pro

Main feature: Colorful syntax highlighting
Number of installs: 7M+

7.Dracula offical

Main feature: Available for other code editors as well as VS Code

Number of installs: 5M+

8.Monkai Pro

Main feature: Comes with unique file and folder icons

Number of installs: 2M+

9.Cobalt2

Main feature: Bright colors and customizable

Number of installs: 1.1M+

10.Shades of Purple

Main feature: Uses different shades of purple

Number of installs: 1.4M+

Best Practices for Using VS Code Themes 💻

When it comes to using VS Code themes, let’s take a look at some best practices to consider.

Use themes from the official marketplace: VS Code has a built-in marketplace to download your favorite themes. It’s also easier and safer to use themes from the marketplace.
Check the number of downloads: Before downloading a theme, check the number of installs and reviews to see what other users think. Themes with higher installs and ratings are more likely to be well-designed.

-** Consider your environment**: If you're working in a dimly lit room, a darker theme may be easier on the eyes. And if you're working outside or in a bright environment, a lighter theme may make your code more visible.

Customize to your liking: Many themes have customization options, allowing you to adjust the colors, fonts, and more to your liking. Experiment with settings to find the perfect balance between visual appeal and functionality.

How to Install Themes in Visual Studio Code 🧑‍💻🧑‍💻

Launch Visual Studio Code: Open VS Code if it's not already running.

2.Open Extensions: There are a few ways to access the Extensions view:

Click on the square icon on the sidebar (or use the keyboard shortcut Ctrl+Shift+X or Cmd+Shift+X on macOS). You can also click on View in the top menu and select Extensions.
Search for Themes: In the Extensions view, there is a search bar. You can search for themes by typing the name of the theme you want, or you can simply type "theme" to see a list of available themes.

5.Install a Theme: When you find a theme you like, click the "Install" button next to the theme's name. If you're not sure which theme to choose, you can install multiple themes and switch between them later.

6.Apply the Theme:

After installing a theme, you might see a notification that prompts you to apply it. Click "Reload" to activate the theme immediately.
If you don't see a notification, you can manually change the theme by clicking the gear icon in the bottom left corner of VS Code to open the Settings menu, then select "Color Theme" from the dropdown menu and choose your installed theme from the list.
That's it! You've successfully installed and applied a theme in Visual Studio Code. You can switch between different themes as often as you like to find the one that suits your coding style and preferences.

Introducing My Journey as a Front-End Developer 🚀

Deependra Singh — Fri, 29 Sep 2023 06:01:40 +0000

About me 🧑‍🦱

My name is Deependra Singh, and I'm a front-end developer based in India. I've always been fascinated by the power of the web to connect people and provide delightful user experiences. I may be relatively new to this field, but my enthusiasm for web development knows no bounds.

My Love for Front-End Development ❤️

It was a humble start, and I vividly remember the excitement of seeing my first lines of HTML and CSS come together to create a basic webpage. Since then, I've been on a continuous quest to explore and learn more about this dynamic field.

I want to emphasize that I'm still very much a learner in this ever-evolving domain. With each day, I discover new challenges and exciting opportunities to expand my skills. My journey is one of exploration, trial, and error. I'm not here as an expert but as a fellow learner eager to share my progress, experiences, and the lessons I pick up along the way.

Let's Learn and Grow Together 💫

I'm genuinely excited to be part of the Dev.to community, and I look forward to connecting with fellow learners and experienced developers alike. Your insights, feedback, and shared knowledge are invaluable as I continue to sharpen my skills.

Thank you for welcoming me into this fantastic community of learners and creators. Here's to our collective growth and exploration in the world of front-end development! 🌟

Github