Inside Babel - How to transform JSX to function calls using

🚀 Unbundle React: EP6 - Manipulating AST to transform JSX - Part 2 🚀

In this video, we take a deep dive into how Babel transforms JSX into pure JavaScript function calls like `_jsx` and `_jsxs`. Starting with adding props to JSX elements and handling child components, we walk through the entire process step-by-step.

We’ll explore how to use Babel's helper functions like `t.objectProperty`, `t.callExpression`, and more to apply AST transformations and generate a new one.

Finally, we’ll demonstrate how to generate the final function call that React can interpret.

📌 *Key Topics Covered:*

- Understanding the difference between `_jsx` and `_jsxs` calls
- Transforming props
- Handling single and multiple children in JSX
- Using Babel helpers like `t.objectProperty`, `t.stringLiteral`, and `t.callExpression` to create new AST nodes


👉 **Next video**: Transforming the other components imported into App

⏮️ **Previous video**: [Inside Babel - Manipulating AST to transform JSX](   • Inside Babel - Manipulating AST to tr...  )

#JavaScript #ReactJS #Babel #JSX #WebDevelopment #FrontendDevelopment #ProgrammingTutorial #AST #JSXtoJS #CodingTips #BabelTutorial #ReactComponents #reactcomponents

References:
- Visitor pattern in babel
https://github.com/jamiebuilds/babel-...
- Babel's node types: https://github.com/babel/babel/blob/m...
- Babel Types Cheat Sheet
https://github.com/donaminos/Babel-Ty...

👍 Be my friend, say hi, like and subscribe! 🫂