Il tipo primario in React è il `ReactElement`. Possiede quattro proprietà: `type`, `props`, `key` e `ref`. Non possiede alcun metodo e non espone nulla sul prototype.
Puoi creare uno di questi oggetti attraverso `React.createElement`.
Per effettuare il rendering di un nuovo albero nel DOM, crei dei `ReactElement` ande li passi a `ReactDOM.render` assieme a un `Element` DOM regolare (`HTMLElement` o `SVGElement`). I `ReactElement` non vanno confusi con gli `Element` del DOM. Un `ReactElement` è una rappresentazione leggera, priva di stato, immutabile e virtuale di un `Element` del DOM. È un DOM virtuale.
Una factory di `ReactElement` è semplicemente una funzione che genera un `ReactElement` con una particolare proprietà `type`. React ha uno helper integrato per permetterti di creare factory. La sua implementazione è semplicemente:
```javascript
function createFactory(type) {
return React.createElement.bind(null, type);
}
```
Ti permette di creare una conveniente scorciatoia anziché scrivere ogni volta `React.createElement('div')`.
React possiede già factory integrate per tag HTML comuni:
```javascript
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Contenuto di Testo')
);
```
Se stai usando JSX non hai bisogno di factory. JSX fornisce già una conveniente scorciatoia per creare `ReactElement`.
## Nodi React
Un `ReactNode` può essere uno tra:
-`ReactElement`
-`string` (ovvero `ReactText`)
-`number` (ovvero `ReactText`)
- Array di `ReactNode` (ovvero `ReactFragment`)
Questi sono usati come proprietà di altri `ReactElement` per rappresentare i figli. Effettivamente creano un albero di `ReactElement`.
## Componenti React
Puoi usare React usando soltanto `ReactElement`, ma per avvantaggiarti seriamente di React vorrai usare i `ReactComponent` per creare incapsulamento con uno stato incluso.
Una classe `ReactComponent` è semplicemente una classe JavaScript (o una "funzione costruttore").
```javascript
var MyComponent = React.createClass({
render: function() {
...
}
});
```
Quando questo costruttore è invocato, ci si aspetta che restituisca un oggetto con almeno un metodo `render`. Questo oggetto è chiamato `ReactComponent`.
```javascript
var component = new MyComponent(props); // non farlo mai!
```
Per scopi diversi dai test, *non chiamerai mai* questo costruttore direttamente. React lo chiamerà per te.
Invece, passa una classe `ReactComponent` a `createElement` per ottenere un `ReactElement`.
Se chiami ripetutamente `ReactDOM.render` con lo stesso tipo di `ReactElement` e lo stesso `Element` DOM come contenitore, ti restituirà sempre la stessa istanza. Questa istanza è dotata di stato.
Questo è il motivo per cui non dovresti mai costruire la tua istanza. Invece, `ReactElement` è un `ReactComponent` virtuale prima che venga costruito. Un vecchio `ReactElement` e uno nuovo possono essere confrontati per vedere se una nuova istanza di `ReactComponent` è stata creata o quella esistente è stata riutilizzata.
Ci si aspetta che il metodo `render` di un `ReactComponent` restituisca un altro `ReactElement`. Ciò permette a questi componenti di essere composti. In ultima analisi, il rendering si risolve in un `ReactElement` con un tag `string` che viene istanziato come un `Element` DOM e viene inserito nel documento.
