When I wrote my first React component, I had no idea what I was actually doing. I slapped some tags into a .js file, hoped the browser would magically figure it out, and... nothing. Just a blank screen and a mocking silence from the console. That’s the rite of passage. React feels weird at first because you’re writing code that looks like HTML but behaves like a snarky version of JavaScript. But once it clicks? You’ll wonder how you ever tolerated spaghetti jQuery code. Let’s break down what a React component really is—and how to avoid the mistakes I made on day one.

React Components = Just Functions (Kind Of)

At first, I thought React components were some new mystical class-based wizardry. Turns out, they’re just JavaScript functions that return JSX (more on that in a sec).

Write a function. Return something that looks like HTML. Boom—component.

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

No decorators. No frameworks. Just functions. It’s like discovering that lasagna is just layers of stuff that work together beautifully.

JSX Looks Like HTML — Until It Punches You with JavaScript

Here’s where React messes with your head: JSX looks like HTML, but it’s not. It’s more like HTML++ with JavaScript superpowers. You can’t use class; you use className. And forget about putting if statements directly inside the return—JSX has its own set of quirks.

I once wrote <div class="box"></div> and stared at a broken page for 15 minutes. JSX was like, “Do I look like HTML to you?”

Take a minute to read the JSX docs. They’ll save you many rage-reloads.

Writing Your First Component: HelloComponent.js

Alright, let’s build our first real component. I like to keep it dead simple:

          function HelloComponent() {
  return <p>Hey there, React world!</p>;
}
        

Save that in a file called HelloComponent.js. And don’t forget to export it:

          export default HelloComponent;
        

If you forget that line, nothing renders. No warning. Just silence and doubt.

Rendering to the DOM Without Breaking Stuff

Now that you’ve got a component, you need to tell React where to stick it in the DOM.

Open main.jsx or index.js and do something like this:

          import React from 'react';
import ReactDOM from 'react-dom/client';
import HelloComponent from './HelloComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HelloComponent />);
        

Done right, you’ll see your message on the screen. Done wrong, you’ll get the dreaded “Cannot read property of null” error, usually because your HTML file doesn't have a <div id="root"></div>.

Mistakes I Made: Forgetting to Export, Import, or Breathe

Let me confess the dumbest bugs I hit in my first week with React:

Forgot to `export` the component. Imported it with the wrong file path. Case-sensitive paths are ruthless. * Tried to render a component without capitalizing the function name. (React treats lowercase tags as native HTML.)

Worst part? No clear errors. Just a whole lot of nothing.

If something feels off, double-check your imports, file names, and component names. And then check them again.

What Just Happened? Let’s Break It Down

So what have we actually done here?

We wrote a function that returns JSX. We exported it. We imported it into our app’s entry file. We rendered it into a root element on the page.

That’s it.

You just wrote your first React component. And the cool thing? This tiny pattern is the foundation for the entire React ecosystem—from Next.js to React Native to frameworks you haven't heard of yet.

Next up, we’ll zoom out and take A Peek at the React App We’ll Build—because this tiny component is just the tip of the iceberg. Here’s what’s coming.