title
React & Webpack 4 From Scratch - No CLI

description
In this video we will setup React WITHOUT the Create-React-App CLI. The CLI is fantastic but many people do not understand how it works behind the scenes. In this video we will setup React from scratch with Webpack 4 and Babel. Sponsor: Coding Dojo http://www.codingdojo.com/l/yt/tr Code For This Project: https://github.com/bradtraversy/react_webpack_starter 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia The Developer Hangout: Public Discord Server https://discord.gg/developers

detail
{'title': 'React & Webpack 4 From Scratch - No CLI', 'heatmap': [{'end': 211.925, 'start': 192.813, 'weight': 0.703}, {'end': 268.997, 'start': 249.846, 'weight': 0.727}, {'end': 360.098, 'start': 340.091, 'weight': 0.743}, {'end': 759.057, 'start': 742.145, 'weight': 0.725}, {'end': 866.278, 'start': 830.988, 'weight': 0.804}, {'end': 894.85, 'start': 874.073, 'weight': 0.725}, {'end': 1001.106, 'start': 909.346, 'weight': 1}, {'end': 1088.611, 'start': 1068.738, 'weight': 0.765}, {'end': 1179.414, 'start': 1144.193, 'weight': 0.764}, {'end': 1263.67, 'start': 1214.935, 'weight': 0.767}], 'summary': "Codingdojo's success in transforming beginners into developers within 14 weeks, with over 90% graduates securing jobs within 3 months, often with salaries exceeding $70k/year, react app created from scratch using webpack 4, setting up react and webpack dependencies, using html webpack plugin for automatic index html file creation, fixing rendering issue in react, and building app with npm run build.", 'chapters': [{'end': 116.934, 'segs': [{'end': 33.097, 'src': 'embed', 'start': 7.267, 'weight': 0, 'content': [{'end': 11.952, 'text': 'CodingDojo is a programming school that turns beginners into developers in only 14 weeks.', 'start': 7.267, 'duration': 4.685}, {'end': 18.239, 'text': 'Over 90% of their grads land jobs within 3 months of graduating, often making over $70k per year.', 'start': 12.372, 'duration': 5.867}, {'end': 22.263, 'text': 'To learn more, visit CodingDojo.com or click the link in the description below.', 'start': 18.559, 'duration': 3.704}, {'end': 24.365, 'text': "hey, what's going on, guys?", 'start': 23.464, 'duration': 0.901}, {'end': 33.097, 'text': "so a lot of you know that i've been working with the react framework lately and i'm almost done with a full stack application for my mern course,", 'start': 24.365, 'duration': 8.732}], 'summary': 'Codingdojo turns beginners into developers in 14 weeks, with over 90% landing jobs, often making over $70k/year.', 'duration': 25.83, 'max_score': 7.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u47267.jpg'}, {'end': 116.934, 'src': 'embed', 'start': 91.992, 'weight': 3, 'content': [{'end': 98.837, 'text': "but in my opinion is it's created a lot of things that i don't know why and how they work.", 'start': 91.992, 'duration': 6.845}, {'end': 102.58, 'text': 'i tried googling it found some articles on medium.', 'start': 98.837, 'duration': 3.743}, {'end': 107.365, 'text': "some are very useful, but i'm still having problems creating the app All right.", 'start': 102.58, 'duration': 4.785}, {'end': 115.733, 'text': "So I always like to answer my patrons and fulfill their requests if, if they're doable, and it's something that's, you know,", 'start': 107.445, 'duration': 8.288}, {'end': 116.934, 'text': 'not going to take me forever.', 'start': 115.733, 'duration': 1.201}], 'summary': "Struggling to create an app despite useful articles; aims to fulfill patrons' requests.", 'duration': 24.942, 'max_score': 91.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u491992.jpg'}], 'start': 7.267, 'title': "Codingdojo's impact", 'summary': "Showcases codingdojo's success in transforming beginners into developers within 14 weeks, with over 90% of graduates securing jobs within 3 months, often with salaries exceeding $70k per year, alongside details about an upcoming in-depth full stack application and a task to create a react app without using create react app.", 'chapters': [{'end': 116.934, 'start': 7.267, 'title': 'Codingdojo: transforming beginners into developers', 'summary': "Highlights codingdojo as a programming school that turns beginners into developers in 14 weeks, with over 90% of their grads landing jobs within 3 months, often making over $70k per year, and the speaker's upcoming in-depth full stack application with jwt authentication and a request to create a react app without using create react app.", 'duration': 109.667, 'highlights': ['CodingDojo turns beginners into developers in 14 weeks. CodingDojo is a programming school that transforms beginners into developers in only 14 weeks.', 'Over 90% of CodingDojo grads land jobs within 3 months of graduating, often making over $70k per year. Over 90% of CodingDojo graduates secure jobs within 3 months of graduating, with many earning over $70k annually.', 'The speaker is working on a full stack application for the MERN course, including MongoDB, Express, React, and Node.js, with JWT authentication. The speaker is developing a full stack application for the MERN course, comprising MongoDB, Express, React, and Node.js, with JWT authentication.', 'The speaker received a request to create a react app without using create react app. The speaker received a request to create a react app without using create react app, as the patron has concerns about its functionality and desires a video tutorial on this topic.']}], 'duration': 109.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u47267.jpg', 'highlights': ['CodingDojo turns beginners into developers in 14 weeks.', 'Over 90% of CodingDojo grads land jobs within 3 months, often making over $70k per year.', 'The speaker is working on a full stack application for the MERN course, including MongoDB, Express, React, and Node.js, with JWT authentication.', 'The speaker received a request to create a react app without using create react app.']}, {'end': 254.233, 'segs': [{'end': 142.708, 'src': 'embed', 'start': 117.594, 'weight': 1, 'content': [{'end': 122.979, 'text': "So in this video, what we're going to do is create a react application from scratch.", 'start': 117.594, 'duration': 5.385}, {'end': 126.382, 'text': "We're going to be using Webpack four, which is the latest version.", 'start': 123.019, 'duration': 3.363}, {'end': 129.884, 'text': "There's some changes with the config file and so on.", 'start': 127.222, 'duration': 2.662}, {'end': 131.285, 'text': "So we're going to do that.", 'start': 130.425, 'duration': 0.86}, {'end': 135.446, 'text': "We're going to create a script to run a dev server using Webpack dev server.", 'start': 131.305, 'duration': 4.141}, {'end': 137.187, 'text': "It'll have hot reload.", 'start': 135.806, 'duration': 1.381}, {'end': 142.708, 'text': "We'll also create a build script so that we can quickly build out our application for deployment.", 'start': 138.167, 'duration': 4.541}], 'summary': 'Creating a react app with webpack 4, including dev server and hot reload, and a build script for deployment.', 'duration': 25.114, 'max_score': 117.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4117594.jpg'}, {'end': 218.988, 'src': 'heatmap', 'start': 179.225, 'weight': 0, 'content': [{'end': 181.926, 'text': "And we're going to need to install quite a few things.", 'start': 179.225, 'duration': 2.701}, {'end': 184.748, 'text': "And we're going to go over everything that we need to install.", 'start': 181.986, 'duration': 2.762}, {'end': 189.751, 'text': 'But first thing we want to do is run npm init and create a package.json file.', 'start': 184.788, 'duration': 4.963}, {'end': 192.793, 'text': "Alright, so we'll just go through this description.", 'start': 190.351, 'duration': 2.442}, {'end': 202.339, 'text': "I'm just going to say boilerplate for React apps and just enter through the rest of this.", 'start': 192.813, 'duration': 9.526}, {'end': 203.339, 'text': "I'll put my name.", 'start': 202.559, 'duration': 0.78}, {'end': 204.66, 'text': 'You can put yours if you want.', 'start': 203.379, 'duration': 1.281}, {'end': 206.381, 'text': 'This is completely open source.', 'start': 204.68, 'duration': 1.701}, {'end': 211.925, 'text': "We'll give it an MIT license and that will create our package.json file.", 'start': 206.501, 'duration': 5.424}, {'end': 218.988, 'text': 'Alright, so what do we want to install next? Now, React actually has two parts.', 'start': 212.805, 'duration': 6.183}], 'summary': 'The transcript discusses setting up a react app and creating a package.json file by running npm init.', 'duration': 39.763, 'max_score': 179.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4179225.jpg'}], 'start': 117.594, 'title': 'Creating react app with webpack 4', 'summary': 'Covers creating a react application from scratch using webpack 4, including setting up a dev server with hot reload and a build script for quick deployment, and installing react and react-dom for web app development.', 'chapters': [{'end': 254.233, 'start': 117.594, 'title': 'Creating react app with webpack 4', 'summary': 'Covers creating a react application from scratch using webpack 4, including setting up a dev server with hot reload and a build script for quick deployment, and installing react and react-dom for web app development.', 'duration': 136.639, 'highlights': ['Creating a React application from scratch using Webpack 4 The chapter focuses on creating a React application from scratch using the latest version of Webpack, which includes changes in the configuration file.', 'Setting up a dev server with hot reload and a build script for quick deployment The tutorial covers creating a script to run a dev server using Webpack dev server with hot reload, as well as a build script for quickly deploying the application.', 'Installing React and React-DOM for web app development The chapter explains the need to install both React and React-DOM for web app development, clarifying their respective roles and the necessity of installing both for a web app.']}], 'duration': 136.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4117594.jpg', 'highlights': ['Creating a React application from scratch using Webpack 4 The chapter focuses on creating a React application from scratch using the latest version of Webpack, which includes changes in the configuration file.', 'Setting up a dev server with hot reload and a build script for quick deployment The tutorial covers creating a script to run a dev server using Webpack dev server with hot reload, as well as a build script for quickly deploying the application.', 'Installing React and React-DOM for web app development The chapter explains the need to install both React and React-DOM for web app development, clarifying their respective roles and the necessity of installing both for a web app.']}, {'end': 733.637, 'segs': [{'end': 302.712, 'src': 'embed', 'start': 277.821, 'weight': 4, 'content': [{'end': 290.464, 'text': 'now, the reason we need webpack is because all of our react code, our components, everything has to be compiled and bundled into one javascript file,', 'start': 277.821, 'duration': 12.643}, {'end': 292.065, 'text': "and that's where webpack comes in.", 'start': 290.464, 'duration': 1.601}, {'end': 293.366, 'text': "that's what webpack does.", 'start': 292.065, 'duration': 1.301}, {'end': 298.389, 'text': "it bundles your assets together and it doesn't even it doesn't have anything to do with react.", 'start': 293.366, 'duration': 5.023}, {'end': 302.712, 'text': 'you can use it with react or without.', 'start': 298.389, 'duration': 4.323}], 'summary': 'Webpack bundles all react code into one javascript file for easy use, regardless of react presence.', 'duration': 24.891, 'max_score': 277.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4277821.jpg'}, {'end': 370.541, 'src': 'heatmap', 'start': 340.091, 'weight': 0.743, 'content': [{'end': 341.833, 'text': "Alright, so let's install those things.", 'start': 340.091, 'duration': 1.742}, {'end': 353.115, 'text': 'All right, so now that those are installed, the last, I guess, bundle of things that we need to install have to do with Babel.', 'start': 345.933, 'duration': 7.182}, {'end': 360.098, 'text': 'So Babel we need because React uses ES6 classes, imports, stuff like that.', 'start': 353.776, 'duration': 6.322}, {'end': 366.68, 'text': 'So we need to transpile that code down to browser-friendly code, depending on which browser is being used.', 'start': 360.478, 'duration': 6.202}, {'end': 370.541, 'text': 'So we need Babel along with two plugins or presets.', 'start': 367.16, 'duration': 3.381}], 'summary': 'Installing babel for transpiling react code to browser-friendly es5 code.', 'duration': 30.45, 'max_score': 340.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4340091.jpg'}, {'end': 497.646, 'src': 'embed', 'start': 468.921, 'weight': 3, 'content': [{'end': 477.507, 'text': 'And obviously, if you clone this from the Git repository, all you have to do is run npm install and all this stuff will get set up for you.', 'start': 468.921, 'duration': 8.586}, {'end': 478.679, 'text': 'All right.', 'start': 478.379, 'duration': 0.3}, {'end': 483.681, 'text': 'So now we have everything we need installed to set up a react application.', 'start': 478.799, 'duration': 4.882}, {'end': 488.003, 'text': "So let's go ahead and let's see.", 'start': 484.461, 'duration': 3.542}, {'end': 493.385, 'text': "Should we add our scripts now? Let's set up our Webpack config first.", 'start': 488.023, 'duration': 5.362}, {'end': 497.646, 'text': 'So whenever you use Webpack, you need to have a config file.', 'start': 493.525, 'duration': 4.121}], 'summary': 'Clone git repo, run npm install, set up react app with webpack config.', 'duration': 28.725, 'max_score': 468.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4468921.jpg'}, {'end': 559.571, 'src': 'embed', 'start': 525.637, 'weight': 5, 'content': [{'end': 530.341, 'text': 'And then we also want to bring in that plugin that we installed that HTML web pack plugin.', 'start': 525.637, 'duration': 4.704}, {'end': 545.379, 'text': "So I'm going to say HTML web pack plugin, set that to require html-webpack-plugin.", 'start': 530.561, 'duration': 14.818}, {'end': 548.521, 'text': 'All right, those are the only two things we need to bring in.', 'start': 546.079, 'duration': 2.442}, {'end': 550.703, 'text': 'Then we want to export.', 'start': 548.922, 'duration': 1.781}, {'end': 552.925, 'text': 'So we want to say module.export.', 'start': 550.823, 'duration': 2.102}, {'end': 555.787, 'text': "So we're using the common JS syntax.", 'start': 552.985, 'duration': 2.802}, {'end': 559.571, 'text': 'And we want to specify an entry file.', 'start': 556.748, 'duration': 2.823}], 'summary': 'Configuring html webpack plugin and specifying an entry file using common js syntax.', 'duration': 33.934, 'max_score': 525.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4525637.jpg'}, {'end': 708.732, 'src': 'embed', 'start': 620.666, 'weight': 0, 'content': [{'end': 623.948, 'text': 'like that, all right.', 'start': 620.666, 'duration': 3.282}, {'end': 625.409, 'text': "so what's again?", 'start': 623.948, 'duration': 1.461}, {'end': 629.252, 'text': "what's happening is our entry file, the index.js,", 'start': 625.409, 'duration': 3.843}, {'end': 641.16, 'text': "is going to be compiled and this can include imported components and basically our entire react structure will go in here and then it'll get compiled into a file in this dist folder.", 'start': 629.252, 'duration': 11.908}, {'end': 643.362, 'text': 'now we have to specify that file name.', 'start': 641.16, 'duration': 2.202}, {'end': 652.387, 'text': "so we're going to say file name and we're going to call this index underscore bundle dot js.", 'start': 643.362, 'duration': 9.025}, {'end': 656.63, 'text': 'oops, bundle dot js, and you can call this anything you want.', 'start': 652.387, 'duration': 4.243}, {'end': 659.912, 'text': "really. so that's it for this part.", 'start': 656.63, 'duration': 3.282}, {'end': 673.801, 'text': "now we're going to put a comma under the output and then here is where we want to specify our loader and it's going to go inside of a module object and then in here we want a rules object.", 'start': 659.912, 'duration': 13.889}, {'end': 678.137, 'text': "I'm sorry, rules is actually an array.", 'start': 676.191, 'duration': 1.946}, {'end': 680.585, 'text': 'But in this array, we want to put an object.', 'start': 678.458, 'duration': 2.127}, {'end': 685.364, 'text': "Okay, and we're going to say test, and then this takes a regular expression.", 'start': 681.263, 'duration': 4.101}, {'end': 694.307, 'text': 'Basically, we want to look for anything that is .js, and then a money sign.', 'start': 685.444, 'duration': 8.863}, {'end': 705.991, 'text': "So basically, it'll look at .js files and .jsx files, and that's the stuff that we basically want Babel to compile.", 'start': 694.847, 'duration': 11.144}, {'end': 708.732, 'text': 'So we want to exclude.', 'start': 706.851, 'duration': 1.881}], 'summary': 'Configuring webpack to compile index.js into index_bundle.js and specifying loader rules for babel', 'duration': 88.066, 'max_score': 620.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4620666.jpg'}], 'start': 258.752, 'title': 'Setting up react and webpack dependencies', 'summary': 'Discusses setting up react and webpack dependencies, emphasizing the need for webpack to compile and bundle all react code and assets into a single javascript file for production. it also covers the installation of webpack dev server, webpack-cli, babel along with its plugins and presets, and setting up the webpack config file to compile react code into a bundled javascript file in the dist folder.', 'chapters': [{'end': 302.712, 'start': 258.752, 'title': 'Setting up react and webpack dependencies', 'summary': 'Discusses the process of setting up react and webpack dependencies, emphasizing the need for webpack to compile and bundle all react code and assets into a single javascript file for production.', 'duration': 43.96, 'highlights': ['Webpack bundles all react code and assets into one javascript file for production, emphasizing the importance of webpack in the process.', 'React and react on are the only dependencies needed for production, highlighting the minimal dependencies required for production.', 'Dev dependencies are being installed for the project, indicating the distinction between production and development dependencies.']}, {'end': 733.637, 'start': 302.712, 'title': 'Setting up react application with webpack and babel', 'summary': 'Covers the installation of webpack dev server, webpack-cli, babel along with its plugins and presets, and setting up the webpack config file to compile react code into a bundled javascript file in the dist folder.', 'duration': 430.925, 'highlights': ['Installation of webpack dev server and webpack-cli The chapter starts with the installation of webpack dev server, which includes live reload, and webpack-cli for running webpack commands.', 'Installation of Babel and its plugins and presets The chapter emphasizes the need for Babel to transpile ES6 code used in React, along with the installation of plugins like Babel Preset React and babel preset env, which compiles ES6 and later versions based on the browser being used.', 'Setting up Webpack config file The chapter explains the process of setting up the Webpack config file to specify the entry file, output path, and the use of Babel loader to compile .js and .jsx files while excluding the node_modules folder.']}], 'duration': 474.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4258752.jpg', 'highlights': ['Webpack bundles all react code and assets into one javascript file for production, emphasizing the importance of webpack in the process.', 'React and react on are the only dependencies needed for production, highlighting the minimal dependencies required for production.', 'Dev dependencies are being installed for the project, indicating the distinction between production and development dependencies.', 'Installation of webpack dev server and webpack-cli The chapter starts with the installation of webpack dev server, which includes live reload, and webpack-cli for running webpack commands.', 'Installation of Babel and its plugins and presets The chapter emphasizes the need for Babel to transpile ES6 code used in React, along with the installation of plugins like Babel Preset React and babel preset env, which compiles ES6 and later versions based on the browser being used.', 'Setting up Webpack config file The chapter explains the process of setting up the Webpack config file to specify the entry file, output path, and the use of Babel loader to compile .js and .jsx files while excluding the node_modules folder.']}, {'end': 1226.097, 'segs': [{'end': 768.227, 'src': 'heatmap', 'start': 742.145, 'weight': 0.725, 'content': [{'end': 747.069, 'text': 'But basically, it creates our index HTML file for us.', 'start': 742.145, 'duration': 4.924}, {'end': 753.115, 'text': 'In fact, let me bring that up here just so you guys know what this is.', 'start': 747.19, 'duration': 5.925}, {'end': 754.797, 'text': "Let's see webpack.", 'start': 753.135, 'duration': 1.662}, {'end': 759.057, 'text': 'plug in spell plug in wrong.', 'start': 756.414, 'duration': 2.643}, {'end': 759.658, 'text': "That's fine.", 'start': 759.097, 'duration': 0.561}, {'end': 764.463, 'text': "Now, it's this isn't necessarily just for react.", 'start': 760.679, 'duration': 3.784}, {'end': 768.227, 'text': "If we go down here, let's see what it actually is.", 'start': 765.464, 'duration': 2.763}], 'summary': 'Webpack plugin generates index html file, versatile for different frameworks.', 'duration': 26.082, 'max_score': 742.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4742145.jpg'}, {'end': 866.278, 'src': 'heatmap', 'start': 830.988, 'weight': 0.804, 'content': [{'end': 832.229, 'text': "Okay, so let's do that.", 'start': 830.988, 'duration': 1.241}, {'end': 838.374, 'text': "I'm going to create my template inside the source, of course, so index.html.", 'start': 832.669, 'duration': 5.705}, {'end': 843.018, 'text': 'Any files that you are going to edit for your React application are going to be in here.', 'start': 838.434, 'duration': 4.584}, {'end': 845.98, 'text': "And then all I'm going to do is put in a boilerplate.", 'start': 843.738, 'duration': 2.242}, {'end': 847.522, 'text': 'We can put in a title here.', 'start': 846.08, 'duration': 1.442}, {'end': 848.923, 'text': "We'll just say my..", 'start': 847.562, 'duration': 1.361}, {'end': 855.325, 'text': 'react app and then the way that react works is react.', 'start': 849.958, 'duration': 5.367}, {'end': 859.99, 'text': 'dom will look for a specific element to insert all your react stuff.', 'start': 855.325, 'duration': 4.665}, {'end': 866.278, 'text': "so we're just going to have an id, a div with the id of app, and that's where it's going to be inserted.", 'start': 859.99, 'duration': 6.288}], 'summary': "Creating a react template with index.html and specifying a div with id 'app' for insertion.", 'duration': 35.29, 'max_score': 830.988, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4830988.jpg'}, {'end': 908.945, 'src': 'heatmap', 'start': 874.073, 'weight': 0.725, 'content': [{'end': 877.236, 'text': 'The HTML plugin, the Webpack plugin, will do that for us.', 'start': 874.073, 'duration': 3.163}, {'end': 879.117, 'text': 'So this is all we need here, literally.', 'start': 877.296, 'duration': 1.821}, {'end': 880.218, 'text': "So we'll save this.", 'start': 879.237, 'duration': 0.981}, {'end': 883.401, 'text': "And then we'll go back to our Webpack config.", 'start': 881.199, 'duration': 2.202}, {'end': 885.222, 'text': "And we'll go down.", 'start': 884.161, 'duration': 1.061}, {'end': 887.284, 'text': "Let's see.", 'start': 885.242, 'duration': 2.042}, {'end': 894.85, 'text': 'We want to go under this and then just specify plugins, which is an array.', 'start': 887.324, 'duration': 7.526}, {'end': 899.93, 'text': "And we're going to say new HTML Webpack plugin.", 'start': 895.791, 'duration': 4.139}, {'end': 908.945, 'text': "OK, and we could just do this and it'll create just an HTML file from scratch, but we want to use our template.", 'start': 902.239, 'duration': 6.706}], 'summary': 'Using html webpack plugin to generate an html file from a template', 'duration': 34.872, 'max_score': 874.073, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4874073.jpg'}, {'end': 1020.709, 'src': 'heatmap', 'start': 909.346, 'weight': 1, 'content': [{'end': 925.041, 'text': "So we're going to specify in here an object of options and we just want one value of template and we're going to specify that we want that to be in our source folder and index dot HTML just like that.", 'start': 909.346, 'duration': 15.695}, {'end': 927.463, 'text': "So it'll look at that file as our template.", 'start': 925.141, 'duration': 2.322}, {'end': 929.402, 'text': "Okay, and that's it.", 'start': 928.462, 'duration': 0.94}, {'end': 931.423, 'text': "That's all we need for our configuration.", 'start': 929.503, 'duration': 1.92}, {'end': 933.244, 'text': 'So we can now save this file.', 'start': 931.484, 'duration': 1.76}, {'end': 938.367, 'text': 'And then one other thing I forgot to do in order to use the presets.', 'start': 935.085, 'duration': 3.282}, {'end': 945.871, 'text': 'Okay, remember we installed the ENV preset to compile ES6 and so on and the React preset.', 'start': 938.387, 'duration': 7.484}, {'end': 952.594, 'text': 'We need to create a file in the root, not in the source, but in the root called .babelrc.', 'start': 946.311, 'duration': 6.283}, {'end': 955.996, 'text': 'Okay, and all this is is going to be an object.', 'start': 953.575, 'duration': 2.421}, {'end': 968.149, 'text': 'where we specify presets, okay, JSON object, and we specify presets, which is going to be an array of the presets we want to use, which is ENV.', 'start': 957.523, 'duration': 10.626}, {'end': 974.292, 'text': "We don't need Babel dash ENV or anything like that, just ENV and react.", 'start': 969.25, 'duration': 5.042}, {'end': 979.635, 'text': "Oops Okay, and it'll know to use those presets.", 'start': 974.513, 'duration': 5.122}, {'end': 980.656, 'text': "So let's save that.", 'start': 979.695, 'duration': 0.961}, {'end': 982.497, 'text': "And that's all we have to do to that file.", 'start': 980.736, 'duration': 1.761}, {'end': 985.849, 'text': "Okay, so we're just about there.", 'start': 984.306, 'duration': 1.543}, {'end': 988.252, 'text': "Now let's just add a little bit of React code.", 'start': 985.869, 'duration': 2.383}, {'end': 1001.106, 'text': "So, in the index.js, what we're going to do is import react from okay, and we're using import now, because, remember, we're using babel,", 'start': 988.833, 'duration': 12.273}, {'end': 1005.011, 'text': "which compiles es6, and that's what this is.", 'start': 1001.106, 'duration': 3.905}, {'end': 1008.195, 'text': 'this is es6 modules syntax.', 'start': 1005.011, 'duration': 3.184}, {'end': 1009.396, 'text': 'so we can use this now.', 'start': 1008.195, 'duration': 1.201}, {'end': 1012.72, 'text': "so we're going to say import react from react.", 'start': 1009.396, 'duration': 3.324}, {'end': 1019.569, 'text': "let's also do import react Dom from react dash Dom.", 'start': 1012.72, 'duration': 6.849}, {'end': 1020.709, 'text': 'All right.', 'start': 1019.589, 'duration': 1.12}], 'summary': 'Configuring babel presets and importing react and reactdom in index.js.', 'duration': 63.186, 'max_score': 909.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4909346.jpg'}, {'end': 1088.611, 'src': 'heatmap', 'start': 1046.976, 'weight': 3, 'content': [{'end': 1054.922, 'text': "It's going to take in what we want to render as the main app component, which, of course, is the app component we're bringing in,", 'start': 1046.976, 'duration': 7.946}, {'end': 1061.467, 'text': 'and then a placeholder or wherever we want it to output, which is going to be that app div.', 'start': 1054.922, 'duration': 6.545}, {'end': 1064.429, 'text': "So we're going to say document.getElementById.", 'start': 1061.527, 'duration': 2.902}, {'end': 1068.718, 'text': 'and we want the ID of app.', 'start': 1066.016, 'duration': 2.702}, {'end': 1072.341, 'text': "Because if we look at our index.html, that's where we want it to output.", 'start': 1068.738, 'duration': 3.603}, {'end': 1076.504, 'text': "So let's see, we'll go back to index.js and save that.", 'start': 1073.301, 'duration': 3.203}, {'end': 1079.906, 'text': 'And now we just need to create our components folder.', 'start': 1077.304, 'duration': 2.602}, {'end': 1088.611, 'text': 'And we need to create our main app.js file.', 'start': 1083.71, 'duration': 4.901}], 'summary': 'Rendering the main app component to the app div using document.getelementbyid.', 'duration': 25.365, 'max_score': 1046.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u41046976.jpg'}, {'end': 1179.414, 'src': 'heatmap', 'start': 1103.733, 'weight': 4, 'content': [{'end': 1111.755, 'text': "So we're going to say import React and component from React.", 'start': 1103.733, 'duration': 8.022}, {'end': 1117.017, 'text': 'like to put spaces here.', 'start': 1115.515, 'duration': 1.502}, {'end': 1121.863, 'text': "All right, and then we'll create our class app.", 'start': 1117.037, 'duration': 4.826}, {'end': 1126.448, 'text': 'And that has to extends component.', 'start': 1122.684, 'duration': 3.764}, {'end': 1128.891, 'text': "And we'll just put in a render.", 'start': 1127.59, 'duration': 1.301}, {'end': 1131.575, 'text': 'Okay, this is just regular React stuff.', 'start': 1128.911, 'duration': 2.664}, {'end': 1143.432, 'text': "And we'll render a div And we'll just say, we'll put an H1 in here and we'll say my React app.", 'start': 1132.336, 'duration': 11.096}, {'end': 1145.755, 'text': 'And then we just need to export it.', 'start': 1144.193, 'duration': 1.562}, {'end': 1150.924, 'text': 'So export default app.', 'start': 1146.537, 'duration': 4.387}, {'end': 1153.382, 'text': "And that's it.", 'start': 1152.862, 'duration': 0.52}, {'end': 1156.484, 'text': 'All right, so our structure is done.', 'start': 1153.402, 'duration': 3.082}, {'end': 1159.706, 'text': 'Now we just need to add the two scripts to the package.json.', 'start': 1156.544, 'duration': 3.162}, {'end': 1162.067, 'text': 'One is to run the webpack dev server.', 'start': 1159.886, 'duration': 2.181}, {'end': 1165.369, 'text': 'One is to actually build it out into the dist folder.', 'start': 1162.568, 'duration': 2.801}, {'end': 1168.251, 'text': 'So under scripts, we can get rid of test.', 'start': 1165.869, 'duration': 2.382}, {'end': 1169.972, 'text': "Let's replace it with start.", 'start': 1168.551, 'duration': 1.421}, {'end': 1172.912, 'text': 'So this will be to run the dev server.', 'start': 1171.212, 'duration': 1.7}, {'end': 1179.414, 'text': "And it's going to be webpack-dev-server.", 'start': 1173.673, 'duration': 5.741}], 'summary': "Creating a react app with a class component, rendering an h1 with 'my react app', and adding scripts to package.json for webpack dev server and building to dist folder.", 'duration': 42.022, 'max_score': 1103.733, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u41103733.jpg'}, {'end': 1210.355, 'src': 'embed', 'start': 1180.514, 'weight': 0, 'content': [{'end': 1183.675, 'text': "And we're going to say we want the mode to be development.", 'start': 1180.514, 'duration': 3.161}, {'end': 1191.316, 'text': 'And we want to do dash dash open so that it opens automatically when we run the command.', 'start': 1186.215, 'duration': 5.101}, {'end': 1195.977, 'text': 'And we also want hot reloading so when we save something, it auto-reloads.', 'start': 1191.676, 'duration': 4.301}, {'end': 1199.827, 'text': "So that's our server, and then we want to be able to build.", 'start': 1196.724, 'duration': 3.103}, {'end': 1201.868, 'text': "So we'll have a command called build.", 'start': 1200.227, 'duration': 1.641}, {'end': 1210.355, 'text': "And then here, we're just going to use the Webpack CLI actually allows us to run Webpack.", 'start': 1202.489, 'duration': 7.866}], 'summary': 'Setting up a development mode with automatic opening and hot reloading, along with a build command using webpack cli.', 'duration': 29.841, 'max_score': 1180.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u41180514.jpg'}], 'start': 734.378, 'title': 'Webpack and react setup', 'summary': 'Discusses using html webpack plugin for automatic index html file creation and simplification of html file creation, with the goal of dist folder creation upon build command. it also provides a detailed guide on setting up a react application with webpack, including configuration, component creation, and package.json script addition.', 'chapters': [{'end': 838.374, 'start': 734.378, 'title': 'Using html webpack plugin', 'summary': 'Discusses the use of html webpack plugin to automatically create the index html file, simplifying the creation of html files and serving bundles, with the goal of having the dist folder be created with the index html file upon running the build command.', 'duration': 103.996, 'highlights': ['HTML Webpack plugin creates index HTML file The plugin simplifies the creation of HTML files to serve bundles, eliminating the need to manually create the HTML file in the dist folder.', 'Goal of having dist folder created with index HTML file upon build command The aim is to run the build command and have the dist folder be created with the index HTML file without manual intervention.', 'Specifying a template for the HTML file The chapter discusses the importance of specifying a template for the HTML file to allow for customization, such as bringing in a script, and how it can be achieved within the options.']}, {'end': 1226.097, 'start': 838.434, 'title': 'Setting up react app with webpack', 'summary': 'Provides a detailed guide on setting up a react application with webpack, including configuring webpack, creating components, and adding scripts to the package.json file.', 'duration': 387.663, 'highlights': ['Configuring Webpack and HTML Webpack Plugin The chapter explains how to configure Webpack and use the HTML Webpack plugin to create an HTML file for the React application.', 'Setting up Babel for ES6 and React presets The speaker demonstrates setting up Babel with presets for ES6 and React by creating a .babelrc file and specifying the required presets.', 'Creating React components and rendering with React Dom The process of creating React components, importing them, and rendering them using React Dom is explained in detail, along with the use of the ReactDOM.render method.', 'Adding scripts to package.json for webpack dev server and build The final step includes adding scripts to the package.json file for running the webpack dev server and building the React application, specifying the development mode and enabling hot reloading.']}], 'duration': 491.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u4734378.jpg', 'highlights': ['HTML Webpack plugin creates index HTML file The plugin simplifies the creation of HTML files to serve bundles, eliminating the need to manually create the HTML file in the dist folder.', 'Goal of having dist folder created with index HTML file upon build command The aim is to run the build command and have the dist folder be created with the index HTML file without manual intervention.', 'Configuring Webpack and HTML Webpack Plugin The chapter explains how to configure Webpack and use the HTML Webpack plugin to create an HTML file for the React application.', 'Setting up Babel for ES6 and React presets The speaker demonstrates setting up Babel with presets for ES6 and React by creating a .babelrc file and specifying the required presets.', 'Creating React components and rendering with React Dom The process of creating React components, importing them, and rendering them using React Dom is explained in detail, along with the use of the ReactDOM.render method.', 'Adding scripts to package.json for webpack dev server and build The final step includes adding scripts to the package.json file for running the webpack dev server and building the React application, specifying the development mode and enabling hot reloading.', 'Specifying a template for the HTML file The chapter discusses the importance of specifying a template for the HTML file to allow for customization, such as bringing in a script, and how it can be achieved within the options.']}, {'end': 1483.014, 'segs': [{'end': 1351.879, 'src': 'embed', 'start': 1326.803, 'weight': 0, 'content': [{'end': 1331.886, 'text': 'Last thing I want to show you is to how we can actually build out and compile the application.', 'start': 1326.803, 'duration': 5.083}, {'end': 1339.307, 'text': "So I'm going to stop the dev server with Control-C, and we're going to run npm run build.", 'start': 1333.121, 'duration': 6.186}, {'end': 1344.272, 'text': "And what that does is it's going to create a dist folder.", 'start': 1341.549, 'duration': 2.723}, {'end': 1345.593, 'text': 'It should pop up over here.', 'start': 1344.312, 'duration': 1.281}, {'end': 1347.615, 'text': 'So here it is.', 'start': 1346.854, 'duration': 0.761}, {'end': 1351.879, 'text': 'And it created our index bundle js, which is everything.', 'start': 1348.276, 'duration': 3.603}], 'summary': 'Demonstrated building and compiling app, creating dist folder and index bundle js.', 'duration': 25.076, 'max_score': 1326.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u41326803.jpg'}, {'end': 1453.088, 'src': 'embed', 'start': 1427.698, 'weight': 3, 'content': [{'end': 1434.384, 'text': 'if you are subscribed, please go ahead and click on the bell so that you get notifications when i release a new video,', 'start': 1427.698, 'duration': 6.686}, {'end': 1439.51, 'text': 'because youtube has been having some issues with notifying people of new videos.', 'start': 1434.384, 'duration': 5.126}, {'end': 1445.658, 'text': 'apparently you have to click the bell and you have to be more interactive and leave comments or like the video.', 'start': 1439.51, 'duration': 6.148}, {'end': 1448.021, 'text': "so if you guys can do that, that that'd be great.", 'start': 1445.658, 'duration': 2.363}, {'end': 1450.705, 'text': "i'd appreciate it, but that's it.", 'start': 1448.021, 'duration': 2.684}, {'end': 1453.088, 'text': 'so thanks for watching and i will see you next time.', 'start': 1450.705, 'duration': 2.383}], 'summary': 'To receive notifications for new videos, subscribers should click the bell and engage with comments or likes due to youtube notification issues.', 'duration': 25.39, 'max_score': 1427.698, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u41427698.jpg'}, {'end': 1483.014, 'src': 'embed', 'start': 1472.769, 'weight': 2, 'content': [{'end': 1478.812, 'text': 'often making over $70K per year at tech firms of all sizes, from companies like Google to local startups.', 'start': 1472.769, 'duration': 6.043}, {'end': 1483.014, 'text': 'To learn more, visit CodingDojo.com or click the link in the description below.', 'start': 1479.172, 'duration': 3.842}], 'summary': 'Tech professionals earn over $70k/year at firms like google and local startups.', 'duration': 10.245, 'max_score': 1472.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u41472769.jpg'}], 'start': 1227.098, 'title': 'Fixing react render issue and building app', 'summary': 'Demonstrates fixing a rendering issue in react, showcasing hot reloading feature, and covers building and compiling a react application using npm run build to create a single bundle js file, and using the html webpack plugin to generate an index html file.', 'chapters': [{'end': 1326.383, 'start': 1227.098, 'title': 'Fixing render issue and hot reloading in react', 'summary': 'Demonstrates fixing a rendering issue by adding a missing return statement, resulting in successful compilation, and showcasing hot reloading feature in a react app.', 'duration': 99.285, 'highlights': ['The issue of nothing being displayed in the React app is resolved by adding a missing return statement, resulting in successful compilation.', 'The hot reloading feature in the React app is demonstrated by making a change in the code and observing the automatic update, providing a convenient development experience.']}, {'end': 1483.014, 'start': 1326.803, 'title': 'Building and compiling react app', 'summary': 'Covers building and compiling a react application using npm run build to create a single bundle js file, and using the html webpack plugin to generate an index html file, suitable for hosting on any web server.', 'duration': 156.211, 'highlights': ['The chapter covers building and compiling a React application using npm run build to create a single bundle js file. Running npm run build creates a dist folder containing the index bundle js file, which compiles all components into one file.', 'Using the html webpack plugin to generate an index html file, suitable for hosting on any web server. The html webpack plugin is used to create the index html file, serving as a template with the inserted bundle file, making the application suitable for hosting on any web server.', "Coding Dojo's success in turning beginners into developers in 14 weeks, with over 3,000 graduates and over 90% landing jobs within three months of graduating, often making over $70K per year at tech firms. Coding Dojo's track record includes over 3,000 graduates, with over 90% landing jobs within three months of graduating, often making over $70K per year at tech firms, demonstrating its effectiveness in turning beginners into developers in a short timeframe."]}], 'duration': 255.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/deyxI-6C2u4/pics/deyxI-6C2u41227098.jpg', 'highlights': ['The hot reloading feature in the React app is demonstrated by making a change in the code and observing the automatic update, providing a convenient development experience.', 'The issue of nothing being displayed in the React app is resolved by adding a missing return statement, resulting in successful compilation.', 'The chapter covers building and compiling a React application using npm run build to create a single bundle js file. Running npm run build creates a dist folder containing the index bundle js file, which compiles all components into one file.', 'Using the html webpack plugin to generate an index html file, suitable for hosting on any web server. The html webpack plugin is used to create the index html file, serving as a template with the inserted bundle file, making the application suitable for hosting on any web server.']}], 'highlights': ['CodingDojo turns beginners into developers in 14 weeks.', 'Over 90% of CodingDojo grads land jobs within 3 months, often making over $70k per year.', 'Creating a React application from scratch using Webpack 4.', 'Setting up a dev server with hot reload and a build script for quick deployment.', 'Webpack bundles all react code and assets into one javascript file for production.', 'HTML Webpack plugin creates index HTML file.', 'The hot reloading feature in the React app is demonstrated by making a change in the code and observing the automatic update.']}