Compiling, Bundling, and a Closer Look at JSX

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.4 instructor rating • 19 courses • 229,824 students

Lecture description

Understand compiling and bundling JavaScript code for React projects. Investigate JSX more deeply.

Learn more from the full course

React JS Web Development - The Essentials Bootcamp

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

10:33:13 of on-demand video • Updated August 2019

  • Learn React the right and learn best practices.
  • Dive into the React engine, and learn how it works under the hood.
  • See how React fits in the big picture of web development.
  • Learn how to build applications from scratch.
  • Cover the crucial concepts of bundling and transpiling, and create frontend application build systems.
English Hey! Previously we successfully ran a line of react code in our starter project. We did so using the react.createElement method to generate a div that we inserted into each table using ReactDOM.render. However from our experience building the portfolio project we know there's a much cleaner syntax for creating elements JSX. So let's go ahead and try it out right within our index.js file. You can also remove this console.log and it's coming out this const element line for the react create element. And instead, let's attempt to create our element using a pair of div tags as JSX. The inner content is gonna be the same with react element. But let's distinguish that this is with JSX. Cool! Give that to save and then head back to your browser then go to the react-bootcamp starter index HTML file in your system. And if you refresh well you're going to find that there's nothing appearing in the page anymore and in the console you're going to see that there is an error saying unexpected token less than sign. So that is our JSX line there's a reason we didn't start with JSX and went with reactDOM.create Element first. And that's because JSX isn't supported in the browser environment. The trick to getting JSX to run in the browser is that it needs to be transformed into the more equivalent verbose version that the browser actually understands and react does createElement. Is that more verbose version of JSX syntax to dig into this. Visit babeljs.io. So babel is a technology that does a translation job that we need. It compiles javascript code with newer syntax into the code that the browser can actually understand. So head to the try it out tab on this page. We can experiment with babel in real time and then see how it compiles code on left sidebar make sure that react is checked so that we babel will compile the react code that we enter in this page on the left pane we can enter newer javascript syntax and then on the right we're gonna see the more compiled browser supported version. So let's try to enter our JSX line we're gonna make our element and this will be said to a pair of div tags and within those div tags we have react element with JSX. And on the right you can see that the equivalent browser compatible version is react.createElement with the argument of div has no for props and then the text of React element with the JSX so it shows us that JSX is essentially syntactic sugar around react.createElement. In other words it's a convenient way for react developers to write the structure of React elements in a more sugar kind of way without having to use be more explicit react createElement method over and over again to structure entire components after all the JSX syntax is so much cleaner and a more closely resembles HTML. Okay since babel is a technology that can do the translation for us the goal would be to add babel to the project but to add babel we're gonna need a building and bundling system in another tab search up parcel bundler one of the first things that should pop up is parceljs.org. Go ahead and click on that and as a description on the top says parcel is a blazing fast Web application bundler. A bundler does a very important job of preparing our javascript code by smushing all the JavaScript files into one giant file that the index.html can refer to. Now we're going to explore this in more detail shortly but the part we're currently concerned about is making sure babel can compile the JSX in our project. So if you do a command find on the page and you look for babel you'll see that it's within this automatic transform section. Cool! So parcel automatically has the babel transforming abilities. All right, Let's add parcel bundler to our project to add passable and we're gonna need to turn starter into a full blown javascript project using Node in the command line within the react-bootcamp started directory. Use the NPM init command to initialize an JavaScript project and then add the --y option so that way we skip the interactive questionnaire. This should generate a package.json file so if you tell us there should be a new package.json within the directory. Cool! Next we're going to install the parcel bundler module so use NPM I and I is short for install and then its parcel-bundler and as of this course parcel bundler is at version 1.10. 3. If you want to use a version so that way your project is compatible with the one that you're seeing in this course after this is installed. We're going to install react and react-dom. So rather than using the CDN links to load in the react and react-dom libraries we can install these as actual node modules. So in this course react and react-dom are at versions 16.6.3 So first npm i add and I'll actually clear so that way it's a little more visible but NPM I react at 16.6.3 And the second one is react-dom at 16.6.3 and add a --save flag. Cool so as that's going. Head back to your index.html file within the index.html file. Now that we have the react and react-dom packages included within the node modules we can get rid of the script tags. All right. Nice, but now our index.js file is still going to need this ReactDOM line to refer to as well as the global react library. So first import react from react and then import react from its node module at react- dom. Nice, next. We need to configure parcel to start up the project and build it. We can do that in the package. json file so within package.json. Let's add an official script for starting up the project instead of this test key which is there by default. Let's have a start key instead. And this is gonna use parcel to fire the index HTML when we install the local parcel bundler dependency. We gave this project access to a parcel command and by giving the parcel command index.html. Well it tells it to bundle and serve up the project based on everything needed for the index HTML file so parcel works like this. It's going to look at that index HTML. And then it notices that one of their dependencies is index. Yes. So then it goes to index.css, but then it notices there that we're importing react and react-dom. So then it also includes those libraries within the bundled project. Right let's go ahead and check this out. Back in the command line fire NPM run start to execute that * Command and you'll see that it goes to parcel index html and now it's building the overall project engine complete after some seconds. But if all goes well you're going to see an output similar to this and then you'll find that there's a server running at localhost: 1234. So go ahead and visit that back in the browser. And there it is the react element with JSX is now appearing! Awesome! Parcel did its job of compiling the JSX react element code into a syntax that the browser can understand. All right let's investigate this by inspecting the console and then head to the source of section. Now this is what the server is giving the browser in order to load up the application these files and you'll find that the structure is definitely different from what we have in the project source code. There is an index which is the index.html. So that's exactly what we have coded. We havet his index.js which matches our index.js file but then we have this starter random looking number.js file. And it's a pretty huge one with so many different lines. But the good news is if you search for our with JSX line you're going to find that there's a line for react default createElement div null and then our text of React element with JSX. So indeed our code got transposed to use the react.createElement method. Nice, parcel definitely did its job for the code transformation. But let's dig into why this javascript file that got generated is so huge. What is all this extra code to answer this? Let's find out where this source is directory is actually coming from. Head back to the main project and you're going to find it there's two new directories within the overall folder. First there's a cache which is there to help parcel build the project faster. The second time around by caching certain things that didn't change from last time but then there's the dist directory. And if you open it up you're going to find that the contents exactly match what we had in the sources section. So this is what parcel is serving in order to load up the application to be browser and it does have that starter random looking number.js file. So if you look in here now exactly a lot more clear that this is a bunch of generated javascript code to answer the question of where all this extra code comes from. This goes back to the very purpose of a butler itself as I mentioned before the bundler is going to smush all of your javascript code into one giant file that the browser can use. This includes any imports that you make in your javascript. So if you import react into a file all that react library code is going to get bundled along within this giant file. Now this is necessary because the browser doesn't support the import export system. It doesn't recognize the import keyword so it needs to work with this giant bundled version and that's exactly why the index.html can refer to one JavaScript file and still run the entire project successfully. All right cool. You've accomplished a goal of running JSX in our project by using parcel bundler. We've also explored a little bit of the critical concept of transpiling and bundling. It's really such a foundational concept to understand for react. Web development is exactly why we moved on from create-react-app since create-react-app hides a lot of these details from you while you're learning as a react developer. You can't skip over bundling and transpiling forever if your goal is to have a complete understanding of how everything works with react web development. So to solidify this even more, Let's get some more practice and refactor our existing portfolio project to use parcel bundler. It's currently based on create-react-app. But the goal will be to strip it down and build it with parcel bundler just like this startup project.