1

Can anyone explain to me why

import { React } from 'react';

breaks everything, yet

import React from 'react';

works just fine? Aren't they saying the same thing? I've tried to find an answer elsewhere in documentation and on the internet, but I can't figure it out. I think it may have something to do with Babel?

Here are my npm packages if it helps: 

"dependencies": {
    "moment": "^2.18.1",
    "prop-types": "^15.5.10",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.0.0",
    "styled-jsx": "^3.2.1",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "eslint": "^4.13.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-react": "^7.5.1",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.29.0",
    "react-hot-loader": "^3.0.0-beta.7",
    "url-loader": "^0.6.2",
    "webpack": "^3.4.0",
    "webpack-dev-server": "^2.5.0"
}
glitchwizard
  • 321
  • 4
  • 16

4 Answers4

8

import React from 'react'

This essentially says "find the default export from the react module and import that as a constant that I want to call React."

import { React } from 'react'

This says "find the export from the react module which is explicitly named React, and import that here as a constant that I want to call React."

Why doesn't import { React } from 'react' work?

Because there isn't an export named React in the react package. There is only a single default export. If you do this, you'll find that React is undefined.

But it doesn't even look like I use React in my code. So, couldn't I just name it anything I want, like import Foobar from 'react'?

No, sorry. You need to import the default and name it React. This is because anytime you write JSX code like <MyComponent /> or <App />, this JSX code is transpiled and uses React.createElement(). So, you need to have access to React.

Helpful references:

Alvin S. Lee
  • 3,900
  • 26
  • 33
5

The difference is between default exports & named exports.

Default Exports

react.js

class React {
  render() {
    // some code...
  }
}

export default React;

You can import the above file react.js in your project like

import React from "./react.js";

Named Exports

react.js

export class React {
  render() {
    // some code...
  }
}

export const Component = () => {
    // some code...
};

Then you have to import the above file react.js in your project like

import { React, Component } from "./react.js";

TL;DR - Learn about Default Exports & Named Exports from here

deadcoder0904
  • 3,758
  • 1
  • 27
  • 91
3

According to mdn, imports work this way

import defaultExport from "module-name";
import { export } from "module-name";

What this basically means is that if a package exports something as a default, it should be imported without the {}, and with any name you choose. When when a package exports something as a named export, it should be used with the {}.

The react package exports React as a default and each package can have only one default export.

Harsha Venkatram
  • 2,726
  • 1
  • 29
  • 55
1

The second one works because it's the default export from the React package. You can actually name it anything because there is only a single default export per module.

So, import RandomName from 'react'; would have the same functionality.

Anything else exported is explicitly defined which is why the naming matters.

The other exports may look something like this:

module.exports = {
    someFunction: doSomething(),
    ... // more exports
}

To import it, you would do import { someFunction } from './path';. You can see that we're destructuring (unpacking) the name from the export object.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

23k
  • 1,247
  • 3
  • 15
  • 46