Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
React Native Project Structure
4
React Native Project Structure
Type-Based Project Structure
One of the great benefits of the type-based project structure is reusability. You can always translate this structure to any other front-end app you might build. For example, you might build a desktop app with Electron. You can carry forward this type of project structure to reuse some of the files and folders directly.
The constants, utils, and api folders can be directly used in any other similar project you want to build. Also, there's more abstraction between different layers of your application. This gives you separation of concerns while building your app.
Feature-Based Project Structure
This type of project structure provides a more in-depth idea about the features you're building. It's more developer-friendly for quick iteration and speeding up the workflows. However, it may not be scalable since, for huge codebases, there are going to be so many features that you'll run into decision fatigue when deciding how to differentiate them.
Feature-Based Project Structure
Atoms, Molecules, and Organisms
First, you'll break your UI into the smallest low-level native wrappers. These are custom UI wrappers around native components. For instance, you could have a generic button component. It will be a higher-order component and will conditionally render the TouchableOpacity, TouchableHighlight, or Button component using props.
Next, you'll use your atoms to create molecules! In other words, you'll use your custom button component to create different buttons. Maybe you'll have a different button for your login form and another button for redirecting to the signup form.
Finally, you'll use your molecules or molecules and atoms to build organisms! You'll use the above components to build screens and pages.
Example:
Example
Atoms:
serve as the foundational building blocks that comprise all our user interfaces. These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
Molcules:
relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
Organisms:
relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
Templates:
page-level objects that place components into a layout and articulate the design’s underlying content structure. To build on our previous example, we can take the header organism and apply it to a homepage template.
Screen:
specific instances of templates that show what a UI looks like with real representative content in place. Building on our previous example, we can take the homepage template and pour representative text, images, and media into the template to show real content in action.
References:
References:
https://www.waldo.com/blog/react-native-project-structure
https://atomicdesign.bradfrost.com/chapter-2/