10
Help us understand the problem. What are the problem?

posted at

updated at

import React from "react" はもう要らない

この記事は公式のIntroducing the New JSX Transformに基づいて書かれています。

結論

  • import React from "react";はReact 17以降は必要ないよ。16以前は必要だよ。
  • コンパイラが自動でインポートしてくれるようになったよ。

本編

Reactでコンポーネントのコードを書くときに、Reactをソースコードの中で特に使ってる訳ではないけど、import React from "react";って書いてますよね。

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}

なぜ必要かというと、Reactコンポーネントは次のようにコンパイルされるためです。

コンパイル後
import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

コンパイル前のコードでReactを使っていなくても、コンパイル後のコードでReact.createElementを使っているからインポートが必要なんですね。でも、React 17以降はコンパイルの挙動が変更されました。

React17以降
// 次の行はコンパイル時に自動で挿入される
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

エレメントを生成する関数がReact.createElementからjsxに変わりました。また、jsxはコンパイル時に自動でインポートされるようになりました。よって、React 17以降はimport React from "react";は書く必要がなくなったわけです。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
10
Help us understand the problem. What are the problem?