title
Setting Up React With ASP.NET

description
🚀 If you're learning to code, check out my website 👉 https://codehawke.com/all_access.html 🔥 📣 Other Social: https://twitter.com/RealChrisHawkes https://www.linkedin.com/in/christopher-hawkes-130aa835/ https://github.com/chawk https://stackoverflow.com/users/836277/chris-hawkes

detail
{'title': 'Setting Up React With ASP.NET', 'heatmap': [{'end': 250.806, 'start': 224.038, 'weight': 0.773}, {'end': 806.341, 'start': 786.952, 'weight': 0.714}, {'end': 1088.94, 'start': 1047.884, 'weight': 0.792}, {'end': 1313.332, 'start': 1235.969, 'weight': 0.819}], 'summary': 'Demonstrates setting up an asp.net website with react, babel, and webpack, emphasizing the integration process, visual studio and node.js installation, configuring development tools, managing dependencies, and resolving module export errors, providing comprehensive guidance for project initialization and layout update.', 'chapters': [{'end': 25.566, 'segs': [{'end': 39.778, 'src': 'embed', 'start': 0.549, 'weight': 0, 'content': [{'end': 1.15, 'text': "Hey guys, what's up?", 'start': 0.549, 'duration': 0.601}, {'end': 7.615, 'text': "So, in this tutorial, what we're going to be doing is showing you how to get up and running with a basic ASP.NET website,", 'start': 1.17, 'duration': 6.445}, {'end': 14.48, 'text': "as well as using React and Babel and Webpack, which is really the three tools that you're going to use a lot.", 'start': 7.615, 'duration': 6.865}, {'end': 18.003, 'text': "whenever you're going to be writing React code, you're going to need Babel.", 'start': 14.48, 'duration': 3.523}, {'end': 23.544, 'text': "to compile your your javascript and you're also going to need webpack in order to be able to handle your modules,", 'start': 18.74, 'duration': 4.804}, {'end': 25.566, 'text': "and we'll get into that more as we go into this.", 'start': 23.544, 'duration': 2.022}, {'end': 39.778, 'text': "but this is just going to be pretty much a one video demonstration of how you would want to or really just give a suggestion of how you could set up your project to use both asp.net and react and and with asp.net we're obviously going to be using c sharp,", 'start': 25.566, 'duration': 14.212}], 'summary': 'Tutorial on setting up asp.net website with react, babel, and webpack, emphasizing their importance in react development.', 'duration': 39.229, 'max_score': 0.549, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM549.jpg'}], 'start': 0.549, 'title': 'Asp.net website with react', 'summary': 'Illustrates the setup of an asp.net website integrating react, babel, and webpack, highlighting the significance of babel for javascript compilation and the role of webpack in module handling.', 'chapters': [{'end': 25.566, 'start': 0.549, 'title': 'Asp.net website with react, babel, and webpack', 'summary': 'Demonstrates setting up a basic asp.net website while incorporating react, babel, and webpack, essential tools for writing react code, emphasizing the necessity of babel for compiling javascript and the role of webpack in handling modules.', 'duration': 25.017, 'highlights': ['The necessity of Babel for compiling JavaScript and the role of Webpack in handling modules', 'Demonstrating the process of setting up a basic ASP.NET website while incorporating React, Babel, and Webpack']}], 'duration': 25.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM549.jpg', 'highlights': ['Demonstrating the process of setting up a basic ASP.NET website while incorporating React, Babel, and Webpack', 'The necessity of Babel for compiling JavaScript and the role of Webpack in handling modules']}, {'end': 407.79, 'segs': [{'end': 41.96, 'src': 'embed', 'start': 25.566, 'weight': 2, 'content': [{'end': 39.778, 'text': "but this is just going to be pretty much a one video demonstration of how you would want to or really just give a suggestion of how you could set up your project to use both asp.net and react and and with asp.net we're obviously going to be using c sharp,", 'start': 25.566, 'duration': 14.212}, {'end': 41.96, 'text': "which is microsoft's like flagship language.", 'start': 39.778, 'duration': 2.182}], 'summary': 'Demonstration of setting up project with asp.net and react using c sharp', 'duration': 16.394, 'max_score': 25.566, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM25566.jpg'}, {'end': 88.579, 'src': 'embed', 'start': 63.829, 'weight': 0, 'content': [{'end': 71.012, 'text': "We're going to be using actually .NET 4.5, so not .NET Core, but it will come with your install.", 'start': 63.829, 'duration': 7.183}, {'end': 73.333, 'text': 'Just go ahead and make sure you have Visual Studio installed.', 'start': 71.172, 'duration': 2.161}, {'end': 77.293, 'text': "The next thing you're going to need is you're going to need to have Node.js installed,", 'start': 74.591, 'duration': 2.702}, {'end': 80.515, 'text': "because that's how we're going to install our tools like Babylon, Webpack and React.", 'start': 77.293, 'duration': 3.222}, {'end': 83.256, 'text': 'So make sure both of these are installed in your machine.', 'start': 81.355, 'duration': 1.901}, {'end': 88.579, 'text': "I'm going to be using Windows, but you can probably follow along just fine on a Mac or a Linux machine too.", 'start': 83.376, 'duration': 5.203}], 'summary': 'Using .net 4.5, visual studio, and node.js for tool installation on windows, mac, or linux.', 'duration': 24.75, 'max_score': 63.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM63829.jpg'}, {'end': 127.756, 'src': 'embed', 'start': 101.966, 'weight': 1, 'content': [{'end': 108.368, 'text': "And then inside here, what I'm going to do is just you can highlight web if you want so you have less options to deal with.", 'start': 101.966, 'duration': 6.402}, {'end': 110.209, 'text': "And we're not going to be using core again.", 'start': 108.749, 'duration': 1.46}, {'end': 111.91, 'text': "We're going to be using .NET 4.5.", 'start': 110.249, 'duration': 1.661}, {'end': 114.151, 'text': "So that's why I'm selecting this version here.", 'start': 111.91, 'duration': 2.241}, {'end': 118.292, 'text': "You're going to want to go ahead and create a place to put it here.", 'start': 114.171, 'duration': 4.121}, {'end': 120.093, 'text': "I'm not going to use a Git repository.", 'start': 118.332, 'duration': 1.761}, {'end': 123.934, 'text': "That's just beyond the scope of this tutorial here.", 'start': 120.673, 'duration': 3.261}, {'end': 127.756, 'text': 'I like to put my projects in a folder on my C drive.', 'start': 124.334, 'duration': 3.422}], 'summary': 'Using .net 4.5, not using git repository, placing projects in a folder on c drive.', 'duration': 25.79, 'max_score': 101.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM101966.jpg'}, {'end': 256.468, 'src': 'heatmap', 'start': 224.038, 'weight': 0.773, 'content': [{'end': 226.118, 'text': "And I'm going to say add.", 'start': 224.038, 'duration': 2.08}, {'end': 230.319, 'text': "And we're going to say new scaffolded item.", 'start': 228.479, 'duration': 1.84}, {'end': 232.86, 'text': 'And we want to grab an MVC controller.', 'start': 231.019, 'duration': 1.841}, {'end': 234.2, 'text': "And we're just going to say that it's empty.", 'start': 232.88, 'duration': 1.32}, {'end': 237.837, 'text': "And we'll call it the default controller, that's fine.", 'start': 235.905, 'duration': 1.932}, {'end': 250.806, 'text': 'All right.', 'start': 250.606, 'duration': 0.2}, {'end': 256.468, 'text': "so that went ahead and added quite a bit of stuff that our project needs, because now that it knows that you added a controller, it's like oh well,", 'start': 250.806, 'duration': 5.662}], 'summary': 'Added a new scaffolded mvc controller to the project.', 'duration': 32.43, 'max_score': 224.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM224038.jpg'}, {'end': 291.766, 'src': 'embed', 'start': 263.39, 'weight': 3, 'content': [{'end': 267.591, 'text': 'But this is actually how your application is able to hit the controllers that you add to the project.', 'start': 263.39, 'duration': 4.201}, {'end': 272.314, 'text': 'This just explains how the routing is supposed to work because you can customize that quite a bit.', 'start': 268.571, 'duration': 3.743}, {'end': 275.616, 'text': "But we're not going to get into too much of this basic stuff.", 'start': 272.934, 'duration': 2.682}, {'end': 276.957, 'text': "Really, it's not basic at all.", 'start': 275.656, 'duration': 1.301}, {'end': 283.421, 'text': "It's what every project in ASP.NET needs, at least for MVC.NET.", 'start': 277.037, 'duration': 6.384}, {'end': 285.782, 'text': "We don't need to dissect all those pieces here.", 'start': 283.881, 'duration': 1.901}, {'end': 291.766, 'text': 'We just want to go ahead and get moving on because this is mostly about how to integrate React with your ASP.NET project.', 'start': 285.822, 'duration': 5.944}], 'summary': 'Integrating react with asp.net project is essential for mvc.net, a key component for every asp.net project.', 'duration': 28.376, 'max_score': 263.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM263390.jpg'}, {'end': 375.606, 'src': 'embed', 'start': 345.049, 'weight': 4, 'content': [{'end': 346.03, 'text': "And that's going to be right here.", 'start': 345.049, 'duration': 0.981}, {'end': 350.332, 'text': 'And the reason why we use layout pages is just for code reuse.', 'start': 347.15, 'duration': 3.182}, {'end': 352.934, 'text': "so that way, if there's a lot of stuff that all the pages share,", 'start': 350.332, 'duration': 2.602}, {'end': 366.443, 'text': "you can have that sitting in the layout and just have the pages that derive from that not use everything or not have to duplicate all that stuff that's in the layout because it uses the layout plus the additional.", 'start': 352.934, 'duration': 13.509}, {'end': 368.924, 'text': "I'll explain that more in detail.", 'start': 367.083, 'duration': 1.841}, {'end': 370.384, 'text': 'But go ahead and click add.', 'start': 369.384, 'duration': 1}, {'end': 371.525, 'text': 'So this is going to add our view.', 'start': 370.424, 'duration': 1.101}, {'end': 375.606, 'text': "And you can see now under the default folder where it used to be empty, there's now an index file.", 'start': 371.665, 'duration': 3.941}], 'summary': 'Using layout pages for code reuse, adding view creates index file.', 'duration': 30.557, 'max_score': 345.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM345049.jpg'}, {'end': 412.894, 'src': 'embed', 'start': 387.891, 'weight': 5, 'content': [{'end': 396.102, 'text': "So if you've no, in fact, if you've never used asp.net, you probably want to follow along on a different tutorial before you even get to this,", 'start': 387.891, 'duration': 8.211}, {'end': 400.365, 'text': 'because this is mostly, once again, about how to integrate, react with asp.net.', 'start': 396.102, 'duration': 4.263}, {'end': 407.79, 'text': 'all right, what i want to do, though, is customize this layout folder or the layout file.', 'start': 400.365, 'duration': 7.425}, {'end': 412.894, 'text': "so inside, shared the layout, we're going to take out some of the stuff that i don't want in the project right now,", 'start': 407.79, 'duration': 5.104}], 'summary': 'Tutorial on integrating react with asp.net, customizing layout folder', 'duration': 25.003, 'max_score': 387.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM387891.jpg'}], 'start': 25.566, 'title': 'Asp.net and react integration', 'summary': 'Covers setting up an asp.net project with react, emphasizing the need for visual studio and node.js installation, selecting .net 4.5, adding an mvc controller, creating a view, and customizing the layout file for integration.', 'chapters': [{'end': 142.967, 'start': 25.566, 'title': 'Setting up asp.net and react project', 'summary': 'Demonstrates the process of setting up an asp.net project with react, emphasizing the need for visual studio and node.js installation and highlighting the selection of .net 4.5 for the project.', 'duration': 117.401, 'highlights': ['Emphasizes the need for Visual Studio and Node.js installation The chapter highlights the importance of having Visual Studio and Node.js installed for setting up the project, ensuring access to essential tools like Babylon, Webpack, and React.', 'Highlights the selection of .NET 4.5 for the project The chapter emphasizes the selection of .NET 4.5 for the project, providing guidance for creating a new project in Visual Studio and highlighting the significance of this version.', 'Mentions usage of C# as the flagship language for ASP.NET The chapter mentions the usage of C# as the primary language for ASP.NET, highlighting its popularity and position as one of the top five languages currently.']}, {'end': 407.79, 'start': 143.007, 'title': 'Integrating react with asp.net', 'summary': 'Covers setting up an asp.net project, adding an mvc controller, creating a view, and customizing the layout file in order to integrate react with asp.net.', 'duration': 264.783, 'highlights': ['Setting up an ASP.NET project by selecting an empty website and not adding unit tests The speaker chooses to set up an ASP.NET project by selecting an empty website and decides not to add unit tests, focusing on the demonstration of integrating React with ASP.NET.', 'Adding an MVC controller to the project and explaining the purpose of the route config The process of adding an MVC controller to the project adds necessary components like the route config, which explains how the application can hit the controllers and is crucial for MVC.NET projects.', 'Creating a view for the default controller and explaining the use of layout pages for code reuse The speaker demonstrates the creation of a view for the default controller, emphasizing the use of layout pages for code reuse and explaining their purpose in reducing duplication of shared content across multiple pages.', 'Customizing the layout file in the ASP.NET project The chapter delves into customizing the layout file in the ASP.NET project as part of the process to integrate React with ASP.NET, showcasing the use of razor syntax and the purpose of the layout file.']}], 'duration': 382.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM25566.jpg', 'highlights': ['Emphasizes the need for Visual Studio and Node.js installation for setting up the project', 'Highlights the selection of .NET 4.5 for the project and its significance', 'Mentions the usage of C# as the primary language for ASP.NET', 'Adding an MVC controller to the project and explaining the purpose of the route config', 'Creating a view for the default controller and explaining the use of layout pages for code reuse', 'Customizing the layout file in the ASP.NET project for integrating React']}, {'end': 788.433, 'segs': [{'end': 434.999, 'src': 'embed', 'start': 407.79, 'weight': 0, 'content': [{'end': 412.894, 'text': "so inside, shared the layout, we're going to take out some of the stuff that i don't want in the project right now,", 'start': 407.79, 'duration': 5.104}, {'end': 415.503, 'text': 'Taking out those two lines down here.', 'start': 414.061, 'duration': 1.442}, {'end': 417.724, 'text': "I'm going to go ahead and get rid of this stuff here.", 'start': 415.503, 'duration': 2.221}, {'end': 421.488, 'text': 'We do want this render section down here, so I do want to keep that.', 'start': 418.425, 'duration': 3.063}, {'end': 428.173, 'text': "And I also want to copy this line, and I'm going to put it at the top of the head here, or actually at the bottom of the head.", 'start': 421.548, 'duration': 6.625}, {'end': 431.436, 'text': "And inside, we're going to change the name of it.", 'start': 428.894, 'duration': 2.542}, {'end': 434.999, 'text': "And the reason why is because we want to have two sections that we're going to use.", 'start': 432.356, 'duration': 2.643}], 'summary': 'Adjusting layout, removing unnecessary items, adding render section, and renaming for two sections usage.', 'duration': 27.209, 'max_score': 407.79, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM407790.jpg'}, {'end': 546.115, 'src': 'embed', 'start': 516.905, 'weight': 1, 'content': [{'end': 525.801, 'text': "I'm going to go ahead and go to the content folder and we want to drag in Bootstrap And then under that we also want to drag in the site CSS.", 'start': 516.905, 'duration': 8.896}, {'end': 532.926, 'text': "Now this was actually happening under the covers, but I wanted to explain really just, I didn't want any sort of that magic going on.", 'start': 525.841, 'duration': 7.085}, {'end': 536.909, 'text': 'I just wanted to be very explicit about what files and everything are being loaded.', 'start': 532.966, 'duration': 3.943}, {'end': 546.115, 'text': "Because we're using Bootstrap, we also need to actually use both jQuery and Bootstrap because Bootstrap requires jQuery.", 'start': 537.749, 'duration': 8.366}], 'summary': 'Explaining file loading process for bootstrap and its dependencies.', 'duration': 29.21, 'max_score': 516.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM516905.jpg'}, {'end': 636.156, 'src': 'embed', 'start': 609.373, 'weight': 2, 'content': [{'end': 614.734, 'text': "And then now when we go ahead and start it, it's actually going to find that default controller.", 'start': 609.373, 'duration': 5.361}, {'end': 617.055, 'text': "So we don't want to put that in the URL.", 'start': 614.774, 'duration': 2.281}, {'end': 621.416, 'text': "It'll find it for us and go right there from the root directory.", 'start': 617.115, 'duration': 4.301}, {'end': 622.316, 'text': 'There, boom.', 'start': 621.676, 'duration': 0.64}, {'end': 632.394, 'text': "All right, so now that we have that out of the way, let's go ahead and go into our project folder structure here.", 'start': 625.071, 'duration': 7.323}, {'end': 636.156, 'text': "And what I wanna do inside the scripts is actually where I'm gonna put our React project.", 'start': 632.474, 'duration': 3.682}], 'summary': 'Default controller found in the root directory; react project to be placed in scripts.', 'duration': 26.783, 'max_score': 609.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM609373.jpg'}, {'end': 730.486, 'src': 'embed', 'start': 696.456, 'weight': 3, 'content': [{'end': 697.917, 'text': 'it should actually pull up information.', 'start': 696.456, 'duration': 1.461}, {'end': 703.84, 'text': 'MPM is a package manager, and it allows us to install things like React and stuff like that.', 'start': 698.137, 'duration': 5.703}, {'end': 710.324, 'text': "It's going to reach across the web and grab the latest React code, and it handles dependencies that certain projects need.", 'start': 703.88, 'duration': 6.444}, {'end': 713.746, 'text': "So that's why we needed to install Node, because we needed the MPM tool.", 'start': 710.364, 'duration': 3.382}, {'end': 721.361, 'text': "So if you get information like this, that means that you've installed npm and node correctly, so you can continue.", 'start': 714.837, 'duration': 6.524}, {'end': 724.142, 'text': 'if not, you need to go ahead and reinstall that so that you can get that working.', 'start': 721.361, 'duration': 2.781}, {'end': 730.486, 'text': "And the first thing we need to do inside this folder now is we're going to create an initialization file so an init file.", 'start': 724.943, 'duration': 5.543}], 'summary': 'Mpm allows installation of packages like react, handling dependencies, and initialization file creation.', 'duration': 34.03, 'max_score': 696.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM696456.jpg'}], 'start': 407.79, 'title': 'Updating project layout and react project initialization', 'summary': 'Details updating project layout and adding styling, enhancing structure and functionality. it also covers configuring a react project, emphasizing the importance of correct npm and node installation.', 'chapters': [{'end': 564.285, 'start': 407.79, 'title': 'Updating project layout and adding styling', 'summary': "Details the process of updating the project layout by removing unwanted elements and adding necessary sections, as well as explicitly including bootstrap and fixing styling issues, ultimately enhancing the project's structure and functionality.", 'duration': 156.495, 'highlights': ['The process of updating the project layout by removing unnecessary elements and adding required sections is outlined. Removing unwanted lines and sections, adding render section, changing section names, and explaining the purpose of footer and head sections.', 'The addition of Bootstrap and site CSS to the project to provide necessary styling is emphasized. Explicitly including Bootstrap and site CSS, explaining the need for jQuery alongside Bootstrap, and demonstrating the process of adding these components.']}, {'end': 788.433, 'start': 564.345, 'title': 'React project initialization and configuration', 'summary': 'Covers configuring a react project, including adding a default controller, navigating to the project folder, initializing npm, and understanding the purpose of npm and node, emphasizing the importance of installing them correctly.', 'duration': 224.088, 'highlights': ['The chapter covers configuring a React project The passage discusses adding a default controller and creating a folder for a React project within the project folder structure.', "Navigating to the project folder and initializing npm It explains the process of navigating to the project folder, creating an initialization file using 'npm init', and setting the project name and starting point.", 'Understanding the purpose of npm and Node The importance of npm and Node is highlighted, emphasizing their role as a package manager and tool for handling dependencies for projects like React.']}], 'duration': 380.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM407790.jpg', 'highlights': ['The process of updating the project layout by removing unnecessary elements and adding required sections is outlined. Removing unwanted lines and sections, adding render section, changing section names, and explaining the purpose of footer and head sections.', 'The addition of Bootstrap and site CSS to the project to provide necessary styling is emphasized. Explicitly including Bootstrap and site CSS, explaining the need for jQuery alongside Bootstrap, and demonstrating the process of adding these components.', 'The chapter covers configuring a React project The passage discusses adding a default controller and creating a folder for a React project within the project folder structure.', "Navigating to the project folder and initializing npm It explains the process of navigating to the project folder, creating an initialization file using 'npm init', and setting the project name and starting point.", 'Understanding the purpose of npm and Node The importance of npm and Node is highlighted, emphasizing their role as a package manager and tool for handling dependencies for projects like React.']}, {'end': 991.555, 'segs': [{'end': 829.464, 'src': 'embed', 'start': 789.074, 'weight': 4, 'content': [{'end': 789.634, 'text': "And that's good.", 'start': 789.074, 'duration': 0.56}, {'end': 790.475, 'text': 'All right.', 'start': 789.654, 'duration': 0.821}, {'end': 793.878, 'text': "So now that we've done that, it created this package.json folder.", 'start': 790.535, 'duration': 3.343}, {'end': 800.216, 'text': "Now, in order to write React code, you're gonna need to get a better editor than Visual Studio.", 'start': 794.591, 'duration': 5.625}, {'end': 806.341, 'text': "So unfortunately, the support in Visual Studio, at least with 2015, it certainly didn't work.", 'start': 800.296, 'duration': 6.045}, {'end': 811.471, 'text': "Let's go ahead and try with Visual Studio first and see how ugly it is.", 'start': 807.728, 'duration': 3.743}, {'end': 817.335, 'text': "But inside our project folder, inside the React, you can see that there's nothing.", 'start': 812.231, 'duration': 5.104}, {'end': 824.461, 'text': "It looks like there's nothing inside the React folder, even though we can see that we just created a file called package.json in there,", 'start': 817.375, 'duration': 7.086}, {'end': 825.842, 'text': "but it's not showing up in Visual Studio.", 'start': 824.461, 'duration': 1.381}, {'end': 829.464, 'text': 'The reason why is you need to click this little button at the top that says show all files.', 'start': 825.862, 'duration': 3.602}], 'summary': "Creating a package.json folder, facing limitations with visual studio for react code, need to click 'show all files'.", 'duration': 40.39, 'max_score': 789.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM789074.jpg'}, {'end': 890.207, 'src': 'embed', 'start': 849.353, 'weight': 0, 'content': [{'end': 857.398, 'text': "that we don't necessarily want everything and all of these folders to be added to our project and having Visual Studio have to keep track of the files and things like that.", 'start': 849.353, 'duration': 8.045}, {'end': 860.86, 'text': "And I'll explain that more in just a second here, you'll see why.", 'start': 858.138, 'duration': 2.722}, {'end': 866.727, 'text': 'But inside this package.json file, this is going to be responsible for keeping track of all your dependencies.', 'start': 861.901, 'duration': 4.826}, {'end': 873.115, 'text': "So when we install React, React has dependencies on all kinds of other different projects that it's going to install for us.", 'start': 866.807, 'duration': 6.308}, {'end': 877.54, 'text': "And that's why NPM just makes that so much easier to get things like React working.", 'start': 873.796, 'duration': 3.744}, {'end': 886.264, 'text': "And so we'll see in just a second here that this file here is going to grow as we install stuff.", 'start': 878.858, 'duration': 7.406}, {'end': 890.207, 'text': "So the first thing is let's go ahead and install React.", 'start': 887.064, 'duration': 3.143}], 'summary': 'Package.json file tracks dependencies for installing react, making it easier to work with and will grow as we install stuff.', 'duration': 40.854, 'max_score': 849.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM849353.jpg'}, {'end': 954.493, 'src': 'embed', 'start': 911.351, 'weight': 2, 'content': [{'end': 919.699, 'text': "Because we did save, it's actually going to add those two things that we installed to our dependencies location of this config file.", 'start': 911.351, 'duration': 8.348}, {'end': 924.543, 'text': "And that's why I was telling you that it keeps track of the versions that you have, because if you have React 16.2,", 'start': 920.299, 'duration': 4.244}, {'end': 926.906, 'text': "you can't have React DOM 16.5 or 14, point something or another.", 'start': 924.543, 'duration': 2.363}, {'end': 931.929, 'text': "you're going to have all kinds of problems.", 'start': 930.709, 'duration': 1.22}, {'end': 938.951, 'text': 'But MPM is actually following the dependency structure pretty well.', 'start': 931.969, 'duration': 6.982}, {'end': 940.691, 'text': 'So it handles all that for us.', 'start': 938.991, 'duration': 1.7}, {'end': 949.272, 'text': "Now what I want to show you, because I was telling you about the reason why you don't want to have all these files included in Visual Studio.", 'start': 941.571, 'duration': 7.701}, {'end': 954.493, 'text': "there's now this node modules folder, which all these different things got installed into.", 'start': 949.272, 'duration': 5.221}], 'summary': 'Mpm manages dependencies, preventing version conflicts, and creates node modules folder.', 'duration': 43.142, 'max_score': 911.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM911351.jpg'}, {'end': 1002.744, 'src': 'embed', 'start': 973.727, 'weight': 8, 'content': [{'end': 978.549, 'text': 'And if we go back to Visual Studio and we refresh, you can see the node modules folder.', 'start': 973.727, 'duration': 4.822}, {'end': 981.731, 'text': "but I'm not going to right click and include that one, because there's just too much stuff in there.", 'start': 978.549, 'duration': 3.182}, {'end': 983.832, 'text': "I don't want Visual Studio keeping track of.", 'start': 981.751, 'duration': 2.081}, {'end': 989.274, 'text': 'Visual Studio is a memory pig, so the thing can run out of memory at any random time and just like crash.', 'start': 984.412, 'duration': 4.862}, {'end': 990.274, 'text': 'It happens all the time.', 'start': 989.354, 'duration': 0.92}, {'end': 991.555, 'text': 'Ask any Windows developer.', 'start': 990.354, 'duration': 1.201}, {'end': 995.602, 'text': "All right, so now that we've done that, we need to go ahead and install a few other things.", 'start': 993.001, 'duration': 2.601}, {'end': 996.982, 'text': 'And these are our development tools.', 'start': 995.642, 'duration': 1.34}, {'end': 1002.744, 'text': "So instead of actually saying that they're a dependency, they're actually a development dependency as we're working on this project.", 'start': 997.042, 'duration': 5.702}], 'summary': 'Visual studio is a memory pig and can crash due to running out of memory, as reported by windows developers. it is advised to install development tools as development dependencies.', 'duration': 29.017, 'max_score': 973.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM973727.jpg'}], 'start': 789.074, 'title': 'Setting up react project, installing react and managing dependencies, and managing node modules in visual studio', 'summary': 'Covers setting up a react project in visual studio, including creating a package.json file, installing react using npm, and managing dependencies. it also addresses the reasons for not including the node modules folder in visual studio and potential memory issues.', 'chapters': [{'end': 866.727, 'start': 789.074, 'title': 'Setting up react project in visual studio', 'summary': 'Discusses setting up a react project in visual studio, including creating a package.json file, adding it to the project, and explaining its role in managing dependencies.', 'duration': 77.653, 'highlights': ['Creating a package.json file is essential for managing dependencies in a React project.', "In Visual Studio, the package.json file needs to be included in the project by clicking 'show all files' and then right-clicking to include it.", 'Using a better editor than Visual Studio, like installing Node, is necessary for writing React code.']}, {'end': 931.929, 'start': 866.807, 'title': 'Installing react and managing dependencies', 'summary': 'Explains the process of installing react using npm and how it manages dependencies, ensuring version compatibility, and ease of installation.', 'duration': 65.122, 'highlights': ['React installation using NPM simplifies the process and manages dependencies, making it easier to get React working.', "The 'npm install --save' command adds installed packages to the dependencies location of the config file, ensuring version compatibility.", 'The version compatibility is crucial as having conflicting versions of React and React DOM can lead to various problems.']}, {'end': 991.555, 'start': 931.969, 'title': 'Managing node modules in visual studio', 'summary': 'Explains how mpm handles dependency structure, the reason for not including the node modules folder in visual studio, and the potential memory issues with visual studio when managing large folders like node modules.', 'duration': 59.586, 'highlights': ['MPM handles dependency structure well, including all the necessary files for React to work.', 'The node modules folder contains all the dependencies installed for React to function.', 'Visual Studio may run out of memory when including large folders like node modules.']}], 'duration': 202.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM789074.jpg', 'highlights': ['Creating a package.json file is essential for managing dependencies in a React project.', 'React installation using NPM simplifies the process and manages dependencies, making it easier to get React working.', "The 'npm install --save' command adds installed packages to the dependencies location of the config file, ensuring version compatibility.", 'MPM handles dependency structure well, including all the necessary files for React to work.', "In Visual Studio, the package.json file needs to be included in the project by clicking 'show all files' and then right-clicking to include it.", 'The version compatibility is crucial as having conflicting versions of React and React DOM can lead to various problems.', 'Using a better editor than Visual Studio, like installing Node, is necessary for writing React code.', 'The node modules folder contains all the dependencies installed for React to function.', 'Visual Studio may run out of memory when including large folders like node modules.']}, {'end': 1213.037, 'segs': [{'end': 1027.686, 'src': 'embed', 'start': 993.001, 'weight': 0, 'content': [{'end': 995.602, 'text': "All right, so now that we've done that, we need to go ahead and install a few other things.", 'start': 993.001, 'duration': 2.601}, {'end': 996.982, 'text': 'And these are our development tools.', 'start': 995.642, 'duration': 1.34}, {'end': 1002.744, 'text': "So instead of actually saying that they're a dependency, they're actually a development dependency as we're working on this project.", 'start': 997.042, 'duration': 5.702}, {'end': 1004.824, 'text': "So we're going to say npm install.", 'start': 1002.764, 'duration': 2.06}, {'end': 1009.445, 'text': "And because it's a development dependency, we're going to say save dev instead of just save.", 'start': 1004.904, 'duration': 4.541}, {'end': 1015.967, 'text': "And now I need to add, we're going to say babel core.", 'start': 1010.126, 'duration': 5.841}, {'end': 1019.388, 'text': "I know that's confusing because the B is over here, but it's babel core.", 'start': 1016.047, 'duration': 3.341}, {'end': 1027.686, 'text': 'Babel loader and they need to have a space between all these things.', 'start': 1021.649, 'duration': 6.037}], 'summary': 'Installing development dependencies using npm, including babel core and babel loader.', 'duration': 34.685, 'max_score': 993.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM993001.jpg'}, {'end': 1100.247, 'src': 'heatmap', 'start': 1047.884, 'weight': 1, 'content': [{'end': 1049.346, 'text': "i'm going to pause the video because that's a lot.", 'start': 1047.884, 'duration': 1.462}, {'end': 1050.827, 'text': "it's going to have to download a lot for that.", 'start': 1049.346, 'duration': 1.481}, {'end': 1060.27, 'text': 'Alright, guys, the next thing we need to do now is go ahead and we need to add a new file to the React folder called.', 'start': 1052.947, 'duration': 7.323}, {'end': 1061.951, 'text': "it's our webpack config file.", 'start': 1060.27, 'duration': 1.681}, {'end': 1063.591, 'text': "I'm going to say new item.", 'start': 1061.971, 'duration': 1.62}, {'end': 1073.095, 'text': "It's a JavaScript file, so I'll just say webpack.config.js.", 'start': 1063.611, 'duration': 9.484}, {'end': 1078.753, 'text': "All right, so inside of here, I'm going to paste this in.", 'start': 1076.752, 'duration': 2.001}, {'end': 1081.635, 'text': 'So just pause the video for a second.', 'start': 1078.773, 'duration': 2.862}, {'end': 1084.037, 'text': "Don't copy this yet, but in just a second, copy it.", 'start': 1081.695, 'duration': 2.342}, {'end': 1088.94, 'text': "What we're doing here is we're actually setting up this configuration file that Webpack is going to use.", 'start': 1085.077, 'duration': 3.863}, {'end': 1092.182, 'text': "And let's see.", 'start': 1089.86, 'duration': 2.322}, {'end': 1099.306, 'text': "I actually don't need app at all.", 'start': 1092.202, 'duration': 7.104}, {'end': 1100.247, 'text': 'This should be fine.', 'start': 1099.346, 'duration': 0.901}], 'summary': 'Adding a webpack config file to the react folder for setup.', 'duration': 36.636, 'max_score': 1047.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1047884.jpg'}, {'end': 1213.037, 'src': 'embed', 'start': 1122.952, 'weight': 2, 'content': [{'end': 1132.334, 'text': "okay, so create our app.js file and inside here we're just going to use some sort of new standard.", 'start': 1122.952, 'duration': 9.382}, {'end': 1133.555, 'text': 'uh, some new syntax.', 'start': 1132.334, 'duration': 1.221}, {'end': 1139.128, 'text': 'this is a New feature of ES6..', 'start': 1133.555, 'duration': 5.573}, {'end': 1154.334, 'text': "So, if you want to write the latest JavaScript and you want to use keywords like constants or arrow functions and things like that some of the latest standards of the JavaScript language it doesn't work in all the browsers.", 'start': 1139.828, 'duration': 14.506}, {'end': 1161.797, 'text': "So that's why Babel is going to allow us to be able to write in the latest form of JavaScript, which includes classes and things like that.", 'start': 1154.354, 'duration': 7.443}, {'end': 1169.513, 'text': "And it's going to compile it or process it down to older JavaScript that still works in the browser, but it does it for us.", 'start': 1163.149, 'duration': 6.364}, {'end': 1173.455, 'text': 'So we can still write modern JavaScript, but have it work in older browsers.', 'start': 1169.553, 'duration': 3.902}, {'end': 1176.077, 'text': "And that's why we're actually setting up all these tools.", 'start': 1173.515, 'duration': 2.562}, {'end': 1180.779, 'text': "But you'll see also that it's pretty imperative that you have these tools in place,", 'start': 1176.937, 'duration': 3.842}, {'end': 1187.523, 'text': "because most of the tutorials and the documentation you're going to see on React these days they're using classes and things like that,", 'start': 1180.779, 'duration': 6.744}, {'end': 1188.924, 'text': 'which means that you have to have Babel.', 'start': 1187.523, 'duration': 1.401}, {'end': 1198.353, 'text': "And another thing too is when you're writing JSX code and all that stuff, it's impossible to do any of that stuff in just straight JavaScript.", 'start': 1190.105, 'duration': 8.248}, {'end': 1199.554, 'text': "I mean, you'd have to be a ninja.", 'start': 1198.413, 'duration': 1.141}, {'end': 1205.639, 'text': "So we're going to be using JSX, and you'll see what that is as you get into React and everything.", 'start': 1200.775, 'duration': 4.864}, {'end': 1208.242, 'text': 'But Babel makes all that possible.', 'start': 1205.679, 'duration': 2.563}, {'end': 1213.037, 'text': "All right, so let's go back to our package.json file.", 'start': 1209.875, 'duration': 3.162}], 'summary': 'Using babel to write modern javascript and jsx code for compatibility with older browsers and react tutorials.', 'duration': 90.085, 'max_score': 1122.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1122952.jpg'}], 'start': 993.001, 'title': 'Setting up development tools for react', 'summary': 'Covers installing development dependencies for a react project using npm, including babel core, babel loader, webpack, babel preset env, and babel preset react, setting up babel for modern javascript with es6 syntax and its importance, and having essential tools in place for react, such as babel, due to the prevalence of tutorials and documentation using classes.', 'chapters': [{'end': 1100.247, 'start': 993.001, 'title': 'Setting up development dependencies for react project', 'summary': 'Explains the process of installing development dependencies for a react project using npm, including babel core, babel loader, webpack, babel preset env, and babel preset react, followed by creating a webpack configuration file.', 'duration': 107.246, 'highlights': ['Installing development dependencies using npm install save dev, including babel core, babel loader, webpack, babel preset env, and babel preset react', 'Creating a webpack configuration file named webpack.config.js in the React folder']}, {'end': 1173.455, 'start': 1101.228, 'title': 'Setting up babel for javascript', 'summary': 'Discusses setting up babel to write modern javascript with es6 syntax, allowing it to compile to older javascript that is compatible with all browsers, as well as the importance of using babel for modern javascript development.', 'duration': 72.227, 'highlights': ['Babel allows us to write modern JavaScript with ES6 syntax and compiles it to older JavaScript that works in all browsers, enabling the use of the latest JavaScript features while ensuring compatibility (e.g. constants, arrow functions, classes).', 'The entry point for the project is the app.js file, and Babel is essential for processing the latest JavaScript standards and allowing the use of new syntax such as constants and arrow functions.', 'Using Babel enables the writing of modern JavaScript code, including the latest standards like constants and arrow functions, ensuring it functions in older browsers, and it simplifies the process of making modern JavaScript work across different browsers.']}, {'end': 1213.037, 'start': 1173.515, 'title': 'Setting up tools for react', 'summary': 'Discusses the importance of having essential tools in place for react, such as babel, due to the prevalence of tutorials and documentation using classes, and the necessity of babel for writing jsx code.', 'duration': 39.522, 'highlights': ['The importance of having essential tools in place for React, such as Babel, due to the prevalence of tutorials and documentation using classes.', 'The necessity of Babel for writing JSX code.']}], 'duration': 220.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM993001.jpg', 'highlights': ['Installing development dependencies using npm install save dev, including babel core, babel loader, webpack, babel preset env, and babel preset react', 'Creating a webpack configuration file named webpack.config.js in the React folder', 'Babel allows us to write modern JavaScript with ES6 syntax and compiles it to older JavaScript that works in all browsers, enabling the use of the latest JavaScript features while ensuring compatibility (e.g. constants, arrow functions, classes)', 'The entry point for the project is the app.js file, and Babel is essential for processing the latest JavaScript standards and allowing the use of new syntax such as constants and arrow functions', 'Using Babel enables the writing of modern JavaScript code, including the latest standards like constants and arrow functions, ensuring it functions in older browsers, and it simplifies the process of making modern JavaScript work across different browsers', 'The importance of having essential tools in place for React, such as Babel, due to the prevalence of tutorials and documentation using classes', 'The necessity of Babel for writing JSX code']}, {'end': 1403.486, 'segs': [{'end': 1235.929, 'src': 'embed', 'start': 1213.057, 'weight': 0, 'content': [{'end': 1220.841, 'text': "What we need to do under the scripts, we need to actually tell it how to execute Webpack because we didn't install Webpack globally.", 'start': 1213.057, 'duration': 7.784}, {'end': 1223.042, 'text': 'We want to go ahead and add it here.', 'start': 1221.621, 'duration': 1.421}, {'end': 1235.929, 'text': "And this basically just tells MPM hey, I'm going to look inside my node modules folder from from the same folder of where this config file is located.", 'start': 1223.642, 'duration': 12.287}], 'summary': 'Configuring scripts to execute webpack without global installation.', 'duration': 22.872, 'max_score': 1213.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1213057.jpg'}, {'end': 1297.604, 'src': 'embed', 'start': 1264.128, 'weight': 1, 'content': [{'end': 1264.549, 'text': "I'm sorry.", 'start': 1264.128, 'duration': 0.421}, {'end': 1265.769, 'text': 'I missed the module.', 'start': 1264.589, 'duration': 1.18}, {'end': 1269.391, 'text': 'I was just copying this from the web page.', 'start': 1265.789, 'duration': 3.602}, {'end': 1270.912, 'text': 'We need to say module.exports.', 'start': 1269.411, 'duration': 1.501}, {'end': 1281.418, 'text': 'You can see that Visual Studio was even trying to warn me of that that it was complaining because in order for this file to actually be usable by Webpack,', 'start': 1274.534, 'duration': 6.884}, {'end': 1283.739, 'text': 'it needs to be exported so it can import it.', 'start': 1281.418, 'duration': 2.321}, {'end': 1286.341, 'text': "Let's go back here and try to do that.", 'start': 1284.72, 'duration': 1.621}, {'end': 1293.221, 'text': 'All right, so now you can see that it went ahead and compiled and it put out the bundle.js.', 'start': 1288.459, 'duration': 4.762}, {'end': 1297.604, 'text': "So if we go inside here, refresh, we're now going to have..", 'start': 1293.702, 'duration': 3.902}], 'summary': 'Missed module export, fixed, compiled to bundle.js.', 'duration': 33.476, 'max_score': 1264.128, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1264128.jpg'}, {'end': 1328.008, 'src': 'heatmap', 'start': 1235.969, 'weight': 2, 'content': [{'end': 1241.552, 'text': 'So it just automatically knows to look in node modules for the webpack that we installed and not some global version.', 'start': 1235.969, 'duration': 5.583}, {'end': 1244.914, 'text': "So that's why we're adding it to the scripts file here.", 'start': 1242.632, 'duration': 2.282}, {'end': 1248.696, 'text': "And if everything goes well, we're going to see this thing try to compile.", 'start': 1245.894, 'duration': 2.802}, {'end': 1251.157, 'text': "So now we're going to say npm run webpack.", 'start': 1248.736, 'duration': 2.421}, {'end': 1254.479, 'text': 'And it did not.', 'start': 1253.778, 'duration': 0.701}, {'end': 1256.22, 'text': "All right, let's see.", 'start': 1254.499, 'duration': 1.721}, {'end': 1264.108, 'text': "The reason why it's not working is our config file here.", 'start': 1261.927, 'duration': 2.181}, {'end': 1264.549, 'text': "I'm sorry.", 'start': 1264.128, 'duration': 0.421}, {'end': 1265.769, 'text': 'I missed the module.', 'start': 1264.589, 'duration': 1.18}, {'end': 1269.391, 'text': 'I was just copying this from the web page.', 'start': 1265.789, 'duration': 3.602}, {'end': 1270.912, 'text': 'We need to say module.exports.', 'start': 1269.411, 'duration': 1.501}, {'end': 1281.418, 'text': 'You can see that Visual Studio was even trying to warn me of that that it was complaining because in order for this file to actually be usable by Webpack,', 'start': 1274.534, 'duration': 6.884}, {'end': 1283.739, 'text': 'it needs to be exported so it can import it.', 'start': 1281.418, 'duration': 2.321}, {'end': 1286.341, 'text': "Let's go back here and try to do that.", 'start': 1284.72, 'duration': 1.621}, {'end': 1293.221, 'text': 'All right, so now you can see that it went ahead and compiled and it put out the bundle.js.', 'start': 1288.459, 'duration': 4.762}, {'end': 1297.604, 'text': "So if we go inside here, refresh, we're now going to have..", 'start': 1293.702, 'duration': 3.902}, {'end': 1300.885, 'text': "Damn, this is another reason why you don't add the node modules folder.", 'start': 1297.604, 'duration': 3.281}, {'end': 1302.786, 'text': "Look at all this stuff that's now inside node modules.", 'start': 1300.905, 'duration': 1.881}, {'end': 1303.327, 'text': "There's a ton.", 'start': 1302.806, 'duration': 0.521}, {'end': 1310.71, 'text': "But now you have this dist folder, and we do want the dist involved in the project, so I'm going to say add or include in project.", 'start': 1304.047, 'duration': 6.663}, {'end': 1313.332, 'text': 'All right, so inside here, you can see this is a bundle file.', 'start': 1310.73, 'duration': 2.602}, {'end': 1317.234, 'text': 'This was created for us by Webpack, and..', 'start': 1313.372, 'duration': 3.862}, {'end': 1320.506, 'text': 'Now, this was just Webpack that did it for us.', 'start': 1318.385, 'duration': 2.121}, {'end': 1322.986, 'text': "And you can see that it's still using const.", 'start': 1320.946, 'duration': 2.04}, {'end': 1325.167, 'text': "And const doesn't work in all the browsers.", 'start': 1323.187, 'duration': 1.98}, {'end': 1328.008, 'text': "So we didn't actually use Babel yet.", 'start': 1325.207, 'duration': 2.801}], 'summary': 'Configuring webpack and module exports, compiling and including dist folder.', 'duration': 92.039, 'max_score': 1235.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1235969.jpg'}, {'end': 1403.486, 'src': 'embed', 'start': 1352.603, 'weight': 3, 'content': [{'end': 1355.104, 'text': "Because we're not using Bower, I'm gonna go ahead and remove that.", 'start': 1352.603, 'duration': 2.501}, {'end': 1359.805, 'text': 'And we do want it to say use Babel loader.', 'start': 1356.624, 'duration': 3.181}, {'end': 1361.206, 'text': 'Also, this needs to be..', 'start': 1359.885, 'duration': 1.321}, {'end': 1366.714, 'text': 'And this needs to be babel-preset-env.', 'start': 1363.151, 'duration': 3.563}, {'end': 1369.916, 'text': 'And if you remember earlier, we installed that and we also installed React.', 'start': 1366.754, 'duration': 3.162}, {'end': 1373.679, 'text': 'So we need to say babel-preset-react.', 'start': 1370.357, 'duration': 3.322}, {'end': 1380.685, 'text': 'And React uses a syntax called JSX, which is like this hybrid of HTML and JavaScript.', 'start': 1373.879, 'duration': 6.806}, {'end': 1386.254, 'text': 'The thing is, is that it has to be compiled to regular JavaScript.', 'start': 1382.972, 'duration': 3.282}, {'end': 1394.24, 'text': 'So Babel can do that for you, but you need to have Babel preset react and you need to tell Babel how to use that.', 'start': 1386.815, 'duration': 7.425}, {'end': 1396.641, 'text': "And that's why we're actually setting that up here.", 'start': 1394.26, 'duration': 2.381}, {'end': 1403.486, 'text': "So this is now going to, well, it should work, but let's go ahead and check this out here.", 'start': 1396.701, 'duration': 6.785}], 'summary': 'Configuring babel with babel preset-env and babel preset-react for react jsx syntax compilation.', 'duration': 50.883, 'max_score': 1352.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1352603.jpg'}], 'start': 1213.057, 'title': 'Webpack setup and configuration', 'summary': 'Covers setting up webpack using npm, configuring webpack, resolving module export errors, webpack compilation, creating bundle.js, integrating babel for const usage, and configuring babel presets and loaders.', 'chapters': [{'end': 1286.341, 'start': 1213.057, 'title': 'Setting up webpack with npm', 'summary': 'Outlines the process of configuring webpack using npm, including adding the necessary script in the configuration file and resolving an error related to module exports.', 'duration': 73.284, 'highlights': ['The process involves adding the Webpack execution command in the scripts file to ensure it looks inside the node modules folder rather than a global version, thus avoiding potential conflicts (e.g., installing Webpack globally).', "An error related to module exports is identified, and the solution involves modifying the configuration file to include 'module.exports' to make it usable by Webpack, which is also indicated by Visual Studio's warning."]}, {'end': 1403.486, 'start': 1288.459, 'title': 'Webpack configuration and babel integration', 'summary': 'Discusses the webpack compilation process, the creation of bundle.js, the need for babel integration to support const usage across all browsers, and the configuration for babel presets and loaders.', 'duration': 115.027, 'highlights': ["The Webpack compilation process created the bundle.js file, with the dist folder being added to the project for inclusion, showcasing the output of Webpack's functionality.", 'The need for Babel integration arises from the usage of const, which is not universally supported across all browsers, necessitating the addition of Babel presets and loaders for compatibility.', 'The configuration for Babel presets involves specifying babel-preset-env for regular JavaScript and babel-preset-react for JSX, which requires compilation to standard JavaScript.']}], 'duration': 190.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1213057.jpg', 'highlights': ['The process involves adding the Webpack execution command in the scripts file to ensure it looks inside the node modules folder rather than a global version, thus avoiding potential conflicts (e.g., installing Webpack globally).', "An error related to module exports is identified, and the solution involves modifying the configuration file to include 'module.exports' to make it usable by Webpack, which is also indicated by Visual Studio's warning.", "The Webpack compilation process created the bundle.js file, with the dist folder being added to the project for inclusion, showcasing the output of Webpack's functionality.", 'The need for Babel integration arises from the usage of const, which is not universally supported across all browsers, necessitating the addition of Babel presets and loaders for compatibility.', 'The configuration for Babel presets involves specifying babel-preset-env for regular JavaScript and babel-preset-react for JSX, which requires compilation to standard JavaScript.']}, {'end': 1871.829, 'segs': [{'end': 1455.125, 'src': 'embed', 'start': 1426.141, 'weight': 0, 'content': [{'end': 1431.625, 'text': "So after the modules, let's go ahead and say, we're gonna say watch and then true.", 'start': 1426.141, 'duration': 5.484}, {'end': 1440.358, 'text': "So now that we've done that, when we go ahead and we run Webpack, instead of just stopping, you can see it's now waiting.", 'start': 1432.955, 'duration': 7.403}, {'end': 1448.542, 'text': "And if we look here, let's go ahead and make a change so that Webpack can pick up on it.", 'start': 1441.079, 'duration': 7.463}, {'end': 1455.125, 'text': 'All right, so watch on the left-hand side.', 'start': 1448.562, 'duration': 6.563}], 'summary': 'Configured webpack to watch for changes, enabling continuous monitoring during runtime.', 'duration': 28.984, 'max_score': 1426.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1426141.jpg'}, {'end': 1510.388, 'src': 'embed', 'start': 1480.218, 'weight': 1, 'content': [{'end': 1483.599, 'text': 'all older versions of JavaScript that still work in the browsers.', 'start': 1480.218, 'duration': 3.381}, {'end': 1487.761, 'text': "And that's why Babel you can see is now is now compiling correctly for us.", 'start': 1483.619, 'duration': 4.142}, {'end': 1496.598, 'text': "Now to see React in example, let's go ahead and add something here.", 'start': 1489.713, 'duration': 6.885}, {'end': 1510.388, 'text': "And I'm just going to type in React tutorial because this isn't specifically a React tutorial set up, at least at this moment.", 'start': 1501.722, 'duration': 8.666}], 'summary': 'Babel helps in compiling older javascript for browser compatibility.', 'duration': 30.17, 'max_score': 1480.218, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1480218.jpg'}, {'end': 1752.29, 'src': 'embed', 'start': 1724.05, 'weight': 3, 'content': [{'end': 1729.674, 'text': 'So this is a full example really of how you get ASP.NET along with React working.', 'start': 1724.05, 'duration': 5.624}, {'end': 1733.336, 'text': 'And once again, you guys should tune in to my React tutorial.', 'start': 1730.354, 'duration': 2.982}, {'end': 1737.739, 'text': "I'm going to go into building quite a bit of stuff with React.", 'start': 1733.356, 'duration': 4.383}, {'end': 1744.804, 'text': 'But this whole initial setup is some of the biggest pain, I think, to getting involved in a lot of modern client-side development these days.', 'start': 1737.799, 'duration': 7.005}, {'end': 1746.886, 'text': 'The technology changes.', 'start': 1745.845, 'duration': 1.041}, {'end': 1752.29, 'text': "I've done videos on this subject not even a year ago, and they're already out of date.", 'start': 1746.966, 'duration': 5.324}], 'summary': 'Demo of asp.net and react integration, highlighting initial setup challenges in modern client-side development.', 'duration': 28.24, 'max_score': 1724.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1724050.jpg'}, {'end': 1794.847, 'src': 'embed', 'start': 1766.881, 'weight': 2, 'content': [{'end': 1772.986, 'text': "Because a lot of the syntax of React itself isn't changing, but the tools and everything you use for your project do change quite a bit.", 'start': 1766.881, 'duration': 6.105}, {'end': 1780.243, 'text': "Now, one thing I will suggest also when you're doing React development, there is a React Chrome extension.", 'start': 1774.881, 'duration': 5.362}, {'end': 1782.963, 'text': 'You definitely should check that out, this React Developer Tools.', 'start': 1780.263, 'duration': 2.7}, {'end': 1784.424, 'text': 'You absolutely need it.', 'start': 1783.504, 'duration': 0.92}, {'end': 1787.425, 'text': "If you're gonna use Redux, you have to use that tool as well.", 'start': 1784.464, 'duration': 2.961}, {'end': 1790.205, 'text': "You're just gonna pull your hair out with some of the debugging and things.", 'start': 1787.645, 'duration': 2.56}, {'end': 1794.847, 'text': "Don't make your life any more difficult than it has to be when you're dealing with some of this stuff.", 'start': 1791.186, 'duration': 3.661}], 'summary': 'React tools like react developer tools and redux are essential for efficient development and debugging.', 'duration': 27.966, 'max_score': 1766.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1766881.jpg'}], 'start': 1405.947, 'title': 'Webpack and react in asp.net', 'summary': "Discusses configuring webpack for live reloading and integrating react in asp.net, highlighting babel compiler's jsx code processing, the importance of react developer tools, and the challenges of modern client-side development.", 'chapters': [{'end': 1558.99, 'start': 1405.947, 'title': 'Webpack configuration and live reloading', 'summary': 'Discusses configuring webpack to watch for changes and implement live reloading, showcasing how the babel compiler processes jsx code and older javascript versions, with a demonstration of react integration.', 'duration': 153.043, 'highlights': ["Webpack can be configured to watch for changes and implement live reloading, saving time and effort during the development process. By setting 'watch' to true in the Webpack configuration, it continuously monitors for any changes and recompiles the bundle file accordingly.", 'The Babel compiler efficiently processes JSX code and older JavaScript versions, ensuring compatibility with browsers and enabling seamless integration with React. Babel removes the constants keywords and applies strict mode, demonstrating its ability to compile newer JavaScript to older versions compatible with browsers and seamlessly process JSX code for React integration.']}, {'end': 1871.829, 'start': 1559.01, 'title': 'Setting up react in asp.net', 'summary': 'Covers setting up react in asp.net, demonstrating the process of adding bundle files, creating div id for react rendering, and the importance of using react developer tools and redux for debugging, emphasizing the challenges and changes in modern client-side development.', 'duration': 312.819, 'highlights': ['The chapter covers setting up React in ASP.NET Describes the main focus of the transcript.', 'Importance of using React Developer Tools and Redux for debugging Emphasizes the significance of using specific tools for debugging in React development.', 'Challenges and changes in modern client-side development Highlights the challenges and rapid changes in modern client-side development, emphasizing the need for staying updated with tools and technologies.', 'Demonstrating the process of adding bundle files and creating div ID for React rendering Explains the specific steps involved in adding bundle files and creating a div ID for rendering in React within ASP.NET.']}], 'duration': 465.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bnFgGYooDCM/pics/bnFgGYooDCM1405947.jpg', 'highlights': ['Webpack can be configured to watch for changes and implement live reloading, saving time and effort during development.', 'Babel compiler efficiently processes JSX code and older JavaScript versions, ensuring compatibility with browsers and enabling seamless integration with React.', 'Importance of using React Developer Tools and Redux for debugging in React development.', 'Challenges and changes in modern client-side development, emphasizing the need for staying updated with tools and technologies.']}], 'highlights': ['Emphasizes the need for Visual Studio and Node.js installation for setting up the project', 'The necessity of Babel for compiling JavaScript and the role of Webpack in handling modules', 'The process involves adding the Webpack execution command in the scripts file to ensure it looks inside the node modules folder rather than a global version, thus avoiding potential conflicts (e.g., installing Webpack globally)', 'The process of updating the project layout by removing unnecessary elements and adding required sections is outlined. Removing unwanted lines and sections, adding render section, changing section names, and explaining the purpose of footer and head sections', 'Installing development dependencies using npm install save dev, including babel core, babel loader, webpack, babel preset env, and babel preset react', 'Babel allows us to write modern JavaScript with ES6 syntax and compiles it to older JavaScript that works in all browsers, enabling the use of the latest JavaScript features while ensuring compatibility (e.g. constants, arrow functions, classes)', 'Webpack can be configured to watch for changes and implement live reloading, saving time and effort during development', 'Demonstrating the process of setting up a basic ASP.NET website while incorporating React, Babel, and Webpack', 'The process of adding Bootstrap and site CSS to the project to provide necessary styling is emphasized. Explicitly including Bootstrap and site CSS, explaining the need for jQuery alongside Bootstrap, and demonstrating the process of adding these components', 'Creating a webpack configuration file named webpack.config.js in the React folder', 'The need for Babel integration arises from the usage of const, which is not universally supported across all browsers, necessitating the addition of Babel presets and loaders for compatibility', 'The importance of having essential tools in place for React, such as Babel, due to the prevalence of tutorials and documentation using classes', 'The process involves adding the Webpack execution command in the scripts file to ensure it looks inside the node modules folder rather than a global version, thus avoiding potential conflicts (e.g., installing Webpack globally)', 'The process of setting up a basic ASP.NET website with React, Babel, and Webpack is demonstrated', 'The process of updating the project layout by removing unnecessary elements and adding required sections is outlined', 'The necessity of Babel for writing JSX code']}