Clean Up the Folder Structure and Imports in a React Native App with Absolute Paths
There’s no required folder structure for React Native applications, but we’ll structure our app with some common folder guidelines. Then, we’ll create a package.json file for each sub-folder, which allows us to import components using absolute references like components/Header instead of relative paths like ../../../components/Header.
Instructor: [00:00] There is no defined file or folder structure for React native applications, but our root folder is getting crowded with all of the new files. Let's clean that up by adding some folders.
[00:12] Create a new source folder which we'll use to hold all of the source files. Under source, create a components folder. We'll start by moving the header component files into the components folder.
[00:30] Then let's make a styles folder inside of source. We can move the header style file into the styles folder. Now, if we want to import and use the header, instead of importing header from ./header, we have to use ./source/components/header.
[00:52] In order to avoid the complexity of relative paths, however, we'll first switch to absolute path imports. In the components folder, make a new package.json file. In that package.json, make an object and add a single name key with a value set to components.
[01:12] Now, that components folder will act like a module. Back in app.js, we can import directly from components, which cleans up the import significantly. We can do the same thing with the styles folder by adding a new package.json file and setting the name to styles.
[01:34] Now, in the header.ios and header.android files, we can import the header directly from styles. Now, we can rerun with the new folders and the cleaned up imports.