Fluent UI - best way to import components

Question

I'm a beginner in the new Javascript world and would like to know the difference between

import { MessageBar } from "office-ui-fabric-react";

import { MessageBar } from "office-ui-fabric-react/lib-commonjs/MessageBar";

Both of them seem to work fine. I'm using webpack for creating final JS files. What is the recommended way to import components?

Answer 1

Both should work. The first one allows you to aggregate all your imports in a single expression.

Note that UI Fabric is deprecated and you should switch to Fluent UI React or Fluent UI React Northstar. So for example your import could look like this:

import { DatePicker, MessageBar } from '@fluentui/react';