React: Getting Started

Welcome to the React ecosystem! React is a popular JavaScript library for building user interfaces. This guide will walk you through the essential steps to get you up and running with React.

1. What is React?

React is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It was developed by Facebook and is now maintained by a large community of developers.

Declarative: You tell React what you want the UI to look like, and React handles updating the DOM efficiently.
Component-Based: React applications are built using components, which are independent, reusable pieces of UI.
Learn Once, Write Anywhere: Whether you're building a new app or updating an existing one, React makes it easier to build complex UIs.

2. Setting Up Your Development Environment

The easiest way to start with React is to use a modern setup. We recommend using a bundler like Vite or Create React App.

Option 1: Using Vite (Recommended)

Vite is a fast, modern build tool that significantly improves the developer experience.

First, ensure you have Node.js installed (version 14+). Then, run the following command in your terminal:

npm create vite@latest my-react-app --template react

Or using Yarn:

yarn create vite my-react-app --template react

Navigate into your new project directory:

cd my-react-app

Install dependencies:

npm install

Or:

yarn

And finally, start the development server:

npm run dev

Or:

yarn dev

Option 2: Using Create React App (CRA)

Create React App is a popular tool for scaffolding React applications.

To create a new React app, run:

npx create-react-app my-react-app

Navigate into your new project directory:

cd my-react-app

Start the development server:

npm start

Or:

yarn start

3. Your First React App

Once your development server is running, you'll see your new React application in your browser, usually at http://localhost:5173/ (for Vite) or http://localhost:3000/ (for CRA).

Open your project in your favorite code editor. The main entry point for your app is typically src/App.jsx (or src/App.js) and src/main.jsx (or src/index.js).

Example: Modifying the Main Component

Let's change the default text in src/App.jsx.

Find the content inside the return statement and replace it with something like this:

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

export default App

Save the file, and your browser should automatically update to show your changes!

4. Core Concepts

As you continue your React journey, you'll encounter several fundamental concepts:

JSX: A syntax extension for JavaScript that looks similar to HTML.
Components: Reusable UI building blocks.
Props: How components receive data.
State: How components manage their own data.
Hooks: Functions like useState and useEffect that let you use React features in functional components.