Do you need to import React for using JSX in components?

0
votes

I have a NextJS project, and I have some components.

When using JSX, IDE tells me to import React from 'React'.

However, if I don't do that, the page still works.

Why?

1
reactjsnext.js
Then you dont need .jsx extension – kind user

1 Answers

1
votes

Summary: NextJS has the plugin https://babeljs.io/docs/en/babel-plugin-transform-react-jsx which adds the import automatically for you.

More detailed explanation

NextJS (Version 9 at this time) comes with its on babel configuration next/babel. https://nextjs.org/docs/advanced-features/customizing-babel-config

The following are the babel plugins preinstalled by nextjs

  1. preset-env
  2. preset-react
  3. preset-typescript
  4. plugin-proposal-class-properties
  5. plugin-proposal-object-rest-spread
  6. plugin-transform-runtime styled-js

The plugin preset-react bundles another plugin https://babeljs.io/docs/en/babel-plugin-transform-react-jsx which adds the React import for you. More examples are in the plugin page.