React Fundamentals

React is a JavaScript library for building user interfaces, particularly single-page applications. It’s used to handle the view layer for web and mobile apps and allows you to create reusable UI components.

Introduction to React

React was created by Facebook and released in 2013. It’s maintained by Facebook and a community of individual developers and companies. React’s key features include:

• Declarative: You describe what your UI should look like, and React efficiently updates and renders the right components when data changes.
• Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs.
• Learn Once, Write Anywhere: React can also render on the server using Node, and power mobile apps using React Native.

Setting Up a React Application

Using Create React App

The easiest way to start with React is using Create React App:

npx create-react-app my-app
cd my-app
npm start

This creates a new React application with a development server, modern JavaScript features, and optimized production build.

Project Structure

A typical Create React App project has this structure:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Manual Setup

For more control, you can set up React manually with webpack or another build tool:

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

Then create webpack and Babel configuration files.

React Components

Components are the core building blocks of React applications. Each component is a JavaScript function or class that optionally accepts inputs (props) and returns a React element describing what should appear on the screen.

Functional Components

Functional components are the simplest way to define a component:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Arrow function syntax
const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
};

// Usage
<Welcome name="John" />

Class Components

Class components offer more features like local state and lifecycle methods:

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

// Usage
<Welcome name="John" />

Component Composition

Components can refer to other components in their output:

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

Extracting Components

Break down components into smaller components for better reuse and separation of concerns:

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

JSX

JSX is a syntax extension to JavaScript that looks similar to HTML but comes with the full power of JavaScript. It’s recommended to use it with React to describe what the UI should look like.

JSX Basics

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

const name = 'John Doe';
const element = <h1>Hello, {name}</h1>;

const user = { firstName: 'John', lastName: 'Doe' };
const element = <h1>Hello, {formatName(user)}</h1>;

JSX Represents Objects

Babel compiles JSX down to React.createElement() calls:

// This JSX:
const element = <h1 className="greeting">Hello, world!</h1>;

// Compiles to:
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

JSX Attributes

// String literals
const element = <div tabIndex="0"></div>;

// JavaScript expressions
const element = <img src={user.avatarUrl}></img>;

// Self-closing tags
const element = <img src={user.avatarUrl} />;

JSX Children

// Empty elements
const element = <div></div>;

// Elements with children
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

// Mixed content
const element = (
  <div>
    <h1>Hello, {name}!</h1>
    <p>You have {unreadMessages.length} unread messages.</p>
  </div>
);

JSX Prevents Injection Attacks

React DOM escapes any values embedded in JSX before rendering them, helping to prevent XSS attacks:

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

Props

Props (short for “properties”) are inputs to React components. They allow you to pass data from a parent component to a child component.

Passing Props

// Parent component passing props
function App() {
  return <Welcome name="Sara" age={25} isAdmin={true} />;
}

// Child component receiving props
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Props are Read-Only

A component must never modify its own props. All React components must act like pure functions with respect to their props:

// Correct
function sum(a, b) {
  return a + b;
}

// Incorrect (modifies input)
function withdraw(account, amount) {
  account.total -= amount;
}

Default Props

You can define default values for props:

function Button(props) {
  return <button className={props.className}>{props.label}</button>;
}

Button.defaultProps = {
  className: 'default-button',
  label: 'Click Me'
};

// For class components
class Button extends React.Component {
  // ...
}

Button.defaultProps = {
  className: 'default-button',
  label: 'Click Me'
};

Type Checking with PropTypes

You can use PropTypes to document the intended types of properties:

import PropTypes from 'prop-types';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Welcome.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  isAdmin: PropTypes.bool
};

State and Lifecycle

State allows React components to change their output over time in response to user actions, network responses, and anything else.

Adding State to a Class Component

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Lifecycle Methods

Components have lifecycle methods that allow you to run code at particular times:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  // After the component output is rendered to the DOM
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  // Before component is removed from the DOM
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Updating State

Never modify state directly; use setState() instead:

// Wrong
this.state.comment = 'Hello';

// Correct
this.setState({comment: 'Hello'});

State updates may be asynchronous:

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

State updates are merged:

this.state = {
  posts: [],
  comments: []
};

// Only updates posts, comments remains the same
this.setState({
  posts: ['New post']
});

Data Flows Down

State is often called local or encapsulated, and is not accessible to any component other than the one that owns and sets it. A component may pass its state down as props to its child components:

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

class Clock extends React.Component {
  // ...
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <FormattedDate date={this.state.date} />
      </div>
    );
  }
}

Handling Events

React events are named using camelCase, and you pass a function as the event handler, rather than a string:

// HTML
<button onclick="activateLasers()">
  Activate Lasers
</button>

// React
<button onClick={activateLasers}>
  Activate Lasers
</button>

Event Handlers

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // Binding is necessary to make `this` work in callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Alternative Class Syntax with Public Class Fields

class Toggle extends React.Component {
  // No constructor needed
  state = {isToggleOn: true};

  // Public class fields syntax ensures `this` is bound
  handleClick = () => {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Passing Arguments to Event Handlers

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Conditional Rendering

In React, you can create distinct components that encapsulate the behavior you need, then render only some of them depending on the state of your application.

If Statements

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

Inline If with Logical && Operator

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

Inline If-Else with Conditional Operator

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

Preventing Component from Rendering

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

Lists and Keys

Rendering Multiple Components

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

Keys

Keys help React identify which items have changed, added, or removed:

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

Keys should be unique among siblings, but don’t need to be globally unique:

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

Extracting Components with Keys

Keys only make sense in the context of the surrounding array:

function ListItem(props) {
  // No need to specify the key here
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Key should be specified inside the array
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

Forms

HTML form elements work a bit differently in React because they naturally keep some internal state.

Controlled Components

In React, mutable state is typically kept in the state property of components, and only updated with setState(). Form elements that are controlled by React in this way are called “controlled components”:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Handling Multiple Inputs

When you need to handle multiple controlled inputs, you can add a name attribute to each element and let the handler function choose what to do based on the value of event.target.name:

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

Form Controls

React supports various HTML form elements:

• Text inputs: <input type="text">, <textarea>
• Checkboxes: <input type="checkbox">
• Radio buttons: <input type="radio">
• Select dropdowns: <select>, <option>
• File inputs: <input type="file"> (uncontrolled)

Lifting State Up

Often, several components need to reflect the same changing data. It’s recommended to lift the shared state up to their closest common ancestor.

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});
  }

  render() {
    const temperature = this.state.temperature;
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input
          value={temperature}
          onChange={this.handleChange} />
        <BoilingVerdict
          celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
}

When we need to support both Celsius and Fahrenheit, we lift state to the shared parent component:

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

Composition vs Inheritance

React has a powerful composition model, and recommends using composition instead of inheritance to reuse code between components.

Containment

Components that don’t know their children ahead of time can use the special children prop to pass children elements directly into their output:

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

Specialization

Sometimes we think about components as being “special cases” of other components. In React, this is also achieved by composition, where a more “specific” component renders a more “generic” one and configures it with props:

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {login: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSignUp = this.handleSignUp.bind(this);
  }

  handleChange(e) {
    this.setState({login: e.target.value});
  }

  handleSignUp() {
    alert(`Welcome aboard, ${this.state.login}!`);
  }

  render() {
    return (
      <Dialog
        title="Mars Exploration Program"
        message="How should we refer to you?">
        <input value={this.state.login}
               onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }
}

Thinking in React

Here’s a thought process for building React apps:

1. Start with a mock: Break the UI into a component hierarchy
2. Build a static version: Build components that reuse other components and pass data using props. Don’t use state yet.
3. Identify the minimal representation of UI state: Figure out what state your app needs.
4. Identify where your state should live: Identify which component should own which state.
5. Add inverse data flow: Support data flowing from forms back up to parent components.

React Developer Tools

React Developer Tools is a browser extension for Chrome and Firefox that allows you to inspect the React component hierarchy in the browser’s developer tools:

• Inspect component props and state
• Track which components re-render
• Profile performance
• Find components that cause unintended side effects

Best Practices

Keep Components Small and Focused

Each component should ideally do one thing well. If a component grows too large, consider breaking it down into smaller subcomponents.

Use Functional Components When Possible

Functional components are simpler, more concise, and generally easier to understand than class components.

Use PropTypes for Type Checking

Define PropTypes for your components to document the API and catch bugs early.

Use CSS-in-JS or CSS Modules

Consider using CSS-in-JS libraries like styled-components or CSS Modules to scope styles to specific components.

Use Fragment to Avoid Unnecessary DOM Nodes

Use React Fragments to group lists of children without adding extra nodes to the DOM:

function ListItems() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </>
  );
}

Use Short-Circuit Evaluation for Conditional Rendering

{isLoggedIn && <LogoutButton />}

Use Ternary Operator for Simple Conditionals

{isLoggedIn ? <UserGreeting /> : <GuestGreeting />}

Use Error Boundaries to Catch Rendering Errors

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

// Usage
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Learning Resources

• React Documentation - Official React docs
• React Tutorial - Official React tutorial
• React Blog - Official React blog
• Create React App - Set up a modern web app by running one command
• React DevTools - React Developer Tools extension
• React Patterns - Common React patterns
• Egghead.io React Courses - Video tutorials
• React Enlightenment - React book