How to read Meteor + React import syntax

Hello,

So I’ve been following the new tutorial of meteor + react todo app as I wanted to convert an app written in Meteor 1.2 + React.

I got confused with how import line is written such as

import React, { Component, PropTypes } from 'react'; 
import ReactDOM from 'react-dom';
import { createContainer } from 'meteor/react-meteor-data'; 

import { Tasks } from '../api/tasks.js';

import Task from './Task.jsx';

How do I determine if the import I should write must have { } or just simple text?

Thanks for your help :slight_smile:

1 Like

TL;DR;

Rule of thumb: use whatever the package author tells you to. If it’s a Meteor package with no further instructions, used named imports. If it’s anything else with no further instruction, use a default import.

Longer explanation:

The part outside the curly braces is the default export. That’s if the module that you’re importing has a export default Something line. Note that here, you’re actually assigning that default export to the variable identifier of your choosing (e.g. assigning react's default export to a React variable, but you could call it anything).

The part inside the curly braces are named exports. That’s if the module does something similar, like export { SomethingElse }. Here you don’t pick the variable name unless you want to, with import { SomethingElse as MySomething }.

Usually, the default export is the most important thing, and that’s all you’ll use, calling it whatever makes sense. If the package provides other things which aren’t used as often, you can then also import these by name. React is a good example here (although just for convenience, since the default export - in React’s case - also includes a lot of those methods as properties, e.g. React.Component).

In general, you should import according to the suggestions of the package author. Usually it’s just the default export unless they mention otherwise.

For old Meteor packages, anything in that package’s package.js file exported with api.export('name', something); will always be a named import. This is something you can assume in general about Meteor packages, however, Meteor packages developed for Meteor 1.3+ can do both kinds of exports, so it’s up to the author.

4 Likes

Thanks for taking time answering my inquiry… now that particular code block finally made sense to me :smile: