Module 11: Introduction to JSX & React

📌 What is JSX?

• JSX stands for JavaScript XML.
• It allows you to write HTML inside JavaScript.
• JSX makes it easier to create and visualize UI components.
• Browsers can't read JSX directly — it's compiled by tools like Babel into standard JavaScript.

🔍 JSX Rules & Best Practices

• Must return a single parent element: Wrap multiple elements in a div or React Fragment
• All tags must be closed: Use self-closing tags like <img />
• Use camelCase for attributes: className instead of class, onClick instead of onclick
• JavaScript expressions in curly braces: {variable}, {2 + 2}, {user.name}
• Comments: Use {/* This is a comment */}

🔍 JSX Examples

// Basic JSX
const name = "React";
const element = <h1>Hello, {name}!</h1>;

// JSX with attributes
const element = <img src="logo.png" alt="Logo" />;

// JSX with multiple elements (must be wrapped)
const element = (
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
);

// Using React Fragment (no extra div)
const element = (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
);

🔍 Example: JSX vs. Regular JS

JSX:

const element = <h1>Hello, world!</h1>;

Compiled JS:

const element = React.createElement('h1', null, 'Hello, world!');

⚛️ React Basics

• React is a JavaScript library for building user interfaces.
• It uses a component-based architecture.
• Each component is a function (or class) that returns JSX.
• React DOM renders these components into the actual HTML DOM.

🔍 Basic Component Example

function Welcome() {
  return <h1>Welcome to React!</h1>;
}

⚛️ React Components Deep Dive

• Components are the building blocks of React applications.
• They can be functional (using hooks) or class-based.
• Components can be reused and composed together.
• Each component should have a single responsibility.

🔍 Functional Components

// Simple functional component
function Greeting() {
  return <h1>Hello, World!</h1>;
}

// Component with props
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Using destructuring for cleaner code
function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

🔍 Component Composition

// Parent component
function App() {
  return (
    <div>
      <Header title="My App" />
      <MainContent />
      <Footer />
    </div>
  );
}

// Child components
function Header({ title }) {
  return <header><h1>{title}</h1></header>;
}

function MainContent() {
  return <main><p>This is the main content.</p></main>;
}

function Footer() {
  return <footer><p>© 2024 My App</p></footer>;
}

🔄 React State Management

• State is data that can change over time in your component.
• When state changes, React re-renders the component.
• State is local to each component instance.
• Use the useState hook to add state to functional components.

🔍 useState Hook

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      </button>
    </div>
  );
}

🔍 Multiple State Variables

function UserProfile() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [isActive, setIsActive] = useState(false);
  
  return (
    <div>
      <input 
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name"
      />
      <input 
        type="number"
        value={age}
        onChange={(e) => setAge(Number(e.target.value))}
        placeholder="Enter age"
      />
      <label>
        <input 
          type="checkbox"
          checked={isActive}
          onChange={(e) => setIsActive(e.target.checked)}
        />
        Active
      </label>
      <p>Name: {name}, Age: {age}, Active: {isActive ? 'Yes' : 'No'}</p>
    </div>
  );
}

🔍 State Updates

• Direct updates: setCount(count + 1)
• Functional updates: setCount(prevCount => prevCount + 1)
• Object state: Use spread operator to update objects
• Array state: Use spread operator or array methods

🔍 Object State Example

function UserForm() {
  const [user, setUser] = useState({
    name: '',
    email: '',
    age: 0
  });
  
  const updateUser = (field, value) => {
    setUser(prevUser => ({
      ...prevUser,
      [field]: value
    }));
  };
  
  return (
    <div>
      <input 
        value={user.name}
        onChange={(e) => updateUser('name', e.target.value)}
        placeholder="Name"
      />
      <input 
        value={user.email}
        onChange={(e) => updateUser('email', e.target.value)}
        placeholder="Email"
      />
      <input 
        type="number"
        value={user.age}
        onChange={(e) => updateUser('age', Number(e.target.value))}
        placeholder="Age"
      />
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </div>
  );
}

🎨 Conditional Rendering

function ConditionalComponent({ isLoggedIn, user }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back, {user.name}!</h1>
      ) : (
        <h1>Please log in</h1>
      )}
      
      {isLoggedIn && <p>You have access to premium content.</p>}
      
      {!isLoggedIn && <button>Login</button>}
    </div>
  );
}

📋 Lists & Keys

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build an app', completed: false },
    { id: 3, text: 'Deploy to production', completed: false }
  ]);
  
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text} - {todo.completed ? 'Done' : 'Pending'}
        </li>
      ))}
    </ul>
  );
}

🎯 Event Handling

function EventExample() {
  const [message, setMessage] = useState('');
  
  const handleClick = () => {
    setMessage('Button clicked!');
  };
  
  const handleInputChange = (e) => {
    setMessage(e.target.value);
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Form submitted: ' + message);
  };
  
  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <input onChange={handleInputChange} placeholder="Type something" />
      <form onSubmit={handleSubmit}>
        <input value={message} onChange={handleInputChange} />
        <button type="submit">Submit</button>
      </form>
      <p>Message: {message}</p>
    </div>
  );
}

✅ React: Pros & Cons

🚀 Advantages of React

• Component Reusability: Build once, use everywhere. Components can be shared across projects.
• Virtual DOM: Efficient updates by comparing virtual DOM with real DOM, minimizing expensive operations.
• Large Ecosystem: Massive library of third-party components, tools, and libraries.
• Strong Community: Extensive documentation, tutorials, and community support.
• Backed by Meta: Facebook/Meta's backing ensures long-term support and development.
• Cross-Platform: React Native allows mobile app development with the same skills.
• Developer Tools: Excellent debugging tools like React DevTools.
• SEO Friendly: Can be server-side rendered for better search engine optimization.

⚠️ Challenges & Limitations

• Learning Curve: JSX, hooks, and React patterns can be overwhelming for beginners.
• Rapid Evolution: Frequent updates and new features require continuous learning.
• Tooling Complexity: Build tools, bundlers, and configuration can be complex.
• Performance Overhead: Virtual DOM adds some overhead for simple applications.
• State Management: Complex state management requires additional libraries (Redux, Zustand, etc.).
• Bundle Size: Can lead to larger JavaScript bundles if not optimized properly.
• SEO Challenges: Client-side rendering can impact SEO without proper setup.

🏢 Why React is Widely Used in Industry

📊 Market Dominance

• Most Popular Frontend Framework: React consistently ranks #1 in developer surveys
• High Job Demand: React developers are among the most sought-after in the job market
• Enterprise Adoption: Used by major companies like Netflix, Airbnb, Instagram, Uber
• Startup Friendly: Rapid prototyping and development capabilities

💼 Business Benefits

• Faster Development: Component-based architecture speeds up development cycles
• Code Maintainability: Well-structured components are easier to maintain and update
• Team Collaboration: Clear component boundaries make team development smoother
• Cost Effective: Reusable components reduce development costs over time
• Scalability: Handles large applications with complex state management

🔧 Technical Advantages

• Declarative UI: Describe what you want, React handles the DOM updates
• Unidirectional Data Flow: Predictable state management and debugging
• Rich Ecosystem: Solutions for almost every use case (routing, state management, testing)
• Mobile Development: React Native allows code sharing between web and mobile
• Server-Side Rendering: Next.js and similar frameworks enable SEO-friendly applications

🎯 Industry Use Cases

• E-commerce: Product catalogs, shopping carts, user dashboards
• Social Media: News feeds, user profiles, real-time updates
• Enterprise Applications: Admin panels, data visualization, CRUD operations
• Progressive Web Apps: Offline functionality, push notifications
• Single Page Applications: Fast, responsive user experiences

📈 Career Opportunities

• High Salaries: React developers command premium salaries in the market
• Remote Work: Many React positions offer remote or hybrid work options
• Freelance Opportunities: High demand for React contractors and consultants
• Career Growth: Path to senior developer, tech lead, or architect roles
• Global Market: React skills are valuable worldwide

🚀 Vite: Fast React Development

• Vite is a modern build tool that is fast and lightweight.
• Uses native ES modules in development.
• Instant server start and hot module replacement (HMR).
• Builds optimized static assets for production (HTML, CSS, JS).

🛠️ Creating a Vite + React App

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

This spins up a local development server (usually on http://localhost:5173).

📦 Production Build

npm run build

This outputs a dist folder with static files you can deploy anywhere (e.g. Netlify, Vercel, S3).

📚 Learn More: Vite Documentation - Complete guide to Vite features and configuration.

🎯 Demo: Building a Basic Vite + React App

🚀 Step 1: Create the Project

# Create a new Vite project with React template
npm create vite@latest my-first-react-app -- --template react

# Navigate to the project directory
cd my-first-react-app

# Install dependencies
npm install

🔍 Step 2: Explore the Project Structure

my-first-react-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.jsx
│   ├── App.css
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
├── vite.config.js
└── README.md

⚙️ Step 3: Start the Development Server

npm run dev

This will start the development server, usually at http://localhost:5173

🔧 Step 4: Modify App.jsx

Let's create a simple counter component:

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <header className="App-header">
        <h1>My First React App</h1>
        <div className="counter">
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>
            Increment
          </button>
          <button onClick={() => setCount(count - 1)}>
            Decrement
          </button>
          <button onClick={() => setCount(0)}>
            Reset
          </button>
        </div>
      </header>
    </div>
  )
}

export default App

🎨 Step 5: Add Some Styling

Update App.css for better styling:

.App {
  text-align: center;
  padding: 2rem;
}

.App-header {
  background-color: #282c34;
  padding: 2rem;
  border-radius: 10px;
  color: white;
  margin: 2rem auto;
  max-width: 500px;
}

.counter {
  margin-top: 2rem;
}

.counter p {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.counter button {
  background-color: #61dafb;
  border: none;
  padding: 0.5rem 1rem;
  margin: 0.25rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.counter button:hover {
  background-color: #4fa8c7;}

📦 Step 6: Build for Production

npm run build

This creates a dist folder with optimized files ready for deployment.

🔍 What We Learned

• Project Setup: How to create a new Vite + React project
• Component Structure: Basic functional component with state
• State Management: Using useState hook for counter functionality
• Event Handling: onClick events for button interactions
• Styling: CSS for component styling
• Development Workflow: Hot reload and build process

🚀 Next Steps for the Demo

• Add more components (Header, Footer, etc.)
• Implement form handling with controlled inputs
• Add conditional rendering based on state
• Create a list component with mapping
• Add routing with React Router
• Integrate with an API for data fetching

💡 Recap

• JSX is a syntax extension for writing UI in JavaScript.
• React components can be created with functions returning JSX.
• Vite is a tool that makes working with React fast and smooth.
• Development server is live and reactive; production build is just static files.

✅ Next Steps

• Create your first React component with JSX.
• Understand props and component reuse.
• Style your component with CSS or CSS Modules.

Happy coding!