DEV Community

Play Button Pause Button
JavaScript Joel
JavaScript Joel

Posted on


CUSTOM REACT STATIC SITE GENERATOR (Live Coding) [Part 2] | JavaScript | NodeJS | ReactJS

Watch as I live code a Custom Static Site Generator using ReactJS.

The audio after (52:10) went to sh*t. Sorry about that.

I have a basic HTML template, which I use as the foundation to create my React Application. From this template I create all the React Components I need to render the gallery. After the components have been created I use renderToStaticMarkup to render then to a file.

If you missed Part 1:

0:32 launch.json (for debugging)
0:53 package.json (babel / build scripts)
1:38 first build / console (hello world)
1:56 Hello React
4:35 index.html (the template)
12:30 config.yml (importing the data into the template)
29:10 first raw render of HTML
32:00 import images into gallery
45:30 gallery starting to look like a gallery
52:10 Audio goes to sh*t
52:28 Surprise Kitty!!!
59:10 Final render of Gallery (Ooof)
1:00:45 Deploy Live!
1:02:45 Epilogue

To follow along:

git checkout
cd mojo-gallery
git checkout youtube-video-part-2

More Minute JavaScript Videos:

Screenshot of YouTube Channel

Top comments (2)

maciejmyslinski profile image

dude, what makes you blink so frequently?! 😄 super distracting.
Anyway, keep up the good work ;)

joelnet profile image
JavaScript Joel

haha I will lose any staring contest!

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!