ReactJ Components: Why do we initialise < MyComponentClass/> instead of <{MyComponentClass}/>


#1

https://www.codecademy.com/courses/react-101/lessons/your-first-react-component/exercises/render-react-component?action=resume_content_item

Why do we initialise a class the following way

  <MyComponentClass />,
  document.getElementById('app')
);

instead of

  <{MyComponentClass} />,
  document.getElementById('app')
);

since MyComponentClass is a javascript object and we are supposed to use {} on Javascript variables in JSX. Thank you for your help in advance.


#2

Step 8 of that exercise explains why.

JSX elements can be either HTML-like, or component instances . JSX uses capitalization to distinguish between the two! That is the React-specific reason why component class names must begin with capital letters. In a JSX element, that capitalized first letter says, “I will be a component instance and not an HTML tag.

<MyComponentClass /> is HTML-like, therfore it’s not in curly braces :slight_smile:
(Did I get that right?)


#3

One would expect so. { expression } would not be HTML-like, since we do not use expressions as element types. Tags denote type selectors.