🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
13 : 08 : 49 : 11
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
1×
Become a member
to unlock all features
Autoplay

    Clean Up the Folder Structure and Imports in a React Native App with Absolute Paths

    Chris AchardChris Achard
    react-nativeReact Native
    javascriptJavaScript
    androidAndroid
    iosiOS

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.