Feb 9: React Introduction

Topics Covered

Slides: slides.com/joelross/info340wi26-react-intro

What is React?

React is a JavaScript library for dynamically generating and interacting with the DOM
Organizes UI into reusable components
Efficiently updates the rendered DOM through virtual DOM optimization
Declarative approach: describe what the UI should look like, React handles the how

Hello React

React uses React.createElement() to create DOM elements:

const msgElem = React.createElement('h1',
  { id: 'hello', className: 'myClass' },
  'Hello World!');

First argument: element type (tag name)
Second argument: props object (attributes)
Third argument: children (content)

JSX (JavaScript XML)

JSX is shorthand syntax that transpiles to React.createElement() calls:

const msgElem = <h1 id="hello" className="myclass">Hello World</h1>;

Looks like HTML but is actually JavaScript
Use className instead of class (reserved keyword in JavaScript)
Self-closing tags required for void elements: <img />, <input />
Inline expressions use curly braces: {variable}
Multiple root elements require a fragment: <>...</>
Comments use: {/* comment */}

Vite Development Server

Build tool that transpiles JSX into pure JavaScript
Manages dependencies and bundles code
Auto-reloads browser on code changes
Displays syntax errors in console
Start with: npm run dev

React Components

Components are functions that return DOM elements:

function HelloMessage(props) {
  return <h1>Hello World!</h1>;
}

Component names must start with capital letter
Critical rule: Always render as <HelloMessage />, never call HelloMessage()
Components accept a props parameter for input
Must return a single root element (use fragments if needed)

Props (Properties)

Props are input parameters passed to components:

const msg = <MessageItem message="Hello" />;

function MessageItem(props) {
  return <li>{props.message.toUpperCase()}</li>;
}

Props can be strings, numbers, arrays, objects, or functions
String values can be passed directly: message="Hello"
Non-string values use curly braces: count={42}
Props are read-only (immutable)

Component Composition

Build complex UIs by nesting components and mapping arrays:

function MessageList(props) {
  const msgComponents = props.messages.map((msgStr) => (
    <MessageItem message={msgStr} key={msgStr} />
  ));
  return <ul>{msgComponents}</ul>;
}

Use .map() to create components from arrays
Each list item needs a unique key prop (React requirement)
Keys help React identify which items changed, added, or removed

Module System

Components defined in separate files and imported:

// Messages.js
export function HelloMessage(props) {
  return <h1>Hello World</h1>;
}

// App.js
import { HelloMessage } from './Messages.js';

export default function App(props) {
  return <HelloMessage />;
}

Named exports: export function ComponentName() {}
Default exports: export default function App() {}
Import with: import { ComponentName } from './file.js'

React Introduction