Explain React Directory Structure and JSX?

Web Development
#1

Directory Structure of CRA:

  • Entry point file
  • CSS files
  • Node modules

TSX is the file extension for TypeScript files containing JSX code.

  • ./index.tsx: The entry point of the project. This is where I initialize the libraries I use, such as the theme provider (from styled-components), the store (Redux, Apollo, or your library of choice), the router (React Router) and I also include my <App /> component, obviously.
  • ./app.tsx: Contains the <Router /> component. This is also where I implement my features (mostly containers, but we will learn about that later) that are used across the whole app, such as the modal system, the notification container, service workers, etc.
  • ./router.tsx: Composed of a <Switch /> and the main components of my project. If I need sub-routes, they are handled by the containers using them.

If an asset is used only in a specific container, it belongs to a folder with the container’s name.

For instance, if my app uses a logo, it can probably be used anywhere in my project. For this reason, this one belongs to the root of the .assets folder. But a background image that is only used in the Auth container belongs to the .auth sub-folder.

This method also makes it easier to find assets that are not used anymore. It shouldn’t be a problem in the first place, but let’s be honest: We often forget to clean this folder.

How should you group your components?

A lot of different tastes here. React’s documentation suggests two solutions:

  • Group files by feature or routes.
  • Or group files by type (CSS, components, tests, etc.).