--- tags: Development,WordPress,Gutenberg,JavaScript,WebDevStudios,React --- # Gutenberg Traning @WebDevStudios In 2020 [@WebDevStudios](https://webdevstudios.com) set an engineering goal: > to be the best damn Gutenberg shop out there! ...and we are. I am a little late in this training and so, this document will be the final document I will hand over to our Directory of Engineering. ## Format Random jibberish and note-taking as I go. Yeah, sorry Greg. But I will be taking random notes here (mostly gibberish) as I go along. ## What I did first I built one of the three blocks: [this one](https://github.com/aubreypwd/aurelius). I already watched the videos/did the courses. But I didn't build anything. And I just wanted to level up quickly and hack my way through the first block of the three we were asked to do. **Things I learned:** - Not really hard to build a simple block - Got really lost because my block wasn't really designed to save anything, but figured it out - Probably could have done this better, so don't judge the final result, hopefully the next 2 are better ## Now what... Now I'm going to do the courses again but actually build the things in those courses as I go. I skipped re-watching Modern JavaScript by Tyler McGinnis and continued with _React Basics_ and so starts the random note-taking... ## [React Basics](https://platform.ui.dev/courses/react) Okay after this course, I will have to continue on to [React Hooks](https://platform.ui.dev/courses/react-hooks/). - React has been around since 2014!? - I don't think I did React Basics before, I thought I did &mdash; this is all new to me! - Webpack does `import` `export` which I didn't know, I thought maybe that was JS - The declatrive vs. imparitive bit was interesting - The Webpack part was _very_ imformative, and I think to understand it more I'm going to build my next block from the ground-up **Started in on the first project** https://github.com/aubreypwd/github-battle/ - Bunch of hello-world stuff (see tags on that repo). Left off at https://platform.ui.dev/courses/react/managing-state-class-components-react Decided to refresh myself by viewing https://platform.ui.dev/courses/advanced-javascript/javascript-inheritance-and-the-prototype-chain ### Classes - Created https://github.com/aubreypwd/javascript-inheritance-and-the-prototype-chain Okay so when I created that Repo what I set out to do was just create these same `Animal`, `Cat`, `Dog` classes, etc but I thought I could get away with just installing Babel and just let it compile my JS in `src/` to e.g. `lib/` like normal. But I wanted to be able to write my classes in their own files (like they are now). That didn't work.... but I persisted. What I ended up doing is re-doing from scratch (and memory) what I did on https://github.com/aubreypwd/github-battle/ 1. Setup babel 2. Config babel 3. Don't use `babel src -d lib` on `npm run build` and instead use Webpack to bundle 4. Setup Webpack 5. Re-work my classes to be modules 6. Run `webpack` on `npm run build` instead (and `webpack serve` on `npm run serve`) instead 7. Setup the `HtmlWebpackPlugin` so I can just have an `index.html` file I can load that just tells you to look at the console ...and it worked, and NOW I get what the difference between WebPack and Babel is: Babel is a thing that will turn ES6ish into ES5 if you do the normal `babel src -d lib` way. But it doesn't do `import` or `require` well (like, in the Browser), and is very Node-like. Webpack seems to fix that. It turns your stuff into something for the Web (bundles it specifically). And if you have Babel configured, it "magically" figures that out and also converts stuff along the way. While I had set out initially to write these classes (and I did) I also ended up having to do what I did in the React Basics again, from scratch and memory, and it helped me really understand the difference between: Babel, Webpack, and React... Great exercise! **So now I set off to write my `Animal`, `Cat`, and `Dog` classes.** ![](https://i.imgur.com/5elbCca.png) If you look at the state of the `1` tag on that repo, my code looks sound. I don't know why I got this error, but I was intrigued so I so I decided to investigate... Okay 🤦‍♂️ I just needed to watch the rest of the video, now I get what `super()` does and is implemented in tag `2`. ![](https://i.imgur.com/RycuidY.png) ![](https://i.imgur.com/7u23TIK.png) Tag `3` has my complete exploration of this class concept! Also watched https://platform.ui.dev/courses/advanced-javascript/javascript-private-and-public-class-fields So I was really interested in this `private` thing, and it's implemented in the repo in tag `4` (***so it turns out private `#vars` do work in Babel as of Wednesday, December 29, 2021***). So when I got back to looking at https://platform.ui.dev/courses/react/managing-state-class-components-react and the odd `.bind(this)` you have to do, I remember in https://platform.ui.dev/courses/advanced-javascript/javascript-private-and-public-class-fields there was a mention of a way to simplify this, so I tried it out in my https://github.com/aubreypwd/github-battle/ repo... So I was able to get around the whole `.bind(this)` thing with an arrow function as the video explains: ![](https://i.imgur.com/PoemlbR.gif) Checkout tag `javascript-private-and-public-class-fields` on https://github.com/aubreypwd/github-battle/ for how an arrow function can fix the whole `.bind( this )` debacle. **Back to https://platform.ui.dev/courses/react/managing-state-class-components-react** ![](https://i.imgur.com/jLEO9Dg.png) Now this isn't an issue :smile: ! *Note, the quizzes on these courses stink, I just skip 'em by answering wrong. They are boring...* ![](https://i.imgur.com/CGtwIak.png) The cool think was in the [video](https://platform.ui.dev/courses/react/project-navbar-state) I didn't have to do this, instead I did this: ![](https://i.imgur.com/llTdT9p.png) - `setState()` not only sets `state`, it also causes a re-render - See `project-navbar-state` tag Added a `function-components` tag for **github-battle** where I converted my `<Hello>` React component to a functional one. See tag `project-languages-nav@2m32s` So after doing the work to make my `<LanguagesNav />` functional component too, I didn't need to do this: ![](https://i.imgur.com/jxVWYXI.png) He didn't mention the arrow function in https://platform.ui.dev/courses/react/project-languages-nav Also I caught on to the pattern I've seen before where Components don't have to do props. e.g. in my example at tag `proptypes@destructure` or in [this commit](https://github.com/aubreypwd/github-battle/commit/f2e25875e32f52f0fa38453724d1590ad1d526af) which behaves differently than the video oddly but came up in https://platform.ui.dev/courses/react/proptypes - So `import PropTypes from "prop-types"` is how Component Props can be strictly adhered to propTypes, totally get it, beefed up my Components, see tag `proptypes`. Leftoff: https://platform.ui.dev/courses/react/the-react-component-lifecycle ---- ## [React Hooks](https://platform.ui.dev/courses/react-hooks/) ...coming soon!