Components and JSX

You might have noticed over the last two lessons how I’ve been naming Component functions in CapitalizedCase. As you may imagine, this is not an accident. So let’s do a little quiz:

Do you know why I’ve been naming component functions in CapitalizedCase?

While it goes without saying, the title of this page may give you a bit of a hint 😉

#lowercase vs CapitalizedCase

So far in this course, most of the JSX elements that you’ve seen have been <lowercase>. This means that they map to built-in elements, with string types:

<div />

// becomes

React.createElement('div', {})

Of course, React is all about custom components. So say that you’ve create a component called modal, and you try to use it in a <modal> element. It won’t work, because JSX will still treat the type as a string:

<modal />

// becomes

React.createElement('modal', {})

JSX needs a way to distinguish between built-in tags and custom components, and that’s why components are generally named in CapitalizedCase. When JSX sees a CapitalizedCase element, it’ll pass the name through as is:

<Modal />

// becomes

React.createElement(Modal, {})

#Whack-a-bug

This little app has a bug which is preventing it from displaying a message. You should be able to fix it by changing two characters.

Your task is to fix the bug and make it display the text.

I’ve set this editor up with a split JSX/compiled source view. Once you’ve finished the exercise, try playing around with a few different JSX tags to see what they compile to.

let complete = () => 
  <h1>🏁 You completed the exercise! 🎉</h1>

ReactDOM.render(
  <complete />,
  document.getElementById('root')
)