Component Directory Structure | React Native Day 1

Level: (very) Beginner

Today I commit to programming. The first language I will be learning is Javascript. Mostly because it is taking over the world.

I also commit to documenting the journey. These articles are going to be (very) beginner level. Any comment + suggestions welcome ;)

What is A Component Anyway?

When you use an app, you see a display on your screen. That display, or user interface, is comprised of multiple parts.

There might be a button. There might be a sidebar. There might be a picture.

Each of parts are referred to as a component.

Functionally, a component takes in data, and displays it for the user, without actually manipulating the data in anyway.

Component Structure

It is possible to write a component in a single file. However, I believe Spencer Carli makes a great case for why you should split it out.

Thus, each component we build in our app will have its own directory. In that directory will be a minimum of three files.

  • ComponentName.js — this is where the actual component lives, transforming our data into something understandable (and viewable) to the user.
  • styles.js — this is where we define how our component actually looks.
  • index.js — this is where we will export our component and make it assessable to the other parts of the app.

Spencer shares how this structure not only keeps your code easy to understand, but maximizes code reuse.

“The purpose there is that as you break a larger component into smaller ones (like in GenericTextInput) you’ll reuse a lot of the same styling.”

Conclusion

One of the first mental models I learned for coding was DRY: Do not Repeat Yourself.

This principle is fundamental. I look forward to building a repretoair of tactics to fulfill it.

Mental Models Used:

DRY — Do not Repeat Yourself