React works without importing it

Question

I am confusing about the import React statement. I know that if we need to use JSX we need to import the React from the react package.

import { Count } from "./components/Count";

// import React, { useState } from "react";
function App() {
  const visiable = true;
  return (
    <div>
      <Count visiable={visiable} />
      {/* <button
        onClick={() => {
 
        }}
      >
        Switch
      </button> */}
    </div>
  );
}

export default App;

in the code example above, isnt that the return data are JSX? I have div, button and Counter component inside return statement. If I understand correctly, these are JSX.

But I did not import the React inside the file. But it's still compiled successfully. May someone help me understand this. Thanks

Answer 1

It works just fine because React 17x introduces the JSX Transform - importing React will not be needed anymore. JSX will get auto transformed into javascript.

More info: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html