1

I'm a newcomer on React, I'm a Little confused about how "import" statements are written. Until now I've seen this 4 styles:

/* This is very clear to me - Here no Problem */ import React from 'react';

/* What does "./" before ListContacts mean? */ import ListContacts from './ListContacts'

/* What "*" and "as" mean on this import statement? */ import * as ContactsAPI from './utils/ContactsAPI'

/*What does { } mean on this import statement? */ import { BrowserRouter } from 'react-router-dom'

Thanks very much for your time

stever
  • 1,232
  • 3
  • 13
  • 21
ccastanedag
  • 11
  • 2
  • 3
    These are javascript import statements and aren't react specific. They all serve different purposes. You can read more about them here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import As for the `./` those are relative pathnames. – Khauri Feb 02 '19 at 00:03

1 Answers1

2
import ListContacts from './ListContacts'

'./' means it's a component that's not in node_modules. Usually ones you've built yourself.

import * as ContactsAPI from './utils/ContactsAPI'

* means you are importing all named exports (so you can use them by name)

import { BrowserRouter } from 'react-router-dom'

{ BrowserRouter }means that you are only importing the component named BrowserRouter from more than one named export.

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198
stever
  • 1,232
  • 3
  • 13
  • 21
  • 1
    Expanding on this answer, `import` and `export` relate more to ES6 JavaScript than directly to React, and are not supported in many older versions of browsers. This article explains in more detail: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import – Michael Abeln Feb 02 '19 at 00:24