What's the difference between importing React's Fragment from React and React, { Fragment }?

So assume you have an object.

let object = {
   foo: '1',
   bar: '2',
};

In order to use the value foo you can do the following

• object.foo
• let { foo } = object

These both are the same, the later mentioned way is called destructing which was introduced in javascript ES6 version.

Now coming to topic for

What's the difference between import React from 'react' and import React { Fragment } from 'react' in context of , and <>?

imagine React as object which has the following features e.g Fragment in this case. You can access it the following ways

1- First way

 import React from 'react';
 <React.Fragment></React.Fragment>

2-

import React, { Fragment } from 'react';
<Fragment></Fragment>

Now in the second way this is basically importing all React features and also destructing a feature from React which is Fragment. SO you don't have to write React.Fragment again and again.

3-

<></>

This is a babel feature, babel when compiling will convert <></> this into <React.Fragment></React.Fragment>

This is basically syntactic sugar:

import React, { Fragment } from 'react'

Will allow you to write the following:

class MyComponent extends React.Component {

 render () {
   return (
     <Fragment>
       <div className="fragment1">Fragment 1</div>
       <div className="fragment2">Fragment 2</div>
     <Fragment>
   ) 
 }
}

Instead of having to write explicitly React.Fragment. Note that you could also write the following if the only imports that you need are React.Component and React.Fragment:

import { Component, Fragment } from 'react' 

class MyComponent extends Component {

 render () {
   return (
     <Fragment>
       <div className="fragment1">Fragment 1</div>
       <div className="fragment2">Fragment 2</div>
     <Fragment>
   ) 
 }
}

This may also become relevant when using module bundler such as Webpack, so your bundler will only import the required dependencies and it may result in a smaller bundle (AKA your app loads faster). Take a look at Tree Shaking for more details. This ultimately depends on how the imported package exports its modules, as mentioned in the reply above it may have no benefit for React - at the moment - but other libraries may leverage that mechanism. It is usually a good practice to try to keep your imports as strict minimum.