React

React is a web framework.

Description

React uses a virtual DOM to compute effective changes and minimize the number of real DOM manipulations, making it cheaply efficient.

The core concept is components, which are classes or functions that take props (properties) and return a DOM (via a render() function, in the case of classes).

JSX

JavaScript XML (JSX) is an extension of ECMAScript that mirrors literal HTML. This provides an API for declaring basic HTML structures in a React program.

class ShoppingList extends React.Component {
  render() {
    return (
      <div>
        <p>Header</p>
        <p>Content</p>
        <p>Footer</p>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

Note the surrounding <div> tags. If multiple same-level JSX tags are returned from a React component, they in fact return as an array rather than a unified DOM. Either surround the structure with <div> tags (as shown above) or with <> tags (which are an alias to the <Fragment> component).

The component examples also demonstrate that ECMAScript expressions can be embedded into JSX.

Usage

Class-Based Components

class Parent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <Child color={this.state.color} />
    );
  }
}

Functional Components

const Hello = (props) => {
  <div>Hello, {props.name}!</div>
};

Note the <div> tags embedded into this function, making this an example of JSX.

react-dom

To render a React node at some target <div>, use the render() function from react-dom.

import React from 'react'
import ReactDOM from 'react-dom'

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('my-target-id'));

react-router-dom

To route page requests in a single-page app, use the routing functionality from react-router-dom.

import React from 'react'
import ReactDOM from 'react-dom'
import { Route, BrowserRouter as Router } from 'react-router-dom'

import Component1 from './component1'
import Component2 from './component2'
import Component3 from './component3'

const routing = (
  <Router>
    <div>
      <Route exact path="/" component={Component1} />
      <Route path="/help" component={Component2} />
      <Route path="/contact" component={Component3} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('my-target-id'))

CategoryRicottone