Creating Your First React Component (It's Easier Than You Think!)

Hey everyone! 👋 Been playing with React lately and wanted to share how to create your first component. Trust me, it's simpler than you might think!

Quick Setup with Vite

First things first, let's set up our project. Vite makes this super easy:

npm create vite@latest my-first-react -- --template react
cd my-first-react
npm install
npm run dev

That's it! Your project is running. Pretty cool, right?

Creating Your First Component

Let's make something simple - a greeting card. Create a new file called GreetingCard.jsx:

function GreetingCard() {
  return (
    <div>
      <h2>Hello React!</h2>
      <p>This is my first component</p>
    </div>
  );
}

export default GreetingCard;

To use it, open your App.jsx and add:

import GreetingCard from './GreetingCard'

function App() {
  return (
    <div>
      <GreetingCard />
    </div>
  );
}

export default App;

Making it More Interesting

Let's make our card accept some info:

function GreetingCard({ name, message }) {
  return (
    <div>
      <h2>Hello, {name}!</h2>
      <p>{message}</p>
    </div>
  );
}

// Using it:
<GreetingCard 
  name="World" 
  message="Welcome to React" 
/>

Quick Things I Learned

• Components are just functions that return JSX
• JSX looks like HTML but lives in your JavaScript
• Component names must start with a capital letter
• Components need to return a single parent element

Give it a Try!

Try making your own component! Maybe a simple profile card or a todo item? It's all about starting small and building up.

See you in the next post! 🚀

---

If you found this helpful, follow along for more React tips!