Templates and state in JavaScript (Part 1: Dynamic content creation and templates)

An overview of techniques and tools intended for splitting the HTML, CSS and JavaScript of our project into reusable portions (templates).

00:00 Intro
00:50 HTML only | Tedious repetition
01:49 Vanilla JavaScript | Creating elements dynamically
03:39 HTML template tags | Improving readability
07:04 Template literals | HTML inside JavaScript strings
08:42 React | Passing props down the order
10:02 Introducing Webpack, Babel and Sass to compile .jsx and .scss files
11:41 Practical application of dynamic content creation
12:10 End of Part 1.

This video is directed towards 3 groups of people:
1) beginner web developers who may only know HTML and CSS - to show why JavaScript is useful;
2) people who already posess some JavaScript experience, but haven't utilized tools like React yet - to show that newer tools may enable you to do the same work faster and better, even if they require some effort in the beginning;
3) people that have been using React, Angular, Vue etc, but haven't delve into the history of front-end techniques and tools - to show that modern front-end frameworks and libraries are an incremental improvement over past solutions.