Why do you need to import React multiple times in parent and child components?

Question

If you have a parent component file that already imports React, why does any of its rendered children files also need to import React? Is it just a safety measure in case those children are ever rendered somewhere else where React has not been imported yet?

Answer 1

In nodejs each file is a module, that has its own scope of variables. When you import variable into file (React for example) you add this variable to the module scope, but not to the global scope.

In case of webpack you can use providePlugin to easily make React variable global:

new webpack.ProvidePlugin({   React: 'react' // ReactJS module name in node_modules folder }) 

After that you are able to skip importing React variable in all of your modules. Webpack will do it itself where needed.

Answer 2

If you use JSX and babel, you have to import React in every file because babel-preset-react will transpile your JSX code into React.createElement() calls, so this code

const Foo = () => <h1>Test</h1>; 

will be

var Foo = function Foo() {   return React.createElement(     "h1",     null,     "Test"   ); }; 

DEMO: Babel REPL

This is the reason why React should be accessible in the proper scope and one way to do it, is to import React in a file.