React

React is a NodeJS library for creating dynamic web content.

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

Components

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

A class-based example is:

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

A functional example is:

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

Note the <div> tags embedded into this function. These are an example of JSX.

JSX

!JavaScript XML (JSX) is an extension of !JavaScript 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 !JavaScript expressions can be embedded into JSX.

Toolchain

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