You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/spfx/web-parts/get-started/use-fabric-react-components.md
+12-13Lines changed: 12 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -59,26 +59,25 @@ You can also follow these steps by watching this video on the SharePoint PnP You
59
59
60
60
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.
61
61
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:
You now have a web part project with the React framework.
69
67
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:
71
73
72
-
You will need to add a reference to the office-ui-fabric-react package. In the dependencies section, add the following line:
73
-
74
74
```
75
-
"office-ui-fabric-react": "5.132.0",
75
+
code .
76
76
```
77
+
78
+
You now have a web part project with the React framework.
77
79
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.
82
81
83
82
As you can see, the `render` method creates a react element and renders it in the web part DOM.
84
83
@@ -92,7 +91,7 @@ You can also follow these steps by watching this video on the SharePoint PnP You
92
91
);
93
92
```
94
93
95
-
10. Open **DocumentCardExample.tsx** from the **src\webparts\documentCardExample\components** folder.
94
+
9. Open **DocumentCardExample.tsx** from the **src\webparts\documentCardExample\components** folder.
96
95
97
96
This is the main react component that Yeoman added to your project that renders in the web part DOM.
0 commit comments