Organizing Your React Projects
I may have lied a bit last week: I’d said I was looking to write this blog on testing Rails and React applications, but working on my fantasy hockey app led more towards setting up the front end and fetcher services on the back end. So I’ll try to dive into that a bit in the next couple weeks, but this week we’re going to focus on organizing your React applications — something that I’ve been focusing on a lot in my fifth project at Flatiron and while starting this new project. There’s two main ways that I went about this: using absolute paths and index.js files.
Absolute paths allow you to specify a root directory in your application (generally src in React), so your import statements can begin from that directory instead of specifying where the import is relative to the current directory. Think
// absolute import
import SomeComponent from 'components/SomeComponent'instead of
// relative import
import SomeComponent from '../../../components/SomeComponent'This benefits you in two ways: allowing your code to scale easier, and reducing the amount of time you spend figuring out how many directories you need to move up ../../ to reach the file you’re looking for. For the first, consider you move around the component calling SomeComponent in the above example. When this happens, the relative import will likely break, as the path to SomeComponent is different. Using absolute imports, the path remains the same so long as SomeComponent doesn’t move.
Following the documentation, there’s one step to implementing this in a React app created with create-react-app — configure a jsconfig.json or tsconfig.json file in the root directory of your application with the following:
{ "compilerOptions": { "baseUrl": "src",}, "include": ["src"]}
Last, I ran into an error while creating this file — it looks like there’s an issue with the node module dotenv. Long story short, navigate to node_modules/dotenv/package.json and replace line 6 ( "types": "types" ) with "types": "types/index.d.ts". I found this fix in a StackOverflow post, see Benoit Blanchon’s answer.
Now on to index.js files. Quickly put, index.js files allow you to import a directory as a module. Particularly in React applications, this can clean up your import statements significantly. I’ve been using these all over the place lately, but I think the best example for showing how multiple imports can be called in one line is in a components folder.
Quick before we dive into my examples, there’s a few different ways to write up your index.js files. They’re pretty much all similar to how you’d usually import / export files — you’re really just re-exporting something from a file.
// reexports all exports from file
export * from './somethingInThisDirectory'// reexports default export from file (can be with different name)
export { default as NamedDefaultExport } from './somethingInThisDirectory'// reexports specific named exports from file
export { Export1, Export2 } from './somethingInThisDirectory'
Once configured, you can import any of those named exports from the directory instead of specifying the file name and can import multiple exports in one line import { Export1, Export2 } from 'theAboveDirectory'.
Lets visit the fantasy hockey app that I’ve just started working on for a real example. In my App.js file, I have three routes ( '/', '/login', '/signup') that correspond with the Welcome, Login and Signup components. These three components are found in the src/components/prelogin directory. All three are the default export of the file they’re written in, and are reexported from the index.js file in src/components/prelogin:
export { default as Login } from './Login'export { default as Signup } from './Signup'export { default as Welcome } from './Welcome'
Now, back in App.js using index.js files and absolute pathing, these three components can be imported in one line:
import { Welcome, Signup, Login } from 'components/prelogin'All in all, I believe that these are two really good tools to clean up your React projects. It does take a little bit of configuration, but the end result is a project that is easier to navigate and understand.
