TodayILearned - 2023-06-20 Part Two

#TIL

Two TIL posts in one day?! This TIL consists of notes I took while reading the React.dev Docs! I had a few lingering questions about React and reading through the docs answered some of my questions. I’m super impressed by how readable the React.dev docs are, honestly. I definitely hope I can write technical articles like this some day.

Why do multiple JSX tags need to be wrapped by a single container element?

• Even though much of the JSX code looks like HTML, it’s really JavaScript under the hood. A component is essentially a reusable JavaScript function.
• Therefore, such a function needs to return ONLY one object/element or an array that contains multiple objects. That’s why you need to wrap it with one container.

Why do I have to use className attribute instead of class?

• This is because class is a reserved word in JSX/JavaScript so you have to use className as an alternative.

You can specify default value for a prop

function Profile({ person, color = 'blue' }) {
  // ...
}


## You can nest your own components 

```jsx
<Card>
   <Profile />
</Card>

• By doing so, the parent <Card /> component receives the child <Profile /> component as a prop.

function Card({ children }) {
  return (
    <section>
      {children}
    </section>
  );
}