Preprocessing JSX with Babel

- [Instructor] When we created an unordered list using JSX,…we hit a bit of a wall.…We noticed that as soon as the browser…tried to read a tag in JavaScript, it started to complain.…The tool that'll help us solve this problem is Babel.…Babel is a transpiler that will transpile JavaScript code.…It works for JSX, and it also works for ES6 and beyond.…So, instead of having to wait around…to use syntax that's brand new,…we can use it right away with the help of Babel.…

The way that it works…is that if we use some sort of emerging syntax,…something like a JSX tag, it's going to transpile it…into something that the browser can use right away.…So we go from JSX tag to a createElement function call.…Now, if you're interested in learning more…about these features,…you can go to the babeljs website.…You can click on the link that says "Try it out,"…and this is going to allow you to…try out any of these features.…So I could type in my JSX tag, as I've done here,…ul, li, and it's going to convert it…into these createElement calls.…

Resume Transcript Auto-Scroll

Author

Released

9/27/2016

A new JavaScript library has arrived: React.js. React.js is designed to make the process of building modular, reusable user interface components simple and intuitive. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. In this course, Eve Porcello helps you get started with React.js, guiding you through the interface design of a sample bulletin board app. She reviews components, properties, and component state, as well as the foundational parent/child relationships within React.js. Eve also describes the lifecycle of components and how developers can trigger creation, lifetime, and teardown events. The course wraps with a chapter dedicated to building a more complete app with React.js and companion tools like Babel, NPM, and more.