なぜ import React from 'react' するのか

なぜReactをimportする必要が？

reactのアプリケーションを書いていると、何も考えずにimport Reactしませんか？
僕は何も考えていません。importし忘れたらエラーが出るのでimportしてました。

import React from 'react';
import SomeButton from '~/components/SomeButton';

function RenderButton() {
 return <SomeButton color="blue" />
}

上記のコードを見ていただければ分かる通り、Reactなんてどこにも使ってないですよね。
では何故importする必要があるのか。

JSXはReactのシンタックスシュガー

これが答えでした。

<SomeButton color="blue" />

は

React.createElement(
  SomeButton,
  { color: 'blue' }
)

のシンタックスシュガーです。
そのため、JSX記法を使う際にはスコープ内にReactが存在する必要があります。

import React from 'react';
import SomeButton from '~/components/someButton';

function RenderButton() {
 return <SomeButton />
 // return React.createElement(SomeButton, { color: 'blue' }) 
}

ちなみにwebpackなどでバンドルせず、scriptタグでReactを読み込んでいる場合はグローバルスコープにReactがあるのでimportなどは不要です。