React has a feature where you code different modules(js files) to run different features/functions. Starting off with App.js being exported into index.js, and having other modules imported into App.js such as perhaps a moduleContainer.js or navBar.js. Naturally when you're exporting JSX functions, you'd want to place anything that you need for the overall global scope somewhere such as in App.js, which allows you to pass down props called in the global scope.
The reason for coding in this style are various things such as:
Strict variable scoping. You wouldn't have to worry about mixing up codes or similar variables since variables declared in modules are private, making them non-accessible from the global scope.
Easier navigation. Allows for code to be more readable for other developers rather than jumbling up all the different parts of the code into separate pieces. Also makes it easier to debug since you can tell where you should be adding a debugger to. Also helps produce clean code that can be reused and repurposed.
Single-responsibility principle. Each module being responsible for running specific parts of the code
i.e.
App.js, RenderContainer.js, RenderCard.js, App.js, Search.js
Top comments (0)