Simon Vrachliotis: 0:00 Here's a simple tag. When this JSX compiles, you can see it turns into a call to React.createElement with three arguments.
0:08 The first argument is the type of the element we are creating. Here, an . The second argument is for element properties, or props. The third argument is called children and is basically anything that sits between the opening and closing tags, so here the text "Hello world."
0:52 React.createElement() then does the hard work for us of creating an element, setting attributes, appending it to the correct DOM node, etc.
1:01 Let's take the JSX from our App.js component, and paste it here, for example. Look at that, it gets complex fairly quickly. React.createElement() then does the hard work for us of creating an element, setting attributes, appending it to the correct DOM node, etc.
1:18 There are a few gotchas that are worth going over. One of the first one, is you need to only ever have one top-level createElement call, so you can't have more than one top-level element in your JSX. If I had a second element here, you can see it's not compiling and it's not too happy.
1:33 We used to have to wrap components in divs for that reason, which was not ideal, but React now supports what are called Fragments, which you can wrap a component with, but will essentially disappear from your markup.
1:45 Another gotcha is every opening element must be closed. In HTML, you could have an image tag without closing it. That won't work in React. You'll find out immediately, as your component won't compile. You will need a closing tag or self-close the element like that.
2:15 One more important thing, notice how my h2 up here is passed as a string in the first argument? There is a convention in React that DOM element starts with a lowercase letter, while React component starts with an uppercase letter.
2:28 If I turn the h into an uppercase H, the first argument is not a string anymore, it's a React component. I would use this H2 to call a component like this, function H2(), which would return say an with a className of heading. Inside of the tags, it would render the children, which should be received as a parameter here.