Learn by doing - basic React/JS

Little baby steps. I completed a quick 1.5 hour React course from freeCodeCamp.org – which I've been a huge fan of for years.

It took much longer than 1.5 hours because I didn't just want to passively watch the course, I typed everything out and followed along completely.

It's amazing how much more you learn when you hand-type the code while learning versus just watching/reading and copy-pasting. I learned so many little things:

An arrow function in modern JS can't point to a stanza encapsulated in curly-braces {}. It points to a stanza encapsulated in parenthesis (). I discovered this when my AI co-pilot generated erroneous code.
SCSS is different than CSS, and I'm still learning how. From what I can tell, it's just CSS with more features and capabilities. (S)CSS is dot-object oriented.
A <div> element will take the full width of a browser window and make any image contained within sized accordingly. In other words, all <div> and <img> dimensions should be clearly defined. This is probably true of any visual segment.
With the correct packages installed for the project (e.g., react-scripts), node start automatically reloads the navigator tab every time I change/add and save anything within the project. Up until this point, I've had some experience with things like Gatsby and also more unusual NodeJS applications (e.g., Hardhat for smart contract development). I haven't actually used it for web application development so I didn't notice that nice convenient feature.
Everything in React seems like it's functionally object-oriented. Like you load components - or objects - and each object is defined with an arrow function. Arrow functions are this weird - and annoying to me - syntactic sugar in modern JS of defining an object as a function. (I really don't like how JS is object oriented, yet also tries to be functional. In fact, there is quite a lot that I really don't like about JS.)
While I don't understand it or get the "whys" yet, when using the React framework, a JS arrow function can be used to create an object function that is simply a container for HTML.
For example:
```
const Sidebar = () => (
    <div>
    Hello world
    <br>
    <img src="logo.png" />
    </div>
)
```
Yes, CSS is super important for how the site functions. I definitely need to get used to site hierarchies to get what CSS where in the object tree is best to apply each style.
For modularity and presumably to make it so a team could maintain a large, complex site or application, everything is broken down into it's pieces. The elements of the site are strewn all over the place and across multiple documents. For example, even just a side navigation bar has its index.js and index.scss components, on top of all the assets like images or anything else that is needed from dependencies.
React's useEffect() function requires you return a function if you are returning anything. (I magiacally solved a bug that was in the short-course teacher had in their bug.)
There are all kinds of parts to the React framework. In addition, there are all kinds of ways to work with (S)CSS and HTML 5. After I get some experience under my belt for a good understanding of how these things work and where problems are, I think I'll lean heavily on AI and outsourced designers to produce the meat of my code or sites.

All of that may seem obvious to someone who has worked a lot with web development any time in the past 10 years. I've worked more on the back-end, on securing the web applications, monitoring/detecting and responding to threats, building and maintaining security systems for a variety of security operations, hunting threats, performing forensics, investigating incidents, and just a whole lot of general cybersecurity work.

I code somewhat regularly and have played with building dynamic sites (using mostly Django or Flask, though sometimes things like Ruby). I need Python and to a lesser extent PowerShell or Shell to help me automate my job. I have even coded in JavaScript (though not happily, because I feel like it sucks) as it is used in some security tools (e.g., ExtraHop custom detections) and common with smart contract development or hacking environments.

No, I don't have an "imposter syndrome" or feel like a doofus even though I'm learning things that may seem basic to many. No one can know it all. I think "full stack developers" are kind of a dime-a-dozen at this point. They wouldn't have my security background at all. So the fact that I'm rusty with web development and need to get back up to speed does not phase me.

The entire point of this journey is to rapidly add more skills and retool myself to grow even better and more capable of doing whatever I want with technology.

---

Finally: Course Rating

Do I recommend the course? Unfortunately I cannot say the course was particularly good in any way. While most freecodecamp courses are quality information and allow hands-on practice, this one seemed especially rushed and of lower quality.

I didn't like that the instructor would regularly and make changes to their code without specifically calling it out, or in any noticeable way. It was often tough to decipher what exactly was getting coded and why. I actually tool up to 5x longer to go through the course than the video length just because I had to go back through what was done, over and over.

The course probably would have taken me even longer if I didn't have my GPT copilot [free from Codeium].

Also, I have used NodeJS in the past, I've installed react packages, and I've even had some minor experiences using the NodeJS create-react-app package. I've coded with JS off-and-on since 1997. I understand CSS and HTML, even if I haven't used it much in the past decade and a half.

If I didn't have my deep experience and history with all the tools and technology required by this course, I would have been dead in the water. The course is not introductory or even beginner. The lack of explanations, missed changes to the code, and overall lower quality production makes the course difficult for even someone with deeper technical background.

I'd give the course a 3 out of 10 if I had to rate it on that scale.