Skip to content

Instantly share code, notes, and snippets.

@rishabhp
Last active Apr 10, 2016
Embed
What would you like to do?
React JSX to JS (ES5 and ES6) Transpilation Examples
let styles = {
backgroundColor: '#fefefe',
color: '#ff0000'
}
class App extends React.Component {
render() {
return (
<div style={styles}>
<form action="/somewhere" method="post">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</form>
</div>
);
}
}
let styles = {
backgroundColor: '#fefefe',
color: '#ff0000'
};
class App extends React.Component {
render() {
return React.createElement(
'div',
{ style: styles },
React.createElement(
'form',
{ action: '/somewhere', method: 'post' },
React.createElement(
'table',
null,
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
null,
'ID'
),
React.createElement(
'th',
null,
'Name'
)
)
),
React.createElement(
'tbody',
null,
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
'1'
),
React.createElement(
'td',
null,
'John'
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
'2'
),
React.createElement(
'td',
null,
'Doe'
)
)
)
)
)
);
}
}
let styles = {
backgroundColor: '#fefefe',
color: '#ff0000'
}
let App = React.createClass({
render: function () {
return (
<div>
<form action="/somewhere" method="post">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Doe</td>
</tr>
</tbody>
</table>
</form>
</div>
);
}
});
let styles = {
backgroundColor: '#fefefe',
color: '#ff0000'
};
let App = React.createClass({
displayName: 'App',
render: function () {
return React.createElement(
'div',
null,
React.createElement(
'form',
{ action: '/somewhere', method: 'post' },
React.createElement(
'table',
null,
React.createElement(
'thead',
null,
React.createElement(
'tr',
null,
React.createElement(
'th',
null,
'ID'
),
React.createElement(
'th',
null,
'Name'
)
)
),
React.createElement(
'tbody',
null,
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
'1'
),
React.createElement(
'td',
null,
'John'
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
'2'
),
React.createElement(
'td',
null,
'Doe'
)
)
)
)
)
);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment