vandelay

{React} importing & exporting

Tech: React

Challenge: while working through a tutorial, an error appears and no content is displayed!

react_import_export_error

I narrowed down the problem to the export/import of the tutorial’s js code. The tutorial is very basic, and my repo uses create-react-app, so several times I needed to troubleshoot errors that the tutorial didn’t run into since it was a different environment.
 
Code / Solution:

Here is the code supplied by the tutorial for importing the js code:

import {ReversibleList} from './ReversibleList.js'

I also saw my own code for importing React and Component:

import React, { Component } from 'react';

Why the {} sometimes, and other times not? Could this be the issue?
 
With a little help from the below article, I discovered the difference between export and export default!

If there are multiple exports, then the {} are needed. If the file uses export default, then no {}!

In code terms…

if (export default) {

// ex – export default class This extends React.component

import This from './This.js'

} else {

// ex – export class This extends React.component

import {This} from './This.js'

}

 

Reference:

https://medium.com/@thejasonfile/a-simple-intro-to-javascript-imports-and-exports-389dd53c3fac

https://github.com/lukekedz/react-armory-tutorial