React Roots Course Preview

Instructor Introduction

• Welcome to the preview of the React Roots course.
• Focus: Basics of building single-page web applications with React and TypeScript.
• Visit reactroots.com for more information.
• Today’s preview is from Lesson Four.

Lesson Preview: Directory Structure

Learning Objective

• Use a consistent and predictable folder structure to organize code.

Key Points

Directory Structure

Common Patterns

• No strict rules; React and TypeScript allow flexibility.
• Emphasis on making informed decisions about code organization.

Components Folder

• Create a components folder in the src directory.
• Store reusable components here (e.g., <AppButton />).
• Example: AppButton.tsx encapsulates button behavior for multiple uses in the app.

Utils/Helpers/Library

• Folder for utility functions or library code.
• Common names: utils, helpers, lib.
• Example: LabelFormatter.ts for formatting strings to be used throughout the app.
• Example: API.ts for API request functions like getAll() and getOne().

Configurations

• config folder in utils for dynamic variables like API_KEY.
• Example: Using .env for environment variables.
• Warning: Environment variables in front-end apps are not completely secure.

Pages Folder

• For top-level pages using a similar approach as in Next.js.
• Each page may have its own components and sub-folders.
• Example: Home.tsx and About folder containing index.tsx and AboutSection.tsx.

Types Folder

• For TypeScript types used across the app.
• Example: User.ts interface.
• Helps in maintaining consistency.

Further Structuring as the App Grows

• Introduce nesting as the app scales.
• Example: components/AppNavBar folder containing the component file and related styles.
• Potentially, folders like styles for global styles and state for state management.

Best Practices and Additional Notes

Import Practices

• Use of index.tsx files for easier imports.
• Example: Importing AboutPage using import AboutPage from 'pages/about';

Developer Ergonomics

• Focus on maintaining clear organization for ease of development.
• Ensure the build process optimizes file structure for production, not affecting client-side performance.

Documentation and Guidelines

• Good practice to document structure in README files for team alignment.
• Example: Internal style guides (e.g., John Papa’s Angular Style Guide) for coding conventions.

Audience Interaction and Q&A

• Suggestions and questions from Twitch chat.
• Discussions on placing styles and state management folders in the project.

Summary

• Consistent directory structure aids in maintainability and scalability.
• Encouraged to tailor folder structures to project needs and team preferences.

For more details and future lessons, visit reactroots.com