SharePoint Framework using React JS - Part 3

Introduction

In this article, we will explore the creation of a SharePoint Framework web part using React JS. In the preceding articles, we covered the fundamentals of the SharePoint Framework, including essential steps like NVM installation, configurations, and various types of development solutions within the SharePoint framework.

Before proceeding with this article, I recommend reviewing the following articles to establish a foundational understanding of the SharePoint framework:

• SharePoint Framework using React JS - Part 1
• SharePoint Framework using React JS - Part 2

What is a Web Part?

Web parts serve as blocks of UI that can be rendered within SharePoint pages. While there are some out-of-the-box (OOTB) web parts available for use on Modern pages, we can augment our capabilities by adding custom SPFx web parts using React JS. In this article, we will create a custom SharePoint Framework web part using React JS.

Create the First Hello World Web Part

Let's initiate the creation of a new SPFx web part project following the provided instructions.

Create a folder with an appropriate project name at the desired location for the solution. For instance, we've created a folder named "FirstReactWebPart" in the "C:/MySolution" location. Since I have only one C drive partition on my laptop, you can open the folder on your local drive and type "cmd" in the address URL. This will directly open your desired folder path. Refer to the screenshots below for clarity:

Click on the address bar as shown in the image above.

Once you click on the address, kindly enter "cmd" and press the Enter key, as mentioned in the image. This is a simple way to directly open the desired path in the command prompt. There are multiple ways to achieve this, and this is one of them.

After pressing the Enter key, the command prompt will open, and you can refer to the snapshot above. To set up the necessary dependencies on your workstation, you can conveniently install all three major dependencies using the following single command.

npm install gulp-cli yo @microsoft/generator-sharepoint --global

Alternatively, you can install each dependency separately.

npm install gulp-cli --global

In the initial command, Gulp is a JavaScript-based task runner designed to automate repetitive tasks. In the context of the SharePoint framework, Gulp is essential for building projects and generating JavaScript bundles. These packages play a crucial role in the deployment process as well.

npm install yo –global

Yeoman assists in initiating new projects, offering recommended practices and tools to enhance productivity. Within SharePoint client-side development tools, there is a Yeoman generator specifically designed for crafting new web parts. This generator equips developers with shared build tools, standard boilerplate code, and a unified playground website for hosting and testing web parts.

npm install @microsoft/generator-sharepoint –global

The Yeoman SharePoint web part generator facilitates the swift creation of a SharePoint client-side solution project, ensuring an appropriate toolchain and project structure. To globally install the SharePoint Framework Yeoman generator, execute the following above-mentioned command.

In the snapshot provided above, we inputted the command npm install gulp-cli yo @microsoft/generator-sharepoint --global command and press enter.

Executing this command initiates the installation process, and it may require some time to complete on your system.

The snapshot displayed above resembles what you will see upon the successful completion of the installation.

To initiate the creation of an SPFx web part, the initial step is to enter the following command: yo @microsoft/sharepoint. Please input this command and press the Enter key.

In the image above, you'll notice that you are prompted to enter a solution name. Feel free to choose any name for your solution; for instance, I entered "MySolutionName" After entering the name, press the Enter key

Following this, you will be prompted to select the web part type. As we are focusing on web parts in this article, choose "WebPart" and press the Enter key.

Upon pressing Enter after selecting the "Webpart" option, you will encounter the screen shown above. At this point, input your desired web part name and press the Enter key.

Following the Enter key press after entering your web part name, you will need to choose React JS options. Navigate using the down arrow key, select "React" and press Enter. This is in alignment with the focus of this series, where we are working on SPFx web parts using React JS.

Upon pressing Enter, the installation process will commence, similar to the illustration provided in the image above. The necessary dependencies and configurations for your SPFx web part with React JS will be installed during this process. Please allow the installation to proceed, and it may take some time to complete.

Congratulations! Your web part is now ready. You will encounter a screen similar to the one above, displaying a message indicating that the solution (with the specified solution name) has been successfully created. This signifies the successful creation of your SPFx web part using React JS.

To run our web part, we need to execute the gulp serve command. However, before doing that, we must change the local workbench URL. To achieve this, open your project in Visual Studio Code. You can swiftly do this by entering the command “code .” . Ensure that Visual Studio Code is installed on your system; if not, please install it first.

As depicted in the snapshot above, upon pressing Enter after entering the "code ." command, Visual Studio Code will open with the newly created project. This provides you with direct access to the project in Visual Studio Code for further development and configuration.

Please click on the "config" left project menu and navigate to the "serve.json" file. Open the "serve.json" file, which is a crucial file where you can make changes to the initial page URL. This modification is essential to ensure that your project opens on the desired site in the local workbench.

In the provided snapshot, you need to update the initial page URL with your site address. Ensure that you change everything up to the site address, and the remaining "/_layouts/workbench.aspx" should remain unchanged after your site address. This adjustment is necessary for your project to open on the desired site in the local workbench.

Return to your command prompt in the same window. In the same command prompt window, enter gulp serve to run your project. This command initiates the local development server and serves your SharePoint Framework web part.

The gulp serve command may take some time to execute. In the next article, we will explore the "fast serve" option to save time and expedite the serving process.

In the image above, you can observe that once you execute gulp serve, your browser will open this page, displaying the URL of your local workbench. Here, you need to click on the "Add a new web part in column one" option to interact with and test your SharePoint Framework web part.

In the provided snapshot above, when you click on the "Add a new web part" option, a popup will appear. Under the "Local" section, you will find your web part listed with the same name that you entered during the web part creation. Click on your web part to add it to the local workbench for testing and development.

Congratulations! You have successfully created your Hello World default web part. This marks the completion of the initial steps in developing and testing your SharePoint Framework web part.

Conclusion

In this article, we successfully developed a Hello World web part using React JS. In the next article, we will explore the "fast serve" option to streamline and accelerate our development process, saving valuable time. Additionally, we will delve into making some customized changes in our upcoming articles to further enhance our SharePoint Framework web part. Stay tuned for more insights and improvements!

• SharePoint Framework using React JS - Part 4