Using JSX to mount a DOM element and display it in a web browser

In theory, we could actually build out an entire application using the createElement method. But eventually, as our application scales, it’ll get really complex and hard to reason. This is why React gave us an abstraction on top of this method, called JSX.

React takes your JSX and boils it down through React.createElement() calls that is why it’s important to understand a little bit about this particular method.

1. Use something like Babel transpile your JSX into a regular version of JavaScript so that Chrome can read it. To get babel-standalone included into our html file for now, we can simply use the UNPKG cdn to retrieve it.

<script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

2. Refactor our myElement variable to use JSX instead of React.createElement()

const myElement = React.createElement('h1', {className:'heading'}, 'Hello World');

// becomes

const myElement = <h1 className="heading" >Hello World</h1>;

Challenge

From scratch, build out a React application within an HTML file that will mount an header with your name, age and location. Use a <style> tag to add some CSS and make your profile you just built look nice and pretty.