Introduction to React

Introduction to React

React is a JavaScript library for building user interfaces, created by Facebook (Meta) and first released in 2013. It is the most popular frontend library in the world, used by companies like Facebook, Instagram, Netflix, Airbnb, and Uber. React introduced a component-based architecture and a virtual DOM that revolutionized how developers build web applications. Instead of manipulating the DOM directly, you describe what the UI should look like for a given state, and React efficiently updates the real DOM to match.

Setting Up with Vite

# Create a new React project with Vite (recommended)
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
# => http://localhost:5173

# Project structure
my-react-app/
├── index.html
├── package.json
├── vite.config.js
├── public/
└── src/
    ├── main.jsx       # Entry point
    ├── App.jsx         # Root component
    ├── App.css
    └── components/     # Your components

JSX — JavaScript XML

// JSX looks like HTML but is actually JavaScript
function App() {
    const name = "React Developer";
    const isLoggedIn = true;

    return (
        <div className="app">
            <h1>Hello, {name}!</h1>
            <p>2 + 2 = {2 + 2}</p>
            {isLoggedIn && <p>Welcome back!</p>}
            <img src="/logo.png" alt="Logo" />
        </div>
    );
}

// JSX differences from HTML:
// - className instead of class
// - htmlFor instead of for
// - Self-closing tags: <img />, <br />, <input />
// - camelCase attributes: onClick, onChange, tabIndex
// - Style as object: style={{ color: 'red', fontSize: '16px' }}

export default App;

Pro tip: JSX is not HTML — it is syntactic sugar for React.createElement() calls. Every JSX expression must return a single root element. Use React Fragments (<>...</>) to group elements without adding extra DOM nodes. Vite with React provides instant hot module replacement (HMR) for a fast development experience.

Key Takeaways

• React is a component-based library that uses a virtual DOM for efficient UI updates.
• Use Vite (npm create vite@latest) for fast project setup with hot module replacement.
• JSX embeds JavaScript expressions in curly braces ({expression}) and uses className instead of class.
• Components are functions that return JSX — they are the building blocks of React applications.
• React Fragments (<>...</>) let you return multiple elements without adding extra DOM nodes.