Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kayla Johnson
482 PointsWhat's the difference between putting imported elements in curly braces and not?
I saw in the video that we use import React from 'react'; And similarly when we're importing Components into other files, that works the same way. But import Link from 'react-router-dom'; does not work. It has to be import { Link } from 'react-router-dom';
Why is that? At first I thought {} were to put multiple imports at once like we did previously. But without them I get this: 45:12-16 "export 'default' (imported as 'Link') was not found in 'react-router-dom'
3 Answers
jay aljoe
4,113 Points1.To import only the Component from react you would have to do "import { Component } from 'react' ", and now you can use the component just like normal.
- To import the entire react module you would do " import React from 'react' ", and now you can access the component inside React or any other component like so "React.Component". Using "import React, { Component } from 'react' ". you are importing both the entire React module and a specific component of that module. We use the {} syntax when we need only certain things inside a module such as a variable, a function, a class or even another module from a large library (fine amount of modules composed to work to gather) such as React.
see here for examples: https://codesandbox.io/s/vy2y4jnwx0
jay aljoe
4,113 PointsA file /module can export multiple functions/ methods. When you import a file like this
" import file from 'some module ' ", you import the entire file and its components/methods. And now you can access the components inside the file by doing "file.method name". or you can import only a specific method/function that's inside that file by doing
"import { method } from file". And now you can just use that method like your own method.
Kayla Johnson
482 PointsSo when I say import React, { Component } from 'react'; it's only importing the Component module from React? And without { Component } it's importing all of the react.js file?
I still don't understand why I can't do import React, Component from 'react'; why does Component have to be in { }
Magnus Martin
44,123 PointsMaybe this helps.
import {Link} from 'react-router';
imports a named export from react-router, i.e. something like
export const Link = 42;
Source: https://stackoverflow.com/questions/33524696/es6-destructuring-and-module-imports
onesoftwareengineer
Full Stack JavaScript Techdegree Graduate 19,767 Pointsonesoftwareengineer
Full Stack JavaScript Techdegree Graduate 19,767 PointsHi there, was asking this question myself many times and the following link has a thorough and easily comprehensive approach https://stackoverflow.com/questions/31096597/using-brackets-with-javascript-import-syntax It explains when and how to use curly braces while importing. Thank God, someone took time to explain it so good.