24
My Coding Bootcamp Odyssey - Week 8
Once again Northcoders gave us the vanilla and the icing on the cake, the rough and the smooth, the good and the bad (you decide which is which!)
We were shown the Document Object Model (DOM) - how your browser "sees" the HTML served up to it. We learnt how to manipulate it, listen for clicks and validate forms. All with "vanilla" JavaScript (AKA JavaScript - see it now needs to be distingushed from other things like "HTML-in-JS", anyway more of that later)
As a consequence of that I can now type
document.getElementById
and .addEventListener
with my eyes closed 🙄This was all leading up to a thing called - tada - React
A JavaScript library for building user interfaces
What is this strange beast? Turns out it is quite a cool thing that means I don't need to close my eyes anymore. It has its own version of the DOM, a "virtual" one that is really a lot faster than the boring old original one.
Also JavaScript XML (JSX) which allows you to combine JavaScript and HTML and avoid all that stuff that I could type with my eyes closed. It is HTML-in-JS. If that is a mind bender this is an example of JSX:
const element = <h1>Hello, world!</h1>;
What?! Yep that little beauty does away with all the
createElement
ing and appendChild
ing , this is a React element that does all that shizzle for you. 🤯 eh?Neat, huh?
Now as this is front end stuff we needed to start doing "designs" for a React website to build. This is where I confess I am very not confident as I consider myself very bad at "design" of any sort. So what I present here is in that context.
So after learning a bit about planning an app, React state, props and components (controlled and uncontrolled) I came up with my first React app and below is a little video of it in use.
Actually for all my flippancy I really enjoyed using React and can see the benefits for medium/large (and maybe some small) projects. Looking forward to learning more after a well deserved Christmas break.
Merry Christmas all X
My image gallery has the following features:
I used state, props and components to build the app virtually from scratch using create-react-app.
There are lots of enhancements I envisage including:
24