title
ReactJS Crash Course

description
Welcome to the crash course on reactJS. Here is the link for exercise files, final project, and discussion section for this course: https://courses.learncodeonline.in/learn/Reactjs-crash-course ReactJS is an amazing and very popular library by Facebook and is open source. React is small and can be used with various tech stack like Node stack, Django Stack and more. React includes very few concepts like state, props, components and is very quick to learn as compared to other frameworks. Link to my programming Video Library: https://courses.LearnCodeOnline.in Pick best UI color for your projects: https://UIColorPicker.com Desktop: https://amzn.to/2GZ0C46 Laptop that I use: https://amzn.to/2Goui9Q Wallpaper: https://imgur.com/a/FYHfk Facebook: https://www.facebook.com/HiteshChoudharyPage Instagram: https://instagram.com/hiteshchoudharyofficial homepage: http://www.hiteshChoudhary.com Download LearnCodeOnline.in app from Google play store and Apple App store https://play.google.com/store/apps/details?id=in.learncodeonline.lco Disclaimer: It doesn't feel good to have a disclaimer in every video but this is how the world is right now. All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you. All Amazon links are affiliate links (If any).

detail
{'title': 'ReactJS Crash Course', 'heatmap': [], 'summary': 'This reactjs crash course provides a beginner-friendly introduction to react, covering project creation, tools overview, and fundamental concepts like virtual dom, props, state, components, and hooks, while emphasizing the informal nature of the crash course and offering hands-on exercises and community engagement.', 'chapters': [{'end': 258.341, 'segs': [{'end': 75.058, 'src': 'embed', 'start': 45.758, 'weight': 1, 'content': [{'end': 52.321, 'text': 'So this video is going to help you to not only understand the React in the most easiest and the simplest manner,', 'start': 45.758, 'duration': 6.563}, {'end': 54.782, 'text': 'but also working on a hands-on project.', 'start': 52.321, 'duration': 2.461}, {'end': 60.466, 'text': 'i highly recommend that if you watch this video, make sure you watch it while doing it.', 'start': 55.342, 'duration': 5.124}, {'end': 68.132, 'text': "this video is specially crafted so that you can follow along with me on every single movement and can do exactly what i'm doing on the screen.", 'start': 60.466, 'duration': 7.666}, {'end': 75.058, 'text': "on your screen as well, you'll be able to design this project just like i'm doing it in this entire video.", 'start': 68.132, 'duration': 6.926}], 'summary': 'Learn react in a hands-on manner with step-by-step guidance.', 'duration': 29.3, 'max_score': 45.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM45758.jpg'}, {'end': 118.326, 'src': 'embed', 'start': 88.93, 'weight': 0, 'content': [{'end': 94.193, 'text': 'These questions include absolute beginner questions as well as little bit intermediate question as well.', 'start': 88.93, 'duration': 5.263}, {'end': 99.095, 'text': "In the section two, I'm going to throw up some of the jargon keywords of the React.js.", 'start': 94.813, 'duration': 4.282}, {'end': 104.297, 'text': 'Whenever you are learning any new library or the framework, there are a few jargons associated with them.', 'start': 99.515, 'duration': 4.782}, {'end': 110.48, 'text': "So I'm going to just throw them right in front of you and we'll try to explain a little bit of them, not really in detail,", 'start': 104.697, 'duration': 5.783}, {'end': 112.121, 'text': "because it's just a crash course.", 'start': 110.74, 'duration': 1.381}, {'end': 118.326, 'text': "But still, I'll explain like a little bit in detail about what these jargons are and you don't need to worry about any of them.", 'start': 112.442, 'duration': 5.884}], 'summary': 'A crash course on react.js, covering beginner and intermediate questions, and explaining jargon keywords.', 'duration': 29.396, 'max_score': 88.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM88930.jpg'}, {'end': 146.568, 'src': 'embed', 'start': 118.987, 'weight': 3, 'content': [{'end': 124.691, 'text': "In the section three, I'm gonna walk you through about what are the tools that you need to download and from where to download,", 'start': 118.987, 'duration': 5.704}, {'end': 127.213, 'text': 'and what to keep in mind while downloading these tools.', 'start': 124.691, 'duration': 2.522}, {'end': 135.64, 'text': 'These tools are cross-platform and I have taken a special care that everybody who is on Windows, on Mac or Linux can actually follow along.', 'start': 127.733, 'duration': 7.907}, {'end': 137.121, 'text': 'So no need to worry about anything.', 'start': 135.72, 'duration': 1.401}, {'end': 139.423, 'text': 'All the tools are cross-platform.', 'start': 137.601, 'duration': 1.822}, {'end': 146.568, 'text': "In the final fourth section, we're going to actually jump directly into my computer and we are going to do a project.", 'start': 140.083, 'duration': 6.485}], 'summary': 'Cross-platform tools for project setup and execution, ensuring accessibility for windows, mac, and linux users.', 'duration': 27.581, 'max_score': 118.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM118987.jpg'}, {'end': 187.715, 'src': 'embed', 'start': 159.076, 'weight': 2, 'content': [{'end': 163.999, 'text': "I'll also mention some of the stay away points as well while working on the code part.", 'start': 159.076, 'duration': 4.923}, {'end': 169.143, 'text': "We'll explain some of the issues that you may fall into as well as we're going to work together.", 'start': 164.34, 'duration': 4.803}, {'end': 172.305, 'text': 'Now one more important stuff all the exercise files,', 'start': 169.623, 'duration': 2.682}, {'end': 178.189, 'text': 'project files and the code files that we will be working on in this entire course are also available.', 'start': 172.305, 'duration': 5.884}, {'end': 184.032, 'text': 'I will upload this video on learncodeonline.in, my website where I post a lot of videos as well.', 'start': 178.789, 'duration': 5.243}, {'end': 187.715, 'text': 'This course is absolutely free and all the exercise files are also free.', 'start': 184.413, 'duration': 3.302}], 'summary': 'Course materials available for free on learncodeonline.in', 'duration': 28.639, 'max_score': 159.076, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM159076.jpg'}, {'end': 239.908, 'src': 'embed', 'start': 199.827, 'weight': 4, 'content': [{'end': 203.41, 'text': 'as well as maybe make some friends and start something amazing as well.', 'start': 199.827, 'duration': 3.583}, {'end': 210.378, 'text': 'So now that we are ready to go for the ReactJS crash course, I would like to need a little bit help from your side as well.', 'start': 204.031, 'duration': 6.347}, {'end': 215.183, 'text': 'I would like to know, in the comment section, are you interested in these kinds of crash courses?', 'start': 210.919, 'duration': 4.264}, {'end': 217.486, 'text': 'If yes, post down in the comment section.', 'start': 215.524, 'duration': 1.962}, {'end': 218.787, 'text': 'yes for crash course.', 'start': 217.486, 'duration': 1.301}, {'end': 225.795, 'text': 'And also I would like to let you know me that what is the next topic that I should pick up for the crash courses.', 'start': 219.187, 'duration': 6.608}, {'end': 232.581, 'text': 'So point out your subject, your topic on which I should make a crash course and post that in the below section.', 'start': 226.215, 'duration': 6.366}, {'end': 239.908, 'text': "Based on the popularity of a subject, I'm going to pick up the next crash course topic and we'll make it absolutely clear and easy to understand.", 'start': 233.002, 'duration': 6.906}], 'summary': 'Seeking feedback on interest in crash courses and future topics for easy understanding.', 'duration': 40.081, 'max_score': 199.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM199827.jpg'}], 'start': 5.589, 'title': 'Reactjs crash course', 'summary': 'Provides a beginner-friendly reactjs crash course with a project creation, tools overview, exercise files, and community engagement, divided into four sections, aiming to simplify react concepts and jargons for easy understanding while offering free crash courses and seeking feedback.', 'chapters': [{'end': 118.326, 'start': 5.589, 'title': 'Reactjs crash course', 'summary': 'Discusses a beginner-friendly reactjs crash course, including hands-on project creation, divided into four sections, aimed at simplifying react concepts and jargons for easy understanding.', 'duration': 112.737, 'highlights': ['The video is designed for beginners to understand React and work on a hands-on project, aiming to simplify the toughest topics in the easiest manner.', 'The crash course is divided into four sections, including common beginner and intermediate questions about React.js, and explanation of jargon keywords associated with React.', 'The chapter emphasizes the importance of following along with the video to design the project in real-time for better understanding and practical application.']}, {'end': 258.341, 'start': 118.987, 'title': 'Reactjs crash course', 'summary': 'Covers the tools required for reactjs, a project walkthrough, availability of exercise files, and community engagement, offering free crash courses and seeking feedback for future topics.', 'duration': 139.354, 'highlights': ['The course is available for free and includes exercise files, project files, and code files. The course is free and provides exercise, project, and code files for practice and learning.', 'The chapter covers the tools required for ReactJS and ensures cross-platform compatibility for Windows, Mac, and Linux users. The tools required for ReactJS are cross-platform, ensuring accessibility for users of Windows, Mac, and Linux.', 'The instructor encourages engagement in the discussion section to facilitate community learning and collaboration. The instructor encourages engagement in the discussion section for like-minded people to collaborate and help each other.', 'Feedback is sought from the viewers for future crash course topics, with the next topic to be chosen based on popularity. The viewers are invited to provide feedback on future crash course topics, with the next topic selection based on popularity.']}], 'duration': 252.752, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM5589.jpg', 'highlights': ['The crash course is divided into four sections, including common beginner and intermediate questions about React.js, and explanation of jargon keywords associated with React.', 'The video is designed for beginners to understand React and work on a hands-on project, aiming to simplify the toughest topics in the easiest manner.', 'The course is available for free and includes exercise files, project files, and code files. The course is free and provides exercise, project, and code files for practice and learning.', 'The chapter covers the tools required for ReactJS and ensures cross-platform compatibility for Windows, Mac, and Linux users. The tools required for ReactJS are cross-platform, ensuring accessibility for users of Windows, Mac, and Linux.', 'The instructor encourages engagement in the discussion section to facilitate community learning and collaboration. The instructor encourages engagement in the discussion section for like-minded people to collaborate and help each other.', 'Feedback is sought from the viewers for future crash course topics, with the next topic to be chosen based on popularity. The viewers are invited to provide feedback on future crash course topics, with the next topic selection based on popularity.', 'The chapter emphasizes the importance of following along with the video to design the project in real-time for better understanding and practical application.']}, {'end': 776.658, 'segs': [{'end': 284.575, 'src': 'embed', 'start': 258.341, 'weight': 0, 'content': [{'end': 263.425, 'text': "so grab that up and let's get started with a crash course on react.js.", 'start': 258.341, 'duration': 5.084}, {'end': 271.569, 'text': "okay, so, all set, let's get started with the very first section of the react.js crash courses, which are questions of internet.", 'start': 263.425, 'duration': 8.144}, {'end': 274.391, 'text': 'so question number one what is react.js?', 'start': 271.569, 'duration': 2.822}, {'end': 279.913, 'text': 'ReactJS is a library designed by Facebook and now it is open source.', 'start': 275.251, 'duration': 4.662}, {'end': 284.575, 'text': 'There are no licensing issues and you can use it in absolutely any project.', 'start': 279.953, 'duration': 4.622}], 'summary': 'React.js is a facebook-designed open-source library with no licensing issues.', 'duration': 26.234, 'max_score': 258.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM258341.jpg'}, {'end': 419.985, 'src': 'embed', 'start': 392.832, 'weight': 3, 'content': [{'end': 399.253, 'text': 'you can use react with any of the library and which is the main reason why react is gaining its popularity.', 'start': 392.832, 'duration': 6.421}, {'end': 403.695, 'text': 'Question number three what are the prerequisite if I want to learn ReactJS?', 'start': 399.793, 'duration': 3.902}, {'end': 412.34, 'text': "Although ReactJS is really simple to understand as well as it's a very small library, so you don't need to spend much of the time in understanding it.", 'start': 404.496, 'duration': 7.844}, {'end': 413.681, 'text': "it's pretty quick to learn.", 'start': 412.34, 'duration': 1.341}, {'end': 419.985, 'text': "But definitely since it's a JS based platform, it is assumed that you are pretty comfortable with JavaScript.", 'start': 414.121, 'duration': 5.864}], 'summary': "React's popularity grows due to its versatility. reactjs is quick to learn, assuming comfort with javascript.", 'duration': 27.153, 'max_score': 392.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM392832.jpg'}, {'end': 479.071, 'src': 'embed', 'start': 452.771, 'weight': 1, 'content': [{'end': 457.136, 'text': 'What are the recent changes that has been implemented in the React JS library?', 'start': 452.771, 'duration': 4.365}, {'end': 465.602, 'text': 'Just like any the framework or library, there is a continuous development cycle in which the team is actually working on every single day,', 'start': 457.737, 'duration': 7.865}, {'end': 468.164, 'text': "so it's obvious that the changes are going to appear.", 'start': 465.602, 'duration': 2.562}, {'end': 472.567, 'text': "one of the most common changes that everybody's talking about is react js hooks.", 'start': 468.164, 'duration': 4.403}, {'end': 474.748, 'text': "but you don't need to worry anything about the hooks.", 'start': 472.567, 'duration': 2.181}, {'end': 479.071, 'text': 'as mentioned clearly on the website, that hook is nothing groundbreaking.', 'start': 474.748, 'duration': 4.323}], 'summary': 'React js library has recently introduced changes, including the widely discussed react js hooks, with a continuous development cycle.', 'duration': 26.3, 'max_score': 452.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM452771.jpg'}, {'end': 612.055, 'src': 'embed', 'start': 583.922, 'weight': 2, 'content': [{'end': 589.925, 'text': "Okay, so now that the section one is over about the common questions about React, let's move on to the section number two.", 'start': 583.922, 'duration': 6.003}, {'end': 596.748, 'text': 'jargons of the react js world, and in fact there are lots of jargons that are going to come in front of you.', 'start': 590.885, 'duration': 5.863}, {'end': 598.749, 'text': "i'm going to mention only few of them.", 'start': 596.748, 'duration': 2.001}, {'end': 601.69, 'text': 'the first jargon that usually appears is the virtual dom.', 'start': 598.749, 'duration': 2.941}, {'end': 603.551, 'text': 'so what is this virtual dom?', 'start': 601.69, 'duration': 1.861}, {'end': 606.852, 'text': "simply assume, let's just say, there is a comment section on the youtube.", 'start': 603.551, 'duration': 3.301}, {'end': 612.055, 'text': 'you write a comment and somebody replies to your comment, and then somebody also again comes and replies to your comment.', 'start': 606.852, 'duration': 5.203}], 'summary': 'Introduction to react jargons, including virtual dom concept and examples', 'duration': 28.133, 'max_score': 583.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM583922.jpg'}, {'end': 739.227, 'src': 'embed', 'start': 712.659, 'weight': 5, 'content': [{'end': 719.123, 'text': 'where we are going to learn what are the tools that we need to install and how we can proceed further in building a project,', 'start': 712.659, 'duration': 6.464}, {'end': 721.725, 'text': 'although these are two separate sections but kind of a one itself.', 'start': 719.123, 'duration': 2.602}, {'end': 729.51, 'text': "so let's jump into the computer and try to find out and download the tools that are required for starting this react.js crash course.", 'start': 721.725, 'duration': 7.785}, {'end': 734.285, 'text': "Cheers, and let's get started with our ReactJS crash course.", 'start': 730.663, 'duration': 3.622}, {'end': 739.227, 'text': 'So, first and foremost, let me mention that ReactJS, this crash course,', 'start': 734.765, 'duration': 4.462}], 'summary': 'Learning about tools needed for react.js crash course', 'duration': 26.568, 'max_score': 712.659, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM712659.jpg'}, {'end': 782.02, 'src': 'embed', 'start': 756.334, 'weight': 4, 'content': [{'end': 761.195, 'text': 'First and foremost, a quick disclaimer that crash courses means we are rushing through various topic.', 'start': 756.334, 'duration': 4.861}, {'end': 765.916, 'text': "It's not going to be as in-depth that you are much more familiar in my courses, at least.", 'start': 761.555, 'duration': 4.361}, {'end': 771.317, 'text': 'We take topics like too much in-depth, talk about them, explore them, experiment on them.', 'start': 766.616, 'duration': 4.701}, {'end': 776.658, 'text': "But in this case, we are going to be rushing through, but I'll try my best to explain them as much as possible.", 'start': 771.397, 'duration': 5.261}, {'end': 779.099, 'text': 'But again, I hope you understand these are crash courses.', 'start': 776.778, 'duration': 2.321}, {'end': 782.02, 'text': "so, with that aside, let's go ahead and get started.", 'start': 779.759, 'duration': 2.261}], 'summary': 'Crash courses will cover topics briefly, not in-depth.', 'duration': 25.686, 'max_score': 756.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM756334.jpg'}], 'start': 258.341, 'title': 'React.js fundamentals and jargons', 'summary': 'Covers the fundamentals of react.js, including its features, compatibility, recent changes like hooks, and jargons such as virtual dom, props, state, and components, while also mentioning the informal nature of the crash course and the upcoming sections about the required tools.', 'chapters': [{'end': 583.521, 'start': 258.341, 'title': 'React.js crash course', 'summary': 'Introduces react.js, covering its features, compatibility with other tech stacks, prerequisites, recent changes like hooks, and the shift towards functional components.', 'duration': 325.18, 'highlights': ['React.js features and compatibility React.js is an open-source library designed by Facebook, offering reusable components, fast reloading, and compatibility with any tech stack, making it popular among big companies.', 'Prerequisites for learning ReactJS ReactJS is simple to understand, but prior JavaScript knowledge is recommended; however, a crash course can provide an understanding of React.js for those with experience in other programming languages.', 'Recent changes in ReactJS The introduction of hooks as a new feature in React.js, addressing the need for state management without reliance on libraries like Redux, while emphasizing the coexistence of class-based and functional components.']}, {'end': 776.658, 'start': 583.922, 'title': 'Reactjs crash course: jargons, props, state, components, and tools', 'summary': 'Covers the jargons of the react js world, including virtual dom, props, state, class-based and functional components, and hooks, and also mentions the informal nature of the crash course and the upcoming sections about the tools required for building a project.', 'duration': 192.736, 'highlights': ['The chapter covers the jargons of the React JS world, including virtual DOM, props, state, class-based and functional components, and hooks. The main highlight of the chapter, providing an overview of the key topics covered.', 'Mentions the informal nature of the crash course compared to other videos and the disclaimer that the crash course will be rushing through various topics. Important context about the format and pace of the crash course, setting expectations for the viewers.', 'Mentions the upcoming sections about the tools required for building a project. Provides a preview of the upcoming content, indicating the practical aspect of the crash course.']}], 'duration': 518.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM258341.jpg', 'highlights': ['React.js features and compatibility React.js is an open-source library designed by Facebook, offering reusable components, fast reloading, and compatibility with any tech stack, making it popular among big companies.', 'Recent changes in ReactJS The introduction of hooks as a new feature in React.js, addressing the need for state management without reliance on libraries like Redux, while emphasizing the coexistence of class-based and functional components.', 'The chapter covers the jargons of the React JS world, including virtual DOM, props, state, class-based and functional components, and hooks. The main highlight of the chapter, providing an overview of the key topics covered.', 'Prerequisites for learning ReactJS ReactJS is simple to understand, but prior JavaScript knowledge is recommended; however, a crash course can provide an understanding of React.js for those with experience in other programming languages.', 'Mentions the informal nature of the crash course compared to other videos and the disclaimer that the crash course will be rushing through various topics. Important context about the format and pace of the crash course, setting expectations for the viewers.', 'Mentions the upcoming sections about the tools required for building a project. Provides a preview of the upcoming content, indicating the practical aspect of the crash course.']}, {'end': 1805.212, 'segs': [{'end': 1091.171, 'src': 'embed', 'start': 1064.524, 'weight': 2, 'content': [{'end': 1069.225, 'text': 'so you can imagine that how many people are trying to learn, react and implement that.', 'start': 1064.524, 'duration': 4.701}, {'end': 1074.707, 'text': 'even if we take the industry standard, like two or three percent of conversion, these are too many developers for react.', 'start': 1069.225, 'duration': 5.482}, {'end': 1076.648, 'text': "so yes, it's getting really popular.", 'start': 1074.707, 'duration': 1.941}, {'end': 1078.288, 'text': 'so how do we install it?', 'start': 1077.188, 'duration': 1.1}, {'end': 1083.749, 'text': 'we can just click on this and it just copies this code in on my clipboard npm.', 'start': 1078.288, 'duration': 5.461}, {'end': 1086.21, 'text': 'hi, i create react app.', 'start': 1083.749, 'duration': 2.461}, {'end': 1087.53, 'text': 'so how do we install it?', 'start': 1086.21, 'duration': 1.32}, {'end': 1091.171, 'text': 'so go ahead and fire up your terminal, and there we go.', 'start': 1087.53, 'duration': 3.641}], 'summary': 'React is gaining popularity with a large number of developers, even exceeding industry conversion rates, with ease of installation.', 'duration': 26.647, 'max_score': 1064.524, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM1064524.jpg'}, {'end': 1137.185, 'src': 'embed', 'start': 1105.456, 'weight': 3, 'content': [{'end': 1106.777, 'text': 'i create react app.', 'start': 1105.456, 'duration': 1.321}, {'end': 1107.498, 'text': 'make sure dashes.', 'start': 1106.777, 'duration': 0.721}, {'end': 1109.039, 'text': 'are there no spaces?', 'start': 1107.498, 'duration': 1.541}, {'end': 1111.121, 'text': "okay?. It's going to install it.", 'start': 1109.039, 'duration': 2.082}, {'end': 1112.402, 'text': 'absolutely fine for you.', 'start': 1111.121, 'duration': 1.281}, {'end': 1116.226, 'text': 'And you can also optionally give an option of hyphen g here.', 'start': 1113.123, 'duration': 3.103}, {'end': 1119.869, 'text': 'Hyphen g means we can install it on globally.', 'start': 1116.486, 'duration': 3.383}, {'end': 1122.431, 'text': 'I highly recommend that, that you give this command.', 'start': 1120.35, 'duration': 2.081}, {'end': 1125.174, 'text': 'because we want to access the React from anywhere.', 'start': 1123.092, 'duration': 2.082}, {'end': 1126.855, 'text': 'So go ahead and run this command.', 'start': 1125.214, 'duration': 1.641}, {'end': 1132.32, 'text': 'If you are on a Mac or Linux, then we also have to give the sudo option here,', 'start': 1127.436, 'duration': 4.884}, {'end': 1137.185, 'text': "because there's no way to open the terminal using like right click and administrator.", 'start': 1132.32, 'duration': 4.865}], 'summary': 'Creating react app with installation commands and recommendations.', 'duration': 31.729, 'max_score': 1105.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM1105456.jpg'}, {'end': 1429.493, 'src': 'embed', 'start': 1399.757, 'weight': 4, 'content': [{'end': 1400.777, 'text': "So that's how we do that.", 'start': 1399.757, 'duration': 1.02}, {'end': 1405.38, 'text': 'The notice here that on the browser, it says localhost colon 3000.', 'start': 1401.278, 'duration': 4.102}, {'end': 1408.002, 'text': "That's the server where react application is going to work.", 'start': 1405.38, 'duration': 2.622}, {'end': 1410.403, 'text': 'So this is your default React application.', 'start': 1408.522, 'duration': 1.881}, {'end': 1412.184, 'text': 'Sounds good, looks pretty awesome.', 'start': 1410.683, 'duration': 1.501}, {'end': 1414.745, 'text': 'And to be honest, I love this dark theme.', 'start': 1412.884, 'duration': 1.861}, {'end': 1417.167, 'text': 'Previously it was just all white, but I prefer this one here.', 'start': 1414.765, 'duration': 2.402}, {'end': 1422.189, 'text': "Okay, so this is the exact thing that we are having, and we're gonna recreate that as well.", 'start': 1417.847, 'duration': 4.342}, {'end': 1425.551, 'text': 'One of the easy thing to learn about anything is to recreate the stuff.', 'start': 1422.67, 'duration': 2.881}, {'end': 1426.252, 'text': "We're gonna do that.", 'start': 1425.591, 'duration': 0.661}, {'end': 1429.493, 'text': 'Okay, so the things are working absolutely fine.', 'start': 1426.872, 'duration': 2.621}], 'summary': 'Learning to recreate a default react application, hosted on localhost:3000, with a preferred dark theme.', 'duration': 29.736, 'max_score': 1399.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM1399757.jpg'}, {'end': 1520.832, 'src': 'embed', 'start': 1491.003, 'weight': 0, 'content': [{'end': 1494.267, 'text': 'so, since it can be recreated, nobody sends that or nobody uploads that.', 'start': 1491.003, 'duration': 3.264}, {'end': 1499.872, 'text': 'This folder is being created based on totally the things which are mentioned in the package.json file,', 'start': 1494.787, 'duration': 5.085}, {'end': 1504.978, 'text': 'like what are the libraries or dependencies I need to install, like React, React, Dome React scripts?', 'start': 1499.872, 'duration': 5.106}, {'end': 1511.484, 'text': 'What are the scripts that you want to run? Whenever I say npm start, it runs this script, the very first one.', 'start': 1505.058, 'duration': 6.426}, {'end': 1513.767, 'text': 'There are others as well, build, test, eject.', 'start': 1511.524, 'duration': 2.243}, {'end': 1515.729, 'text': 'I can write my own as well, no problem in that.', 'start': 1513.807, 'duration': 1.922}, {'end': 1520.832, 'text': 'And then we have got some of the browser lists, some of the development lists, and a whole bunch of things.', 'start': 1516.409, 'duration': 4.423}], 'summary': 'Package.json file defines dependencies, scripts, and browser lists for project setup.', 'duration': 29.829, 'max_score': 1491.003, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM1491003.jpg'}, {'end': 1581.148, 'src': 'embed', 'start': 1553.373, 'weight': 1, 'content': [{'end': 1555.695, 'text': "it's it can break the application.", 'start': 1553.373, 'duration': 2.322}, {'end': 1559.837, 'text': "git ignore is git related files, so it's never going to upload the things.", 'start': 1555.695, 'duration': 4.142}, {'end': 1561.678, 'text': 'whatever is mentioned in the git ignore.', 'start': 1559.837, 'duration': 1.841}, {'end': 1567.962, 'text': "it's going to ignore that while updating your git repository, like node modules, bnp files, stuff like that.", 'start': 1561.678, 'duration': 6.284}, {'end': 1569.623, 'text': 'okay, close that down now.', 'start': 1567.962, 'duration': 1.661}, {'end': 1574.885, 'text': 'source.js. this is the meat part where we do all of the amazing stuff in that.', 'start': 1569.623, 'duration': 5.262}, {'end': 1581.148, 'text': 'and finally, the public folder in which, uh, some of the public files are like whatever we are going to do in the source.js,', 'start': 1574.885, 'duration': 6.263}], 'summary': 'Using .gitignore to exclude specific files from being uploaded to the git repository, such as node modules and bnp files.', 'duration': 27.775, 'max_score': 1553.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM1553373.jpg'}], 'start': 776.778, 'title': 'Setting up react environment and structural files', 'summary': 'Covers the setup process for react.js using node.js and create react app, and the significance of structural files such as readme.md, package.json, node modules, lock.json, git ignore, source.js, and public folder in managing dependencies and project structure.', 'chapters': [{'end': 852.731, 'start': 776.778, 'title': 'Crash course in react.js setup', 'summary': 'Covers the setup process for a crash course in react.js, including the tools required such as node.js and react.js, and the process of creating a project using npm, with an emphasis on the availability of exercise files and the simplicity of the setup process.', 'duration': 75.953, 'highlights': ['The chapter covers the setup process for a crash course in React.js It provides an overview of the tools required and the process of creating a project using NPM.', 'Tools required include Node.js and React.js Node.js is described as simple software available for Mac, Linux, and Windows, while React.js is used to create a project and install a library in the system.', 'Emphasis on the availability of exercise files and the simplicity of the setup process Exercise files are available at learncode online, and the setup process is described as straightforward, with basic boilerplate code provided by NPM for writing React applications.']}, {'end': 1435.116, 'start': 853.112, 'title': 'Setting up react development environment', 'summary': 'Covers the process of setting up the react development environment using vs code and chrome, emphasizing the installation of node.js and create react app, with notable highlights including the popularity of react, installation steps, and launching the development server.', 'duration': 582.004, 'highlights': ['Node.js installation preference for LTS version, and the ease of downloading appropriate files for different systems The speaker recommends downloading the LTS version of Node.js from the nodejs.org website, highlighting the ease of downloading appropriate files for different systems.', 'The popularity of React library with over 88,000 weekly downloads, indicating its increasing adoption and relevance The speaker notes the popularity of React, citing over 88,000 weekly downloads as an indication of its increasing adoption and relevance in the development community.', 'Steps to install Create React App using npm command, with emphasis on the global installation and its significance for accessibility The speaker provides steps to install Create React App using the npm command, emphasizing the significance of global installation for accessibility, and recommends it for accessing React from anywhere.', "Launching the development server using 'npm start' command and accessing the default React application on localhost:3000 The speaker demonstrates launching the development server using the 'npm start' command and accessing the default React application on localhost:3000, showcasing the successful setup of the development environment."]}, {'end': 1805.212, 'start': 1436.497, 'title': 'Structural files in react', 'summary': 'Discusses the importance of structural files like readme.md, package.json, node modules, lock.json, git ignore, source.js, and public folder in a react project, highlighting their functions and significance in managing dependencies, project structure, and file organization.', 'duration': 368.715, 'highlights': ['The package.json file is essential for managing dependencies in a React project, as it specifies the libraries, dependencies, and scripts needed for the project, and the node module folder is generated based on it. The package.json file is crucial for specifying project dependencies and scripts, and the node module folder is generated based on it, simplifying the sharing of projects without including the node module folder.', 'The git ignore file ensures that certain files, such as node modules and bnp files, are not uploaded when updating a git repository, streamlining version control and repository management. The git ignore file prevents the uploading of specific files when updating a git repository, enhancing version control and repository management by excluding unnecessary files.', 'The public folder in a React project hosts the files exported from the source.js, facilitating the hosting and loading of single page applications like React and Angular. The public folder in a React project serves as the location for exporting files from source.js, enabling the hosting and loading of single page applications like React and Angular.']}], 'duration': 1028.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM776778.jpg', 'highlights': ['The package.json file is crucial for specifying project dependencies and scripts, simplifying the sharing of projects without including the node module folder.', 'The git ignore file prevents the uploading of specific files when updating a git repository, enhancing version control and repository management by excluding unnecessary files.', 'The popularity of React library with over 88,000 weekly downloads indicates its increasing adoption and relevance in the development community.', 'Steps to install Create React App using npm command, emphasizing the significance of global installation for accessibility.', "Launching the development server using 'npm start' command and accessing the default React application on localhost:3000 showcases the successful setup of the development environment."]}, {'end': 2714.302, 'segs': [{'end': 1849.959, 'src': 'embed', 'start': 1805.212, 'weight': 0, 'content': [{'end': 1810.177, 'text': 'first and foremost, we are going to recreate this application, uh, from the scratch,', 'start': 1805.212, 'duration': 4.965}, {'end': 1817.225, 'text': "and then we are going to create our own application and we'll understand more about the working and the functionality of a react application.", 'start': 1810.177, 'duration': 7.048}, {'end': 1823.794, 'text': "Okay so, let's take a quick tour of the React documentation.", 'start': 1817.873, 'duration': 5.921}, {'end': 1828.915, 'text': "Okay, so let's quickly jump on to the main concept.", 'start': 1824.214, 'duration': 4.701}, {'end': 1832.056, 'text': "So you're gonna see a lot of things going upon in the React.", 'start': 1828.955, 'duration': 3.101}, {'end': 1837.457, 'text': 'Things that you can read after watching this video, I highly recommend not to go like too much in depth.', 'start': 1832.996, 'duration': 4.461}, {'end': 1840.357, 'text': 'Just have a look onto this component and the props.', 'start': 1837.937, 'duration': 2.42}, {'end': 1844.258, 'text': 'So these are the, this is the one thing that you might want to study a little bit.', 'start': 1840.577, 'duration': 3.681}, {'end': 1849.959, 'text': 'A little bit study should be done absolutely 100% on state and the lifecycle events as well.', 'start': 1844.838, 'duration': 5.121}], 'summary': 'Recreating application, learning react concepts, study component, props, state, and lifecycle events.', 'duration': 44.747, 'max_score': 1805.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM1805212.jpg'}, {'end': 1942.725, 'src': 'embed', 'start': 1916.539, 'weight': 3, 'content': [{'end': 1921.704, 'text': 'So remember, while installing dependencies, we saw that we have React, React DOM, and React scripts.', 'start': 1916.539, 'duration': 5.165}, {'end': 1924.486, 'text': 'So one of the things that we want to import is the React.', 'start': 1922.184, 'duration': 2.302}, {'end': 1931.013, 'text': 'So all the automatic functionality, like virtual DOM reload and stuff, is gonna automatically come as soon as you write this line.', 'start': 1924.506, 'duration': 6.507}, {'end': 1935.577, 'text': 'okay, moving further, we want to import a logo as well.', 'start': 1931.653, 'duration': 3.924}, {'end': 1940.223, 'text': 'uh, in case you remember that, we do have a logo going up here as well.', 'start': 1935.577, 'duration': 4.646}, {'end': 1942.725, 'text': 'remember this logo.svg.', 'start': 1940.223, 'duration': 2.502}], 'summary': 'Installing react dependencies for automatic functionality and importing a logo.svg.', 'duration': 26.186, 'max_score': 1916.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM1916539.jpg'}, {'end': 2001.382, 'src': 'embed', 'start': 1974.302, 'weight': 5, 'content': [{'end': 1978.626, 'text': "Usually it gives me a suggestion, sometimes it's not really happy with me, so it doesn't give me any of that.", 'start': 1974.302, 'duration': 4.324}, {'end': 1981.408, 'text': 'So there we go, logo is imported.', 'start': 1979.226, 'duration': 2.182}, {'end': 1986.353, 'text': 'Okay, and notice one more stuff here, app.css.', 'start': 1981.428, 'duration': 4.925}, {'end': 1988.875, 'text': 'There are some CSS files available to us.', 'start': 1986.813, 'duration': 2.062}, {'end': 1995.98, 'text': 'Notice here app app, logo, app header, app link and some of the keyframes to rotate the logo as well.', 'start': 1989.055, 'duration': 6.925}, {'end': 1997.901, 'text': 'so these are coming up from here.', 'start': 1995.98, 'duration': 1.921}, {'end': 2001.382, 'text': "i'm not going to rewrite the css because it's not a crash course on css.", 'start': 1997.901, 'duration': 3.481}], 'summary': 'Transcript covers importing logo and examining css files for app development.', 'duration': 27.08, 'max_score': 1974.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM1974302.jpg'}, {'end': 2071.556, 'src': 'embed', 'start': 2043.596, 'weight': 2, 'content': [{'end': 2045.997, 'text': 'functional-based components are pretty easy to create.', 'start': 2043.596, 'duration': 2.401}, {'end': 2049.54, 'text': 'All you have to do is create a function and then export it out.', 'start': 2046.898, 'duration': 2.642}, {'end': 2055.824, 'text': 'Now, what happens after we export it out? Actually, that is being automatically handled by your index.js.', 'start': 2050.179, 'duration': 5.645}, {'end': 2060.728, 'text': "It expects you that you're always going to pass on this app from this app.", 'start': 2056.364, 'duration': 4.364}, {'end': 2065.051, 'text': "So that's all being taken care of here directly by the service workers.", 'start': 2061.348, 'duration': 3.703}, {'end': 2067.393, 'text': 'But right now, we can just go for that.', 'start': 2065.972, 'duration': 1.421}, {'end': 2068.734, 'text': 'So we are going to create app.', 'start': 2067.493, 'duration': 1.241}, {'end': 2070.675, 'text': 'and there we go.', 'start': 2069.754, 'duration': 0.921}, {'end': 2071.556, 'text': 'we have created that.', 'start': 2070.675, 'duration': 0.881}], 'summary': 'Creating functional-based components is easy, handled by index.js and service workers.', 'duration': 27.96, 'max_score': 2043.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM2043596.jpg'}, {'end': 2241.467, 'src': 'embed', 'start': 2215.691, 'weight': 4, 'content': [{'end': 2220.814, 'text': 'and notice in the error it says itself jsx expression must have one parent element.', 'start': 2215.691, 'duration': 5.123}, {'end': 2222.455, 'text': 'there are two things we learned up here.', 'start': 2220.814, 'duration': 1.641}, {'end': 2228.139, 'text': "first and foremost, it's not html, it is jsx, hence proved, and you can only return one element.", 'start': 2222.455, 'duration': 5.684}, {'end': 2231.721, 'text': 'so how do we go away from this kind of stuff?', 'start': 2228.139, 'duration': 3.582}, {'end': 2236.004, 'text': 'the usual way of going away from that is wrap up everything inside a division.', 'start': 2231.721, 'duration': 4.283}, {'end': 2238.546, 'text': "so that's like the most easiest stuff that you can get away.", 'start': 2236.004, 'duration': 2.542}, {'end': 2241.467, 'text': 'Cut that out and just paste it up here.', 'start': 2239.086, 'duration': 2.381}], 'summary': 'Jsx expression must have one parent element, solved by wrapping everything inside a division.', 'duration': 25.776, 'max_score': 2215.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM2215691.jpg'}, {'end': 2548.839, 'src': 'embed', 'start': 2524.444, 'weight': 7, 'content': [{'end': 2531.748, 'text': "So what are these states and component? Component simply, in order to understand the state and prop, let's talk about it a little bit.", 'start': 2524.444, 'duration': 7.304}, {'end': 2534.31, 'text': 'The prop simply means properties.', 'start': 2532.309, 'duration': 2.001}, {'end': 2540.874, 'text': 'Whenever you want to pass on information from one component to another component, we use props or properties.', 'start': 2534.87, 'duration': 6.004}, {'end': 2548.839, 'text': 'For example, there is a separate file which says basic button information and there is some text in the button that need to be passed on.', 'start': 2541.414, 'duration': 7.425}], 'summary': 'Components pass information using props in react.', 'duration': 24.395, 'max_score': 2524.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM2524444.jpg'}, {'end': 2629.915, 'src': 'embed', 'start': 2600.797, 'weight': 8, 'content': [{'end': 2606.6, 'text': 'But, as we saw right now when we were talking about this intermediate stuff, about this hooks,', 'start': 2600.797, 'duration': 5.803}, {'end': 2615.806, 'text': 'hooks is a new introduction in the React which helps us and allows us to have some of the more APIs through which we can actually store this state.', 'start': 2606.6, 'duration': 9.206}, {'end': 2624.671, 'text': 'So this line exactly up here, let me assume that this line exactly here is responsible for storing kind of a state in the functional component.', 'start': 2615.846, 'duration': 8.825}, {'end': 2629.915, 'text': 'so we can go ahead and use this format to store our state or an equivalent class.', 'start': 2625.171, 'duration': 4.744}], 'summary': 'React introduces hooks to store state in functional components.', 'duration': 29.118, 'max_score': 2600.797, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM2600797.jpg'}], 'start': 1805.212, 'title': 'React application basics', 'summary': 'Covers recreating an application in react, focusing on components, props, state, and lifecycle events. it also details creating a react app, emphasizing the need for a single parent element in jsx. additionally, it provides a crash course on react, covering classes, jsx, states, props, and transitioning from class-based to functional components.', 'chapters': [{'end': 1873.807, 'start': 1805.212, 'title': 'React application basics', 'summary': 'Covers the process of recreating an application from scratch to understand the working and functionality of a react application, focusing on key concepts like components, props, state, and lifecycle events.', 'duration': 68.595, 'highlights': ['Recreating the application from scratch The process involves recreating the application from the scratch to develop a deeper understanding of the working and functionality of a React application.', "Understanding components and props It's important to focus on understanding components and props, which are vital concepts in React development.", 'Studying state and lifecycle events A significant emphasis is placed on studying state and lifecycle events, essential for React application development.']}, {'end': 2236.004, 'start': 1873.807, 'title': 'React app creation basics', 'summary': 'Covers the basics of creating a react app, including deleting existing code, importing react and a logo, importing css, creating functional-based components, and returning jsx elements, emphasizing the need for a single parent element in jsx.', 'duration': 362.197, 'highlights': ['Creating functional-based components are pretty easy to create. Functional-based components are emphasized for ease of creation.', 'Importing React, including automatic functionality like virtual DOM reload, is important. Emphasizes the importance of importing React, enabling automatic functionality like virtual DOM reload.', 'Emphasizes the need for a single parent element in JSX. The importance of having a single parent element in JSX is highlighted.', 'Importing CSS and the logo is demonstrated. Demonstrates the process of importing CSS and a logo.']}, {'end': 2714.302, 'start': 2236.004, 'title': 'React crash course', 'summary': 'Covers the basics of react, including handling classes, utilizing jsx, understanding states and props, and the introduction of hooks, providing an overview of the key concepts and challenges in transitioning from class-based components to functional components.', 'duration': 478.298, 'highlights': ['The chapter covers the basics of React, including handling classes, utilizing JSX, understanding states and props, and the introduction of hooks. The basics of React, handling classes, utilizing JSX, understanding states and props, introduction of hooks', 'Props are used to pass information from one component to another, such as passing text in a button. Props used to pass information between components', 'State is a central place storing variables, and hooks like useState and setState are used for updating the state. State as a central variable store, usage of hooks like useState and setState', "The transition from class-based components to functional components is highlighted, emphasizing the challenges in understanding 'this' keyword and introducing hooks like useState. Challenges in transitioning from class-based to functional components, understanding 'this' keyword, introduction of hooks"]}], 'duration': 909.09, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM1805212.jpg', 'highlights': ['Recreating the application from scratch to understand React deeply', 'Understanding components, props, state, and lifecycle events is vital in React development', 'Emphasizing the ease of creating functional-based components', 'Importing React for automatic functionality like virtual DOM reload is important', 'Highlighting the need for a single parent element in JSX', 'Demonstrating the process of importing CSS and a logo', 'Covering basics of React, including classes, JSX, states, props, and introduction of hooks', 'Emphasizing the use of props to pass information between components', 'Explaining state as a central variable store and the usage of hooks like useState and setState', 'Highlighting the challenges in transitioning from class-based to functional components and introducing hooks like useState']}, {'end': 3180.772, 'segs': [{'end': 2747.378, 'src': 'embed', 'start': 2714.302, 'weight': 1, 'content': [{'end': 2719.426, 'text': "so that's like the basic of it and surely, uh, you can work without the hooks as well.", 'start': 2714.302, 'duration': 5.124}, {'end': 2724.611, 'text': "the only difference is you're gonna get is if you're not using the hooks, then you have to use the class based component.", 'start': 2719.426, 'duration': 5.185}, {'end': 2730.176, 'text': "if you're using the hooks, then you can just directly use this one liner and can go and get away from that.", 'start': 2724.611, 'duration': 5.565}, {'end': 2730.896, 'text': 'so there we go.', 'start': 2730.176, 'duration': 0.72}, {'end': 2732.678, 'text': "now you're on to the intermediate scale.", 'start': 2730.896, 'duration': 1.782}, {'end': 2734.059, 'text': 'you were able to understand me there.', 'start': 2732.678, 'duration': 1.381}, {'end': 2736.001, 'text': "ah, that's nice, that's awesome.", 'start': 2734.059, 'duration': 1.942}, {'end': 2747.378, 'text': "Okay, so let's go ahead and do some of the fun stuff into the React as well.", 'start': 2740.413, 'duration': 6.965}], 'summary': 'Using hooks in react enables one-liner code, eliminating the need for class-based components.', 'duration': 33.076, 'max_score': 2714.302, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM2714302.jpg'}, {'end': 2950.442, 'src': 'embed', 'start': 2922.48, 'weight': 0, 'content': [{'end': 2924.821, 'text': 'so hopefully the logo is imported now.', 'start': 2922.48, 'duration': 2.341}, {'end': 2928.023, 'text': 'and last but not the least, we are going to import the css as well.', 'start': 2924.821, 'duration': 3.202}, {'end': 2932.025, 'text': "so i'm going to simply say dot slash app, dot css.", 'start': 2928.023, 'duration': 4.002}, {'end': 2934.826, 'text': "i'm going to write my own customized css for that one.", 'start': 2932.025, 'duration': 2.801}, {'end': 2937.328, 'text': 'so we are going to work on that little bit later.', 'start': 2934.826, 'duration': 2.502}, {'end': 2942.113, 'text': "Now let's go ahead and we have already created a functional component.", 'start': 2938.089, 'duration': 4.024}, {'end': 2944.956, 'text': 'Now we are going to create a class based component.', 'start': 2942.454, 'duration': 2.502}, {'end': 2948.3, 'text': "Again, it's almost exactly same that how we do that.", 'start': 2945.457, 'duration': 2.843}, {'end': 2950.442, 'text': 'But a couple of stuff goes here and there.', 'start': 2948.38, 'duration': 2.062}], 'summary': 'Imported logo and css, created functional and class-based components.', 'duration': 27.962, 'max_score': 2922.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM2922480.jpg'}, {'end': 3118.24, 'src': 'embed', 'start': 3092.418, 'weight': 2, 'content': [{'end': 3097.502, 'text': "Now, in this I'm going to also mention a couple of properties like width is going to be 100..", 'start': 3092.418, 'duration': 5.084}, {'end': 3103.908, 'text': 'Now in the React, you actually technically through other ways you can mention the pixels and the RAMs and all of that.', 'start': 3097.502, 'duration': 6.406}, {'end': 3110.793, 'text': 'But React and React Native both actually are trying to go into the way where they automatically do all these stuff.', 'start': 3104.568, 'duration': 6.225}, {'end': 3115.738, 'text': "So all you have to do is write 100 and it's going to evaluate the things based on the browser.", 'start': 3110.813, 'duration': 4.925}, {'end': 3118.24, 'text': 'So we can have a separate talk on that probably later.', 'start': 3115.758, 'duration': 2.482}], 'summary': 'React and react native automate property evaluations, simplifying development.', 'duration': 25.822, 'max_score': 3092.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3092418.jpg'}], 'start': 2714.302, 'title': 'React component development', 'summary': 'Covers the basics of react hooks and class components, including importing custom logos and css, creating functional and class-based components, adding images with specific properties and defining css classes, and using modern html5 syntax and dynamic evaluation of values in react.', 'chapters': [{'end': 3008.864, 'start': 2714.302, 'title': 'React hooks and class components', 'summary': 'Covers the basics of react hooks and class components, including the process of importing custom logos and css, as well as creating functional and class-based components.', 'duration': 294.562, 'highlights': ['The process of importing custom logos and CSS is explained, emphasizing the flexibility of naming variables and the import process. The speaker mentions the process of importing a custom logo and CSS, highlighting the flexibility in naming variables during the import process.', 'Instructions for creating functional and class-based components are provided, with a focus on the necessary syntax and methods involved. The speaker provides instructions for creating functional and class-based components, emphasizing the necessary syntax and methods involved in the process.', 'The significance of using React hooks and class-based components is discussed, highlighting the difference in usage and the benefits of each approach. The speaker discusses the significance of using React hooks and class-based components, highlighting the difference in usage and the benefits of each approach.']}, {'end': 3180.772, 'start': 3008.904, 'title': 'Developing react component', 'summary': 'Covers the development of a react component, including adding an image with specific properties and defining css classes, while emphasizing the use of modern html5 syntax and dynamic evaluation of values in react.', 'duration': 171.868, 'highlights': ['The chapter covers the development of a React component It includes creating functional and class-based components and writing some amazing stuff.', 'Adding an image with specific properties and defining CSS classes The transcript details the process of adding an image with specified properties like width and using modern HTML5 syntax, along with defining CSS classes for the component.', "Emphasizing the use of modern HTML5 syntax and dynamic evaluation of values in React The use of modern HTML5 syntax for blocks and sections is mentioned, along with the dynamic evaluation of values in React, where simply writing '100' evaluates the dimensions based on the browser."]}], 'duration': 466.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM2714302.jpg', 'highlights': ['The process of importing custom logos and CSS is explained, emphasizing the flexibility of naming variables and the import process.', 'The significance of using React hooks and class-based components is discussed, highlighting the difference in usage and the benefits of each approach.', 'Adding an image with specific properties and defining CSS classes, including modern HTML5 syntax and dynamic evaluation of values in React, is covered.']}, {'end': 3530.095, 'segs': [{'end': 3205.537, 'src': 'embed', 'start': 3180.772, 'weight': 0, 'content': [{'end': 3188.804, 'text': "then we are gonna go ahead and do some of the classic stuff with the logo and we're gonna make a display of block.", 'start': 3180.772, 'duration': 8.032}, {'end': 3190.507, 'text': 'okay, no big deal.', 'start': 3188.804, 'duration': 1.703}, {'end': 3197.954, 'text': "we're gonna simply say margin at left is gonna be auto and a margin on the right is going to be auto.", 'start': 3190.507, 'duration': 7.447}, {'end': 3205.537, 'text': "and in case you're wondering how i'm able to write just by writing ml and mr, this is something which comes in default by vs code known as emit.", 'start': 3197.954, 'duration': 7.583}], 'summary': "Creating a display block with auto margins for left and right using vs code's emit feature.", 'duration': 24.765, 'max_score': 3180.772, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3180772.jpg'}, {'end': 3284.534, 'src': 'embed', 'start': 3253.773, 'weight': 3, 'content': [{'end': 3255.174, 'text': 'This is gonna be app.title.', 'start': 3253.773, 'duration': 1.401}, {'end': 3257.855, 'text': 'Okay, looks pretty good to me.', 'start': 3256.294, 'duration': 1.561}, {'end': 3264.999, 'text': "Once I'm outside of that, I'm gonna create a simple div whose class is gonna be container, there we go.", 'start': 3258.675, 'duration': 6.324}, {'end': 3268.761, 'text': 'And my ES6 works in the JSX as well, so no big deal.', 'start': 3265.499, 'duration': 3.262}, {'end': 3275.627, 'text': "We're going to simply say add, add an item, dot dot dot, just like that.", 'start': 3269.361, 'duration': 6.266}, {'end': 3279.35, 'text': 'After that, we are going to have a simple line break.', 'start': 3276.808, 'duration': 2.542}, {'end': 3281.813, 'text': 'Command Z, Command Z.', 'start': 3280.692, 'duration': 1.121}, {'end': 3283.974, 'text': 'Command Z.', 'start': 3283.294, 'duration': 0.68}, {'end': 3284.534, 'text': 'Add an item.', 'start': 3283.974, 'duration': 0.56}], 'summary': 'Creating a jsx app with es6, adding items and undoing actions.', 'duration': 30.761, 'max_score': 3253.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3253773.jpg'}, {'end': 3519.832, 'src': 'embed', 'start': 3493.471, 'weight': 1, 'content': [{'end': 3499.194, 'text': 'So technically, our displayed stuff is all going up here, but there is nothing of the React that we are using.', 'start': 3493.471, 'duration': 5.723}, {'end': 3504.996, 'text': "So what we need to do is, first and foremost, let's just write the CSS because it's too hard to work on the ugly stuff.", 'start': 3499.834, 'duration': 5.162}, {'end': 3508.138, 'text': 'Let me quickly fast forward the video and write some CSS.', 'start': 3505.817, 'duration': 2.321}, {'end': 3519.832, 'text': "okay. so not an award-winning job that we have done here, but yeah it's looking a little bit better and more visually pleasing a little bit, please,", 'start': 3512.009, 'duration': 7.823}], 'summary': 'Adding css improved visual appeal, but no react used.', 'duration': 26.361, 'max_score': 3493.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3493471.jpg'}], 'start': 3180.772, 'title': 'Css display and margins', 'summary': 'Discusses setting margins using auto for a logo display block, utilizing default emit feature in vs code, and the ease of styling with css.', 'chapters': [{'end': 3226.951, 'start': 3180.772, 'title': 'Css display and margins', 'summary': 'Discusses setting margins using auto for a logo display block, utilizing default emit feature in vs code, and the ease of styling with css.', 'duration': 46.179, 'highlights': ['Using margin-left and margin-right set to auto for creating a display block for a logo.', 'Utilizing the default emit feature in VS Code for quick code generation.', 'Demonstrating the ease of styling with CSS.']}, {'end': 3530.095, 'start': 3227.051, 'title': 'Creating a simple todo app with react', 'summary': 'Covers the process of creating a simple todo app using react, focusing on the html structure, css styling, and the use of jsx and es6 features, with a primary emphasis on the visual presentation and layout.', 'duration': 303.044, 'highlights': ['The chapter covers the process of creating a simple todo app using React, focusing on the HTML structure, CSS styling, and the use of JSX and ES6 features, with a primary emphasis on the visual presentation and layout.', 'The speaker demonstrates the use of JSX and ES6 features such as class names, input types, placeholders, and div elements, emphasizing the simplicity and practicality of the implementation.', 'Detailed explanation and implementation of HTML structure, including the use of H1 tags, div containers, input elements, and button elements, with a focus on the visual presentation and layout.', 'The demonstration includes the usage of CSS for styling the HTML elements, with a focus on visual presentation and layout enhancements, showcasing the practical implementation of CSS for improved visual appeal.']}], 'duration': 349.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3180772.jpg', 'highlights': ['Utilizing the default emit feature in VS Code for quick code generation.', 'Demonstrating the ease of styling with CSS.', 'The demonstration includes the usage of CSS for styling the HTML elements, with a focus on visual presentation and layout enhancements, showcasing the practical implementation of CSS for improved visual appeal.', 'The chapter covers the process of creating a simple todo app using React, focusing on the HTML structure, CSS styling, and the use of JSX and ES6 features, with a primary emphasis on the visual presentation and layout.']}, {'end': 3885.362, 'segs': [{'end': 3593.719, 'src': 'embed', 'start': 3567.124, 'weight': 0, 'content': [{'end': 3571.066, 'text': 'And by the term invoked, I simply means whenever the class is being created.', 'start': 3567.124, 'duration': 3.942}, {'end': 3574.788, 'text': 'Exactly same kind of a thing we can do in the React as well.', 'start': 3571.667, 'duration': 3.121}, {'end': 3578.431, 'text': 'We can create a constructor which can hold the default things up here.', 'start': 3575.329, 'duration': 3.102}, {'end': 3582.833, 'text': 'Now this default thing is also going to store the state as well.', 'start': 3578.991, 'duration': 3.842}, {'end': 3586.615, 'text': 'Remember I talked about the state in the functional as well as in the class-based component.', 'start': 3582.893, 'duration': 3.722}, {'end': 3592.018, 'text': 'Now you can have class in both of them, in the functional using hooks, in the class by using constructor.', 'start': 3587.095, 'duration': 4.923}, {'end': 3593.719, 'text': 'So feel free to use whatever you like.', 'start': 3592.438, 'duration': 1.281}], 'summary': 'In react, a constructor can hold default things and store state in class-based components.', 'duration': 26.595, 'max_score': 3567.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3567124.jpg'}, {'end': 3661.882, 'src': 'embed', 'start': 3631.5, 'weight': 1, 'content': [{'end': 3634.222, 'text': 'So again, we are going to call this super props.', 'start': 3631.5, 'duration': 2.722}, {'end': 3636.324, 'text': "So that's the syntax that we follow up here.", 'start': 3634.282, 'duration': 2.042}, {'end': 3638.585, 'text': "Now let's create the state.", 'start': 3636.984, 'duration': 1.601}, {'end': 3645.77, 'text': 'So we create the state by saying this dot state and state is nothing more than an object.', 'start': 3638.765, 'duration': 7.005}, {'end': 3646.531, 'text': 'There we go.', 'start': 3646.11, 'duration': 0.421}, {'end': 3646.891, 'text': "That's it.", 'start': 3646.571, 'duration': 0.32}, {'end': 3649.573, 'text': "So, in the state, what we're going to have?", 'start': 3647.511, 'duration': 2.062}, {'end': 3655.057, 'text': 'first and foremost, we are going to have an array of list which is going to store all the list items that we have.', 'start': 3649.573, 'duration': 5.484}, {'end': 3658.659, 'text': "And not only that, it's going to store a new item.", 'start': 3655.677, 'duration': 2.982}, {'end': 3661.882, 'text': 'Okay, so new item is initially empty.', 'start': 3659.8, 'duration': 2.082}], 'summary': 'Creating state with an array of list items and a new empty item.', 'duration': 30.382, 'max_score': 3631.5, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3631500.jpg'}, {'end': 3694.028, 'src': 'embed', 'start': 3669.248, 'weight': 3, 'content': [{'end': 3675.233, 'text': 'As soon as we are going to add a new list item, that list item is going to go into the new item first.', 'start': 3669.248, 'duration': 5.985}, {'end': 3680.617, 'text': 'Once that new item is being fetched or we have any new value in the list, a new item,', 'start': 3675.893, 'duration': 4.724}, {'end': 3686.442, 'text': "we're going to push that value into the list so that we have an entire array of the to-dos.", 'start': 3680.617, 'duration': 5.825}, {'end': 3694.028, 'text': "once we have an array of these to do's, we are going to just loop through over them and we are going to display them in our to-do list.", 'start': 3687.162, 'duration': 6.866}], 'summary': 'New list items are added and displayed in a to-do list array.', 'duration': 24.78, 'max_score': 3669.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3669248.jpg'}, {'end': 3755.299, 'src': 'embed', 'start': 3725.074, 'weight': 4, 'content': [{'end': 3729.498, 'text': "We're gonna take the value from our input field and we're gonna fetch that into this method.", 'start': 3725.074, 'duration': 4.424}, {'end': 3731.56, 'text': 'And that value is to do value.', 'start': 3730.018, 'duration': 1.542}, {'end': 3737.365, 'text': 'Okay, so how do we go ahead and do that? First and foremost, a quick check that we want to do.', 'start': 3732.08, 'duration': 5.285}, {'end': 3745.672, 'text': 'And we want to do a quick check of if to do a value is not equals to empty, then only we want to proceed.', 'start': 3737.785, 'duration': 7.887}, {'end': 3747.193, 'text': "Otherwise, it's empty.", 'start': 3745.692, 'duration': 1.501}, {'end': 3755.299, 'text': "Why do we want to process anything? So, what we're gonna do is, first and foremost, we are gonna create a new item with the unique ID.", 'start': 3747.293, 'duration': 8.006}], 'summary': 'Method fetches input value, checks if not empty, creates new item with unique id', 'duration': 30.225, 'max_score': 3725.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3725074.jpg'}, {'end': 3794.896, 'src': 'embed', 'start': 3768.126, 'weight': 2, 'content': [{'end': 3773.668, 'text': 'Apart from that, you can store it in the database, you can store it in the local storage, so possibilities and usage are endless.', 'start': 3768.126, 'duration': 5.542}, {'end': 3779.27, 'text': "So we're going to simply say const, we're going to call this as new item, and let's create an object.", 'start': 3773.688, 'duration': 5.582}, {'end': 3780.331, 'text': 'So how do we create?', 'start': 3779.61, 'duration': 0.721}, {'end': 3784.012, 'text': 'This object is going to have a couple of properties id.', 'start': 3780.851, 'duration': 3.161}, {'end': 3784.532, 'text': 'the id.', 'start': 3784.012, 'duration': 0.52}, {'end': 3786.453, 'text': 'we can use simply date.now.', 'start': 3784.532, 'duration': 1.921}, {'end': 3790.134, 'text': "oh, that's different data.", 'start': 3786.453, 'duration': 3.681}, {'end': 3794.896, 'text': "date.now to get a unique value, because every time it's going to have a new value.", 'start': 3790.134, 'duration': 4.762}], 'summary': 'Demonstrating how to create an object with unique id using date.now', 'duration': 26.77, 'max_score': 3768.126, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3768126.jpg'}], 'start': 3530.095, 'title': 'React constructor, state, and array manipulation', 'summary': "Covers the creation of a constructor and state in a react class-based component, along with manipulating an array of to-do list items in javascript, emphasizing the syntax and processes involved in each. it also highlights the purpose of calling 'super(props)' and the steps for adding new items with unique ids to the list.", 'chapters': [{'end': 3649.573, 'start': 3530.095, 'title': 'React constructor and state', 'summary': "Discusses the creation of a constructor and state in a react class-based component, emphasizing the role of the constructor in initializing the state and the syntax involved, along with the purpose of calling 'super(props)'.", 'duration': 119.478, 'highlights': ['The constructor is the first thing created as soon as the class is invoked, holding default things and storing the state, which can be created in both functional and class-based components using hooks or constructor.', "To create the state in the constructor, 'this.state' is used to define the state as an object, and 'super(props)' is called to allow reading of properties thrown from other components into the file."]}, {'end': 3885.362, 'start': 3649.573, 'title': 'Array of list and adding new items', 'summary': 'Discusses the process of creating an array of to-do list items and adding new items using javascript, including creating a new item with a unique id, checking for a non-empty to-do value, and pushing the new item into the list.', 'duration': 235.789, 'highlights': ['Creating a new item with a unique ID using date.now The chapter explains the process of creating a new item with a unique ID using the JavaScript date.now function, enabling the ability to loop through the list and providing various storage possibilities.', 'Checking for a non-empty to-do value before proceeding The chapter emphasizes the importance of conducting a quick check for a non-empty to-do value before proceeding, ensuring that the value is not empty before processing it further.', 'Pushing the new item into the list using the push method The chapter details the process of using the push method to add the new item to the list, effectively appending the new item to the existing list of to-do items.']}], 'duration': 355.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3530095.jpg', 'highlights': ['The constructor is the first thing created as soon as the class is invoked, holding default things and storing the state, which can be created in both functional and class-based components using hooks or constructor.', "To create the state in the constructor, 'this.state' is used to define the state as an object, and 'super(props)' is called to allow reading of properties thrown from other components into the file.", 'Creating a new item with a unique ID using date.now The chapter explains the process of creating a new item with a unique ID using the JavaScript date.now function, enabling the ability to loop through the list and providing various storage possibilities.', 'Pushing the new item into the list using the push method The chapter details the process of using the push method to add the new item to the list, effectively appending the new item to the existing list of to-do items.', 'Checking for a non-empty to-do value before proceeding The chapter emphasizes the importance of conducting a quick check for a non-empty to-do value before proceeding, ensuring that the value is not empty before processing it further.']}, {'end': 4939.234, 'segs': [{'end': 3957.764, 'src': 'embed', 'start': 3931.163, 'weight': 1, 'content': [{'end': 3937.688, 'text': 'whenever you want to update anything inside the state, you never touch the state directly in the react.', 'start': 3931.163, 'duration': 6.525}, {'end': 3943.053, 'text': 'you always touch that state by using the set state method.', 'start': 3937.688, 'duration': 5.365}, {'end': 3945.495, 'text': 'end of the story, okay, So how do I do that?', 'start': 3943.053, 'duration': 2.442}, {'end': 3949.337, 'text': 'I use a simple object up here and I say I want to update.', 'start': 3945.795, 'duration': 3.542}, {'end': 3952.44, 'text': 'What are the things you want to update? I want to update the list.', 'start': 3949.898, 'duration': 2.542}, {'end': 3957.764, 'text': 'I also want to update one more thing, which is my new item.', 'start': 3953.54, 'duration': 4.224}], 'summary': 'In react, always use setstate method to update state, never touch state directly.', 'duration': 26.601, 'max_score': 3931.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3931163.jpg'}, {'end': 4100.853, 'src': 'embed', 'start': 4063.79, 'weight': 2, 'content': [{'end': 4067.233, 'text': "And in my JavaScript series, I've talked about these methods a lot.", 'start': 4063.79, 'duration': 3.443}, {'end': 4069.837, 'text': "Okay, so we're gonna use a filter.", 'start': 4068.436, 'duration': 1.401}, {'end': 4073.719, 'text': 'Now filter is a method which expects you to pass on a callback.', 'start': 4070.237, 'duration': 3.482}, {'end': 4088.106, 'text': "So we're gonna use the item arrow function and then we are gonna simply say item.id when it is not equal to id.", 'start': 4074.039, 'duration': 14.067}, {'end': 4090.347, 'text': 'So what this line is going to do?', 'start': 4088.626, 'duration': 1.721}, {'end': 4100.853, 'text': "this line is going to create an updated list and it's going to fill up all the things inside it, but it's going to skip the one item,", 'start': 4091.127, 'duration': 9.726}], 'summary': 'Javascript series discusses filter method with item.id comparison.', 'duration': 37.063, 'max_score': 4063.79, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM4063790.jpg'}, {'end': 4281.213, 'src': 'embed', 'start': 4253.764, 'weight': 3, 'content': [{'end': 4258.486, 'text': 'okay, so as soon as something is being changed inside this input box,', 'start': 4253.764, 'duration': 4.722}, {'end': 4267.77, 'text': 'we are going to call this one and this is going to update this new item variable which is also present in our uh state.', 'start': 4258.486, 'duration': 9.284}, {'end': 4269.851, 'text': 'so we want to actually update this one up here.', 'start': 4267.77, 'duration': 2.081}, {'end': 4275.392, 'text': 'okay, so that whatever the item we are filling it up, it actually reaches up to the state.', 'start': 4269.851, 'duration': 5.541}, {'end': 4281.213, 'text': 'so we can call a method which says on change and in the on change, we can provide this stuff.', 'start': 4275.392, 'duration': 5.821}], 'summary': 'Updating input box triggers method to update new item variable in state.', 'duration': 27.449, 'max_score': 4253.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM4253764.jpg'}, {'end': 4410.234, 'src': 'embed', 'start': 4384.105, 'weight': 4, 'content': [{'end': 4390.627, 'text': 'So we need an onClick method that needs to call something to update all this state up here so that we can work on it.', 'start': 4384.105, 'duration': 6.522}, {'end': 4393.628, 'text': 'So we need to work on the method which says addItem.', 'start': 4390.667, 'duration': 2.961}, {'end': 4400.471, 'text': 'And remember, what we have done in the addItem, we have performed all this stuff, the magical stuff that has been going on.', 'start': 4394.188, 'duration': 6.283}, {'end': 4404.852, 'text': 'So next up is we can just simply go ahead and do that.', 'start': 4400.971, 'duration': 3.881}, {'end': 4410.234, 'text': "Let's go ahead and where are you? There we go.", 'start': 4405.312, 'duration': 4.922}], 'summary': 'Developing an onclick method to update state and add an item for further processing.', 'duration': 26.129, 'max_score': 4384.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM4384105.jpg'}, {'end': 4482.321, 'src': 'embed', 'start': 4452.198, 'weight': 5, 'content': [{'end': 4459.742, 'text': "uh, it's, it's a little bit unnecessary at this moment, but we can actually use a disabled keyword up here and this can work.", 'start': 4452.198, 'duration': 7.544}, {'end': 4465.866, 'text': 'something like this uh, we can simply say, if not this dot.', 'start': 4459.742, 'duration': 6.124}, {'end': 4474.493, 'text': 'So how this is actually working?', 'start': 4467.147, 'duration': 7.346}, {'end': 4477.156, 'text': 'this is a little bit trick that everybody uses in their React.', 'start': 4474.493, 'duration': 2.663}, {'end': 4480.859, 'text': 'Because this state, this is right now the length is zero.', 'start': 4477.917, 'duration': 2.942}, {'end': 4482.321, 'text': 'So zero is treated as false.', 'start': 4480.879, 'duration': 1.442}], 'summary': 'Using a disabled keyword and a trick to handle react state length of zero.', 'duration': 30.123, 'max_score': 4452.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM4452198.jpg'}, {'end': 4649.011, 'src': 'embed', 'start': 4620.471, 'weight': 7, 'content': [{'end': 4623.293, 'text': "Actually, if you don't use the key, then it's going to give you a warning.", 'start': 4620.471, 'duration': 2.822}, {'end': 4630.298, 'text': 'So in the React, we have a thing that says, if you want to loop through, make sure you prove that everything is unique, which you are looping through.', 'start': 4623.774, 'duration': 6.524}, {'end': 4636.142, 'text': 'There might be chances that you are looping through a value, which is just like same value.', 'start': 4631.699, 'duration': 4.443}, {'end': 4638.623, 'text': 'So we have to prove that every value is unique.', 'start': 4636.202, 'duration': 2.421}, {'end': 4641.385, 'text': 'And this item.id is responsible for that.', 'start': 4639.063, 'duration': 2.322}, {'end': 4643.407, 'text': 'now. surely there are other ways to prove that.', 'start': 4641.545, 'duration': 1.862}, {'end': 4649.011, 'text': 'yes, we are looping through a unique key every time, but you have to do it, otherwise it gives you a warning.', 'start': 4643.407, 'duration': 5.604}], 'summary': 'In react, using a unique key when looping through values is essential to avoid warnings. item.id is responsible for ensuring uniqueness.', 'duration': 28.54, 'max_score': 4620.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM4620471.jpg'}, {'end': 4903.776, 'src': 'embed', 'start': 4874.697, 'weight': 0, 'content': [{'end': 4880, 'text': 'We update the list with that, push that into the stuff, and then we update the item up here.', 'start': 4874.697, 'duration': 5.303}, {'end': 4885.324, 'text': 'And similarly we worked on the delete item pretty simple logics and stuff nothing groundbreaking,', 'start': 4880.66, 'duration': 4.664}, {'end': 4888.226, 'text': 'nothing absolutely extraordinary that we have done and worked up here.', 'start': 4885.324, 'duration': 2.902}, {'end': 4889.687, 'text': 'And there we go.', 'start': 4889.066, 'duration': 0.621}, {'end': 4892.148, 'text': 'We have created a simple React application.', 'start': 4889.707, 'duration': 2.441}, {'end': 4898.773, 'text': 'I do understand that this application is not very advanced because for the advanced, we require to have a separate dedicated course.', 'start': 4892.648, 'duration': 6.125}, {'end': 4903.776, 'text': "I do have a separate course where I've worked on Firebase, databases, and all those amazing stuff up here.", 'start': 4899.173, 'duration': 4.603}], 'summary': 'Developed a simple react application with basic functionalities.', 'duration': 29.079, 'max_score': 4874.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM4874697.jpg'}], 'start': 3885.422, 'title': 'React application basics', 'summary': 'Explains using disabled keyword to manage state, debug, and loop through data, presenting core features of react for adding and deleting items in a list.', 'chapters': [{'end': 3957.764, 'start': 3885.422, 'title': 'Updating state in react', 'summary': 'Discusses the importance of using the setstate method in react to update the state instead of directly modifying it, and the process involves using a simple object to define the updates for the state.', 'duration': 72.342, 'highlights': ['The setState method is crucial for updating anything inside the state in React, emphasizing the need to never directly touch the state but to use this method instead.', 'Using the setState method involves defining the updates using a simple object, specifying the elements to be updated such as the list and new items.']}, {'end': 4452.198, 'start': 3958.144, 'title': 'Managing item list in react', 'summary': 'Covers creating and deleting items in a react application, including the use of unique ids and javascript methods like filter, with a focus on the update input and add item methods.', 'duration': 494.054, 'highlights': ['The JavaScript filter method is used to create an updated list by skipping the item that matches the given ID, thus facilitating the deletion of items.', "The update input method is invoked when changes are made to an input box, updating the 'new item' variable in the state, demonstrating the handling of user input and state management.", "The add item method is called with the state's 'new item' as a parameter, showcasing the process of adding new items to the list in the React application."]}, {'end': 4939.234, 'start': 4452.198, 'title': 'React application basics', 'summary': 'Explains how to use a disabled keyword in react to manage state, debug and loop through data, presenting the core features of react like adding and deleting items in a list.', 'duration': 487.036, 'highlights': ['The chapter explains how to use a disabled keyword in React to manage state The speaker demonstrates using a disabled keyword to manage the state in React, where a specific trick is employed to change the disabled state based on the length of a list, with the length of zero being treated as false.', 'Presenting the core features of React like adding and deleting items in a list The chapter covers the core features of React, including adding items to a list, debugging, and deleting items from the list, showcasing the basic functionalities of a React application.', 'Debugging and looping through data The speaker discusses the process of debugging, emphasizing that debugging is a part of the code, and then proceeds to demonstrate how to loop through data in React using the map function and how to handle warnings related to unique keys.']}], 'duration': 1053.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/nvHeB32ICDM/pics/nvHeB32ICDM3885422.jpg', 'highlights': ['The chapter covers the core features of React, including adding items to a list, debugging, and deleting items from the list, showcasing the basic functionalities of a React application.', 'Using the setState method involves defining the updates using a simple object, specifying the elements to be updated such as the list and new items.', 'The JavaScript filter method is used to create an updated list by skipping the item that matches the given ID, thus facilitating the deletion of items.', "The update input method is invoked when changes are made to an input box, updating the 'new item' variable in the state, demonstrating the handling of user input and state management.", "The add item method is called with the state's 'new item' as a parameter, showcasing the process of adding new items to the list in the React application.", 'The speaker demonstrates using a disabled keyword to manage the state in React, where a specific trick is employed to change the disabled state based on the length of a list, with the length of zero being treated as false.', 'The setState method is crucial for updating anything inside the state in React, emphasizing the need to never directly touch the state but to use this method instead.', 'Debugging and looping through data The speaker discusses the process of debugging, emphasizing that debugging is a part of the code, and then proceeds to demonstrate how to loop through data in React using the map function and how to handle warnings related to unique keys.']}], 'highlights': ['The crash course is divided into four sections, including common beginner and intermediate questions about React.js, and explanation of jargon keywords associated with React.', 'The video is designed for beginners to understand React and work on a hands-on project, aiming to simplify the toughest topics in the easiest manner.', 'The course is available for free and includes exercise files, project files, and code files. The course is free and provides exercise, project, and code files for practice and learning.', 'The chapter covers the tools required for ReactJS and ensures cross-platform compatibility for Windows, Mac, and Linux users. The tools required for ReactJS are cross-platform, ensuring accessibility for users of Windows, Mac, and Linux.', 'The instructor encourages engagement in the discussion section to facilitate community learning and collaboration. The instructor encourages engagement in the discussion section for like-minded people to collaborate and help each other.', 'Feedback is sought from the viewers for future crash course topics, with the next topic to be chosen based on popularity. The viewers are invited to provide feedback on future crash course topics, with the next topic selection based on popularity.', 'The chapter emphasizes the importance of following along with the video to design the project in real-time for better understanding and practical application.', 'React.js features and compatibility React.js is an open-source library designed by Facebook, offering reusable components, fast reloading, and compatibility with any tech stack, making it popular among big companies.', 'Recent changes in ReactJS The introduction of hooks as a new feature in React.js, addressing the need for state management without reliance on libraries like Redux, while emphasizing the coexistence of class-based and functional components.', 'The chapter covers the jargons of the React JS world, including virtual DOM, props, state, class-based and functional components, and hooks. The main highlight of the chapter, providing an overview of the key topics covered.', 'Prerequisites for learning ReactJS ReactJS is simple to understand, but prior JavaScript knowledge is recommended; however, a crash course can provide an understanding of React.js for those with experience in other programming languages.', 'Mentions the informal nature of the crash course compared to other videos and the disclaimer that the crash course will be rushing through various topics. Important context about the format and pace of the crash course, setting expectations for the viewers.', 'Mentions the upcoming sections about the tools required for building a project. Provides a preview of the upcoming content, indicating the practical aspect of the crash course.', 'The package.json file is crucial for specifying project dependencies and scripts, simplifying the sharing of projects without including the node module folder.', 'The git ignore file prevents the uploading of specific files when updating a git repository, enhancing version control and repository management by excluding unnecessary files.', 'The popularity of React library with over 88,000 weekly downloads indicates its increasing adoption and relevance in the development community.', 'Steps to install Create React App using npm command, emphasizing the significance of global installation for accessibility.', "Launching the development server using 'npm start' command and accessing the default React application on localhost:3000 showcases the successful setup of the development environment.", 'Recr']}