There is a point I don’t understand. On page 260, it has the following code in the index.js.
import App from “./App”;
But there is no “App” component being defined in the App.js (on page 263).
The end example is working fine, but I am curious is there a typo or something? Why is the example still working even if we import something (“App” component) that doesn’t exist?
It is strange, but here is what is happening. The import is just for the JS file. Anything can be in the JS file you are importing. The part where the compiler is more strict is with the
render function, which does expect a component called App. How do we explain that strangeness?
App.js, what we are exporting is a component via
connectedComponent. More specifically, what gets returned is a new component that maps to
App. That is why the compiler doesn’t complain when you build the app, for the
App component does get created in a roundabout way!
I think I sort of get it.
Thank you very much for your help.
Another thing that may help. If you bring up the React Dev Tools (as part of the Chrome Dev Tools), you can see the App component being returned by
connectedComponent when you inspect the React-ified DOM tree.