# Embedding React Components In Markdown 

You begin write a markdown document as usual. But then you want to render a react component.

Look at the component below:

```jsx
<StatelessExample propOne="propOne" propTwo="propTwo">
  <h1>Hello World</h1> 
  <ExampleComponent name="Whatever" />
</StatelessExample>
```

## Components

Any code blocks that live underneath the components section will be defined and registered automatically.

### Example Component

```javascript
class ExampleComponent extends React.Component {
  render() {
    return (<div>This is an example component! My name is ${this.props.name}</div>)
  }
}
```

### Stateless Example

```javascript
(props = {}) => 
  <div>
  <ul>
    { Object.keys(props).map((key) => (
      <li key={key}>Has the {key} prop</li>
    ))}
  </ul>
  {props.children}
  </div>
```