BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

177What is a Function Component?
178Your First Function Component
179Components are Pure Functions of Props
180Component Names Must Start with Capital Letters
181Returning Multiple Elements Requires a Wrapper
182Components Can Call Other Components
183Arrow Functions vs Function Declarations
184Components Re-execute on Every Render
185Return null to Render Nothing
186Early Returns for Conditional Logic
187Inline Expressions vs Variables Before Return
188What is Component Composition?
189Composition Over Inheritance in React
190Nesting Components: The Basic Pattern
191Container and Presentational Components
192Composition with Multiple Children
193Wrapper Components for Shared Behavior
194Layout Components: Composing Structure
195Specialization Through Composition
196Component Composition vs Prop Explosion
197Real-World Composition Patterns
198PascalCase for Component Names
199Named Exports vs Default Exports
200File Naming Conventions
201One Component Per File (Usually)
202Co-locating Helper Components
203Export Patterns for Multiple Components
204Avoiding Anonymous Function Exports
205Component Naming for Clarity
206One Component Per File Convention
207File Naming: PascalCase vs kebab-case
208Folder Structure: Feature-Based vs Type-Based
209Colocating Tests and Styles with Components
210Index Files for Cleaner Imports
211When to Split vs Keep Components Together

177What is a Function Component?
178Your First Function Component
179Components are Pure Functions of Props
180Component Names Must Start with Capital Letters
181Returning Multiple Elements Requires a Wrapper
182Components Can Call Other Components
183Arrow Functions vs Function Declarations
184Components Re-execute on Every Render
185Return null to Render Nothing
186Early Returns for Conditional Logic
187Inline Expressions vs Variables Before Return
188What is Component Composition?
189Composition Over Inheritance in React
190Nesting Components: The Basic Pattern
191Container and Presentational Components
192Composition with Multiple Children
193Wrapper Components for Shared Behavior
194Layout Components: Composing Structure
195Specialization Through Composition
196Component Composition vs Prop Explosion
197Real-World Composition Patterns
198PascalCase for Component Names
199Named Exports vs Default Exports
200File Naming Conventions
201One Component Per File (Usually)
202Co-locating Helper Components
203Export Patterns for Multiple Components
204Avoiding Anonymous Function Exports
205Component Naming for Clarity
206One Component Per File Convention
207File Naming: PascalCase vs kebab-case
208Folder Structure: Feature-Based vs Type-Based
209Colocating Tests and Styles with Components
210Index Files for Cleaner Imports
211When to Split vs Keep Components Together

Lesson 209 of 2,396·6. Component BasicsPro lesson

Colocating Tests and Styles with Components

Learn to keep component files, tests, and styles together (Button.jsx, Button.test.jsx, Button.module.css) for easier navigation and maintenance.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course