React Get Started

React is one of the most popular JavaScript libraries used to build interactive user interfaces, especially for single-page applications. It was developed by Facebook and is maintained by a large community of developers.

If you’re new to React, don’t worry! In this post, you’ll learn how to get started with React step by step — from setting up your environment to writing your first component.

Why Use React?

Before diving into setup, here’s why React is so widely used:

• Component-based: Break your UI into reusable pieces.
• Declarative: React updates the UI when your data changes.
• Fast: Uses a virtual DOM for efficient updates.
• Flexible: Can be used with other libraries and frameworks.

Prerequisites

To start with React, make sure you have:

• Node.js and npm (Node Package Manager) installed.
• A code editor like Visual Studio Code.
• Basic knowledge of HTML, CSS, and JavaScript.

To check if Node.js is installed, run this in your terminal:

node -v
npm -v

If not installed, download Node.js from the official site.

How to Create a React App

The easiest way to get started is by using the official tool called Create React App.

Step 1: Open Terminal (or Git Bash)

Navigate to the folder where you want to create your project.

Step 2: Run This Command

npx create-react-app my-first-app

This command creates a new React project named my-first-app. It will set up everything — folder structure, dependencies, and configuration.

npx runs the package without installing it globally.

Step 3: Navigate to Your Project

cd my-first-app

Step 4: Start the Development Server

npm start

Your React app will open in your browser at http://localhost:3000/.

Understanding the Project Structure

Here’s what you’ll see in your React project:

• public/ – Contains the HTML file.
• src/ – Contains React components and logic.
• App.js – The main component of your app.
• index.js – Entry point; it renders your app inside the HTML page.

Creating Your First Component

React apps are made using components. A component is a reusable piece of UI.

Open App.js and you’ll see this:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}
export default App;

You can create another component like this:

function Welcome() {
  return <h2>Welcome to My First React App!</h2>;
}

Then use it in App.js:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Welcome />
    </div>
  );
}

Don’t forget to import the component if it’s in a separate file.

JSX: JavaScript + HTML

React uses JSX, a syntax that lets you write HTML inside JavaScript:

const name = "Janhvika";
return <h2>Hello, {name}!</h2>;

JSX makes your code more readable and powerful.

React Concepts to Learn Next

Once your setup is ready, here are some important concepts to explore:

• Props – Passing data to components.
• State – Managing dynamic data in components.
• Hooks – Like useState() and useEffect() to add features.
• Conditional Rendering – Show/hide UI based on conditions.
• Lists and Keys – Render arrays of data.
• Forms – Handle user input.

Conclusion

React makes it easy to build fast and scalable web applications. Getting started is simple with Create React App. Once you’re set up, you can begin building components and exploring powerful features like props, state, and hooks.

Learning React step-by-step helps you build real-world projects like portfolios, blogs, shopping carts, and more!

Tip: Practice by building something small, like a to-do list or calculator. It’s the best way to learn.