--- title: React Architecture Tips & Tricks description: React architecture tricks to keep your projects and teams organized image: https://www.bitovi.com/hubfs/React%20Architecture%20Tips%20%26%20Tricks.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ React ](https://www.bitovi.com/blog/topic/react) | November 28, 2022 # React Architecture Tips & Tricks React architecture tricks to keep your projects and teams organized ![Dan Tran](https://www.bitovi.com/hubfs/Imported%20sitepage%20images/T02B04353-U020AGS2MGW-ebcf3a195af2-512.png) Dan Tran Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) We’ve all been there—a complicated project, under-resourced and under-documented, with little continuity or direction. Luckily, Bitovi does things differently. | ![this is fine.](https://www.bitovi.com/hs-fs/hubfs/this%20is%20fine..png?width=684&height=332&name=this%20is%20fine..png) *How your project might look if you don't take our advice...* | | --- | In this post, we’re sharing five tips for organizing your React architecture to help your project run smoothly. ### Small and Single Responsibility Principle (SRP) Single Responsibility Principle, or SRP, means that newly created React components should only have one purpose. A component that was created to display a table should only handle the table. Let’s say you want to reuse the table component. It would be easy to import it and display it as is, but what if you decide to have the component display a table, handle a form, and display a comment section? Now it’s difficult to reuse the table because the form and comments are dragging along. Keeping components pure reduces unnecessary bloat and will make your life and future developers' lives better. ### Independent components The key to making a good component is independence. It would be really nice to just import a component and render it as is, and call it a day. If your component requires data from outside your component, then consider utilizing context to get the data required. If you have a component that has lots of dependencies or props, then you’ll have to understand what needs to be passed into the component to get it to render. While this might seem like a straightforward task, it still requires some work. The fun part is when you will need to refactor either the component or the parent that is rendering the component. You have to consider any side effects that could come from this refactor and prevent them. This gets harder when your dependencies grow. ### File Naming Convention You might be surprised, but a lot of developers have problems naming variables, components, functions, etc. I've seen developers name a variable `data`, a function `buttonClickFunction`, or a component `displayDataComponent`. If you are having trouble naming something, ask yourself, "What is this?", "What does it do?" or "What section of the page is it?" Instead of naming a variable that contains the user's information `data`, call it `userInformation` or `user`. Instead of naming the onClick function on a submit button `buttonClickFunction`, call it `handleSubmit` or `submitUser`. As a general rule of thumb, functions or components should consist of at least 2-3 words. Put yourself in a new developer's shoes, the name should be easy enough to understand what that thing is. ### Dynamic for Scalability Whenever I create a variable, function, or component, the first thing I ask myself is if this can be used in another location of the application, like Section Headers that can accept children elements to display next to the section title. One way to set yourself up for dynamic success is by creating independent components. I once had an independent component, but later I found out I need it in a different section of the application under a different context. Sadly I had to create props for this component to have it sharable in different contexts. If props are required, there should be elements that will be different between the locations this component is being rendered. This refactor was quick and easy to perform since we kept it as close as possible to being pure.  ### Organize File Tree One of the most important things about architecture is the file tree structure. It is important to structure your file tree so that new and old devs can navigate through the repo with ease. File structure, in a way, can be its own form of documentation when every file's name and location can denote its intention within the application. Another principle that applies here is the separation of concerns. Not only could this be applied in the code architecture but also in the file tree architecture. The root of your directory can hold your navigation component, like Home, About, Products, Community, or Downloads, which could be all sibling directories at the same level. As you go into Home, you have components that only render the Home page. Shared components could also stay at the root, and to prevent long relative pathing direction (../../../), you could consider[`_moduleAliases`](https://www.bitovi.com/blog/how-to-create-a-path-alias-in-webpack) the shared directory so that you can simplify the pathing. ## Conclusion Implement these tips, tricks, and concepts, to support your teams across a spectrum of applications. These tips will help new team members understand the application so they can start developing quickly after onboarding, which simplifies continued development and scaling by not having to "follow the thread" to understand how the code works. Architecture is the absolute foundation of good development. With that in mind, we hope you consider applying a few of these concepts to your own work. ### Need some help? Bitovi has a team of expert React Consultants who are ready to dive in and help with anything from [web components](https://www.bitovi.com/blog/how-to-create-a-web-component-with-create-react-app?hsLang=en-us) to [suspense](https://www.bitovi.com/blog/how-to-use-react-suspense-to-improve-ui-load-time). Book your [free consultation](https://www.bitovi.com/frontend-javascript-consulting/react-consulting) to get started!     [![Tag for consulting](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) consulting ](https://www.bitovi.com/blog/topic/consulting) Previous Post ![Four Tips for Working with Remote Product Design Teams](https://www.bitovi.com/hs-fs/hubfs/Four%20Tips%20for%20Working%20with%20Remote%20Product%20Design%20Teams-1.png?height=117&name=Four%20Tips%20for%20Working%20with%20Remote%20Product%20Design%20Teams-1.png) [ Four Tips for Working with Remote Product Design Teams ](https://www.bitovi.com/blog/four-tips-for-working-with-remote-product-design-teams)   Next Post ![DevOps Consulting: Continuous Integration](https://www.bitovi.com/hs-fs/hubfs/DevOps%20Consulting-%20Continuous%20Integration.png?height=117&name=DevOps%20Consulting-%20Continuous%20Integration.png) [ DevOps Consulting: Continuous Integration ](https://www.bitovi.com/blog/devops-consulting-continuous-integration) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/react-architecture-tips-and-tricks", "@type" : "WebPage", "description" : "React architecture tricks to keep your projects and teams organized" }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Dan Tran" }, "dateModified" : "October 5, 2023, 6:40:00 PM", "datePublished" : "2022-11-28 23:04:27", "description" : "React architecture tricks to keep your projects and teams organized", "headline" : "React Architecture Tips & Tricks", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/React%20Architecture%20Tips%20&%20Tricks.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```