The primary type in React is the `ReactElement`. It has four properties: `type`, `props`, `key` and `ref`. It has no methods and nothing on the prototype.
You can create one of these object through `React.createElement`.
To render a new tree into the DOM, you create `ReactElement`s and pass them to `React.render` along with a regular DOM `Element` (`HTMLElement` or `SVGElement`). `ReactElement`s are not to be confused with DOM `Element`s. A `ReactElement` is a light, stateless, immutable, virtual representation of a DOM `Element`. It is a virtual DOM.
To add properties to a DOM element, pass a properties object as the second argument and children to the third argument.
```javascript
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);
```
If you use React JSX, then these `ReactElement`s are created for you. So this is equivalent:
```javascript
var root = <ulclassName="my-list">
<li>Text Content</li>
</ul>;
React.render(root, document.body);
```
__Factories__
A `ReactElement`-factory is simply a function that generates a `ReactElement` with a particular `type` property. React has a built-in helper for you to create factories. It's effectively just:
```javascript
function createFactory(type){
return React.createElement.bind(null, type);
}
```
It allows you to create a convenient short-hand instead of typing out `React.createElement('div')` all the time.
These are used as properties of other `ReactElement`s to represent children. Effectively they create a tree of `ReactElement`s.
## React Components
You can use React using only `ReactElement`s but to really take advantage of React, you'll want to use `ReactComponent`s to create encapsulations with embedded state.
A `ReactComponent` Class is simply just a JavaScript class (or "constructor function").
```javascript
var MyComponent = React.createClass({
render: function() {
...
}
});
```
When this constructor is invoked it is expected to return an object with at least a `render` method on it. This object is referred to as a `ReactComponent`.
```javascript
var component = new MyComponent(props); // never do this
```
Other than for testing, you would normally __never__ call this constructor yourself. React calls it for you.
Instead, you pass the `ReactComponent` Class to `createElement` you get a `ReactElement`.
```javascript
var element = React.createElement(MyComponent);
```
OR using JSX:
```javascript
var element = <MyComponent/>;
```
When this is passed to `React.render`, React will call the constructor for you and create a `ReactComponent`, which returned.
```javascript
var component = React.render(element, document.body);
```
If you keep calling `React.render` with the same type of `ReactElement` and the same container DOM `Element` it always returns the same instance. This instance is stateful.
```javascript
var componentA = React.render(<MyComponent/>, document.body);
var componentB = React.render(<MyComponent/>, document.body);
componentA === componentB; // true
```
This is why you shouldn't construct your own instance. Instead, `ReactElement` is a virtual `ReactComponent` before it gets constructed. An old and new `ReactElement` can be compared to see if a new `ReactComponent` instance is created or if the existing one is reused.
The `render` method of a `ReactComponent` is expected to return another `ReactElement`. This allows these components to be composed. Ultimately the render resolves into `ReactElement` with a `string` tag which instantiates a DOM `Element` instance and inserts it into the document.
