Interactive React Snippets

Let's see how to use React.js inside Klipse.

There is a full example here.

First, you need to include the javascript files of React.js:

You can add the script tags manually or create a hidden javascript Klipse snippet that includea the javascript files required for React.js (the snippet must not be empty - otherwise it will be ignored):

<pre class="hidden"><code class="lang-eval-js"
 data-external-libs="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-with-addons.js,
 https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js">
React
</code></pre>

React

Now, let's create a simple React JSX component:

```eval-jsx
function Hello(props) {
  return <div>Hello {props.toWhat}</div>;
}
```

And here is the result:

function Hello(props) {
return <div>Hello {props.toWhat}</div>;
}

There a 4 ways to create a Klipse snippet that renders a react component:

1. Automatic Rendering with JSX into the Klipse container

Each klipse snippet is associated with a klipse container.

When you have an klipse snippet of type render-jsx, its content is wrapped into a call to ReactDOM.renderinto the associated klipse container:

```render-jsx
<Hello toWhat="World" />
```

<Hello toWhat="World" />

2. Automatic Rendering with React into the Klipse container

Each klipse snippet is associated with a klipse container.

When you have an klipse snippet of type react, its content is wrapped into a call to ReactDOM.renderinto the associated klipse container:

```react
<Hello toWhat="World" />
```

React.createElement(Hello, {toWhat: "World"})

3. Manual Rendering with JSX

You can create a <div> wherever you want on the page and render into it with a eval-jsx snippet.

For instance, let's have <div id="my-container-1"> just before our eval-jsx snippet:

```eval-jsx
ReactDOM.render(<Hello toWhat="World" />,
document.getElementById('my-container-1'))
```

ReactDOM.render(<Hello toWhat="World" />, document.getElementById('my-container-1'))

4. Manual Rendering with React

You can create a <div> wherever you want on the page and render into it with a eval-js snippet.

For instance, let's have <div id="my-container-2"> just before our eval-js snippet:

```eval-js
ReactDOM.render(React.createElement(Hello, {toWhat: "World"}),
document.getElementById('my-container-2'))
```

ReactDOM.render(React.createElement(Hello, {toWhat: "World"}),
    document.getElementById('my-container-2'))