How to create a component in Svelte

When you look at a typical React component, it might seem like just a file with some HTML in it, mostly. However, it’s essential to understand that under the hood, there’s a lot more happening. React components are essentially JavaScript functions that return what looks like HTML, but it’s actually JSX, a syntax extension that allows you to write HTML-like code in your JavaScript files.

Here’s a simple example of a functional component:

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

This component, when rendered, will display “Hello, World!” on the screen. But what makes this more than just a static piece of HTML is that you can easily modify it to accept props, allowing you to create dynamic content.

For example, you could modify the HelloWorld component to accept a name prop:

function HelloWorld({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Now you can use this component in a parent component and pass different names to it:

function App() {
  return (
    <div>
      <HelloWorld name="Alice" />
      <HelloWorld name="Bob" />
    </div>
  );
}

This approach allows for reusable components that can adapt to the data passed to them, which is the cornerstone of building efficient UI in React. However, while it may look straightforward, understanding how to manage state and props is crucial. Components do not just spit out HTML; they are reactive and respond to changes in data, making them powerful.

Another interesting aspect is how components can manage their own state using the useState hook. This is where things get a bit more interactive:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In this example, every time the button is clicked, the count state updates, and React re-renders the component with the new count value. This mechanism of state and reactivity is what differentiates a React component from static HTML.

Understanding how to structure your components and manage their lifecycles is critical. You can build complex interfaces with relative ease, but without a solid grasp of these concepts, your components can quickly become unwieldy and difficult to manage.

It’s essential to keep your components small and focused. This way, you can ensure that each piece of your UI is manageable and maintainable. When components are tightly coupled with their logic, they become harder to reuse and test.

Think of components as small, self-contained units that can be composed together to build larger interfaces. Each component should have its own purpose and should communicate with others in a clear and concise manner.

As your application grows, so does the complexity of managing state and props. This leads us to the next crucial aspect: how to talk to your components so they actually listen…

How to talk to your components so they actually listen

The fundamental rule you have to burn into your brain is that data in React flows in one direction: down. From parent to child. Think of it like a waterfall. Water doesn’t flow uphill. You pass data down through props, and the child component renders that data. This is simple, predictable, and keeps you from creating a tangled mess of dependencies where everything is changing everything else and you can’t figure out why your UI is flickering like a haunted hotel sign.

But then you hit a wall. Your child component, a beautifully self-contained little button, needs to tell its parent something. “Hey, I’ve been clicked!” it screams into the void. How does the parent hear it? The data waterfall doesn’t flow up. You can’t just have the child component reach up and change the parent’s state. That would be chaos. It would violate the core principle that makes React manageable.

The answer is that while you can’t pass data up, you can pass a *function* down. The parent passes a function to the child as a prop. The child doesn’t know what the function does, and it doesn’t care. It just knows that when the button is clicked, it’s supposed to call this function it was given. This is the callback pattern, and it’s how you create a communication channel from the child back to the parent.

Let’s look at a concrete example. Imagine a parent component that manages a user’s login status. It needs to show a different message depending on whether the user is logged in or not, and it has a button that performs the login.

import React, { useState } from 'react';

// The child component doesn't know anything about logging in.
// It just knows it gets a function called onLoginClick.
function LoginButton({ onLoginClick }) {
  return <button onClick={onLoginClick}>Log In</button>;
}

// The parent component manages the state.
function AuthStatus() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // This function lives in the parent and can change the parent's state.
  const handleLogin = () => {
    // In a real app, you'd do an API call here.
    setIsLoggedIn(true);
  };

  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
      {!isLoggedIn && <LoginButton onLoginClick={handleLogin} />}
    </div>
  );
}

See what’s happening here? The AuthStatus component owns the state (isLoggedIn) and the logic to change it (the handleLogin function). It passes handleLogin down to LoginButton as a prop named onLoginClick. The LoginButton is blissfully ignorant of what logging in even means. It just renders a button and attaches the function it received to the onClick event. When the user clicks the button, the handleLogin function is executed back in the parent’s scope, setIsLoggedIn(true) is called, the state changes, and AuthStatus re-renders to show the “Welcome back!” message. This is a pattern called “lifting state up”. You keep the state in the closest common ancestor of all components that need it, and you pass down functions to allow children to modify that state.

This makes your components much more reusable. The LoginButton could be reused anywhere you need a button that triggers an action. You could rename the prop to onClick and it would be a generic Button component. The child is “dumb” about the application logic, which is exactly what you want. It’s just a view. The parent is “smart” and contains the logic. This separation of concerns is critical for building systems that don’t collapse under their own weight.

But this pattern has its own set of problems. What happens when you have a component that’s five levels deep in the component tree, and it needs to trigger a state change in the top-level App component? You have to pass the function down through four intermediate components that don’t actually use the function themselves. They just act as conduits, passing the prop along. This is known as “prop drilling,” and while it works, it can get very tedious and make your code harder to refactor. Imagine adding a new parameter to that function; you’d have to edit every component in the chain. This is where you might start looking for a more sophisticated solution.

Making your component play nicely with others

So you’ve got this problem of “prop drilling,” where you’re passing callbacks down through five levels of components that don’t care about them. Your first instinct might be to reach for a big, powerful tool like the Context API or a state management library like Redux. Stop. Don’t do it. That’s like using a sledgehammer to crack a nut. There’s a much simpler, more fundamental React pattern that solves this class of problem more elegantly: composition.

Instead of creating highly specialized components that know exactly what their children will be, you create generic “box” components that don’t make any assumptions about their content. The key to this is the magical, built-in children prop. Every component receives this prop. It contains whatever you put between the opening and closing tags of your component. This lets you create wrapper components that can apply a certain structure or style to *any* content you pass in.

// A generic Panel component that knows nothing about its content.
function Panel({ title, children }) {
  const panelStyle = {
    border: '1px solid #ddd',
    borderRadius: '4px',
    padding: '1em',
    margin: '1em 0'
  };

  return (
    <div style={panelStyle}>
      {title && <h2 style={{ marginTop: 0 }}>{title}</h2>}
      {children}
    </div>
  );
}

Look at that Panel component. It’s a dumb box. It draws a border and can optionally display a title. The important part is the {children} line. It’s a placeholder where the parent component can inject anything it wants. This completely inverts the dependency. The Panel doesn’t need to know about a UserProfile or an ActivityFeed. The parent component, which *does* have the application context, can compose them together.

function App() {
  return (
    <div>
      <Panel title="User Profile">
        <p><strong>Name:</strong> Captain Crunch</p>
        <p><strong>Status:</strong> Sailing the high seas</p>
        <button>Send Message</button>
      </Panel>
      
      <Panel title="Settings">
        <label>
          <input type="checkbox" />
          Enable notifications
        </label>
      </Panel>
    </div>
  );
}

By using composition, you’ve avoided the need to create a UserProfilePanel and a SettingsPanel. You’ve also avoided prop drilling. If that “Send Message” button needed to call a function defined in App, you just define it in App and pass it directly to the button. The Panel component in the middle doesn’t need to know about the onSendMessage prop and pass it along. It’s completely oblivious, as it should be. This is a far more robust and scalable way to build UIs than creating long chains of specialized components.

This same principle of being a good citizen applies to styling. A component that hardcodes its margins, for example, is a bad neighbor. It makes assumptions about its layout context, which it has no business doing. When another developer tries to use your component in a flexbox or grid layout, your hardcoded margins will mess everything up. A well-behaved component styles itself internally but lets the parent dictate layout. A common way to handle this is to accept a className prop and append it to the component’s own classes. This gives the consumer an “escape hatch” to apply their own styles without you having to predict every possible use case.

// A flexible Button component that allows for external styling.
// Assumes you have some CSS for .btn, .btn-primary, etc.
function Button({ children, onClick, className, type = 'primary' }) {
  // Base classes + type-specific class + any custom classes.
  const classes = btn btn-${type} ${className || ''}.trim();

  return (
    <button className={classes} onClick={onClick}>
      {children}
    </button>
  );
}

// Usage in a parent component:
// <Button className="user-profile-save-button">Save</Button>
// The button will have classes: "btn btn-primary user-profile-save-button"

This Button component has its own opinions (btn, btn-primary), but it graciously accepts outside influence via the className prop. It doesn’t fight with the application’s design system; it cooperates with it. This combination of composition via children and stylistic flexibility via props like className is the foundation for creating components that are truly reusable and easy to work with. They don’t impose their will on the rest of the application; they play nicely with others.