Get familiar with the basics of JSX

Simon Vrachliotis: [0:00] Here's a simple <h2> 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 <h2>. 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 <h2> tags, so here the text "Hello world."

[0:25] I can add any prop to this element by passing them just like attributes in a HTML element. I can pass them as strings, like so, but I also have access to the full power of JavaScript expressions if I open a set of curly braces. I can have a number, a calculation, a ternary operator or an array of really anything I want.

[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:01] A few keywords are reserved in JavaScript. Class is one of them. When adding a CSS class to an element, we'll need to use className instead. Same goes with the for attribute in form elements, which should be htmlFor.

[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 <h2> with a className of heading. Inside of the <h2> tags, it would render the children, which should be received as a parameter here.