React Components Architecture & Fundamentals

A component is conceptually just a JavaScript function that accepts arbitrary inputs and returns a piece of UI to be rendered on screen. Splitting an interface into independent, reusable pieces like this lets you reason about each piece — a header, a sidebar, a card — in isolation rather than as one giant tangle of markup.

This modular approach is what makes React scale to large applications: complex UIs are just trees of small, self-contained components assembled together.

In modern React, a component is simply a JavaScript function that returns JSX, but it must follow one strict naming rule: the component's name has to start with a capital letter (PascalCase). Name it button instead of Button and React assumes you mean the native HTML <button> tag, silently ignoring your custom component entirely.

This capitalization rule is how React's JSX compiler distinguishes your custom components from built-in HTML elements at a glance.

A component's core job is to describe what should render to the DOM, and it does that through its return statement — you return a block of JSX that React later turns into actual DOM nodes. When that JSX spans multiple lines, it's best practice to wrap the whole block in parentheses.

Wrapping multi-line JSX in parentheses isn't just stylistic — it avoids a real bug caused by JavaScript's automatic semicolon insertion silently truncating the return value on the first line.

Once you've defined a component, you can render it as many times as you want, anywhere in your app, just by using it like a standard HTML tag. Each instance is an isolated execution of that function, so they operate completely independently of one another.

That means a page can contain fifty <Button /> instances, and each one manages its own internal state and rendering cycle without any of them interfering with the others.

Components can reference other components in their output, which is what lets you use the same abstraction at any level of detail — a button, a form, a whole screen can all be expressed as components. This parent-child relationship is called Component Composition.

Complex UI architectures are built exactly this way: by assembling smaller, manageable pieces, like a Dashboard rendering a Sidebar and a MainContent, into larger, cohesive structures.

To use a component defined in one file inside another, you expose it using standard ES6 module syntax — most commonly export default. Prefixing a function declaration with export default tells the module system that this component is the file's primary export.

This is what allows other files to import and render the component within their own component trees, which is the basis for organizing a React codebase into one component per file.

Once a component is exported, you can import it into any other file with import Navbar from './Navbar'. Because export default was used, you're free to name the imported component whatever you like, though convention is to reuse the same PascalCase name as the original.

After importing, the component acts exactly like any other component available in scope — you render it with the same JSX tag syntax as if it were declared locally.

Standard function declarations work fine, but many modern codebases prefer ES6 arrow functions for defining components, since they offer a more concise syntax and sidestep this-binding issues (even though this is rarely relevant in functional React anyway).

Under the hood, an arrow function component behaves exactly the same as a traditional function component — it's purely a stylistic choice, not a different kind of component.

When an arrow function component just returns JSX with no internal variables or hooks needed, you can drop the curly braces and the return keyword entirely, writing parentheses right after the arrow instead: const Badge = () => (<span>New!</span>). This is called an implicit return.

This pattern produces very clean, readable code for small presentational components, but it only works when the entire body is that single JSX expression — the moment you need a variable or a hook call first, you have to switch back to explicit { return ... } syntax.

A component can only return one parent element — returning two adjacent sibling elements directly throws an error. React Fragments (<></>) solve this without adding an unnecessary wrapper <div> to the DOM.

A Fragment groups elements together in your JSX so the component has a single return value, but it disappears entirely once rendered to the actual browser DOM, leaving no extra node behind.

What is a Component?. At the heart of every React application lies the Component. Conceptually, a component is like a JavaScript function that accepts arbitrary inputs and returns a piece of the user interface (UI) to be rendered on the screen. By splitting your UI into independent, reusable pieces, you can think about each piece in isolation. This modular approach is what makes React incredibly powerful for building large-scale, maintainable applications.

Declaring a Component. In modern React, a component is simply a JavaScript function that returns JSX. However, there is a strict naming convention you must follow: Component names MUST start with a Capital Letter (PascalCase). If you name a component 'button' instead of 'Button', React will assume you are trying to render the native HTML <button> tag and your custom logic will be completely ignored. Always capitalize your components.

Returning JSX. The core responsibility of a React component is to describe what should be rendered to the DOM. This is achieved via the return statement. You return a block of JSX, which React will later compile into an actual DOM node tree. If your JSX spans multiple lines, it is best practice (and often required to avoid automatic semicolon insertion bugs) to wrap the entire JSX block in parentheses ().

It is crucial to remember the strict naming conventions of React. If you want to create a custom navigation bar component, which of the following is the correct functional definition?

• →function navigationBar()
• →function NavigationBar()

Reusing Components. Once a component is defined, you can render it as many times as you want, anywhere in your application. You simply use it exactly as if it were a standard HTML tag. Because each instance of the component is an isolated execution of that function, they operate completely independently. This means you can have a page with fifty <Button /> components, and each one manages its own internal state and rendering cycle.

Component Composition. Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components. This parent-child relationship is known as Component Composition. You build complex UI architectures by assembling smaller, manageable lego blocks into larger, cohesive structures.

Can a React component render another instance of itself recursively, assuming there is a proper stopping condition?

• →Yes, components can render themselves
• →No, that causes a compilation error

Exporting Components. To use a component defined in one file inside another file, you must expose it using standard ES6 modules syntax. The most common pattern in React is 'export default'. By prefixing your function declaration with 'export default', you tell the JavaScript runtime that this component is the primary export of the file. This allows other files to easily import and render it within their own component trees.

Importing Components. Once a component is exported, you can import it into any other file. Because you used 'export default', you can name the imported component whatever you want, though it is standard practice to use the exact same PascalCase name as the file or original function. After importing, it acts exactly like any other React component available in scope.

Arrow Function Components. While standard function declarations work perfectly, many modern codebases prefer ES6 Arrow Functions for defining components. They provide a more concise syntax and prevent issues with the 'this' keyword binding (though 'this' is rarely used in functional React anyway). An arrow function component behaves exactly the same as a traditional function component under the hood.

Implicit Returns. One of the major benefits of using Arrow Functions for simple components is the 'implicit return' feature. If your component just returns JSX and doesn't require any internal variables or hooks, you can omit the curly braces {} and the 'return' keyword entirely. Just use parentheses () right after the arrow. This creates incredibly clean, readable code for small presentation components.

If you have a component that needs to calculate a value or call a React Hook before returning the JSX, can you still use the 'implicit return' syntax?

• →Yes, JS executes inline
• →No, you must use {} and a return statement

React Fragments. A component can only return ONE parent element. If you try to return two adjacent sibling elements, React will throw an error. To solve this without adding an unnecessary <div> to your DOM, you can use React Fragments <></>. A Fragment wraps your elements in JSX but disappears entirely when rendered to the actual browser DOM.

Modular UI Architecture. By strictly adhering to a component-based architecture, you ensure your codebase remains scalable. A complex page is just a tree of simple components. This allows different developers to work on different components simultaneously without causing merge conflicts. Furthermore, if a bug appears in the Header, you know exactly which file to check without needing to parse thousands of lines of HTML.

Mastery Achieved. Component Mastery achieved! You understand how to define functions, return JSX, use PascalCase conventions, and compose smaller pieces into massive architectures. You've also learned ES6 module exporting. You are fully ready for the next level: dynamically passing data into these components via Props.