Description
How to write JSX and convert it to runnable React using Babel-Standalone in the browser.
Slides
What is JSX?
- Mixes HTML and JavaScript together
- Makes building the UI easier
- Is transformed into ReactDom code
- Is used everyday in React
Starting JSX
- This is JSX Code
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
Resulting ReactDOM code
- This is the ReactDOM code the JSX creates
ReactDOM.render(React.createElement(
'h1',
null,
'Hello, React!'
), document.getElementById('root'));
Resulting HTML in the DOM
<div id="root">
<h1>Hello, React!</h1>
</div>
What we learned
- JSX feels like HTML (inside of JavaScript)
- JSX compiles to ReactDOM code
- JSX is a 'syntax extension' to JavaScript
- ReactDOM builds the HTML from the virtual DOM
JSX can embed JavaScript expressions
Building a greeter
const user = {
firstName: 'Ada',
lastName: 'Lovelace',
nickName: 'The queen of numbers'
};
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const element = (
<div>
<h1>Welcome to React, {formatName(user)}!</h1>
<h2>{user.nickName}</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
After compiling JSX -> JS
const user = {
firstName: 'Ada',
lastName: 'Lovelace',
nickName: 'The queen of numbers'
};
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const element = (
<div>
<h1>Welcome to React, {formatName(user)}!</h1>
<h2>{user.nickName}</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
JSX results
See the Pen Embedding with JSX by Joshua Burke (@Dangeranger) on CodePen.
JSX is transformed into ReactDOM
- Tools like Babel convert JSX to ReactDOM
- You can use Babel as a script in your project HTML for development
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">
<script type="text/babel">
console.log( <h1>yo</h1> );
</script>
Example
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
</head>
<body>
<div id="output"></div>
<!-- Load Babel and React -->
<!-- Your script here -->
<script type="text/babel">
ReactDOM.render(
<h1>Hello, again React!</h1>,
document.getElementById('output')
);
</script>
</body>
</html>
Live Example
See the Pen Single File React by Joshua Burke (@Dangeranger) on CodePen.