= React =

'''React''' is a web framework.

<<TableOfContents>>

----



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

'''Java``Script 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