How to Organize Your React App ft. Tania Rascia - RRU 228
Aug 16, 2023
auto_awesome
Guest Tania Rascia, a web developer and writer, shares insights on organizing React apps based on domains for refactoring, working on different sections, and features. They discuss modular GraphQL servers, micro front-ends, migrating from Angular to React, and organizing with domain-based thinking. Recommended tools include Edge Impulse for machine learning and React Location for data pre-loading.
Organize React app based on domains, not functions, to enhance code navigation and collaboration.
Prefer traditional CSS over CSS-in-JS solutions for easier organization and reasoning.
Try Edge Impulse for user-friendly machine learning model building, including image recognition and sound analysis.
Deep dives
React Architecture: Structuring a React Application
Tanya Rasha discusses her thoughts on structuring a React application. She recommends organizing components based on domains rather than functions, creating separate folders for different sections of the app. This approach allows for easier code navigation and enhances team collaboration. Tanya also mentions the importance of making localized components self-contained and shares her experience with refactoring monoliths using microservices.
CSS in JS and Styled Components
Tanya Rasha expresses her preference for traditional CSS and SASS over CSS-in-JS solutions like styled-components. She finds it easier to reason about and organize CSS when using traditional stylesheets, although she acknowledges the benefits of the CSS-in-JS approach for prototyping and component-based styling.
Machine Learning with Edge Impulse
TJ Vantol recommends Edge Impulse as a user-friendly platform for building machine learning models. It offers a UI that simplifies the process of creating machine learning models, including image recognition and sound analysis. TJ highlights the platform's capability to handle complex tasks like image classification and sound-based anomaly detection.
Netlify: Easy Static Site Deployment
Tanya Rasha praises Netlify for its simplicity and efficiency in deploying static sites. She recommends it as a reliable hosting service, particularly for front-end only sites. Tanya appreciates Netlify's commitment to open-source and the learning community, exemplified by hosting her own website under an open-source plan.
Learning TypeScript with 'Full Stack React with TypeScript'
The speaker recommends the resource 'Full Stack React with TypeScript' by Newline as a valuable course for learning TypeScript. She acknowledges the importance of understanding the fundamentals behind TypeScript code to write it more effectively, and highlights the clear code examples and easy-to-follow writing style of the course.
Summary of the Podcast Episode
In this podcast episode of React Roundup, host Paige Needringhouse is joined by panelists Jack Harrington and TJ Vantol, along with special guest Tanya Rasha. Tanya discusses React architecture, emphasizing the need to structure applications based on domains rather than functions. She also shares her thoughts on CSS-in-JS solutions, such as styled-components, and recommends traditional CSS and SASS for better organization. Additionally, TJ recommends Edge Impulse for building machine learning models with ease, and Tanya praises Netlify as a reliable platform for deploying static sites. Finally, the speaker recommends the 'Full Stack React with TypeScript' course by Newline as a valuable resource for learning TypeScript.
Tania Rascia joins the round up to discuss how to organize your code across files, directories, components, and repos within your React app. The panel chimes in with what they've seen and clarify how these approaches effect the overall application functionality of your app. Sponsors
