> For the complete documentation index, see [llms.txt](https://notes.danfitz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.danfitz.com/javascript/epic-react/a-react-fundamentals.md).

# React Fundamentals

* It makes sense that JSX must always have a parent container when you think about how it compiles down to `React.createElement`. How can you have two `React.createElement` calls side by side?
* Babel is actually written in JS, so you can interestingly compile your JSX by placing `type="text/babel` in your `<script />` tag.
* The `className` prop is named such because the DOM API names it that way too!
* The `style` prop accepts camel-cased properties because the DOM API works that way too!
* When you interact with React's events, it actually returns a `SyntheticEvent` created inside React. It's not coming from the actual DOM (but is pretty darn close).
  * React does this for performance reasons (e.g. event delegation).
  * If you need to access the native event, just type `event.nativeEvent`.
* A change in the `key` prop tells React that a component needs to be re-mounted.
  * This is useful when you're working with lists where the order and contents can change.
  * However, it's useful for *intentionally* re-mounting too. If you need to restart a component based on some changing variable, you can just make that changing variable the `key` of that component.