learn-co-curriculum / react-modular-code Goto Github PK

import * from

use before definition

• Inside of the Named Exports section, directly above the Imports header, the code block dropped the function declaration prior to the values() function definition.

• The last code block in the import section (directly above Importing Node Modules) tries to import gryffMascot and alias it to mascot, but the syntax is wrong. It is currently written

import { mascot as gryffMascot } from './houses/Gryffindor.js';

but it should be

import { gryffMascot as mascot} from './houses/Gryffindor.js'

The function in houses/Gryffindor.js is called gryffMascot, not mascot. To alias it to another name, you want to put <nameUsedInTheExportFile> as <newNameAlias>.

It really seems like this lesson would be better served right at the beginning of the React module. I understand that the intent with the previous labs may have been to "show all the cool things you can do with React", but Import and Export should have been explained before that. Please consider a reorg of these labs.

React makes the modularization of code easy by introducing the component structure.

This is inaccurate and gives students the impression that components don't exist elsewhere; it does, it's just that this curriculum didn't happen to teach it in that section. It's a vanilla JS feature that can totally be used sans-React (as some of us did, in our JS projects).

Alternative:

React makes use of JavaScript's component structure, which we haven't been introduced to yet. It looks something like this:

Need to remove the hyphen from this word:
read-able

Thank you.

Issue #6 has not been entirely fixed. Specifically, bullet point 1 which says

Inside of the Named Exports section, directly above the Imports header, the code block dropped the function declaration prior to the values() function definition.

is unfixed. The code block above the Import header (about 3/4 of the way down the page) still has a dropped function declaration before the values() function

Hello,

In the Export section, the code for importing the whosehouse function seems to be incorrect.

The source file is HagridsHouse.js,
BUT,

the in the Hogwarts.js file, it's being imported from:
import whoseHouse from './house.js'

Right?
Mentioning it, as it could be confusing for someone just seeing import/export code for the first time.

The phrase "on the other hand" makes the following very confusing. I'm guessing one of the "exports" has to be changed to "imports," but I'm not sure:

"With named exports, we can export multiple pieces of code from within a module, allowing us to call on them explicitly when we import.

Named exports, on the other hand, allow us to export several specific things at once:"

Thank you.

import {function()} from
import {function()} from allows us to grab a specific function by name, and use that function within the body of a new module.

We're able to reference the function imported by its previously declared name, or rename it inside of our import statement.

// src/Hogwarts.js
import { colors } from './houses/Gryffindor.js'
import { mascot as gryffMascot } from './houses/Gryffindor.js'

colors()
// > 'Scarlet and Gold'

mascot()
// > 'The Lion'

The meme doesn't work.