title
Easy Frontend JS Workflow With No Framework

description
In this video, we will create a boilerplate for creating frontend applications with vanilla JS with Parcel bundler, babel and sass. Code: https://github.com/bradtraversy/vanilla-parcel-boilerplate 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia

detail
{'title': 'Easy Frontend JS Workflow With No Framework', 'heatmap': [{'end': 459.421, 'start': 428.173, 'weight': 1}], 'summary': 'Learn to set up advanced vanilla javascript projects using parcel, configuring babel, scss, and implementing components, with an emphasis on creating a development environment and utilizing axios to fetch and display user data, all without any framework.', 'chapters': [{'end': 111.4, 'segs': [{'end': 111.4, 'src': 'embed', 'start': 44.151, 'weight': 0, 'content': [{'end': 47.414, 'text': "I think it's a lot easier and, you know, much less configuration.", 'start': 44.151, 'duration': 3.263}, {'end': 55.239, 'text': "So we're going to create a boilerplate that you can use to create vanilla JavaScript projects that are, you know, more advanced,", 'start': 47.874, 'duration': 7.365}, {'end': 57.421, 'text': 'where you can have different files.', 'start': 55.239, 'duration': 2.182}, {'end': 62.245, 'text': 'So you can see in the source folder I have a main app JS, but then I have a components file.', 'start': 57.461, 'duration': 4.784}, {'end': 65.047, 'text': 'So if you want to have some kind of component structure, you can.', 'start': 62.265, 'duration': 2.782}, {'end': 68.77, 'text': "You don't have to do it that way, but that's just an example.", 'start': 65.828, 'duration': 2.942}, {'end': 74.296, 'text': "And we're also going to include SAS so that we can use SCSS files directly.", 'start': 69.27, 'duration': 5.026}, {'end': 84.807, 'text': "We'll be using Babel, which will allow us to use modern JavaScript and compile it down to backwards compatible JavaScript for older browsers.", 'start': 74.836, 'duration': 9.971}, {'end': 89.672, 'text': "And we'll be able to use the ES2015 syntax, the import syntax.", 'start': 85.168, 'duration': 4.504}, {'end': 90.653, 'text': 'All right.', 'start': 90.353, 'duration': 0.3}, {'end': 92.374, 'text': "So let's go ahead and get started.", 'start': 90.733, 'duration': 1.641}, {'end': 94.294, 'text': "I'm going to just open up this code here.", 'start': 92.454, 'duration': 1.84}, {'end': 95.655, 'text': 'I have an empty folder.', 'start': 94.314, 'duration': 1.341}, {'end': 97.315, 'text': "We're going to start from scratch.", 'start': 95.675, 'duration': 1.64}, {'end': 100.976, 'text': "If you don't want to go through the tutorial, you can just clone the repository.", 'start': 97.635, 'duration': 3.341}, {'end': 102.477, 'text': "I'll have it in the description.", 'start': 101.017, 'duration': 1.46}, {'end': 108.979, 'text': "And I'm open to people making pull requests because the way that I set it up with the components, it isn't the best.", 'start': 103.017, 'duration': 5.962}, {'end': 111.4, 'text': "It's just kind of a simple way to do it.", 'start': 109.059, 'duration': 2.341}], 'summary': 'Creating a boilerplate for vanilla javascript projects with component structure, including scss, babel for modern js, and es2015 syntax, open to pull requests.', 'duration': 67.249, 'max_score': 44.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY44151.jpg'}], 'start': 7.389, 'title': 'Setting up vanilla javascript projects with parcel', 'summary': 'Covers setting up advanced vanilla javascript projects using parcel, involving creating a boilerplate with multiple files, custom components, scss, babel for modern javascript, and es2015 syntax, and encourages contributions via pull requests.', 'chapters': [{'end': 111.4, 'start': 7.389, 'title': 'Setting up vanilla javascript projects with parcel', 'summary': 'Discusses setting up advanced vanilla javascript projects using parcel, including creating a boilerplate with multiple files, custom components, scss, babel for modern javascript, and es2015 syntax, and invites contributions via pull requests.', 'duration': 104.011, 'highlights': ['The chapter discusses setting up advanced vanilla JavaScript projects using parcel. It covers the need for an application bundler like parcel for larger projects with multiple files and custom components.', 'Creating a boilerplate with multiple files, custom components, SCSS, Babel for modern JavaScript, and ES2015 syntax. The tutorial demonstrates the creation of a boilerplate for advanced projects, including the use of SCSS, Babel for modern JavaScript, and ES2015 syntax.', 'Inviting contributions via pull requests for improving the setup. The presenter encourages contributions via pull requests for improving the component structure setup.']}], 'duration': 104.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY7389.jpg', 'highlights': ['Creating a boilerplate with multiple files, custom components, SCSS, Babel for modern JavaScript, and ES2015 syntax.', 'The chapter discusses setting up advanced vanilla JavaScript projects using parcel.', 'Inviting contributions via pull requests for improving the setup.']}, {'end': 211.357, 'segs': [{'end': 211.357, 'src': 'embed', 'start': 130.876, 'weight': 0, 'content': [{'end': 135.941, 'text': 'So we have npm install dash uppercase D because these are dev dependencies.', 'start': 130.876, 'duration': 5.065}, {'end': 140.137, 'text': 'We have the parcel bundler, which is going to take care of bundling everything.', 'start': 136.476, 'duration': 3.661}, {'end': 144.159, 'text': 'SAS, so that we can use SCSS files and SAS.', 'start': 140.337, 'duration': 3.822}, {'end': 146.339, 'text': 'Babel, so Babel Core.', 'start': 144.779, 'duration': 1.56}, {'end': 151.901, 'text': 'We have this Babel plugin, Transform Runtime, and also CoreJS2.', 'start': 146.76, 'duration': 5.141}, {'end': 155.663, 'text': "So I'm going to just go ahead and run that real quick.", 'start': 151.981, 'duration': 3.682}, {'end': 157.303, 'text': 'And you guys can copy that if you want.', 'start': 155.703, 'duration': 1.6}, {'end': 161.004, 'text': "And this plugin that I'm installing here, let me just..", 'start': 158.023, 'duration': 2.981}, {'end': 165.329, 'text': 'Go to this page here.', 'start': 164.409, 'duration': 0.92}, {'end': 174.791, 'text': "So this is the transform runtime plugin, and this is a plugin that enables the reuse of Babel's injected helper code and saves on code size.", 'start': 165.369, 'duration': 9.422}, {'end': 175.751, 'text': 'All right.', 'start': 174.811, 'duration': 0.94}, {'end': 181.593, 'text': 'And the we actually need to configure this in the Babel RC file.', 'start': 176.132, 'duration': 5.461}, {'end': 185.093, 'text': "So if you've ever worked with Babel before, you're probably familiar with this file.", 'start': 181.653, 'duration': 3.44}, {'end': 189.054, 'text': 'Whenever you have any plugins, you need to initialize them in that file.', 'start': 185.454, 'duration': 3.6}, {'end': 191.895, 'text': "So I'm going to copy this object right here.", 'start': 189.494, 'duration': 2.401}, {'end': 197.767, 'text': 'and go back and you can see those dev dependencies are all installed.', 'start': 193.844, 'duration': 3.923}, {'end': 205.312, 'text': "So in the root, I'm going to create a dot Babel RC file here and just paste that in.", 'start': 198.187, 'duration': 7.125}, {'end': 211.357, 'text': "So we're just describing any plugins we're using, which we're using this transform runtime plugin.", 'start': 205.713, 'duration': 5.644}], 'summary': 'Installing dev dependencies including parcel bundler, sass, babel, and configuring babel rc file for transform runtime plugin.', 'duration': 80.481, 'max_score': 130.876, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY130876.jpg'}], 'start': 112.3, 'title': 'Setting up web development dependencies', 'summary': 'Covers setting up dev dependencies such as parcel bundler, sas, babel core, babel plugin transform runtime, and corejs2 using npm install commands and configuring them in the babel rc file.', 'chapters': [{'end': 211.357, 'start': 112.3, 'title': 'Setting up dependencies for web development', 'summary': 'Covers setting up dev dependencies including parcel bundler, sas, babel core, babel plugin transform runtime, and corejs2 using npm install commands and configuring them in the babel rc file.', 'duration': 99.057, 'highlights': ['The chapter covers setting up dev dependencies including parcel bundler, SAS, Babel Core, Babel plugin Transform Runtime, and CoreJS2 using npm install commands and configuring them in the Babel RC file.', "The plugin Transform Runtime enables the reuse of Babel's injected helper code and saves on code size.", 'Initializing plugins in the Babel RC file is necessary when working with Babel.']}], 'duration': 99.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY112300.jpg', 'highlights': ['The chapter covers setting up dev dependencies including parcel bundler, SAS, Babel Core, Babel plugin Transform Runtime, and CoreJS2 using npm install commands and configuring them in the Babel RC file.', "The plugin Transform Runtime enables the reuse of Babel's injected helper code and saves on code size.", 'Initializing plugins in the Babel RC file is necessary when working with Babel.']}, {'end': 428.112, 'segs': [{'end': 238.362, 'src': 'embed', 'start': 211.917, 'weight': 0, 'content': [{'end': 216.08, 'text': 'And the only options we need here are core JS and regenerator.', 'start': 211.917, 'duration': 4.163}, {'end': 218.482, 'text': "So let's get rid of that.", 'start': 216.74, 'duration': 1.742}, {'end': 227.751, 'text': "now core js we installed and we're using version 2, so we just want to put a 2 here and go ahead and save that, and that should be it.", 'start': 219.122, 'duration': 8.629}, {'end': 238.362, 'text': "as far as configuring babel now, for our file structure, we're going to create a folder called public, and this is where our html file is going to go.", 'start': 227.751, 'duration': 10.611}], 'summary': 'Configure babel for file structure with core js version 2 in public folder.', 'duration': 26.445, 'max_score': 211.917, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY211917.jpg'}, {'end': 375.761, 'src': 'embed', 'start': 270.134, 'weight': 2, 'content': [{'end': 278.297, 'text': "file So let's create that we'll create a folder called source and in here will be our app dot J.S.", 'start': 270.134, 'duration': 8.163}, {'end': 280.778, 'text': 'which is our JavaScript entry point.', 'start': 278.337, 'duration': 2.441}, {'end': 284.82, 'text': 'So for now just say console log in in here.', 'start': 281.338, 'duration': 3.482}, {'end': 286.921, 'text': "We'll say it works.", 'start': 285.64, 'duration': 1.281}, {'end': 291.457, 'text': "OK, so that's connected.", 'start': 290.316, 'duration': 1.141}, {'end': 298.281, 'text': 'Now, what we need to do is create a couple scripts that utilize parcel.', 'start': 291.877, 'duration': 6.404}, {'end': 304.685, 'text': 'One is to run a dev server just like you would with like, you know, create react app or view CLI.', 'start': 298.441, 'duration': 6.244}, {'end': 308.507, 'text': 'And then one is to build out our static assets to deploy.', 'start': 305.525, 'duration': 2.982}, {'end': 311.109, 'text': "So let's start with the dev server here.", 'start': 309.067, 'duration': 2.042}, {'end': 313.95, 'text': 'So we want to get rid of all this.', 'start': 312.529, 'duration': 1.421}, {'end': 317.993, 'text': "Now we're going to use parcel to do this, obviously.", 'start': 314.591, 'duration': 3.402}, {'end': 319.213, 'text': "So we're going to run parcel.", 'start': 318.093, 'duration': 1.12}, {'end': 333.972, 'text': 'and we want to put the location of our, our main entry file, our index html file, which is going to be in public, slash index.html.', 'start': 322.026, 'duration': 11.946}, {'end': 336.574, 'text': "and then we're going to have an output directory here.", 'start': 333.972, 'duration': 2.602}, {'end': 340.656, 'text': 'so we want to do dash, dash out, dash dir,', 'start': 336.574, 'duration': 4.082}, {'end': 346.539, 'text': "and we're going to call this directory development and when we run our server every time it's going to create this folder.", 'start': 340.656, 'duration': 5.883}, {'end': 348.5, 'text': "it's also going to create a cache folder.", 'start': 346.539, 'duration': 1.961}, {'end': 352.543, 'text': 'Now we want to set a port that we want this to run on.', 'start': 349.52, 'duration': 3.023}, {'end': 356.766, 'text': "So we'll do dash P and then I'm going to run it on 3000.", 'start': 352.603, 'duration': 4.163}, {'end': 362.931, 'text': 'Now, one more thing I want to do is at the beginning here, before we actually run this command to run our dev server,', 'start': 356.766, 'duration': 6.165}, {'end': 366.453, 'text': 'I want to remove the development folder and the cache folder.', 'start': 362.931, 'duration': 3.522}, {'end': 370.617, 'text': "So basically, when we run the server, it's going to recreate these folders every time.", 'start': 366.794, 'duration': 3.823}, {'end': 375.761, 'text': "So let's run our M dash RF, which will delete a directory with files in it.", 'start': 371.057, 'duration': 4.704}], 'summary': "Creating a folder 'source' with an app.js file for javascript entry point, setting up scripts for dev server and static asset build using parcel.", 'duration': 105.627, 'max_score': 270.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY270134.jpg'}, {'end': 437.642, 'src': 'embed', 'start': 404.522, 'weight': 1, 'content': [{'end': 408.448, 'text': 'And you can install it globally and run it that way if you want.', 'start': 404.522, 'duration': 3.926}, {'end': 412.174, 'text': 'But this is meant to be something that people can clone and use.', 'start': 408.528, 'duration': 3.646}, {'end': 414.538, 'text': 'So we want to do everything locally.', 'start': 412.454, 'duration': 2.084}, {'end': 426.25, 'text': 'So we want a parcel build and then we need to put in our public index HTML file and then we want to attach an output directory here,', 'start': 415.359, 'duration': 10.891}, {'end': 428.112, 'text': 'which will be all of our static assets.', 'start': 426.25, 'duration': 1.862}, {'end': 437.642, 'text': "I'm just going to copy reacts convention and call it dist and just add on here dash dash public dash URL and then dot slash.", 'start': 428.173, 'duration': 9.469}], 'summary': 'Developers can clone and use this tool locally, requiring a parcel build and creating an output directory for static assets.', 'duration': 33.12, 'max_score': 404.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY404522.jpg'}], 'start': 211.917, 'title': 'Configuring babel and setting up parcel', 'summary': 'Covers configuring babel for a javascript project, including installing core js and using version 2, creating a public folder for the html file, setting up the javascript entry point, and utilizing parcel to run a development server and build static assets. it also includes setting up a development environment with parcel, creating output and cache directories, setting the port to 3000, and managing development and cache folders.', 'chapters': [{'end': 333.972, 'start': 211.917, 'title': 'Configuring babel and setting up parcel', 'summary': 'Covers configuring babel for a javascript project by installing core js and using version 2, creating a public folder for the html file, setting up the javascript entry point, and utilizing parcel to run a development server and build static assets.', 'duration': 122.055, 'highlights': ['Configuring Babel by installing core JS and using version 2', 'Creating a public folder for the HTML file', 'Setting up the JavaScript entry point in a source folder', 'Utilizing Parcel to run a development server and build static assets']}, {'end': 428.112, 'start': 333.972, 'title': 'Setting up development environment with parcel', 'summary': 'Covers setting up a development environment using parcel, including creating output and cache directories, setting the port to 3000, and removing and recreating the development and cache folders before running the server.', 'duration': 94.14, 'highlights': ['Creating output and cache directories, setting the port to 3000', 'Removing and recreating development and cache folders before running the server', 'Running Parcel build locally with an output directory for static assets']}], 'duration': 216.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY211917.jpg', 'highlights': ['Configuring Babel by installing core JS and using version 2', 'Creating a public folder for the HTML file', 'Setting up the JavaScript entry point in a source folder', 'Utilizing Parcel to run a development server and build static assets', 'Creating output and cache directories, setting the port to 3000', 'Removing and recreating development and cache folders before running the server', 'Running Parcel build locally with an output directory for static assets']}, {'end': 624.48, 'segs': [{'end': 599.766, 'src': 'heatmap', 'start': 428.173, 'weight': 0, 'content': [{'end': 437.642, 'text': "I'm just going to copy reacts convention and call it dist and just add on here dash dash public dash URL and then dot slash.", 'start': 428.173, 'duration': 9.469}, {'end': 441.899, 'text': 'And if we save that, we should be able to go ahead and run this.', 'start': 438.516, 'duration': 3.383}, {'end': 446.523, 'text': 'So if we go down here, we run npm run dev.', 'start': 442.72, 'duration': 3.803}, {'end': 455.88, 'text': "You'll see that over on the side here, it created this development folder and then this cache for this dot cache folder.", 'start': 449.178, 'duration': 6.702}, {'end': 459.421, 'text': "And whenever we restart the server, it's going to remove these.", 'start': 456.4, 'duration': 3.021}, {'end': 462.301, 'text': 'OK, and basically recreate them.', 'start': 459.441, 'duration': 2.86}, {'end': 465.942, 'text': 'And you can see the servers running on localhost 3000.', 'start': 462.882, 'duration': 3.06}, {'end': 468.183, 'text': 'If I open that up, we should see Hello World.', 'start': 465.942, 'duration': 2.241}, {'end': 473.448, 'text': 'And if I open up my console, we see it works so that app is also running.', 'start': 468.843, 'duration': 4.605}, {'end': 482.916, 'text': 'OK, so I mean, just up to this point, we now have a dev environment where we can create modules and all that good stuff.', 'start': 473.468, 'duration': 9.448}, {'end': 488.842, 'text': 'So the next thing I want to do, actually, before we do anything else, let me show you the build command.', 'start': 483.977, 'duration': 4.865}, {'end': 490.323, 'text': 'So if I do NPM run.', 'start': 488.902, 'duration': 1.421}, {'end': 499.328, 'text': 'Build What that does is it just compiles everything into static assets into this disk folder.', 'start': 490.384, 'duration': 8.944}, {'end': 506.931, 'text': 'So if I were to open this disk folder, if I reveal this in my finder here and I just open up index HTML,', 'start': 499.969, 'duration': 6.962}, {'end': 509.992, 'text': "we'll see the same thing and we'll see it works.", 'start': 506.931, 'duration': 3.061}, {'end': 515.073, 'text': 'OK, so this is the bundled version of our app that we would deploy to a server.', 'start': 510.692, 'duration': 4.381}, {'end': 519.857, 'text': "So it's as simple as that to get set up and we can delete the disk folder.", 'start': 516.616, 'duration': 3.241}, {'end': 522.977, 'text': "It's going to recreate it every time we run NPM run build.", 'start': 519.917, 'duration': 3.06}, {'end': 526.059, 'text': 'We can also delete the cache and development folder.', 'start': 523.038, 'duration': 3.021}, {'end': 530.861, 'text': 'I mean, it would delete it anyways when we run the server again and recreate it.', 'start': 526.8, 'duration': 4.061}, {'end': 533.402, 'text': "So I'm going to run the server again.", 'start': 531.681, 'duration': 1.721}, {'end': 534.542, 'text': 'NPM run dev.', 'start': 533.502, 'duration': 1.04}, {'end': 541.465, 'text': 'You can see that it recreated those files here and I want to.', 'start': 537.223, 'duration': 4.242}, {'end': 543.966, 'text': "Should we do next? Let's go to.", 'start': 542.465, 'duration': 1.501}, {'end': 549.244, 'text': 'app.js, and I want to implement SAS.', 'start': 545.902, 'duration': 3.342}, {'end': 552.606, 'text': 'So Parcel makes it really easy.', 'start': 550.525, 'duration': 2.081}, {'end': 557.57, 'text': "I'm going to just create inside my source folder a folder called SCSS.", 'start': 552.626, 'duration': 4.944}, {'end': 565.675, 'text': "And in here, we'll create a file called app.scss, which will be like our main style sheet or our main SAS file.", 'start': 559.051, 'duration': 6.624}, {'end': 568.637, 'text': "And I'm just going to paste some stuff in here.", 'start': 566.375, 'duration': 2.262}, {'end': 571.404, 'text': 'So pretty simple.', 'start': 570.583, 'duration': 0.821}, {'end': 574.286, 'text': "I'm just setting a primary color variable using SAS.", 'start': 571.444, 'duration': 2.842}, {'end': 577.368, 'text': 'And then just some basic styling.', 'start': 574.926, 'duration': 2.442}, {'end': 580.891, 'text': 'We have a container and some styling for the header.', 'start': 577.408, 'duration': 3.483}, {'end': 582.873, 'text': "So I'm going to save this.", 'start': 581.492, 'duration': 1.381}, {'end': 590.298, 'text': 'And then in my app.js, what I can do is directly import that SAS file.', 'start': 583.113, 'duration': 7.185}, {'end': 596.383, 'text': 'So I can say import dot slash SCSS slash app dot SCSS.', 'start': 591.259, 'duration': 5.124}, {'end': 599.766, 'text': "And let's go ahead and save that.", 'start': 597.524, 'duration': 2.242}], 'summary': 'Setting up development environment with npm, running server on localhost 3000, using parcel to implement scss for styling.', 'duration': 171.593, 'max_score': 428.173, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY428173.jpg'}], 'start': 428.173, 'title': 'Setting up a development environment and implementing scss with parcel', 'summary': "Covers setting up a development environment by copying react's convention, creating a 'dist' folder, and running 'npm run dev' to access the server on localhost 3000. it also explains the npm build command, implementing scss with parcel, and demonstrates importing scss into the app.js file.", 'chapters': [{'end': 482.916, 'start': 428.173, 'title': 'Setting up a development environment', 'summary': "Describes setting up a development environment by copying react's convention, creating a 'dist' folder, running 'npm run dev' to create a development folder and cache, and accessing the server on localhost 3000 to see 'hello world'.", 'duration': 54.743, 'highlights': ["The server is running on localhost 3000, and upon accessing it, we can see 'Hello World' and that the app works.", "By running 'npm run dev', a development folder and a cache folder are created, and these are removed and recreated upon server restart.", "A 'dist' folder is created by copying React's convention and adding 'dash dash public dash URL' and then 'dot slash'."]}, {'end': 624.48, 'start': 483.977, 'title': 'Npm build command and implementing scss with parcel', 'summary': 'Explains the npm build command, which compiles everything into static assets into the disk folder, and then demonstrates implementing scss with parcel by creating a main scss file and importing it directly into the app.js file.', 'duration': 140.503, 'highlights': ['NPM build command compiles everything into static assets into the disk folder Running NPM run build compiles everything into static assets in the disk folder.', 'Implementing SCSS with Parcel involves creating a main SCSS file and importing it directly into the app.js file To implement SCSS with Parcel, a main SCSS file is created and then imported directly into the app.js file.', 'Demonstration of importing SCSS file directly into app.js and viewing the applied styling The process of importing the SCSS file directly into app.js and viewing the applied styling is demonstrated.']}], 'duration': 196.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY428173.jpg', 'highlights': ["The server is running on localhost 3000, and upon accessing it, we can see 'Hello World' and that the app works.", "By running 'npm run dev', a development folder and a cache folder are created, and these are removed and recreated upon server restart.", "A 'dist' folder is created by copying React's convention and adding 'dash dash public dash URL' and then 'dot slash'.", 'NPM build command compiles everything into static assets into the disk folder Running NPM run build compiles everything into static assets in the disk folder.', 'Implementing SCSS with Parcel involves creating a main SCSS file and importing it directly into the app.js file To implement SCSS with Parcel, a main SCSS file is created and then imported directly into the app.js file.', 'Demonstration of importing SCSS file directly into app.js and viewing the applied styling The process of importing the SCSS file directly into app.js and viewing the applied styling is demonstrated.']}, {'end': 906.415, 'segs': [{'end': 674.615, 'src': 'embed', 'start': 625.38, 'weight': 1, 'content': [{'end': 629.663, 'text': "And the way that I'm going to do this is to have a div with an ID.", 'start': 625.38, 'duration': 4.283}, {'end': 639.345, 'text': "So, for instance, a div with an idea of header, and then I'm going to use that as a placeholder for a header component,", 'start': 631.778, 'duration': 7.567}, {'end': 641.407, 'text': "and then I'll do the same thing with.", 'start': 639.345, 'duration': 2.062}, {'end': 642.849, 'text': "we'll have a user component.", 'start': 641.407, 'duration': 1.442}, {'end': 649.975, 'text': "Now the way I'm doing this isn't isn't the best because I'm not going to be able to reuse components like this.", 'start': 643.469, 'duration': 6.506}, {'end': 655.54, 'text': 'but you could change things around so you can do that.', 'start': 651.697, 'duration': 3.843}, {'end': 660.524, 'text': "Building like a custom framework or whatever isn't really the point of this video.", 'start': 656.521, 'duration': 4.003}, {'end': 666.228, 'text': "It's just to show you how to get this workflow set up so you can use packages and stuff like that.", 'start': 660.584, 'duration': 5.644}, {'end': 670.131, 'text': "But for now, we're just going to go ahead and have these two divs here.", 'start': 667.189, 'duration': 2.942}, {'end': 674.615, 'text': 'Okay, nothing inside them, just the divs, kind of using them as placeholders.', 'start': 670.151, 'duration': 4.464}], 'summary': 'Setting up div placeholders for header and user components.', 'duration': 49.235, 'max_score': 625.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY625380.jpg'}, {'end': 772.15, 'src': 'embed', 'start': 740.276, 'weight': 3, 'content': [{'end': 741.957, 'text': 'You could bring in style components.', 'start': 740.276, 'duration': 1.681}, {'end': 744.598, 'text': "What I'm doing here is just something very, very simple.", 'start': 742.017, 'duration': 2.581}, {'end': 758.204, 'text': 'Say this is a boilerplate for a simple JS workflow using Parcel.', 'start': 745.339, 'duration': 12.865}, {'end': 759.464, 'text': 'All right.', 'start': 759.284, 'duration': 0.18}, {'end': 760.405, 'text': "So that's my template.", 'start': 759.484, 'duration': 0.921}, {'end': 764.447, 'text': 'And then from this function, I just want to return my template.', 'start': 760.465, 'duration': 3.982}, {'end': 769.209, 'text': 'And then we want to export this so that we can bring it into another file.', 'start': 765.627, 'duration': 3.582}, {'end': 772.15, 'text': "So I'm going to export as default header.", 'start': 769.269, 'duration': 2.881}], 'summary': 'Creating a simple js workflow using parcel with a default header component.', 'duration': 31.874, 'max_score': 740.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY740276.jpg'}, {'end': 885.28, 'src': 'embed', 'start': 836.281, 'weight': 0, 'content': [{'end': 840.765, 'text': 'So this is a very simple way to do things, but you can see now we have our header here.', 'start': 836.281, 'duration': 4.484}, {'end': 846.69, 'text': "Yeah, and it's got its styling from our app JS.", 'start': 840.785, 'duration': 5.905}, {'end': 848.371, 'text': "We don't have the container around it.", 'start': 846.71, 'duration': 1.661}, {'end': 859.261, 'text': "So in the index HTML, I'm actually going to wrap our container around these two components here.", 'start': 849.152, 'duration': 10.109}, {'end': 863.224, 'text': "So move those up and save, and now it's in the container.", 'start': 860.061, 'duration': 3.163}, {'end': 868.407, 'text': 'And obviously you can you can wipe out all the styling if this is just for an example.', 'start': 864.384, 'duration': 4.023}, {'end': 876.033, 'text': "OK now let's create another component for the user and I'm actually going to use an API for that.", 'start': 869.688, 'duration': 6.345}, {'end': 885.28, 'text': "There's an API called random user dot me where we can fetch random user data and I'm just going to stop the server real quick and install Axios.", 'start': 876.453, 'duration': 8.827}], 'summary': 'Updating code layout and integrating an api for fetching random user data using axios.', 'duration': 48.999, 'max_score': 836.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY836281.jpg'}], 'start': 625.38, 'title': 'Structuring and creating components', 'summary': 'Explains structuring components with divs for headers and user components, emphasizing workflow setup and limitations, and covers creation of simple components using javascript functions, integration of header component, and introduction of a new user component utilizing randomuser.me api without any framework.', 'chapters': [{'end': 674.615, 'start': 625.38, 'title': 'Structuring components with divs', 'summary': 'Explains how to structure components using divs as placeholders for header and user components, emphasizing the workflow setup to use packages and the limitation in reusing components.', 'duration': 49.235, 'highlights': ['Using divs with IDs as placeholders for header and user components.', 'Emphasizing the workflow setup to use packages and the limitation in reusing components.']}, {'end': 906.415, 'start': 675.416, 'title': 'Creating simple components with javascript', 'summary': 'Covers the creation of simple components using javascript functions and the integration of the header component into the main app, as well as the introduction of a new user component that utilizes the randomuser.me api without any framework.', 'duration': 230.999, 'highlights': ['The chapter demonstrates the creation of a header component as a JavaScript function using template literals, providing a simple example of a component in a Parcel-based JavaScript workflow.', "The integration of the header component into the main app is showcased, with the usage of 'init app' to render the component and the addition of a container in the index HTML to wrap around the components.", 'Introduction of a new user component utilizing the randomuser.me API is highlighted, emphasizing the ability to install Axios using NPM for front-end usage without any framework dependency.']}], 'duration': 281.035, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY625380.jpg', 'highlights': ['Introduction of a new user component utilizing randomuser.me API without any framework.', 'Emphasizing the workflow setup to use packages and the limitation in reusing components.', "The integration of the header component into the main app is showcased, with the usage of 'init app' to render the component and the addition of a container in the index HTML to wrap around the components.", 'The chapter demonstrates the creation of a header component as a JavaScript function using template literals, providing a simple example of a component in a Parcel-based JavaScript workflow.', 'Using divs with IDs as placeholders for header and user components.']}, {'end': 1344.652, 'segs': [{'end': 943.52, 'src': 'embed', 'start': 907.835, 'weight': 1, 'content': [{'end': 919.75, 'text': "and this is going to be structured the same way we're going to import Axios though so we can use that to fetch And let's say const user.", 'start': 907.835, 'duration': 11.915}, {'end': 925.901, 'text': "And I'm going to use a sync await.", 'start': 924.078, 'duration': 1.823}, {'end': 930.369, 'text': 'So we want to label this a sync because Axios returns a promise.', 'start': 925.961, 'duration': 4.408}, {'end': 935.412, 'text': "So we'll say response equals await Axios dot get.", 'start': 931.107, 'duration': 4.305}, {'end': 943.52, 'text': 'And the URL is HTTPS random user dot me slash API.', 'start': 936.833, 'duration': 6.687}], 'summary': "Using axios to fetch user data from 'https://randomuser.me/api'", 'duration': 35.685, 'max_score': 907.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY907835.jpg'}, {'end': 1199.154, 'src': 'embed', 'start': 1166.861, 'weight': 2, 'content': [{'end': 1175.324, 'text': "uh, what i'm going to do is go into my scss folder and create a partial, so underscore card dot S.C.S.S.", 'start': 1166.861, 'duration': 8.463}, {'end': 1182.167, 'text': "because remember we have it wrapped in a class called card and I'm just going to throw that in there.", 'start': 1175.844, 'duration': 6.323}, {'end': 1183.928, 'text': 'So pretty simple.', 'start': 1182.787, 'duration': 1.141}, {'end': 1188.389, 'text': 'Just going to give it rounded corners and stretch the image out stuff like that.', 'start': 1183.968, 'duration': 4.421}, {'end': 1195.452, 'text': 'And then we can bring that partial into our main app dot S.C.S.S.', 'start': 1188.509, 'duration': 6.943}, {'end': 1199.154, 'text': 'Say imports card.', 'start': 1195.452, 'duration': 3.702}], 'summary': 'Creating a partial in scss for a card with rounded corners and importing it into the main app.', 'duration': 32.293, 'max_score': 1166.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY1166861.jpg'}, {'end': 1282.736, 'src': 'embed', 'start': 1256.408, 'weight': 0, 'content': [{'end': 1265.751, 'text': "But I just wanted to give you kind of an example of you know how you can set things up for a pretty simple app, but it's it's not really.", 'start': 1256.408, 'duration': 9.343}, {'end': 1267.392, 'text': "this stuff isn't really important.", 'start': 1265.751, 'duration': 1.641}, {'end': 1276.094, 'text': 'i just wanted you to have this workflow so that you can run your server, you can install modules, you can import third-party modules,', 'start': 1267.392, 'duration': 8.702}, {'end': 1282.736, 'text': "you can also import, you know, other files, and it doesn't have to be a component structure or anything like that either.", 'start': 1276.094, 'duration': 6.642}], 'summary': 'Demonstrates setting up a workflow for a simple app, including running server, installing modules, and importing files.', 'duration': 26.328, 'max_score': 1256.408, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY1256408.jpg'}], 'start': 907.835, 'title': 'Using axios for user data', 'summary': 'Demonstrates the use of axios to fetch user data from a random user api, displaying it in an html template, and styling the user card using scss. it also highlights the flexibility of the approach and the potential for further enhancements.', 'chapters': [{'end': 1344.652, 'start': 907.835, 'title': 'Using axios to fetch and display user data', 'summary': 'Demonstrates using axios to fetch user data from a random user api, displaying the user information in an html template, and styling the user card using scss. additionally, it emphasizes the flexibility of the approach and the potential for further enhancements.', 'duration': 436.817, 'highlights': ['The chapter demonstrates using Axios to fetch user data from a random user API and display it in an HTML template. The use of Axios to fetch user data and its display in an HTML template is a key aspect of the tutorial.', "The tutorial includes the implementation of SCSS to style the user card, showcasing the flexibility to enhance the app's visual presentation. The demonstration of using SCSS to style the user card highlights the flexibility and potential for visual enhancements in the application.", 'The chapter emphasizes the flexibility of the approach and the potential for further enhancements, such as creating a user component to handle multiple users. The tutorial emphasizes the flexibility of the approach and the potential for further enhancements, such as creating a user component to handle multiple users, showcasing the scalability and adaptability of the demonstrated process.']}], 'duration': 436.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/8rD9amRSOQY/pics/8rD9amRSOQY907835.jpg', 'highlights': ['The tutorial emphasizes the flexibility of the approach and the potential for further enhancements, such as creating a user component to handle multiple users, showcasing the scalability and adaptability of the demonstrated process.', 'The chapter demonstrates using Axios to fetch user data from a random user API and display it in an HTML template. The use of Axios to fetch user data and its display in an HTML template is a key aspect of the tutorial.', "The tutorial includes the implementation of SCSS to style the user card, showcasing the flexibility to enhance the app's visual presentation. The demonstration of using SCSS to style the user card highlights the flexibility and potential for visual enhancements in the application."]}], 'highlights': ['The chapter demonstrates using Axios to fetch user data from a random user API and display it in an HTML template. The use of Axios to fetch user data and its display in an HTML template is a key aspect of the tutorial.', 'The tutorial emphasizes the flexibility of the approach and the potential for further enhancements, such as creating a user component to handle multiple users, showcasing the scalability and adaptability of the demonstrated process.', 'The chapter covers setting up dev dependencies including parcel bundler, SAS, Babel Core, Babel plugin Transform Runtime, and CoreJS2 using npm install commands and configuring them in the Babel RC file.', "The plugin Transform Runtime enables the reuse of Babel's injected helper code and saves on code size.", 'The chapter discusses setting up advanced vanilla JavaScript projects using parcel.', 'Creating a boilerplate with multiple files, custom components, SCSS, Babel for modern JavaScript, and ES2015 syntax.']}