-
JSX is not an entirely different language, but it is a bit of an extension to the language, so knowing how you would express certain JavaScript things within the JSX syntax is important to using JSX effectively.
-
To interpolation use
{ }. Any JavaScript expression inside of the curly braces will be evaluated and passed to theReact.createElementAPI. This allows you to be expressive when building out UI's. Example:
<script type="text/babel">
const rootElement = document.getElementById('root');
// declaring variables
const children = 'Hello World';
const className = 'container';
// interpolation
const element = <div className={className}>{children}</div>;
ReactDOM.render(element, rootElement);
</script>Since this is JSX and not HTML, you can use self-closing tags:
<script type="text/babel">
const rootElement = document.getElementById('root');
const children = 'Hello World';
const className = 'container';
const props = { children, className };
// self-closing tags
const element = <div {...props} />;
ReactDOM.render(element, rootElement);
</script>- The spread operator takes either an array or an object and expands it into its set of items. We can use the spread operator to pass down our props to the
React.createElementAPI:
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root');
const children = 'Hello World';
const className = 'container';
const props = { children, className };
// using spread operator
const element = <div {...props} />;
ReactDOM.render(element, rootElement);
</script>
</body>- You can also add or extended props in a declarative and deterministic way.