Skip to content

Commit 4f5eb0a

Browse files
committed
Fixing tutorial
1 parent 8d7fc6c commit 4f5eb0a

File tree

1 file changed

+12
-13
lines changed

1 file changed

+12
-13
lines changed

docs/spfx/web-parts/get-started/use-fabric-react-components.md

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -59,26 +59,25 @@ You can also follow these steps by watching this video on the SharePoint PnP You
5959

6060
At this point, Yeoman installs the required dependencies and scaffolds the solution files. This might take a few minutes. Yeoman scaffolds the project to include your DocumentCardExample web part as well.
6161

62-
6. Next, enter the following to open the web part project in Visual Studio Code:
62+
6. When initial scaffolding is completed, enter the following to explicitly install the 5.x version fo the Office UI Fabric to your solution:
6363

6464
```
65-
code .
65+
npm install [email protected]
6666
```
67-
68-
You now have a web part project with the React framework.
6967

70-
8. Open **package.json** from the root folder
68+
> [!NOTE]
69+
> Starting with SharePoint Framework 1.8, you can use either Office UI Fabric version 5 or version 6. In this case we are using specifically Office UI Fabric version 5.143.0, so we are adding the needed dependency on it. If you would be using Office UI Fabric version 6.x, you'd also need to update the used TypeScript version of the solution.
70+
71+
72+
7. Next, enter the following to open the web part project in Visual Studio Code:
7173

72-
You will need to add a reference to the office-ui-fabric-react package. In the dependencies section, add the following line:
73-
7474
```
75-
"office-ui-fabric-react": "5.132.0",
75+
code .
7676
```
77+
78+
You now have a web part project with the React framework.
7779

78-
run `npm install`
79-
restart VS code.
80-
81-
9. Open **DocumentCardExampleWebPart.ts** from the **src\webparts\documentCardExample** folder.
80+
8. Open **DocumentCardExampleWebPart.ts** from the **src\webparts\documentCardExample** folder.
8281

8382
As you can see, the `render` method creates a react element and renders it in the web part DOM.
8483

@@ -92,7 +91,7 @@ You can also follow these steps by watching this video on the SharePoint PnP You
9291
);
9392
```
9493
95-
10. Open **DocumentCardExample.tsx** from the **src\webparts\documentCardExample\components** folder.
94+
9. Open **DocumentCardExample.tsx** from the **src\webparts\documentCardExample\components** folder.
9695
9796
This is the main react component that Yeoman added to your project that renders in the web part DOM.
9897

0 commit comments

Comments
 (0)