DEV Community

0 seconds of 1 hour, 4 minutes, 0Volume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
1:04:00
 
JavaScript Joel
JavaScript Joel

Posted on

5

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: https://www.youtube.com/watch?v=inAWGWfpkHs

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 https://github.com/joelnet/mojo-gallery.git
cd mojo-gallery
git checkout youtube-video-part-2

More Minute JavaScript Videos:

Screenshot of YouTube Channel

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (2)

Collapse
 
maciejmyslinski profile image
Maciej β€’

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

Collapse
 
joelnet profile image
JavaScript Joel β€’

haha I will lose any staring contest!

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay