ES6 import {} from '..'后缀名的问题

Question

最近在看阮一峰的ES6入门。下图中圈出来的地方不太理解。

文中说到.js后缀不可省略。
但是下文中又出现了如下写法：

// lib.js

export let counter = 3;

export function incCounter() {

  counter++;

}

// main.js

import { counter, incCounter } from './lib';

console.log(counter); // 3

incCounter();

console.log(counter); // 4

这里import { counter, incCounter } from './lib';不是省略了.js后缀名吗。
对比了一些人家写的react代码：

import React from "react";

import { render } from "react-dom";

import { Provider } from "react-redux";

import App from "./containers/App.jsx";

import Store from "./store/Store";

import React from "react";这里也省略了.js后缀，但是import App from "./containers/App.jsx";却又把后缀名完整写出来了。

请教一下各路大神，解答一下疑问：import..from的后面究竟在什么情况下要写.js这类的后缀名，什么时候不需要写。还是因为别人用工具配置了什么东西所以才不需要写后缀名。
万分感谢！！！