## page was renamed from NodeJS/React
= 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.

<<TableOfContents>>

----



== 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