Understand JSX at a Deeper Level

React

Share this video with your friends

"JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."

Dive deep into JSX, what it is, and what it becomes. Be sure to check out Build a JSX Live Compiler.

Jordan

~ 9 years ago

I really appreciate these lessons, but have a quick question regarding the JSX Live Compiler. When you type in the input text area in this lesson, it appears that everything is indenting automatically. I can't even figure out a way to do a tab indent in my textarea, and I think I followed your code in the prior lesson pretty thoroughly. I'm using up-to-date Chrome browser on MacOS. Any idea why my input isn't as pretty as yours?

Joe Maddalone(instructor)

~ 9 years ago

Have a look at the source code in the repo, https://github.com/joemaddalone/egghead-react-fundamentals-es6/tree/master/lessons/14-build-compiler

I bring in a lib called Behave to get the indentation. It's not React-related and therefore not discussed, but keeps you from having to watch me futz around lining things up. :)