thepracticaldev.com thepracticaldev.com

How JSX works?

I put a post on my Twitter account and had a brief talk on how JSX works, So I want to explain more about it here. Every ReactJS developer knows about the jsx magic, it let us write some HTML in javascript, and that's how the magic happens. We can do this kind of stuff in tools like babel. For example, we have a babel plugin named @babel/plugin-transform-react-jsx that gives us the ability to work with JSX...

thepracticaldev.com thepracticaldev.com

Polyfills, Ponyfills, and Transpiling

When discussing new JavaScript features and syntax, it’s common to hear words like polyfill, transpile, and even ponyfill used. For example, someone might say, “In order to use this in older browsers, you’ll need to use Babel to transpile the code.” Or maybe, “Make sure to provide a polyfill for this functionality so that older browsers can use it.” If you’re not familiar with these terms, you may be asking yourself,...

Abstract Syntax Trees by example

Babel is a very powerful code generator and parser, but the documentation doesn’t have many examples of how to use it for parsing, generating, and manipulating abstract syntax trees, I’m collecting some here from my own usage of it.I’m currently working on a side project which needs a lot of JSX/HTML parsing, manipulation, and generation using Abstract Syntax Trees (AST).ASTs are very powerful and you can use them to build your...