Part 1: Introduction to React – Why Use It and How to Get Started

Welcome to the first post in our React.js tutorial series! Whether you’re a beginner or an experienced developer looking to learn React, this series will guide you through everything you need to know—from basic concepts to advanced patterns.

What is React.js?

React (also called React.js or ReactJS) is a JavaScript library for building user interfaces (UIs). Developed by Facebook, React is widely used for creating single-page applications (SPAs) and dynamic web interfaces.

Why Use React?

• Component-Based Architecture – Break your UI into reusable components.
• Virtual DOM – Efficient updates for better performance.
• Rich Ecosystem – Works with tools like Next.js, Redux, and React Router.
• Strong Community – Extensive documentation and support.

---

Setting Up Your First React App

There are two main ways to start a React project:

1. Using Create React App (CRA)

CRA is the easiest way to bootstrap a React project.

Steps:

1. Install Node.js (if you haven’t already) from nodejs.org.
2. Open your terminal and run:
   
   
3. Your app will open at http://localhost:3000.

2. Using Vite (Faster Alternative)

Vite is a modern build tool that’s faster than CRA.

Steps:

1. Run in your terminal:
   
   
2. Your app will run at http://localhost:5173.

---

Understanding the Project Structure

After setup, your React project will look like this:

my-first-react-app/  
├── node_modules/  # Dependencies  
├── public/        # Static files (HTML, images)  
├── src/           # Main React code  
│   ├── App.js     # Root component  
│   ├── index.js   # Entry point  
│   └── ...  
├── package.json   # Project config & scripts  
└── ...

---

Your First React Component

Let’s modify src/App.js to display a simple message:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to your first React app.</p>
    </div>
  );
}

export default App;

Save the file, and your browser will update automatically (Hot Reloading).

---

What’s Next?

In the next post, we’ll dive into:
✅ JSX Syntax – Writing HTML-like code in JavaScript
✅ Components & Props – Reusable UI building blocks
✅ State & Events – Making your app interactive

Exercise for You

Try creating a new component called Greeting that displays your name. Import it into App.js and render it.

---