DEV Community

Selahaddin Osmanoglu
Selahaddin Osmanoglu

Posted on

Part 1: Introduction to React – Your First Component

Welcome to the first part of our beginner-friendly React series! 🎉

In this post, we’ll take a hands-on look at what React is, why it’s useful, and how to build your very first React component.

🧠 What is React?

React is a JavaScript library for building user interfaces. It helps developers build fast and interactive UIs using a component-based architecture.

You can think of it as a LEGO set for websites — each block (component) does one thing well and can be reused wherever you want.

React was created by Facebook and is now maintained by Meta and the open-source community.

🚀 Why Learn React?

React is:

  • 🔄 Declarative – You describe what you want, not how to do it.
  • 🧱 Component-Based – You break UIs into small, manageable, and reusable pieces.
  • ⚡ Fast & Efficient – Thanks to its virtual DOM and update diffing.
  • 🌐 Widely Used – From startups to big tech, it’s everywhere.

🛠️ Setting Up Your First React Project

We’ll use Vite for a fast, modern setup. You can also use Create React App (CRA), but Vite is lighter and preferred for new projects.

✅ Prerequisites

  • Node.js installed (version 16+ recommended)
  • A terminal and a code editor like VS Code

🧪 Step-by-Step (Vite)

  1. Create a new project 
   npm create vite@latest my-first-react-app -- --template react
   cd my-first-react-app
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies 
   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Run the app 
   npm run dev
Enter fullscreen mode Exit fullscreen mode
  1. Open your browser and go to http://localhost:5173

You should see the default Vite + React starter screen!

🧩 Your First Component

Let’s build a basic “Hello World” component.

Replace the contents of App.jsx with: 

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is my very first React component.</p>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • The App function is a component.
  • It returns JSX, a syntax extension that lets you write HTML inside JavaScript.
  • export default App makes it available to be rendered in the app.

📦 What is JSX?

JSX stands for JavaScript XML.

It's not valid HTML or JavaScript — it's a hybrid that looks like HTML but works inside JavaScript. It gets compiled to regular JavaScript by tools like Babel.

Example: 

<h1>Hello World</h1>
Enter fullscreen mode Exit fullscreen mode

is compiled into:

React.createElement('h1', null, 'Hello World');
Enter fullscreen mode Exit fullscreen mode

✍️ Challenge for You

Try modifying your App component:

  • Change the text to introduce yourself.
  • Add an image using <img> tag.
  • Try nesting another component (we’ll learn more next time).

✅ Summary

  • React helps you build modern user interfaces with reusable components.
  • JSX is a key part of writing React code.
  • You created your first project using Vite.
  • You wrote your first component!

🔜 What’s Next?

In Part 2, we’ll dive deeper into components and props — the building blocks of scalable React apps.

Until then, keep tinkering with your new project! 💻

Top comments (0)