This post was originally published on August 14, 2020 on my blog.

I love when this happens. I talk about it all the time in regard to the fact that learning something once usually isn't enough to really stick.

It might be that we don't have enough overall awareness of the subject matter at hand at that specific moment in time or we might not be as focused as we could be on another day.

Anyway, I always advocate not giving up on learning something - especially coding-related - when it doesn't stick after the first time (or first few times!).

For me, I think my brain finally wrapped itself around how Webpack, Babel, and the overall JavaScript ecosystem work together. I'll try to explain as best as I can so that it might hopefully help someone out in the same position:

1. We run a React app using Node (npm) - usually 'npm start' on the command line.

2. Once the app is started ('npm start'), Webpack is called to run and watches for any files that may have changed since the last time it was run.

3. If there are changed files, Webpack then sends these into Babel, which then turns the JSX (used in React) into JavaScript.

4. Webpack then sends that JavaScript to the browser via the development server (usually a local port, i.e. port 3000) and that's where we see the changes on the browser.

I'm fairly sure that's how it works, but I could definitely be off on a point, so if you're more experienced with React, Webpack, and Babel - feedback is certainly welcome!

P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen right over here >>

P.P.S. Have a coding project you want to work on in a supportive environment of other creative coding women?

Sign up for my email newsletter for more details! >> More info here