title
Learn React JS - Full Course for Beginners - Tutorial 2019

description
React.js is a JavaScript library for building dynamic web applications. Upon completion of this course, you'll know everything you need in order to build web applications in React. You can also try the interactive version of the course here: https://scrimba.com/g/glearnreact This comprehensive introduction to React was created by Bob Ziroll (@bobziroll). Bob is the Director of Education at V School, an award-winning school of technology education. ?Tutorial Hell link mentioned in video: https://codeburst.io/digging-my-way-out-of-tutorial-hell-6dd5f9927384 ?Virtual DOM video mentioned: https://www.youtube.com/watch?v=BYbgopx44vo Check top comment to see what code you have to add to get React working locally. ⭐️Course Contents ⭐️ ⌨️ (0:00:00) Course Introduction & Philosophy ⌨️ (0:05:22) What we'll be building ⌨️ (0:06:24) Why React? ⌨️ (0:09:25) ReactDOM & JSX ⌨️ (0:16:19) ReactDOM & JSX Practice ⌨️ (0:20:34) Functional Components ⌨️ (0:24:32) Functional Components Practice ⌨️ (0:29:41) Move Components into Separate Files ⌨️ (0:35:07) Parent/Child Components ⌨️ (0:43:14) Parent/Child Component Practice ⌨️ (0:48:12) Todo App - Phase 1 ⌨️ (0:50:50) Styling React with CSS Classes ⌨️ (0:55:56) Some Caveats ⌨️ (0:58:12) JSX to JavaScript and Back ⌨️ (1:02:11) Inline Styles with the Style Property ⌨️ (1:09:21) Todo App - Phase 2 ⌨️ (1:12:42) Props Part 1 - Understanding the Concept ⌨️ (1:14:56) Props Part 2 - Reusable Components ⌨️ (1:17:29) Props in React ⌨️ (1:29:39) Props and Styling Practice ⌨️ (1:40:25) Mapping Components ⌨️ (1:48:27) Mapping Components Practice ⌨️ (1:53:44) Todo App - Phase 3 ⌨️ (1:58:16) Class-based Components ⌨️ (2:03:32) Class-based Components Practice ⌨️ (2:07:11) State ⌨️ (2:12:08) State Practice ⌨️ (2:15:45) State Practice 2 ⌨️ (2:19:59) Todo App - Phase 4 ⌨️ (2:22:05) Handling Events in React ⌨️ (2:25:52) Todo App - Phase 5 ⌨️ (2:27:11) Changing State ⌨️ (2:39:29) Todo App - Phase 6 ⌨️ (2:47:14) Lifecycle Methods Part 1 ⌨️ (2:56:45) Lifecycle Methods Part 2 ⌨️ (3:00:07) Conditional Rendering ⌨️ (3:11:26) Conditional Rendering Part 2 ⌨️ (3:14:21) Conditional rendering Practice ⌨️ (3:23:00) Todo App - Phase 7 ⌨️ (3:25:34) Fetching data from an API ⌨️ (3:36:34) Forms Part 1 ⌨️ (3:48:55) Forms Part 2 ⌨️ (4:00:11) Forms Practice ⌨️ (4:24:29) Container/Component Architecture ⌨️ (4:35:53) Meme Generator Capstone Project ⌨️ (4:56:11) Writing Modern React Apps ⌨️ (5:02:17) Project Ideas for Practicing ⌨️ (5:03:06) Conclusion -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'Learn React JS - Full Course for Beginners - Tutorial 2019', 'heatmap': [{'end': 3303.001, 'start': 3116.8, 'weight': 0.941}, {'end': 4407.952, 'start': 4221.343, 'weight': 0.997}, {'end': 6968.288, 'start': 5865.407, 'weight': 0.808}, {'end': 7705.908, 'start': 7519.133, 'weight': 0.849}, {'end': 10085.358, 'start': 9530.403, 'weight': 0.93}], 'summary': 'This full course on react js for beginners covers various concepts and practical applications, emphasizing active learning, spaced repetition, and the creation of reusable components, as well as transitioning from functional to class-based components, state management, conditional rendering, and form handling.', 'chapters': [{'end': 82.44, 'segs': [{'end': 64.845, 'src': 'embed', 'start': 22.904, 'weight': 0, 'content': [{'end': 30.447, 'text': 'which is a technology education school that teaches full-stack JavaScript and UX courses to those looking for a career change.', 'start': 22.904, 'duration': 7.543}, {'end': 36.949, 'text': "I've been teaching in the boot camp space since the very early days of boot camps, starting in 2014..", 'start': 31.107, 'duration': 5.842}, {'end': 42.931, 'text': 'Over the years of teaching and designing curriculum to help students learn difficult topics in a very short amount of time,', 'start': 36.949, 'duration': 5.982}, {'end': 46.152, 'text': "I've developed my own learning philosophy, which I think would be helpful to share.", 'start': 42.931, 'duration': 3.221}, {'end': 50.795, 'text': 'First of all, the easiest way to learn something is by doing it the hard way.', 'start': 46.952, 'duration': 3.843}, {'end': 56.639, 'text': "There's truly no substitute for getting your hands on code as soon and as often as possible.", 'start': 51.255, 'duration': 5.384}, {'end': 61.943, 'text': 'During our class orientation at v school, I typically give an analogy about myself.', 'start': 57.34, 'duration': 4.603}, {'end': 64.845, 'text': "So I've recently developed an interest in woodworking.", 'start': 62.343, 'duration': 2.502}], 'summary': 'Teaches full-stack javascript and ux courses, emphasizing hands-on learning.', 'duration': 41.941, 'max_score': 22.904, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4422904.jpg'}], 'start': 5.017, 'title': 'Introduction to react and learning philosophy', 'summary': 'Introduces react as a popular front-end web framework and emphasizes the importance of hands-on experience and practical application, with personal experiences and analogies to highlight the effectiveness of learning by doing.', 'chapters': [{'end': 82.44, 'start': 5.017, 'title': 'Introduction to react and learning philosophy', 'summary': "Introduces react as a popular front-end web framework and the speaker's learning philosophy, emphasizing the importance of hands-on experience and practical application. the speaker shares personal experiences and analogies to highlight the effectiveness of learning by doing.", 'duration': 77.423, 'highlights': ['The speaker is the director of education at a technology education school teaching full-stack JavaScript and UX courses, with experience in the boot camp space since 2014.', 'The learning philosophy emphasizes the importance of practical application, stating that the easiest way to learn something is by doing it the hard way.', 'Personal analogy about woodworking illustrates the ineffectiveness of passive learning methods and highlights the significance of hands-on practice.']}], 'duration': 77.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc445017.jpg', 'highlights': ['Director of education at a tech school teaching full-stack JavaScript and UX courses since 2014.', 'Emphasizes practical application as the easiest way to learn.', 'Analogies highlight the significance of hands-on practice.']}, {'end': 1027.787, 'segs': [{'end': 124.229, 'src': 'embed', 'start': 101.975, 'weight': 2, 'content': [{'end': 109.739, 'text': 'Most of the lessons in this course are followed up by an exercise that I fully expect you to put in real time and effort into accomplishing on your own.', 'start': 101.975, 'duration': 7.764}, {'end': 115.843, 'text': 'Now, if you decide to breeze through them the easy way without actually doing the exercises,', 'start': 110.42, 'duration': 5.423}, {'end': 119.565, 'text': "you're actually kind of taking the hardest road possible to learning react.", 'start': 115.843, 'duration': 3.722}, {'end': 124.229, 'text': 'And along those lines, you should really use the scrimba platform to its full potential.', 'start': 120.305, 'duration': 3.924}], 'summary': 'Effort in exercises vital for learning react on scrmba.', 'duration': 22.254, 'max_score': 101.975, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc44101975.jpg'}, {'end': 193.97, 'src': 'embed', 'start': 170.781, 'weight': 4, 'content': [{'end': 178.384, 'text': "this information to actually stick in your mind, and one of the main tenants of space learning is that you don't just binge on the course.", 'start': 170.781, 'duration': 7.603}, {'end': 181.765, 'text': 'this kind of goes in line with the concept of tutorial hell,', 'start': 178.384, 'duration': 3.381}, {'end': 187.207, 'text': "where it can be the easy way out to just binge on the course and feel like you're actually learning something,", 'start': 181.765, 'duration': 5.442}, {'end': 191.549, 'text': 'when in reality your brain has been incapable of actually retaining the information.', 'start': 187.207, 'duration': 4.342}, {'end': 193.97, 'text': "though, as you're going through the course,", 'start': 192.469, 'duration': 1.501}], 'summary': 'Space learning emphasizes not bingeing on courses to retain information better.', 'duration': 23.189, 'max_score': 170.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc44170781.jpg'}, {'end': 257.873, 'src': 'embed', 'start': 229.293, 'weight': 5, 'content': [{'end': 234.579, 'text': 'components in react are the core building block for making reusable pieces of HTML,', 'start': 229.293, 'duration': 5.286}, {'end': 241.247, 'text': 'and pretty much everything else that we talk about deals with how to use these components to build the web applications that we want to build.', 'start': 234.579, 'duration': 6.668}, {'end': 247.67, 'text': 'will also be talking about JSX, which is reacts proprietary wrapper around JavaScript,', 'start': 242.148, 'duration': 5.522}, {'end': 257.873, 'text': "and it simply lets you build components in a very familiar way using the HTML syntax that you're already familiar with will also spend a little bit of time talking about styling.", 'start': 247.67, 'duration': 10.203}], 'summary': 'React components are core for building reusable html pieces, using jsx for familiar html syntax.', 'duration': 28.58, 'max_score': 229.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc44229293.jpg'}, {'end': 428.806, 'src': 'embed', 'start': 399.488, 'weight': 0, 'content': [{'end': 408.033, 'text': "One of the things that you'll hear people talk about with react is its speed and how fast it is compared to web applications that are developed in vanilla JavaScript.", 'start': 399.488, 'duration': 8.545}, {'end': 413.196, 'text': 'The way that react is able to do that is by using something called the virtual DOM.', 'start': 408.594, 'duration': 4.602}, {'end': 416.098, 'text': "we're not going to go into a lot of detail about the virtual DOM right now.", 'start': 413.196, 'duration': 2.902}, {'end': 418.419, 'text': "But if you're interested in learning more about it,", 'start': 416.358, 'duration': 2.061}, {'end': 428.806, 'text': "I've included here a link to a YouTube video with a pretty simple explanation of how the virtual DOM is different than the way that web applications work when you're developing in vanilla JavaScript.", 'start': 418.419, 'duration': 10.387}], 'summary': 'React is faster than vanilla javascript due to virtual dom.', 'duration': 29.318, 'max_score': 399.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc44399488.jpg'}, {'end': 462.832, 'src': 'embed', 'start': 436.829, 'weight': 1, 'content': [{'end': 442.692, 'text': "For now it's enough to know that the virtual DOM helps make react work a lot faster than vanilla JavaScript.", 'start': 436.829, 'duration': 5.863}, {'end': 452.001, 'text': "another really awesome benefit react gives us is the ability to create reusable web components, and I'm going to talk about this through an example.", 'start': 443.973, 'duration': 8.028}, {'end': 456.126, 'text': 'right here we have the bootstrap default navbar.', 'start': 452.001, 'duration': 4.125}, {'end': 462.832, 'text': "if you haven't used bootstrap before, it's just a CSS library that has pre-written code that makes some elements look really good for you.", 'start': 456.126, 'duration': 6.706}], 'summary': "React's virtual dom makes it faster than vanilla javascript. it also enables the creation of reusable web components.", 'duration': 26.003, 'max_score': 436.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc44436829.jpg'}, {'end': 579.176, 'src': 'embed', 'start': 531.269, 'weight': 6, 'content': [{'end': 536.911, 'text': "On top of that, because react is so popular, there's a lot of contributors on their GitHub, which is open source,", 'start': 531.269, 'duration': 5.642}, {'end': 541.772, 'text': "who contribute to the react framework, which means it's going to be evolving for the foreseeable future.", 'start': 536.911, 'duration': 4.861}, {'end': 546.331, 'text': 'And last but not least, react is very hireable.', 'start': 542.432, 'duration': 3.899}, {'end': 552.753, 'text': 'at vSchool, we focus our curriculum and our efforts on the things that are most likely to get our students hired,', 'start': 546.331, 'duration': 6.422}, {'end': 555.054, 'text': 'and react is very in demand right now.', 'start': 552.753, 'duration': 2.301}, {'end': 561.637, 'text': 'so if one of your goals is to get a job as a front-end developer, react is a great choice in terms of frameworks to learn.', 'start': 555.054, 'duration': 6.583}, {'end': 562.877, 'text': "so that's enough talking for now.", 'start': 561.637, 'duration': 1.24}, {'end': 563.978, 'text': "let's jump into some code.", 'start': 562.877, 'duration': 1.101}, {'end': 571.954, 'text': "Okay, we're just going to jump right into the code.", 'start': 570.293, 'duration': 1.661}, {'end': 579.176, 'text': "One thing you're going to want to be somewhat familiar with is ES six or ECMAScript six or ECMAScript 2015.", 'start': 572.414, 'duration': 6.762}], 'summary': 'React framework has many contributors on github, is in demand, and a great choice for front-end developers.', 'duration': 47.907, 'max_score': 531.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc44531269.jpg'}, {'end': 990.507, 'src': 'embed', 'start': 965.438, 'weight': 3, 'content': [{'end': 972.57, 'text': "We're also going to be including entire screencasts that are dedicated to you doing exercises, as mentioned in the first video.", 'start': 965.438, 'duration': 7.132}, {'end': 978.339, 'text': 'So take some time, play with this, study it up, and get ready for the upcoming exercise.', 'start': 973.331, 'duration': 5.008}, {'end': 986.426, 'text': 'Alright, welcome to the first practice of this course.', 'start': 983.925, 'duration': 2.501}, {'end': 990.507, 'text': 'This is where it makes a lot of sense to use scrimba over a regular video.', 'start': 986.906, 'duration': 3.601}], 'summary': 'Course includes entire screencasts for exercises, making it practical to use scrimba.', 'duration': 25.069, 'max_score': 965.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc44965438.jpg'}], 'start': 82.44, 'title': 'Learning react and its benefits', 'summary': "Emphasizes active learning, spaced repetition, and covers various react concepts. it also highlights react's speed, reusability, and popularity in the job market, including its use of virtual dom and creation of reusable components.", 'chapters': [{'end': 150.971, 'start': 82.44, 'title': 'Effective learning with react code', 'summary': 'Emphasizes the importance of hands-on practice and active engagement with the code while learning react, warning against bypassing exercises and encouraging use of the scrimba platform for enhanced understanding and skill development.', 'duration': 68.531, 'highlights': ['The importance of hands-on practice and active engagement with the code while learning React, as bypassing exercises can hinder learning (e.g., tutorial hell)', 'Encouragement to utilize the Scrimba platform to its full potential for improved understanding and skill development', 'Emphasizing the need to pause lessons and actively make changes in the code for better comprehension and skill enhancement']}, {'end': 375.989, 'start': 151.471, 'title': 'Effective learning with react', 'summary': 'Emphasizes the importance of spaced learning and repetition, breaks during learning, and covering various concepts in react including components, jsx, styling, props, state, event handling, lifecycle methods, api data fetching, and forms.', 'duration': 224.518, 'highlights': ['The importance of spaced learning and repetition is emphasized, with frequent breaks recommended to aid in retaining information.', 'Covering various concepts in React such as components, JSX, styling, props, state, event handling, lifecycle methods, API data fetching, and forms is highlighted.', 'The course includes building a to-do list application covering key topics in React, and a meme generator project using an API with random meme images.']}, {'end': 1027.787, 'start': 375.989, 'title': 'React: speed, reusability, and popularity', 'summary': "Introduces react as a fast and efficient technology, highlighting its use of virtual dom for speed, creation of reusable components, facebook's maintenance, and high demand in job market. react's use of jsx and es6 is also emphasized.", 'duration': 651.798, 'highlights': ['React utilizes virtual DOM for faster performance compared to vanilla JavaScript, making it an excellent tool for developers.', 'The ability to create reusable web components in React simplifies code, improves readability, and promotes code reusability, as demonstrated with the example of the bootstrap default navbar.', 'React is maintained by Facebook, with a large number of contributors on GitHub, ensuring continuous evolution and making it a highly in-demand skill in the job market.', 'The chapter emphasizes the importance of understanding ES6 and JSX for working with React, highlighting the use of import statements and the rendering of JSX elements.', 'Scrimba is recommended for interactive learning and practice, with encouragement to engage in exercises rather than skipping to solutions for effective learning.']}], 'duration': 945.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4482440.jpg', 'highlights': ["React's speed and virtual DOM usage for faster performance", 'Importance of creating reusable web components in React', 'Emphasis on active engagement and hands-on practice for effective learning', 'Utilization of Scrimba platform for improved understanding and skill development', 'Importance of spaced learning and repetition for retaining information', 'Coverage of various React concepts including components, JSX, props, state, and event handling', 'In-demand skill in the job market due to continuous evolution and large contributor base on GitHub', 'Recommendation to understand ES6 and JSX for working with React']}, {'end': 1739.202, 'segs': [{'end': 1060.646, 'src': 'embed', 'start': 1028.567, 'weight': 3, 'content': [{'end': 1032.83, 'text': 'more effort you put in, the more likely this is actually going to stick.', 'start': 1028.567, 'duration': 4.263}, {'end': 1034.992, 'text': "so let's take a look at this practice.", 'start': 1032.83, 'duration': 2.162}, {'end': 1041.998, 'text': 'your objective is to fill in the basic boilerplate react code needed to render an unordered list to the page.', 'start': 1034.992, 'duration': 7.006}, {'end': 1046.882, 'text': 'inside that unordered list, you can put three list items with anything that you want in them.', 'start': 1041.998, 'duration': 4.884}, {'end': 1047.703, 'text': "it doesn't really matter.", 'start': 1046.882, 'duration': 0.821}, {'end': 1054.064, 'text': "the way that you'll know that it worked is that it will show up in the little browser window on the right here.", 'start': 1048.282, 'duration': 5.782}, {'end': 1060.646, 'text': "since it may be your first time working in react, I've included a couple hints that remind you of the steps you need to take.", 'start': 1054.064, 'duration': 6.582}], 'summary': 'Effort leads to success. objective: render unordered list with 3 items in react.', 'duration': 32.079, 'max_score': 1028.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc441028567.jpg'}, {'end': 1138.749, 'src': 'embed', 'start': 1096.719, 'weight': 1, 'content': [{'end': 1109.351, 'text': "And last but not least, we're going to use react Dom going to use its render method.", 'start': 1096.719, 'duration': 12.632}, {'end': 1113.133, 'text': 'And there are two parameters that we need to pass into render.', 'start': 1110.692, 'duration': 2.441}, {'end': 1119.397, 'text': 'The first one is what do we want to render? Well, as the challenge said, we need an unordered list.', 'start': 1113.193, 'duration': 6.204}, {'end': 1125.561, 'text': 'And inside that unordered list, we need three list items.', 'start': 1120.798, 'duration': 4.763}, {'end': 1138.749, 'text': "And copy and paste this so we don't need to 123.", 'start': 1128.784, 'duration': 9.965}], 'summary': "Using react dom's render method to display an unordered list with three list items.", 'duration': 42.03, 'max_score': 1096.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc441096719.jpg'}, {'end': 1251.392, 'src': 'embed', 'start': 1224.719, 'weight': 4, 'content': [{'end': 1231.541, 'text': 'doing that is going to really help you understand react on a deeper level than just passively watching me explain it to you.', 'start': 1224.719, 'duration': 6.822}, {'end': 1232.042, 'text': 'awesome job.', 'start': 1231.541, 'duration': 0.501}, {'end': 1233.222, 'text': "let's move on to the next topic.", 'start': 1232.042, 'duration': 1.18}, {'end': 1247.748, 'text': "in the last practice video, I mentioned that you wouldn't want to end up sticking your entire application right here inside of react Dom dot render.", 'start': 1239.881, 'duration': 7.867}, {'end': 1251.392, 'text': 'imagine having a web page with hundreds of elements on it.', 'start': 1247.748, 'duration': 3.644}], 'summary': 'Deeper understanding of react leads to better learning outcomes.', 'duration': 26.673, 'max_score': 1224.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc441224719.jpg'}, {'end': 1497.019, 'src': 'embed', 'start': 1466.644, 'weight': 0, 'content': [{'end': 1470.548, 'text': "now that we've learned about basic functional components, let's put it to practice.", 'start': 1466.644, 'duration': 3.904}, {'end': 1480.797, 'text': "Okay, let's get some practice of functional components in.", 'start': 1477.836, 'duration': 2.961}, {'end': 1487.918, 'text': "one of the things we really pride ourselves at v school when we're teaching our curriculum is that we include a lot of spaced learning and repetition,", 'start': 1480.797, 'duration': 7.121}, {'end': 1492.499, 'text': 'which is a principle of teaching that helps people retain as much information as possible.', 'start': 1487.918, 'duration': 4.581}, {'end': 1497.019, 'text': "As such, like before, I haven't included any boilerplate code for you to start with.", 'start': 1493.199, 'duration': 3.82}], 'summary': 'Learning about basic functional components and utilizing spaced learning for retention.', 'duration': 30.375, 'max_score': 1466.644, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc441466644.jpg'}, {'end': 1540.534, 'src': 'embed', 'start': 1511.687, 'weight': 2, 'content': [{'end': 1517.234, 'text': "And then you'll need to create a functional component called my info that has an h1 with your name,", 'start': 1511.687, 'duration': 5.547}, {'end': 1524.242, 'text': "a paragraph with some information about yourself and an ordered or unordered list of the top three vacation spots you'd like to visit.", 'start': 1517.234, 'duration': 7.008}, {'end': 1530.427, 'text': "Obviously, since we're not going to be grading this or anything, you're welcome to change this to whatever UI you'd prefer to present.", 'start': 1525.103, 'duration': 5.324}, {'end': 1535.45, 'text': "And then you'll need to make sure to render the instance of your functional component to the browser.", 'start': 1531.127, 'duration': 4.323}, {'end': 1540.534, 'text': "If you want a little extra challenge although we haven't yet gone over how to style your components,", 'start': 1535.831, 'duration': 4.703}], 'summary': "Create a functional component 'my info' with name, info, and top 3 vacation spots, then render to browser.", 'duration': 28.847, 'max_score': 1511.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc441511687.jpg'}], 'start': 1028.567, 'title': 'React practice and functional components', 'summary': 'Focuses on practicing rendering unordered lists and creating functional components in react. it covers the process of creating functional components, emphasizing the importance of repetition in learning and the practical application of building a functional component from scratch. additionally, it highlights the significance of actively engaging with the exercise to gain a real understanding of react.', 'chapters': [{'end': 1162.082, 'start': 1028.567, 'title': 'React practice: rendering unordered list', 'summary': 'Focuses on practicing the basic boilerplate code required to render an unordered list in react, with the objective of creating the list and rendering it to the page using react and react dom libraries, accompanied by hints for guidance.', 'duration': 133.515, 'highlights': ['The key objective is to fill in the basic boilerplate react code needed to render an unordered list to the page.', 'The practice involves rendering an unordered list with three list items using React and React Dom libraries.', 'Hints are provided to guide the process of completing the practice task.', "The importance of importing 'react' from the React library and utilizing the 'render' method with specified parameters is emphasized for rendering the list."]}, {'end': 1739.202, 'start': 1162.102, 'title': 'Creating functional components in react', 'summary': 'Covers the process of creating functional components in react, emphasizing the importance of repetition in learning and the practical application of building a functional component from scratch, as well as the objectives and challenges involved in the practice. it also highlights the significance of actively engaging with the exercise to gain a real understanding of react.', 'duration': 577.1, 'highlights': ['The chapter emphasizes the importance of repetition in learning, as it mentions including a lot of spaced learning and repetition in the curriculum to help people retain information.', "The chapter outlines the objectives for the practice, instructing the creation of a functional component called 'my info' with specific content such as an h1 with the user's name, a paragraph with personal information, and an ordered or unordered list of top three vacation spots.", "It stresses the significance of actively engaging with the exercise to gain a real understanding of how React works, highlighting that passively watching won't be sufficient."]}], 'duration': 710.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc441028567.jpg', 'highlights': ['The chapter emphasizes the importance of repetition in learning, including spaced learning and repetition in the curriculum.', 'The practice involves rendering an unordered list with three list items using React and React Dom libraries.', "The chapter outlines the objectives for the practice, instructing the creation of a functional component called 'my info' with specific content.", 'The key objective is to fill in the basic boilerplate react code needed to render an unordered list to the page.', 'It stresses the significance of actively engaging with the exercise to gain a real understanding of how React works.']}, {'end': 3544.269, 'segs': [{'end': 1924.82, 'src': 'embed', 'start': 1900.943, 'weight': 2, 'content': [{'end': 1907.833, 'text': 'The last thing we need to do is make this function, my info available to other places in my application.', 'start': 1900.943, 'duration': 6.89}, {'end': 1910.477, 'text': 'The way I need to do that is by exporting.', 'start': 1908.674, 'duration': 1.803}, {'end': 1920.559, 'text': "if you don't feel totally familiar with import exports from ES6, that should be okay,", 'start': 1915.717, 'duration': 4.842}, {'end': 1924.82, 'text': 'as long as you remember this export default and then the name of your component.', 'start': 1920.559, 'duration': 4.261}], 'summary': "Function 'my info' needs to be made available to other places in the application by using 'export default' from es6.", 'duration': 23.877, 'max_score': 1900.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc441900943.jpg'}, {'end': 2037.474, 'src': 'embed', 'start': 2011.7, 'weight': 1, 'content': [{'end': 2016.622, 'text': "As your project gets more and more complex, it's going to be really important that you have a good organizational structure.", 'start': 2011.7, 'duration': 4.922}, {'end': 2022.226, 'text': 'One simple organizational structure I can employ right now is by creating a new folder called components,', 'start': 2017.103, 'duration': 5.123}, {'end': 2024.207, 'text': "where I'm going to put all of my components in.", 'start': 2022.226, 'duration': 1.981}, {'end': 2032.731, 'text': "So I'm going to create a new folder, I'll let components, I'm going to drag my info.js into components.", 'start': 2025.007, 'duration': 7.724}, {'end': 2037.474, 'text': "And looking back at index.js, what do you think I'll need to fix here?", 'start': 2033.712, 'duration': 3.762}], 'summary': "Organize project by creating 'components' folder to store all components.", 'duration': 25.774, 'max_score': 2011.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc442011700.jpg'}, {'end': 2121.592, 'src': 'embed', 'start': 2095.369, 'weight': 0, 'content': [{'end': 2101.493, 'text': "Or if you're really wanting to be forward thinking, you're welcome to try and create a new component and nest that inside of my info.", 'start': 2095.369, 'duration': 6.124}, {'end': 2104.115, 'text': "But this is actually what we're going to cover in the next lesson.", 'start': 2101.893, 'duration': 2.222}, {'end': 2113.364, 'text': "Once you feel comfortable with everything we've talked about here, let's move In this lesson.", 'start': 2104.635, 'duration': 8.729}, {'end': 2115.787, 'text': "we're going to talk about parent and child components.", 'start': 2113.364, 'duration': 2.423}, {'end': 2121.592, 'text': 'our applications are going to be much more complex than just having a single component my info, for example rendered to the DOM.', 'start': 2115.787, 'duration': 5.805}], 'summary': 'Next lesson will cover parent and child components for more complex applications.', 'duration': 26.223, 'max_score': 2095.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc442095369.jpg'}, {'end': 3089.986, 'src': 'embed', 'start': 3056.687, 'weight': 4, 'content': [{'end': 3061.01, 'text': 'This example is the same one that we finished with at the end of the practice in the previous lesson.', 'start': 3056.687, 'duration': 4.323}, {'end': 3063.911, 'text': 'And I wanted to take some time to learn how to style this.', 'start': 3061.29, 'duration': 2.621}, {'end': 3067.213, 'text': "Now there's actually a bunch of different ways to style things in react.", 'start': 3064.512, 'duration': 2.701}, {'end': 3070.595, 'text': "And we're going to start with the one that's probably the most familiar to you.", 'start': 3067.593, 'duration': 3.002}, {'end': 3074.818, 'text': "And that's just using CSS classes, and CSS rules on those classes.", 'start': 3070.875, 'duration': 3.943}, {'end': 3080.721, 'text': 'drill down the tree here and see where we can actually start putting some classes.', 'start': 3075.878, 'duration': 4.843}, {'end': 3082.242, 'text': "you'll see on my index.js.", 'start': 3080.721, 'duration': 1.521}, {'end': 3089.986, 'text': "I'm rendering an app component and the app component is rendering a div with three other components header,", 'start': 3082.242, 'duration': 7.744}], 'summary': 'Learning to style components in react using css classes and rules.', 'duration': 33.299, 'max_score': 3056.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc443056687.jpg'}, {'end': 3303.001, 'src': 'heatmap', 'start': 3116.8, 'weight': 0.941, 'content': [{'end': 3122.903, 'text': "And something you'll just have to remember with JSX is that using class as a property name doesn't really fly.", 'start': 3116.8, 'duration': 6.103}, {'end': 3127.306, 'text': 'Instead, we need to use something called class name with a capital N.', 'start': 3123.544, 'duration': 3.762}, {'end': 3133.87, 'text': 'lot of places will tell you the reason that you have to do that is because class is a reserved keyword in JavaScript.', 'start': 3128.206, 'duration': 5.664}, {'end': 3139.695, 'text': 'But the truth is underneath JSX is just using the vanilla JavaScript DOM API.', 'start': 3134.311, 'duration': 5.384}, {'end': 3149.102, 'text': "And if you've ever used the vanilla JavaScript DOM API, you'll have something like document dot get element by ID, something.", 'start': 3140.275, 'duration': 8.827}, {'end': 3161.46, 'text': 'And if you wanted to add a class to that, you could say dot class name plus equals and then add a new class name.', 'start': 3149.122, 'duration': 12.338}, {'end': 3168.265, 'text': 'I prefer class list myself because it has properties that you can use to add and remove classes.', 'start': 3162.441, 'duration': 5.824}, {'end': 3169.666, 'text': "But that's beside the point.", 'start': 3168.706, 'duration': 0.96}, {'end': 3173.61, 'text': 'class name is an underlying JavaScript DOM API property.', 'start': 3170.287, 'duration': 3.323}, {'end': 3184.351, 'text': 'and so using class name as part of our jsx is simply a way to access that Dom API under the hood, which is what jsx and react is doing.', 'start': 3174.787, 'duration': 9.564}, {'end': 3190.674, 'text': "that's just a little bit of extra background that you may or may not be interested in knowing, but the point is, all you need to do is,", 'start': 3184.351, 'duration': 6.323}, {'end': 3195.376, 'text': 'wherever you normally would say class in HTML, use class name instead.', 'start': 3190.674, 'duration': 4.702}, {'end': 3201.879, 'text': "here I'm going to say class name equals F bar, and I'm going to delete this before it becomes a problem.", 'start': 3195.376, 'duration': 6.503}, {'end': 3209.724, 'text': 'then, over in my style, that CSS, I just need to select dot navbar and include whatever styles I want.', 'start': 3203.22, 'duration': 6.504}, {'end': 3213.686, 'text': 'For example, I might change the background color to purple.', 'start': 3210.184, 'duration': 3.502}, {'end': 3219.33, 'text': 'If I save and refresh this, you can see that now the background color is purple.', 'start': 3215.407, 'duration': 3.923}, {'end': 3226.754, 'text': "I'm going to copy and paste in some styles since this isn't a course on CSS so that we can get something that actually looks pretty good.", 'start': 3220.03, 'duration': 6.724}, {'end': 3235.943, 'text': "the only thing I've been here was added a zero margin to the body so that it went all the way to the edge and a number of styles to the navbar.", 'start': 3228.32, 'duration': 7.623}, {'end': 3239.625, 'text': "if you're interested in actually checking this out, feel free to pause the video.", 'start': 3235.943, 'duration': 3.682}, {'end': 3245.827, 'text': 'but the point is everything that you normally do in CSS is going to be essentially the same as you do here.', 'start': 3239.625, 'duration': 6.202}, {'end': 3250.429, 'text': "the only change we've made so far, remember, is that we have to use class name instead of class.", 'start': 3245.827, 'duration': 4.602}, {'end': 3262.214, 'text': 'one of the other things to keep in mind that may be tricky to remember at first is that you can only apply the class name attribute to react elements like header or paragraph or h1.', 'start': 3251.209, 'duration': 11.005}, {'end': 3269.699, 'text': "if you try to apply class name to a component that you've created, such as header or main content,", 'start': 3262.214, 'duration': 7.485}, {'end': 3271.74, 'text': "it's going to do something a little bit different than you think.", 'start': 3269.699, 'duration': 2.041}, {'end': 3274.022, 'text': "And we're going to talk more about that in the future.", 'start': 3272.161, 'duration': 1.861}, {'end': 3282.029, 'text': 'But for now just remember that the only thing you can apply class name to our react elements and not react components,', 'start': 3274.262, 'duration': 7.767}, {'end': 3284.411, 'text': 'the things that look basically like regular HTML.', 'start': 3282.029, 'duration': 2.382}, {'end': 3293.218, 'text': "Another thing that can be kind of tricky in the beginning is if you're using something that requires different levels of your tree hierarchy,", 'start': 3285.256, 'duration': 7.962}, {'end': 3299.84, 'text': 'like flexbox or CSS grid, where you need to know which items are the flex container and which items are the flex items.', 'start': 3293.218, 'duration': 6.622}, {'end': 3303.001, 'text': 'it can be tricky looking at your component to know exactly how that works.', 'start': 3299.84, 'duration': 3.161}], 'summary': 'Jsx uses classname instead of class; css styling applies to react elements; limitations on class name usage in react components', 'duration': 186.201, 'max_score': 3116.8, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc443116800.jpg'}, {'end': 3393.321, 'src': 'embed', 'start': 3363.735, 'weight': 3, 'content': [{'end': 3368.497, 'text': 'I wanted to cover some caveats about the way that I tend to write my JavaScript.', 'start': 3363.735, 'duration': 4.762}, {'end': 3372.119, 'text': 'you may have noticed that I tend to leave out things like semicolons.', 'start': 3368.497, 'duration': 3.622}, {'end': 3376.2, 'text': 'you may be super used to putting semicolons everywhere at the end of the statement.', 'start': 3372.119, 'duration': 4.081}, {'end': 3382.943, 'text': "I personally have recently decided that I kind of hate them, and so I've been removing them from my code.", 'start': 3376.2, 'duration': 6.743}, {'end': 3393.321, 'text': "obviously there's still some places that you simply can't avoid them, for example, when you're writing a c-style for loop zero semicolon.", 'start': 3382.943, 'duration': 10.378}], 'summary': 'The speaker discusses personal preference for omitting semicolons in javascript, with some exceptions.', 'duration': 29.586, 'max_score': 3363.735, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc443363735.jpg'}], 'start': 1739.202, 'title': 'React component organization', 'summary': 'Discusses the organization of react components, emphasizing the creation of a components folder, the importance of importing and exporting components, and the significance of a good organizational structure as the project becomes more complex.', 'chapters': [{'end': 1772.442, 'start': 1739.202, 'title': 'Interactive code example and q&a', 'summary': 'Covers how to create an interactive code example on a web page and encourages students to ask questions about unfamiliar code, with the instructor committing to prompt responses.', 'duration': 33.24, 'highlights': ['Instructor encourages students to ask questions and commits to prompt responses.', 'Instructions on how to create an interactive code example on a web page are provided.']}, {'end': 2094.888, 'start': 1772.442, 'title': 'React component organization', 'summary': 'Discusses the organization of react components, emphasizing the creation of a components folder to maintain a structured project, and the importance of importing and exporting components to ensure their availability. it also highlights the significance of having a good organizational structure as the project becomes more complex.', 'duration': 322.446, 'highlights': ['The significance of creating a components folder to organize React components for better project structure.', 'The importance of importing and exporting components to make them available in other parts of the application.', 'The need for a good organizational structure as the project complexity increases.']}, {'end': 3012.709, 'start': 2095.369, 'title': 'Creating parent and child components', 'summary': 'Covers creating parent and child components in react, detailing the process of creating a new component, nesting components, and rendering elements. it emphasizes the hierarchy of components, the distinction between components and elements, and the complexity of react applications. it also includes a guided challenge to set up a react app from scratch, rendering an app component and creating three separate components, each with elements to render.', 'duration': 917.34, 'highlights': ['The chapter covers creating parent and child components in React, detailing the process of creating a new component, nesting components, and rendering elements.', 'It emphasizes the hierarchy of components, the distinction between components and elements, and the complexity of React applications.', 'Includes a guided challenge to set up a React app from scratch, rendering an app component and creating three separate components, each with elements to render.']}, {'end': 3190.674, 'start': 3013.75, 'title': 'Styling in react', 'summary': "Discusses styling in react, starting with using css classes and rules, and emphasizes the use of 'class name' instead of 'class' in jsx, as it is an underlying javascript dom api property.", 'duration': 176.924, 'highlights': ["The chapter discusses styling in React, starting with using CSS classes and rules, and emphasizes the use of 'class name' instead of 'class' in JSX, as it is an underlying JavaScript DOM API property.", 'The application is straightforward and will be styled in the next session to improve its appearance.', "The transcript introduces the basics of styling in React, particularly focusing on using CSS classes and rules, and the use of 'class name' instead of 'class' in JSX."]}, {'end': 3544.269, 'start': 3190.674, 'title': 'Using class name in react and javascript coding style preferences', 'summary': 'Discusses using class name instead of class in html for styling react elements, limitations on applying class name to react components, and javascript coding style preferences including omitting semicolons and using arrow functions. it also covers the integration of jsx and javascript.', 'duration': 353.595, 'highlights': ['The only change made in using CSS for styling React elements is to use class name instead of class, as demonstrated by changing the background color to purple, resulting in a visibly altered appearance of the webpage.', 'The limitation on applying the class name attribute to only react elements, not react components, is highlighted, emphasizing the difference and potential issues when applying class name to components created in React.', 'The chapter discusses JavaScript coding style preferences, including the personal choice of omitting semicolons in statements and the preference for using the function keyword over arrow functions for functional components in ES6.', 'The integration of JSX and JavaScript is explained, demonstrating the usage of variables within JSX tags to dynamically generate content, as exemplified by incorporating first name and last name variables within an h1 tag.']}], 'duration': 1805.067, 'thumbnail': '', 'highlights': ['The chapter covers creating parent and child components in React, emphasizing the hierarchy of components and the distinction between components and elements.', 'The significance of creating a components folder to organize React components for better project structure.', 'The importance of importing and exporting components to make them available in other parts of the application.', 'The chapter discusses JavaScript coding style preferences, including the personal choice of omitting semicolons in statements and the preference for using the function keyword over arrow functions for functional components in ES6.', 'The only change made in using CSS for styling React elements is to use class name instead of class, as demonstrated by changing the background color to purple, resulting in a visibly altered appearance of the webpage.']}, {'end': 4114.296, 'segs': [{'end': 3635.046, 'src': 'embed', 'start': 3590.013, 'weight': 0, 'content': [{'end': 3592.795, 'text': 'meaning any text inside is going to be literally interpreted.', 'start': 3590.013, 'duration': 2.782}, {'end': 3601.884, 'text': "However, as soon as we want to get back into JavaScript, we put a curly brace and now we're back into JavaScript land, JavaScript, JavaScript,", 'start': 3593.576, 'duration': 8.308}, {'end': 3603.466, 'text': 'JavaScript. closing.', 'start': 3601.884, 'duration': 1.582}, {'end': 3613.255, 'text': 'curly brace tells me we want to leave JavaScript and go back into JSX and you can do pretty complex JavaScript operations inside here it.', 'start': 3603.466, 'duration': 9.789}, {'end': 3620.299, 'text': "since we've mostly converted over to the ES6 syntax, I'm actually going to change this to the string templating syntax of ES6,", 'start': 3613.255, 'duration': 7.044}, {'end': 3626.982, 'text': 'where I put backticks and then a dollar sign, curly brace surrounding any variables that I want to show up.', 'start': 3620.299, 'duration': 6.683}, {'end': 3635.046, 'text': 'then I can just put a space itself and that will be treated as a literal text space and a dollar sign, curly braces again, last name,', 'start': 3626.982, 'duration': 8.064}], 'summary': 'Javascript operations can be performed inside jsx using es6 string templating.', 'duration': 45.033, 'max_score': 3590.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc443590013.jpg'}, {'end': 3719.871, 'src': 'embed', 'start': 3693.021, 'weight': 2, 'content': [{'end': 3701.084, 'text': 'So here all I did was set a variable called time of day and did a simple, if else, to check what time of day it was.', 'start': 3693.021, 'duration': 8.063}, {'end': 3707.686, 'text': 'then down here, I simply said good, jumped into JavaScript and said time of day.', 'start': 3701.084, 'duration': 6.602}, {'end': 3711.968, 'text': "when I refresh this, I get good night, because it's night time where I'm recording this.", 'start': 3707.686, 'duration': 4.282}, {'end': 3719.871, 'text': "Hopefully you can start to see the possibilities that this brings and we're going to see, as the course moves on, that this is actually really useful.", 'start': 3712.688, 'duration': 7.183}], 'summary': "Used javascript to display time of day, showing 'good night' on refresh.", 'duration': 26.85, 'max_score': 3693.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc443693021.jpg'}, {'end': 3897.915, 'src': 'embed', 'start': 3863.771, 'weight': 3, 'content': [{'end': 3868.374, 'text': 'I technically can in regular JavaScript by surrounding this with quotes.', 'start': 3863.771, 'duration': 4.603}, {'end': 3870.036, 'text': "but that's beside the point.", 'start': 3868.374, 'duration': 1.662}, {'end': 3877.581, 'text': "because of this, inside of the object where we're defining our styles, we're going to change anytime that there's a dash.", 'start': 3870.036, 'duration': 7.545}, {'end': 3880.323, 'text': "we're going to get rid of the dash and make everything camel case.", 'start': 3877.581, 'duration': 2.742}, {'end': 3883.185, 'text': 'This right here is a legitimate style object.', 'start': 3881.184, 'duration': 2.001}, {'end': 3884.546, 'text': 'Let me refresh.', 'start': 3883.866, 'duration': 0.68}, {'end': 3887.388, 'text': 'And you can see now we have a different background color.', 'start': 3885.387, 'duration': 2.001}, {'end': 3897.915, 'text': 'As you might imagine, this style object right here may end up getting longer and longer, in which case this h1 line is going to become really long.', 'start': 3888.109, 'duration': 9.806}], 'summary': 'Styling javascript object with camel case for better readability and maintainability.', 'duration': 34.144, 'max_score': 3863.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc443863771.jpg'}, {'end': 4025.332, 'src': 'embed', 'start': 3997.079, 'weight': 4, 'content': [{'end': 4004.242, 'text': "it looks pretty funny when you have to add things like vendor prefixes, but there's other things, like pseudo selectors such as colon hover,", 'start': 3997.079, 'duration': 7.163}, {'end': 4008.404, 'text': 'that become actually impossible to do inside of these inline styles.', 'start': 4004.242, 'duration': 4.162}, {'end': 4013.647, 'text': "if you need something like that for now, you're better off just doing that in CSS and using class name,", 'start': 4008.404, 'duration': 5.243}, {'end': 4018.149, 'text': 'and in the future you can learn about really cool styling libraries such as styled components.', 'start': 4013.647, 'duration': 4.502}, {'end': 4025.332, 'text': "for now, we're just going to keep it simple and stick with either inline styling or using class name and using CSS styles.", 'start': 4018.809, 'duration': 6.523}], 'summary': 'Inline styles are limited, use css for complex styling, consider using styled components in the future.', 'duration': 28.253, 'max_score': 3997.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc443997079.jpg'}, {'end': 4054.273, 'src': 'embed', 'start': 4029.393, 'weight': 5, 'content': [{'end': 4036.236, 'text': 'well, one reason is that you may want something to be more dynamic, in which case JavaScript would actually determine what the styles are.', 'start': 4029.393, 'duration': 6.843}, {'end': 4037.957, 'text': "let's take a quick look at what that might look like.", 'start': 4036.236, 'duration': 1.721}, {'end': 4048.711, 'text': "notice what I've done here, where I moved the styles up here above my, if else, and set a default font size of 30 pixels.", 'start': 4040.188, 'duration': 8.523}, {'end': 4054.273, 'text': 'then I let my, if else in my JavaScript, actually determine what color the font is going to be.', 'start': 4048.711, 'duration': 5.562}], 'summary': 'Javascript can make styles dynamic; sets default font size to 30 pixels.', 'duration': 24.88, 'max_score': 4029.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc444029393.jpg'}], 'start': 3544.269, 'title': 'Javascript in jsx, es6 syntax, and inline styling in react', 'summary': 'Explains embedding javascript in jsx using curly braces, demonstrates es6 string templating syntax, and discusses inline styling in react, including its limitations and potential for dynamic styling based on javascript conditions.', 'chapters': [{'end': 3711.968, 'start': 3544.269, 'title': 'Javascript in jsx and es6 syntax', 'summary': 'Explains how to embed javascript in jsx using curly braces and demonstrates the usage of es6 string templating syntax, allowing for dynamic content generation based on javascript operations, including an example of automatically displaying a greeting based on the time of day.', 'duration': 167.699, 'highlights': ['The chapter explains how to embed JavaScript in JSX using curly braces.', 'It demonstrates the usage of ES6 string templating syntax for dynamic content generation.', 'An example showcases the automatic display of a greeting based on the time of day using JavaScript operations.']}, {'end': 4114.296, 'start': 3712.688, 'title': 'Inline styling in react', 'summary': 'Discusses the usage of inline styling in react, highlighting the syntax and quirks involved, the limitations of inline styling, and its potential use for dynamic styling based on javascript conditions.', 'duration': 401.608, 'highlights': ['Inline styling in React involves using the style property to apply CSS styles directly, necessitating the use of JavaScript objects and camelCase for property names instead of dashes. (Relevance: 5)', 'The limitations of inline styling include the inability to use pseudo-selectors like :hover and the complexity of adding vendor prefixes, suggesting the use of CSS or styling libraries for such cases. (Relevance: 4)', 'Inline styling can be useful for dynamic styling, where JavaScript can determine the styles based on conditions, illustrated by dynamically changing the color property of the styles object based on the time of day. (Relevance: 3)']}], 'duration': 570.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc443544269.jpg', 'highlights': ['The chapter explains how to embed JavaScript in JSX using curly braces.', 'It demonstrates the usage of ES6 string templating syntax for dynamic content generation.', 'An example showcases the automatic display of a greeting based on the time of day using JavaScript operations.', 'Inline styling in React involves using the style property to apply CSS styles directly, necessitating the use of JavaScript objects and camelCase for property names instead of dashes.', 'The limitations of inline styling include the inability to use pseudo-selectors like :hover and the complexity of adding vendor prefixes, suggesting the use of CSS or styling libraries for such cases.', 'Inline styling can be useful for dynamic styling, where JavaScript can determine the styles based on conditions, illustrated by dynamically changing the color property of the styles object based on the time of day.']}, {'end': 5665.338, 'segs': [{'end': 4160.368, 'src': 'embed', 'start': 4133.376, 'weight': 0, 'content': [{'end': 4139.823, 'text': "I'd also, at this point, recommend spending as much time as you can to really solidify the stuff that we've covered together so far.", 'start': 4133.376, 'duration': 6.447}, {'end': 4144.649, 'text': "we're about to come up on a topic that typically is a little bit challenging for some people,", 'start': 4139.823, 'duration': 4.826}, {'end': 4148.212, 'text': "to really help you to make sure that you understand everything we've talked about up until now.", 'start': 4144.649, 'duration': 3.563}, {'end': 4154.522, 'text': "In the next lesson we're going to talk about a concept called props and how we can make our components quite a bit more reusable.", 'start': 4148.934, 'duration': 5.588}, {'end': 4156.705, 'text': 'props is a super exciting topic.', 'start': 4155.082, 'duration': 1.623}, {'end': 4160.368, 'text': "And we're about to get into parts of react that make it extremely useful.", 'start': 4156.805, 'duration': 3.563}], 'summary': 'Recommend solidifying covered topics, preparing for challenging concept of props in next lesson.', 'duration': 26.992, 'max_score': 4133.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc444133376.jpg'}, {'end': 4407.952, 'src': 'heatmap', 'start': 4221.343, 'weight': 0.997, 'content': [{'end': 4225.227, 'text': 'Alright, so the first thing is moving each of these into their own components.', 'start': 4221.343, 'duration': 3.884}, {'end': 4232.534, 'text': "I'm just going to copy this and create a new file called to do item.js.", 'start': 4225.287, 'duration': 7.247}, {'end': 4238.5, 'text': "And while I'm still here, I'm going to import new item from that file.", 'start': 4233.395, 'duration': 5.105}, {'end': 4251.916, 'text': "And let's go over to to do item will import react from create our functional component.", 'start': 4240.362, 'duration': 11.554}, {'end': 4256.058, 'text': "We'll just return the thing that we copied before.", 'start': 4253.757, 'duration': 2.301}, {'end': 4259.961, 'text': "And remember, I can only have one element that I'm returning at a time.", 'start': 4256.979, 'duration': 2.982}, {'end': 4262.042, 'text': "So I'll wrap this all in a diff.", 'start': 4260.261, 'duration': 1.781}, {'end': 4267.406, 'text': "Then over in app js, we don't need these anymore.", 'start': 4263.163, 'duration': 4.243}, {'end': 4273.985, 'text': 'But instead, we can just create instances of our to do and everything looks the same.', 'start': 4267.486, 'duration': 6.499}, {'end': 4279.648, 'text': "Now, since this isn't necessarily a course on styling with CSS, I'm basically going to cheat.", 'start': 4274.805, 'duration': 4.843}, {'end': 4286.713, 'text': "right now I'm going to set myself up by creating a class here of to do list.", 'start': 4279.648, 'duration': 7.065}, {'end': 4293.998, 'text': "And over in my to do items, I'm going to give this div a class name of new item.", 'start': 4287.373, 'duration': 6.625}, {'end': 4299.021, 'text': "And I'm basically just going to paste styles that I've already created.", 'start': 4294.758, 'duration': 4.263}, {'end': 4303.596, 'text': "okay, and you'll notice that we make this a little bit bigger.", 'start': 4300.734, 'duration': 2.862}, {'end': 4312.984, 'text': "notice that I just kind of came up with a cool little paper looking stack and have a checkbox next to each one that's a little bit prettier,", 'start': 4303.596, 'duration': 9.388}, {'end': 4316.486, 'text': 'with nicer font and little separation and so forth.', 'start': 4312.984, 'duration': 3.502}, {'end': 4322.411, 'text': "obviously, you're welcome to pause this and look through some of the styles that I have, but it's really nothing too fancy,", 'start': 4316.486, 'duration': 5.925}, {'end': 4328.315, 'text': "and since I'm not really a wizard at CSS stuff like this, with the cool little effect on there, I basically just found online.", 'start': 4322.411, 'duration': 5.904}, {'end': 4337.426, 'text': "main takeaways, though, are to remember that if you want to apply class to your elements, you'll need to use class name instead of class,", 'start': 4329.216, 'duration': 8.21}, {'end': 4342.412, 'text': 'and if you wanted, you could apply some of these styles just right here in line.', 'start': 4337.426, 'duration': 4.986}, {'end': 4347.297, 'text': 'so, with a little bit of CSS styling are to do, list is already looking a lot better than it was.', 'start': 4342.412, 'duration': 4.885}, {'end': 4357.147, 'text': "only our checkboxes do technically check and uncheck, but what we're going to do is make sure that, when we check these, some actual data is changed,", 'start': 4348.178, 'duration': 8.969}, {'end': 4364.073, 'text': 'which will allow us to do something cool like put a little strike through through these texts.', 'start': 4357.147, 'duration': 6.926}, {'end': 4365.895, 'text': "once you feel pretty comfortable with this, let's move on.", 'start': 4364.073, 'duration': 1.822}, {'end': 4374.287, 'text': "Let's talk first about the concept of props in react.", 'start': 4371.564, 'duration': 2.723}, {'end': 4377.491, 'text': "To do so, we're going to look at just a regular HTML file.", 'start': 4374.788, 'duration': 2.703}, {'end': 4379.273, 'text': 'notice that this has nothing to do with react.', 'start': 4377.491, 'duration': 1.782}, {'end': 4381.656, 'text': 'this is just a basic index dot HTML.', 'start': 4379.273, 'duration': 2.383}, {'end': 4385.361, 'text': "I want you to take a close look at the three elements that I've put inside the body the anchor,", 'start': 4381.656, 'duration': 3.705}, {'end': 4388.725, 'text': "the input and the image and think about what's actually wrong with them right now.", 'start': 4385.361, 'duration': 3.364}, {'end': 4394.896, 'text': 'none of these things are actually going to do anything important.', 'start': 4391.232, 'duration': 3.664}, {'end': 4399.282, 'text': 'anchor tags need an href for them to make any sense at all.', 'start': 4394.896, 'duration': 4.386}, {'end': 4407.952, 'text': 'this way, the HTML spec can define the anchor tag once and allow us the ability to change the place that the link sends us.', 'start': 4399.282, 'duration': 8.67}], 'summary': 'Creating components, applying css styling, and discussing props in react.', 'duration': 186.609, 'max_score': 4221.343, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc444221343.jpg'}, {'end': 4461.881, 'src': 'embed', 'start': 4433.468, 'weight': 4, 'content': [{'end': 4440.613, 'text': 'In those two examples, with anchors and images, the href and source properties respectively are required.', 'start': 4433.468, 'duration': 7.145}, {'end': 4444.756, 'text': 'inputs technically will show an input on the page.', 'start': 4441.434, 'duration': 3.322}, {'end': 4455.355, 'text': 'But I can beef it up a little bit by adding additional properties such as placeholder or the name property or the type.', 'start': 4445.197, 'duration': 10.158}, {'end': 4457.677, 'text': 'property type is an interesting one.', 'start': 4455.355, 'duration': 2.322}, {'end': 4461.881, 'text': 'actually, it allows me to change this input to be multiple different things.', 'start': 4457.677, 'duration': 4.204}], 'summary': 'Anchors and images require href and source properties. additional input properties like placeholder, name, and type can be used to enhance functionality.', 'duration': 28.413, 'max_score': 4433.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc444433468.jpg'}, {'end': 5343.149, 'src': 'embed', 'start': 5311.26, 'weight': 1, 'content': [{'end': 5317.521, 'text': 'our contact card is passing down a single prop called contact, which is an object that has all of the properties that we want.', 'start': 5311.26, 'duration': 6.261}, {'end': 5323.982, 'text': "Again, normally this won't be hard coded, but instead would be something you get from a data file, such as a JSON file,", 'start': 5318.201, 'duration': 5.781}, {'end': 5325.622, 'text': "which we're going to cover in a future lesson.", 'start': 5323.982, 'duration': 1.64}, {'end': 5330.683, 'text': "And over in contact card, I'm receiving all of my props as an object called props.", 'start': 5326.222, 'duration': 4.461}, {'end': 5334.824, 'text': 'And since I only passed a single prop down, I have props dot contact.', 'start': 5331.383, 'duration': 3.441}, {'end': 5343.149, 'text': 'but props that contact is an object so that has properties itself like image, URL, name, phone and email.', 'start': 5335.444, 'duration': 7.705}], 'summary': "React component passes a single prop 'contact' with specific properties.", 'duration': 31.889, 'max_score': 5311.26, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc445311260.jpg'}, {'end': 5433.457, 'src': 'embed', 'start': 5407.498, 'weight': 3, 'content': [{'end': 5411.541, 'text': 'we can see that this is going to help us practice the parent child component tree.', 'start': 5407.498, 'duration': 4.043}, {'end': 5414.322, 'text': "it's going to help us practice putting components in their own files.", 'start': 5411.541, 'duration': 2.781}, {'end': 5419.685, 'text': "But the main thing we're going to practice is passing props down through the joke component.", 'start': 5414.722, 'duration': 4.963}, {'end': 5426.67, 'text': 'So each joke component should receive a question prop and a punchline prop, and then render those to the page however you want.', 'start': 5420.506, 'duration': 6.164}, {'end': 5433.457, 'text': "that's just kind of the basic part of the practice, but I've added a little extra credit section, which I'd really encourage you to try.", 'start': 5427.41, 'duration': 6.047}], 'summary': 'Practice parent-child component tree, prop passing, and file organization.', 'duration': 25.959, 'max_score': 5407.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc445407498.jpg'}], 'start': 4114.296, 'title': 'React component props and reusability', 'summary': 'Covers react component styling and the concept of props, emphasizing their importance in creating reusable components. it also explains how to dynamically pass data using props and make components more flexible and manageable. additionally, it focuses on creating a react app with an emphasis on parent-child component structure, prop handling, and component styling.', 'chapters': [{'end': 4364.073, 'start': 4114.296, 'title': 'React components and styling', 'summary': 'Discusses the dynamic data that changes the display of hard-coded components, emphasizes the importance of understanding the covered topics, and introduces the concept of props for making components more reusable in react.', 'duration': 249.777, 'highlights': ['The chapter emphasizes the importance of understanding the covered topics, encouraging spending time to solidify the knowledge (quantifiable data: none).', 'It introduces the concept of props for making components more reusable in React, highlighting its significance and excitement (quantifiable data: none).', 'The chapter discusses the dynamic data that changes the display of hard-coded components, emphasizing the potential for inline styles to accomplish various tasks (quantifiable data: none).']}, {'end': 4831.532, 'start': 4364.073, 'title': 'Understanding props in react', 'summary': 'Explains the concept of props in react, highlighting the importance of properties in html elements and how they are applied in react components, emphasizing the modular and dynamic nature of components in react.', 'duration': 467.459, 'highlights': ['Understanding the importance of properties in HTML elements, such as href for anchor tags and source for image tags, to make them functional and the ability to modify input properties for various functionalities.', 'Explaining the concept of props in React, illustrating how it allows properties to modify the behavior of components, and highlighting the modular nature of components in React for reusability and flexibility.', 'Emphasizing the concept of creating separate components in React and making them dynamic by using props, showcasing the example of a contact card list and the need for dynamic and reusable components.', 'Comparing the concept of adding parameters to a function to make it reusable with the process of using props in React components for reusability and flexibility.']}, {'end': 5060.365, 'start': 4831.532, 'title': 'Dynamic contact card data', 'summary': 'Explains how to dynamically pass individual information for each contact card component, including the image url, name, phone number, and email address, using props in react, leading to a better understanding of accessing and utilizing the passed data in the component.', 'duration': 228.833, 'highlights': ['The process of dynamically passing individual information for each contact card component using props in React, such as the image URL, name, phone number, and email address, is explained, enhancing the flexibility and reusability of the components.', 'The significance of utilizing props in React to access the passed data for each contact card, including the understanding of accessing and using the properties of the props object to replace hard-coded values, is emphasized.', 'The necessity of using curly braces around JavaScript when switching between JSX and JavaScript is highlighted as a crucial aspect of properly implementing the dynamic data passing process for the contact card components in React.']}, {'end': 5390.932, 'start': 5060.365, 'title': 'Reusability of contact component', 'summary': 'Discusses making a contact component reusable by passing down a single prop called contact, which is an object containing all the properties, allowing for easier management and flexibility in handling the data.', 'duration': 330.567, 'highlights': ['The component is made reusable by passing down a single prop called contact, which is an object containing all the properties, instead of passing down individual properties, allowing for easier management and flexibility in handling the data.', 'The previous method of passing individual properties for each contact would become cumbersome, especially if there were 50 different properties for each contact.', 'The approach of passing a single prop called contact, containing all the properties, allows for easier management and flexibility in handling the data, making it more scalable and efficient.', 'The benefit of passing down a single prop called contact, which is an object containing all the properties, is highlighted, emphasizing the ease of managing and manipulating the data.']}, {'end': 5665.338, 'start': 5391.032, 'title': 'React app practice', 'summary': 'Focuses on creating a react app with an app component rendering five joke components, emphasizing the practice of parent-child component tree, component separation, and passing props, with additional emphasis on handling undefined props and styling the components.', 'duration': 274.306, 'highlights': ['The chapter emphasizes practicing the creation of a React app with a component structure that includes rendering an app component with five joke components, focusing on the parent-child component relationship and the separation of components into their own files.', 'It encourages the practice of passing props down through the joke components, including a question prop and a punchline prop, and rendering them to the page, emphasizing the importance of handling undefined props and styling the joke components.', 'The practice also includes an extra credit section that challenges the learners to handle scenarios where the component does not receive a question prop, prompting them to consider how to display only the punchline and to explore the behavior of React when a prop is undefined.']}], 'duration': 1551.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc444114296.jpg', 'highlights': ['The chapter emphasizes the importance of understanding the covered topics, encouraging spending time to solidify the knowledge.', 'The process of dynamically passing individual information for each contact card component using props in React is explained, enhancing the flexibility and reusability of the components.', 'The component is made reusable by passing down a single prop called contact, which is an object containing all the properties, allowing for easier management and flexibility in handling the data.', 'The chapter emphasizes practicing the creation of a React app with a component structure that includes rendering an app component with five joke components, focusing on the parent-child component relationship and the separation of components into their own files.', 'Understanding the importance of properties in HTML elements, such as href for anchor tags and source for image tags, to make them functional and the ability to modify input properties for various functionalities.']}, {'end': 7092.856, 'segs': [{'end': 6968.288, 'src': 'heatmap', 'start': 5865.407, 'weight': 0.808, 'content': [{'end': 5867.911, 'text': 'we do this with something called conditional rendering,', 'start': 5865.407, 'duration': 2.504}, {'end': 5881.311, 'text': 'but for now you may find a way around it where you can say I want this H3 to have a style with a display of none under certain circumstances.', 'start': 5867.911, 'duration': 13.4}, {'end': 5888.193, 'text': 'But if, right here, I use the ternary operator to decide what that should be inside of my object,', 'start': 5882.151, 'duration': 6.042}, {'end': 5892.774, 'text': 'I could say essentially is props that question thing.', 'start': 5888.193, 'duration': 4.581}, {'end': 5893.734, 'text': 'is it truthy??', 'start': 5892.774, 'duration': 0.96}, {'end': 5898.955, 'text': 'If so, displayed in the regular block format but otherwise displayed as none.', 'start': 5894.334, 'duration': 4.621}, {'end': 5906.66, 'text': 'that. my first one has an h3 that is now display none because it no longer has props that question.', 'start': 5900.698, 'duration': 5.962}, {'end': 5910.542, 'text': "if you're not very familiar with ternaries, I highly recommend you go spend some time learning about them,", 'start': 5906.66, 'duration': 3.882}, {'end': 5913.763, 'text': "because they're actually used quite often in react.", 'start': 5910.542, 'duration': 3.221}, {'end': 5915.304, 'text': 'another slightly more concise,', 'start': 5913.763, 'duration': 1.541}, {'end': 5925.527, 'text': 'but perhaps more confusing way to write this would be instead of using a ternary and having a default of its own default like an h3 being display block.', 'start': 5915.304, 'duration': 10.223}, {'end': 5933.217, 'text': "we can get rid of that and we could actually say if there isn't a props that question, then we want to display none,", 'start': 5925.527, 'duration': 7.69}, {'end': 5936.278, 'text': 'for otherwise basically ignore this rule totally.', 'start': 5933.217, 'duration': 3.061}, {'end': 5941.28, 'text': "if you're not familiar with using the double ampersand in this way, we're going to talk about it in a future lesson.", 'start': 5936.278, 'duration': 5.002}, {'end': 5942.5, 'text': 'but just know for now.', 'start': 5941.28, 'duration': 1.22}, {'end': 5943.44, 'text': 'this totally works.', 'start': 5942.5, 'duration': 0.94}, {'end': 5945.061, 'text': 'you can see over in my browser.', 'start': 5943.44, 'duration': 1.621}, {'end': 5947.041, 'text': 'I have just an answer, my joke.', 'start': 5945.061, 'duration': 1.98}, {'end': 5951.883, 'text': "that doesn't have a question in it, but the question does show up in all of these other instances.", 'start': 5947.041, 'duration': 4.842}, {'end': 5955.305, 'text': "Now, if you look at my joke, that doesn't have a question.", 'start': 5952.603, 'duration': 2.702}, {'end': 5957.166, 'text': "it doesn't stand out very much.", 'start': 5955.305, 'duration': 1.861}, {'end': 5962.328, 'text': 'maybe you might decide that you want your answer only jokes, your punchline only jokes to look a little bit different,', 'start': 5957.166, 'duration': 5.162}, {'end': 5966.711, 'text': 'maybe to be grayed out or to be a totally different color or underlined.', 'start': 5962.328, 'duration': 4.383}, {'end': 5968.111, 'text': "I don't know something.", 'start': 5966.711, 'duration': 1.4}, {'end': 5974.475, 'text': 'video for a second and think how you might do that using inline styling and JavaScript, the way that we did in line six.', 'start': 5968.111, 'duration': 6.364}, {'end': 5980.825, 'text': 'maybe what I might do is on my answers.', 'start': 5978.223, 'duration': 2.602}, {'end': 5991.814, 'text': 'h3 is add an inline style with an object that says the color should be and then do something similar to what I have on the question art on the h3 above,', 'start': 5980.825, 'duration': 10.989}, {'end': 5997.259, 'text': 'where I say if there is no props dot action, then I might want the color to be.', 'start': 5991.814, 'duration': 5.445}, {'end': 5998.56, 'text': "I don't know some kind of gray.", 'start': 5997.259, 'duration': 1.301}, {'end': 6003.092, 'text': 'this is pretty contrived, but you get the idea.', 'start': 6000.731, 'duration': 2.361}, {'end': 6008.153, 'text': 'we can start using the differing props that come into our component to display things differently.', 'start': 6003.092, 'duration': 5.061}, {'end': 6012.155, 'text': 'And as such, our joke component is now more or less reusable.', 'start': 6008.514, 'duration': 3.641}, {'end': 6017.056, 'text': 'we can add jokes that just have punchlines and jokes that have both questions in punchlines.', 'start': 6012.155, 'duration': 4.901}, {'end': 6022.918, 'text': 'And automatically, the joke component knows how to style itself based on the incoming props.', 'start': 6017.556, 'duration': 5.362}, {'end': 6028.64, 'text': "And that's pretty much it for this practice, feel free to pause this and play with this as much as you want before moving on.", 'start': 6023.818, 'duration': 4.822}, {'end': 6042.357, 'text': "Alright. so we're going to pick up where we left off in the previous practice with our app component rendering a bunch of joke components.", 'start': 6035.734, 'duration': 6.623}, {'end': 6047.12, 'text': 'some of these have the punchline in them and some of them have a question and punchline.', 'start': 6042.357, 'duration': 4.763}, {'end': 6052.583, 'text': "you can see right now that they're hard coded into our components written directly as text.", 'start': 6047.12, 'duration': 5.463}, {'end': 6053.103, 'text': 'in reality,', 'start': 6052.583, 'duration': 0.52}, {'end': 6064.849, 'text': "most of the data that you'll be displaying on a page will actually be coming from some kind of HTTP call to an API where there's a server that hosts a database in that database and server are returning JSON data to you.", 'start': 6053.103, 'duration': 11.746}, {'end': 6069.311, 'text': "we haven't quite gotten to the place where we can make API calls quite yet.", 'start': 6065.589, 'duration': 3.722}, {'end': 6078.656, 'text': "so what I've done is I've made this file jokes data.js and it's just an array variable that I'm exporting and that way in a component, if we want it,", 'start': 6069.311, 'duration': 9.345}, {'end': 6081.937, 'text': "we can pull that in and pretend like that's us getting data from API.", 'start': 6078.656, 'duration': 3.281}, {'end': 6088.54, 'text': 'So how am I going to take an array of raw data and turn that into a number of components?', 'start': 6083.098, 'duration': 5.442}, {'end': 6095.903, 'text': "well, there's a common saying for those that are learning react, where they say that react helps them become better JavaScript developers.", 'start': 6088.54, 'duration': 7.363}, {'end': 6105.027, 'text': 'and the reasons because things like this are oftentimes handled by methods and kind of magic under the hood for other frameworks like angular or view,', 'start': 6095.903, 'duration': 9.124}, {'end': 6105.787, 'text': 'but in react.', 'start': 6105.027, 'duration': 0.76}, {'end': 6109.389, 'text': 'a lot of these simple operations are handled just with vanilla JavaScript.', 'start': 6105.787, 'duration': 3.602}, {'end': 6112.151, 'text': 'Let me show you what I mean with a quick aside.', 'start': 6109.969, 'duration': 2.182}, {'end': 6115.174, 'text': "we're going to talk about some higher order array methods.", 'start': 6112.151, 'duration': 3.023}, {'end': 6116.776, 'text': "If you're not familiar with these.", 'start': 6115.574, 'duration': 1.202}, {'end': 6122.962, 'text': 'these are methods that you can run on an array, that take a function as a parameter and allow you, the developer,', 'start': 6116.776, 'duration': 6.186}, {'end': 6126.165, 'text': 'to decide exactly what should happen to the elements in that array.', 'start': 6122.962, 'duration': 3.203}, {'end': 6134.27, 'text': 'For example, if I had the following array I can run a higher order method on nums.', 'start': 6126.665, 'duration': 7.605}, {'end': 6142.053, 'text': 'all the map and map is a method of the nums array and it takes a function as its parameter.', 'start': 6134.27, 'duration': 7.783}, {'end': 6146.975, 'text': 'this function will receive each individual number in the array.', 'start': 6142.053, 'duration': 4.922}, {'end': 6148.635, 'text': 'I might say num or number,', 'start': 6146.975, 'duration': 1.66}, {'end': 6166.802, 'text': 'say num function will then run on every single item in the array and with map whatever I returned from my inner function here will be placed in the same index of a brand new array with some kind of modification,', 'start': 6148.635, 'duration': 18.167}, {'end': 6169.383, 'text': 'meaning map actually returns a brand new array.', 'start': 6166.802, 'duration': 2.581}, {'end': 6172.824, 'text': "so I'm going to save a new array called maybe doubled.", 'start': 6169.383, 'duration': 3.441}, {'end': 6183.834, 'text': 'now if I from my inner function return num times, two, doubled should be an array of 2468, 1012 and so on.', 'start': 6174.446, 'duration': 9.388}, {'end': 6185.136, 'text': "let's take a look.", 'start': 6183.834, 'duration': 1.302}, {'end': 6192.409, 'text': "and there's my array of all the double numbers.", 'start': 6189.707, 'duration': 2.702}, {'end': 6197.972, 'text': "if you're not familiar with higher-order methods there, one of the key components of functional programming in JavaScript,", 'start': 6192.409, 'duration': 5.563}, {'end': 6208.179, 'text': "and they're really really awesome I'd highly recommend go study up a little bit on map and filter and reduce and some of the other ones that are really useful for this.", 'start': 6197.972, 'duration': 10.207}, {'end': 6211.681, 'text': "we're going to stick with map and we're going to see what we can use it for.", 'start': 6208.179, 'duration': 3.502}, {'end': 6222.041, 'text': "so the first thing I'm going to do is pull in my jokes data by importing it and then we're going to follow the same pattern that we did in our example.", 'start': 6211.681, 'duration': 10.36}, {'end': 6227.224, 'text': "here I'm going to say looks data.map.", 'start': 6222.041, 'duration': 5.183}, {'end': 6233.509, 'text': 'I had a function now before I typed the longhand function so that it was a little clear what I was doing.', 'start': 6227.224, 'duration': 6.285}, {'end': 6238.492, 'text': "but we're going to use an arrow function which can just as legitimately be used here.", 'start': 6233.509, 'duration': 4.983}, {'end': 6243.394, 'text': 'function is going to receive each individual joke object.', 'start': 6240.672, 'duration': 2.722}, {'end': 6244.735, 'text': "So I'll call it joke.", 'start': 6243.734, 'duration': 1.001}, {'end': 6248.598, 'text': 'And with arrow functions, if I just have one parameter, I can get rid of my parentheses.', 'start': 6245.275, 'duration': 3.323}, {'end': 6255.262, 'text': "And what I'm going to return from this inner function isn't some modification on the joke object per se.", 'start': 6249.398, 'duration': 5.864}, {'end': 6268.131, 'text': "But rather, I'm going to return a component, joke component and pass in the data from the individual joke object that I'm looking at.", 'start': 6255.762, 'duration': 12.369}, {'end': 6278.798, 'text': "because I'm only returning a single component.", 'start': 6276.736, 'duration': 2.062}, {'end': 6285.342, 'text': "I can actually just do this on one line if I want, and if you're familiar with arrow functions, is an implicit return.", 'start': 6278.798, 'duration': 6.544}, {'end': 6292.087, 'text': 'so I could actually get rid of some of that extra stuff.', 'start': 6285.342, 'duration': 6.745}, {'end': 6295.149, 'text': 'if this is confusing at all, then feel free to put the return in.', 'start': 6292.087, 'duration': 3.062}, {'end': 6298.551, 'text': 'there looks like I have an extra space there.', 'start': 6295.149, 'duration': 3.402}, {'end': 6300.653, 'text': 'and remember, map returns a new array.', 'start': 6298.551, 'duration': 2.102}, {'end': 6308.196, 'text': "so I'm going to save that in variable and now I have an array of components.", 'start': 6300.653, 'duration': 7.543}, {'end': 6311.018, 'text': 'so what am I going to do with an array of components?', 'start': 6308.196, 'duration': 2.822}, {'end': 6322.196, 'text': 'well, react makes it really nice where I can just put an array of components directly here in my JSX, And if I refresh this,', 'start': 6311.018, 'duration': 11.178}, {'end': 6323.236, 'text': "you'll notice a couple things.", 'start': 6322.196, 'duration': 1.04}, {'end': 6327.038, 'text': 'First of all, my jokes on the right are working again, just like they should be.', 'start': 6323.417, 'duration': 3.621}, {'end': 6335.143, 'text': 'And, second of all, you might have noticed this little error that popped up that says each child in an array or iterator should have a key prop.', 'start': 6327.659, 'duration': 7.484}, {'end': 6340.125, 'text': "we won't go too much into the details of why react expects a key prop on repeated components.", 'start': 6335.143, 'duration': 4.982}, {'end': 6343.867, 'text': "But it's enough to know that whenever you're doing a map like this,", 'start': 6340.586, 'duration': 3.281}, {'end': 6348.089, 'text': "you should give the component that you're creating over and over a new prop called key.", 'start': 6343.867, 'duration': 4.222}, {'end': 6357.355, 'text': "whether you're putting this on a component that you've created or some kind of div that you're surrounding it with doesn't really matter.", 'start': 6349.45, 'duration': 7.905}, {'end': 6362.718, 'text': 'just give it a key prop and put something unique inside the key prop.', 'start': 6357.355, 'duration': 5.363}, {'end': 6368.422, 'text': "usually, data from an API will include some kind of ID number or something else that's unique about it.", 'start': 6362.718, 'duration': 5.704}, {'end': 6370.603, 'text': "as long as it's unique, it should be fine.", 'start': 6368.422, 'duration': 2.181}, {'end': 6377.467, 'text': "here I could use the question, because the questions are all unique, but I've also included, for the sake of mimicking real data,", 'start': 6370.603, 'duration': 6.864}, {'end': 6381.41, 'text': 'some ID numbers that I might decide to use instead for my key.', 'start': 6377.467, 'duration': 3.943}, {'end': 6383.431, 'text': 'so over in app.js.', 'start': 6381.41, 'duration': 2.021}, {'end': 6388.014, 'text': 'key is going to be joke.id down, I refresh.', 'start': 6383.431, 'duration': 4.583}, {'end': 6389.655, 'text': 'my warning goes away.', 'start': 6388.014, 'duration': 1.641}, {'end': 6392.297, 'text': 'my app.js is much cleaner than it used to be.', 'start': 6389.655, 'duration': 2.642}, {'end': 6395.159, 'text': 'my data is coming from somewhere external, like it would in the real world.', 'start': 6392.297, 'duration': 2.862}, {'end': 6402.544, 'text': "one of the main takeaways, though, is that we're just using the built-in JavaScript map method on arrays.", 'start': 6395.919, 'duration': 6.625}, {'end': 6406.448, 'text': "in fact, I'm going to include some links to the MDN docs on these methods.", 'start': 6402.544, 'duration': 3.904}, {'end': 6408.349, 'text': 'that will be really helpful for you to understand.', 'start': 6406.448, 'duration': 1.901}, {'end': 6414.815, 'text': "if you don't already feel comfortable with them can see on the far right, in the last part of the URL,", 'start': 6408.349, 'duration': 6.466}, {'end': 6418.739, 'text': 'exactly which method it is that this URL is going to be talking about.', 'start': 6414.815, 'duration': 3.924}, {'end': 6420.481, 'text': 'this course will mostly be using map,', 'start': 6418.739, 'duration': 1.742}, {'end': 6426.547, 'text': "but we may throw in one of these other ones every now and then you don't necessarily have to go memorize these perfectly right now.", 'start': 6420.481, 'duration': 6.066}, {'end': 6430.11, 'text': "but this is just some more material that you'll definitely interested in learning about.", 'start': 6426.547, 'duration': 3.563}, {'end': 6438.46, 'text': "something else that I just thought of that may be really helpful to you is to realize that the things that we're teaching here because so much of react is just vanilla.", 'start': 6430.891, 'duration': 7.569}, {'end': 6443.707, 'text': 'JavaScript can use these things as tools to do a lot of what your imagination could come up with.', 'start': 6438.46, 'duration': 5.247}, {'end': 6448.793, 'text': "for example, as I'm iterating over a joke component and creating a number of jokes,", 'start': 6443.707, 'duration': 5.086}, {'end': 6460.289, 'text': 'I may find a reason to also put a map inside of my joke component and I end up with a loop inside of a loop where each joke component renders an array of its own components.', 'start': 6449.313, 'duration': 10.976}, {'end': 6464.755, 'text': "that's totally possible and it's as simple as putting another map inside of your joke component.", 'start': 6460.289, 'duration': 4.466}, {'end': 6467.431, 'text': 'one joke component gets rendered.', 'start': 6465.709, 'duration': 1.722}, {'end': 6469.052, 'text': 'it renders a number of other components.', 'start': 6467.431, 'duration': 1.621}, {'end': 6473.917, 'text': 'The second joke component gets rendered, it also renders a number of other components and so forth.', 'start': 6469.573, 'duration': 4.344}, {'end': 6481.525, 'text': 'Some of these other methods, like sort, for example, can be used to put things in an order that you prefer,', 'start': 6474.398, 'duration': 7.127}, {'end': 6487.15, 'text': 'or something like filter could only display certain elements of an array rather than the entire array.', 'start': 6481.525, 'duration': 5.625}, {'end': 6489.172, 'text': 'you want an extra challenge,', 'start': 6487.831, 'duration': 1.341}, {'end': 6499.3, 'text': 'try making it so that our array of joke components gets filtered to only display those that have fewer than x number of characters in the question,', 'start': 6489.172, 'duration': 10.128}, {'end': 6504.904, 'text': 'or maybe filtered to only include items that do have a question rather than those that are just an answer.', 'start': 6499.3, 'duration': 5.604}, {'end': 6508.166, 'text': 'This is pretty much everything we have to learn about map right now.', 'start': 6505.684, 'duration': 2.482}, {'end': 6511.729, 'text': 'So when you feel pretty comfortable with this, go to the next lesson to practice it.', 'start': 6508.587, 'duration': 3.142}, {'end': 6525.872, 'text': "okay. so I know I told you I wasn't going to make you create the entire react app from scratch, but I didn't make it a whole lot easier for you.", 'start': 6518.123, 'duration': 7.749}, {'end': 6527.554, 'text': 'I did put the basics in.', 'start': 6525.872, 'duration': 1.682}, {'end': 6533.101, 'text': "so it's rendering an app component and the app component is just rendering an empty div right now,", 'start': 6527.554, 'duration': 5.547}, {'end': 6535.664, 'text': 'and here we have the instructions for this exercise.', 'start': 6533.101, 'duration': 2.563}, {'end': 6545.331, 'text': "so, given a list of products as an array, which will be the products data that I'm importing from the file called the school products,", 'start': 6536.425, 'duration': 8.906}, {'end': 6551.675, 'text': 'you need to create first and then render a product component for each product in the list,', 'start': 6545.331, 'duration': 6.344}, {'end': 6555.037, 'text': 'you can have a chance to practice creating your own functional component,', 'start': 6551.675, 'duration': 3.362}, {'end': 6561.722, 'text': "passing props to it and rendering the correct things to display inside of that component as it's receiving props,", 'start': 6555.037, 'duration': 6.685}, {'end': 6565.565, 'text': "and you'll also need to practice using the map method on the products data.", 'start': 6561.722, 'duration': 3.843}, {'end': 6573.488, 'text': 'this array of data is just an array of silly objects that I created for a presentation that I gave last week here in Salt Lake City,', 'start': 6566.405, 'duration': 7.083}, {'end': 6578.21, 'text': 'and each object has an ID, a name, a price and a description.', 'start': 6573.488, 'duration': 4.722}, {'end': 6584.673, 'text': "you won't necessarily need to display the ID as text on the page, but try to think of what this idea might be helpful for.", 'start': 6578.21, 'duration': 6.463}, {'end': 6588.835, 'text': "so I will go back to the app and I'll give you a chance to give this a shot.", 'start': 6584.673, 'duration': 4.162}, {'end': 6589.095, 'text': 'good luck.', 'start': 6588.835, 'duration': 0.26}, {'end': 6595.751, 'text': "okay, let's start with just a really basic product components.", 'start': 6592.97, 'duration': 2.781}, {'end': 6608.896, 'text': "I'm going to create a new file and call it product.js, which I need to import, react from react and export product it.", 'start': 6595.751, 'duration': 13.145}, {'end': 6615.898, 'text': 'my functional component already know this is going to need to receive props.', 'start': 6608.896, 'duration': 7.002}, {'end': 6617.54, 'text': "So I'll put props there.", 'start': 6616.499, 'duration': 1.041}, {'end': 6638.498, 'text': "And let's just return some really basic JSX for now we'll wrap everything in a div I have, let's say an h2 for the of Scott product.name.", 'start': 6618.12, 'duration': 20.378}, {'end': 6640.98, 'text': 'Now this is a nested object,', 'start': 6639.499, 'duration': 1.481}, {'end': 6650.007, 'text': 'because I anticipate passing the entire product down as one object rather than passing down each individual property of the product individually as a prop.', 'start': 6640.98, 'duration': 9.027}, {'end': 6656.853, 'text': "Instead, I'll just pass the whole product down as one object and access the properties through props.product.", 'start': 6650.588, 'duration': 6.265}, {'end': 6659.235, 'text': 'And then the name of the property.', 'start': 6657.013, 'duration': 2.222}, {'end': 6672.555, 'text': 'down below it I will put a paragraph put a dollar sign in front of prop stop, product price,', 'start': 6659.235, 'duration': 13.32}, {'end': 6681.122, 'text': "and then one thing I'm actually going to put here is a string method called to locale string, which allows me to display this as currency,", 'start': 6672.555, 'duration': 8.567}, {'end': 6687.027, 'text': 'and I believe if I do that it will automatically put the dollar sign there for me, some actually going to take my dollar sign out and then,', 'start': 6681.122, 'duration': 5.905}, {'end': 6692.892, 'text': 'after that gets evaluated, I might do like a dash and put the description.', 'start': 6687.027, 'duration': 5.865}, {'end': 6703.781, 'text': "this is pretty boring, but I'd spend some time if I were you styling this and getting some more practice with styling too.", 'start': 6697.438, 'duration': 6.343}, {'end': 6705.721, 'text': 'so over in app.js.', 'start': 6703.781, 'duration': 1.94}, {'end': 6714.465, 'text': "I know that I'm going to be rendering a number of product components, so I need to first import my product component, not file,", 'start': 6705.721, 'duration': 8.744}, {'end': 6724.473, 'text': "and at the top of my functional component here I'm going to create a new variable called products.", 'start': 6716.744, 'duration': 7.729}, {'end': 6728.238, 'text': "It's a product components.", 'start': 6725.795, 'duration': 2.443}, {'end': 6734.624, 'text': "And that's going to be coming from products data.map.", 'start': 6729.499, 'duration': 5.125}, {'end': 6742.067, 'text': "So products data.map, again, we'll create a new array, we're going to make sure that array is filled with product components.", 'start': 6735.004, 'duration': 7.063}, {'end': 6745.969, 'text': 'So this will receive an individual product or item.', 'start': 6742.768, 'duration': 3.201}, {'end': 6750.871, 'text': "Maybe I'll say item just to distinguish it from all the other things I have named product.", 'start': 6747.05, 'duration': 3.821}, {'end': 6754.513, 'text': 'I want this to return a product component.', 'start': 6751.712, 'duration': 2.801}, {'end': 6760.28, 'text': 'where the product is my item.', 'start': 6756.397, 'duration': 3.883}, {'end': 6767.625, 'text': "And now that I have this array of product components, I'm going to put it inside of my div here and try refreshing.", 'start': 6761.361, 'duration': 6.264}, {'end': 6773.342, 'text': 'cool. one thing you notice is I got that warning about the key prop over here.', 'start': 6768.7, 'duration': 4.642}, {'end': 6777.945, 'text': "I will also add a key property and I'm going to pass in the items.", 'start': 6773.342, 'duration': 4.603}, {'end': 6784.348, 'text': 'ID is to allow to have something unique so that react can correctly place everything the way that wants to.', 'start': 6777.945, 'duration': 6.403}, {'end': 6786.669, 'text': 'and I need to fix my spelling here.', 'start': 6784.348, 'duration': 2.321}, {'end': 6793.393, 'text': 'mystery refreshing again, everything is showing up correctly on the right and I no longer have that warning popping up, which is great.', 'start': 6786.669, 'duration': 6.724}, {'end': 6797.458, 'text': "I'm a bit of a stickler for correct indentation.", 'start': 6794.193, 'duration': 3.265}, {'end': 6799.46, 'text': "So I'm going to fix my indentation here.", 'start': 6797.538, 'duration': 1.922}, {'end': 6802.324, 'text': 'And this essentially is the completion of this exercise.', 'start': 6799.48, 'duration': 2.844}, {'end': 6806.61, 'text': 'Take some time to try and style this see if you can display things a little bit differently.', 'start': 6802.965, 'duration': 3.645}, {'end': 6811.296, 'text': 'Play with adding products to the vSchool products array and see how that affects our website.', 'start': 6806.97, 'duration': 4.326}, {'end': 6817.64, 'text': "one thing I didn't show is that I can scroll down here and see all of the other products that are listed in that array.", 'start': 6811.917, 'duration': 5.723}, {'end': 6825.064, 'text': "maybe try building a button that, when it's clicked in each product, pops up an alert with the information about the individual product.", 'start': 6817.64, 'duration': 7.424}, {'end': 6829.086, 'text': "to spend some time with this, and once you're ready, we're going to talk about conditional rendering.", 'start': 6825.064, 'duration': 4.022}, {'end': 6840.369, 'text': "Let's use what we just learned about mapping and props to make our to do list a little more dynamic.", 'start': 6835.626, 'duration': 4.743}, {'end': 6844.251, 'text': "What I've done is I've created a to dues data JS file here.", 'start': 6841.049, 'duration': 3.202}, {'end': 6849.834, 'text': 'And all it is doing is exporting an array of objects, each object representing a to do item.', 'start': 6844.411, 'duration': 5.423}, {'end': 6856.938, 'text': "Now, normally, you wouldn't do it this way, you would get this data from an API of some sort, where the data is living in a database.", 'start': 6850.515, 'duration': 6.423}, {'end': 6859.34, 'text': "But since we haven't really gotten there, this will do for now.", 'start': 6857.058, 'duration': 2.282}, {'end': 6865.685, 'text': "then over an app js, I've imported that data as an array called to dues data.", 'start': 6860.04, 'duration': 5.645}, {'end': 6871.591, 'text': 'So your task is to essentially turn this array of objects into an array of to do items.', 'start': 6866.386, 'duration': 5.205}, {'end': 6877.256, 'text': "Now remember, right now to do items are hard coded with what they're displaying.", 'start': 6872.492, 'duration': 4.764}, {'end': 6879.378, 'text': 'So that will also need to change.', 'start': 6878.017, 'duration': 1.361}, {'end': 6882.741, 'text': 'Go ahead and pause the lesson and give this a try.', 'start': 6881.059, 'duration': 1.682}, {'end': 6893.868, 'text': "So the first thing I'm going to do is take my array and turn it into an array of to do items.", 'start': 6888.464, 'duration': 5.404}, {'end': 6896.49, 'text': "then we'll have to fix to do items so that it can receive props.", 'start': 6893.868, 'duration': 2.622}, {'end': 6907.618, 'text': "Before my return, I'm going to create an array called to do items, which is the result of doing to do's data.map.", 'start': 6897.291, 'duration': 10.327}, {'end': 6913.584, 'text': 'which will pass a function to that receives an item.', 'start': 6910.461, 'duration': 3.123}, {'end': 6917.329, 'text': "Essentially, we're just going to create a to do item.", 'start': 6914.566, 'duration': 2.763}, {'end': 6923.455, 'text': "And we're going to pass the information from the individual item object down to to do item.", 'start': 6918.069, 'duration': 5.386}, {'end': 6928.381, 'text': "Currently to do item doesn't accept anything, but we'll fix that in a minute.", 'start': 6924.416, 'duration': 3.965}, {'end': 6930.263, 'text': "So I'm going to pass a prop called item.", 'start': 6928.401, 'duration': 1.862}, {'end': 6934.735, 'text': 'and its value is going to be the object.', 'start': 6932.113, 'duration': 2.622}, {'end': 6945.986, 'text': "And now that I have an array of to do item components, let's take these out and replace it with my array of to do items.", 'start': 6935.576, 'duration': 10.41}, {'end': 6952.415, 'text': "Okay, and you'll notice that I forgot to put a key prop in here, always an important thing to do.", 'start': 6948.092, 'duration': 4.323}, {'end': 6960.001, 'text': "And with the to do's data, what I've done is added an ID property, these IDs, we can assume will always be unique.", 'start': 6953.096, 'duration': 6.905}, {'end': 6968.288, 'text': "And so over in app js, I will just add a key and say it's item that rid of that warning.", 'start': 6960.842, 'duration': 7.446}], 'summary': 'The transcript covers conditional rendering, use of ternary operator, inline styling, use of map method to render components, and creating a dynamic to-do list.', 'duration': 1102.881, 'max_score': 5865.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc445865407.jpg'}, {'end': 5898.955, 'src': 'embed', 'start': 5867.911, 'weight': 3, 'content': [{'end': 5881.311, 'text': 'but for now you may find a way around it where you can say I want this H3 to have a style with a display of none under certain circumstances.', 'start': 5867.911, 'duration': 13.4}, {'end': 5888.193, 'text': 'But if, right here, I use the ternary operator to decide what that should be inside of my object,', 'start': 5882.151, 'duration': 6.042}, {'end': 5892.774, 'text': 'I could say essentially is props that question thing.', 'start': 5888.193, 'duration': 4.581}, {'end': 5893.734, 'text': 'is it truthy??', 'start': 5892.774, 'duration': 0.96}, {'end': 5898.955, 'text': 'If so, displayed in the regular block format but otherwise displayed as none.', 'start': 5894.334, 'duration': 4.621}], 'summary': 'Using a ternary operator to conditionally style h3 element based on props truthiness.', 'duration': 31.044, 'max_score': 5867.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc445867911.jpg'}, {'end': 6028.64, 'src': 'embed', 'start': 6003.092, 'weight': 4, 'content': [{'end': 6008.153, 'text': 'we can start using the differing props that come into our component to display things differently.', 'start': 6003.092, 'duration': 5.061}, {'end': 6012.155, 'text': 'And as such, our joke component is now more or less reusable.', 'start': 6008.514, 'duration': 3.641}, {'end': 6017.056, 'text': 'we can add jokes that just have punchlines and jokes that have both questions in punchlines.', 'start': 6012.155, 'duration': 4.901}, {'end': 6022.918, 'text': 'And automatically, the joke component knows how to style itself based on the incoming props.', 'start': 6017.556, 'duration': 5.362}, {'end': 6028.64, 'text': "And that's pretty much it for this practice, feel free to pause this and play with this as much as you want before moving on.", 'start': 6023.818, 'duration': 4.822}], 'summary': 'Component can display jokes with different props, making it reusable.', 'duration': 25.548, 'max_score': 6003.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc446003092.jpg'}, {'end': 6166.802, 'src': 'embed', 'start': 6126.665, 'weight': 1, 'content': [{'end': 6134.27, 'text': 'For example, if I had the following array I can run a higher order method on nums.', 'start': 6126.665, 'duration': 7.605}, {'end': 6142.053, 'text': 'all the map and map is a method of the nums array and it takes a function as its parameter.', 'start': 6134.27, 'duration': 7.783}, {'end': 6146.975, 'text': 'this function will receive each individual number in the array.', 'start': 6142.053, 'duration': 4.922}, {'end': 6148.635, 'text': 'I might say num or number,', 'start': 6146.975, 'duration': 1.66}, {'end': 6166.802, 'text': 'say num function will then run on every single item in the array and with map whatever I returned from my inner function here will be placed in the same index of a brand new array with some kind of modification,', 'start': 6148.635, 'duration': 18.167}], 'summary': "Higher order method 'map' is used on 'nums' array to apply a function to each item.", 'duration': 40.137, 'max_score': 6126.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc446126665.jpg'}, {'end': 6420.481, 'src': 'embed', 'start': 6392.297, 'weight': 0, 'content': [{'end': 6395.159, 'text': 'my data is coming from somewhere external, like it would in the real world.', 'start': 6392.297, 'duration': 2.862}, {'end': 6402.544, 'text': "one of the main takeaways, though, is that we're just using the built-in JavaScript map method on arrays.", 'start': 6395.919, 'duration': 6.625}, {'end': 6406.448, 'text': "in fact, I'm going to include some links to the MDN docs on these methods.", 'start': 6402.544, 'duration': 3.904}, {'end': 6408.349, 'text': 'that will be really helpful for you to understand.', 'start': 6406.448, 'duration': 1.901}, {'end': 6414.815, 'text': "if you don't already feel comfortable with them can see on the far right, in the last part of the URL,", 'start': 6408.349, 'duration': 6.466}, {'end': 6418.739, 'text': 'exactly which method it is that this URL is going to be talking about.', 'start': 6414.815, 'duration': 3.924}, {'end': 6420.481, 'text': 'this course will mostly be using map,', 'start': 6418.739, 'duration': 1.742}], 'summary': 'Using javascript map method for arrays. links to mdn docs included.', 'duration': 28.184, 'max_score': 6392.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc446392297.jpg'}, {'end': 6584.673, 'src': 'embed', 'start': 6555.037, 'weight': 2, 'content': [{'end': 6561.722, 'text': "passing props to it and rendering the correct things to display inside of that component as it's receiving props,", 'start': 6555.037, 'duration': 6.685}, {'end': 6565.565, 'text': "and you'll also need to practice using the map method on the products data.", 'start': 6561.722, 'duration': 3.843}, {'end': 6573.488, 'text': 'this array of data is just an array of silly objects that I created for a presentation that I gave last week here in Salt Lake City,', 'start': 6566.405, 'duration': 7.083}, {'end': 6578.21, 'text': 'and each object has an ID, a name, a price and a description.', 'start': 6573.488, 'duration': 4.722}, {'end': 6584.673, 'text': "you won't necessarily need to display the ID as text on the page, but try to think of what this idea might be helpful for.", 'start': 6578.21, 'duration': 6.463}], 'summary': 'Practice passing props and using map method on products data with id, name, price, and description.', 'duration': 29.636, 'max_score': 6555.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc446555037.jpg'}], 'start': 5665.338, 'title': 'React component rendering, styling, and data manipulation', 'summary': 'Covers rendering components in jsx, conditional rendering, inline styling, higher-order array methods, usage of map method, creating product component, and conditional rendering for to-do items.', 'chapters': [{'end': 5936.278, 'start': 5665.338, 'title': 'React component rendering', 'summary': 'Discusses rendering components in jsx, addressing issues with missing props, and exploring conditional rendering using the ternary operator and css style display property.', 'duration': 270.94, 'highlights': ["The need to use curly braces to surround JavaScript code inside JSX, as simply writing props.question would display the text 'props.question' instead of its value.", "React's behavior of not displaying anything if any JavaScript inside JSX evaluates to undefined or null, highlighting the need to address missing props when rendering components.", 'The exploration of conditional rendering using the ternary operator to decide the display style of an HTML element based on the truthiness of props.question, with a recommendation to learn more about ternaries in React.', 'The alternative approach of using CSS style display property to conditionally render content based on the presence of props.question, providing a concise but potentially confusing method.', 'The mention of upcoming lessons on conditionally rendering parts of the page and the encouragement to experiment with different styling approaches, demonstrating the flexibility of React development.']}, {'end': 6197.972, 'start': 5936.278, 'title': 'React component styling and array operations', 'summary': 'Discusses styling react components using inline styling and javascript, and then explores the use of higher-order array methods in react for data manipulation and rendering components based on incoming props.', 'duration': 261.694, 'highlights': ['The chapter discusses styling React components using inline styling and JavaScript, emphasizing the use of differing props to display things differently and make the joke component more reusable.', 'It explains the process of rendering components based on incoming props and demonstrates the use of higher-order array methods like map for data manipulation in React.', 'It introduces higher-order array methods and demonstrates the use of the map method for modifying array elements, showcasing how it returns a new array with modifications based on the provided function.']}, {'end': 6508.166, 'start': 6197.972, 'title': 'Using javascript map method in react', 'summary': 'Discusses the usage of the map method in javascript to render components in react, emphasizing the creation of an array of components and addressing the importance of key props and additional javascript array methods.', 'duration': 310.194, 'highlights': ['The map method is used to create an array of components in React, optimizing the rendering process and enhancing the functionality of the application.', 'The importance of key props in React components is highlighted, emphasizing the unique identification of components and the resolution of iterator-related warnings.', 'The chapter also touches upon the potential use of other JavaScript array methods such as sort and filter, providing opportunities for additional challenges and advanced functionality.']}, {'end': 6692.892, 'start': 6508.587, 'title': 'Creating product component in react', 'summary': 'Discusses creating a product component in react, rendering it with props, and using the map method on products data, which includes id, name, price, and description.', 'duration': 184.305, 'highlights': ['The chapter discusses creating a product component in React and rendering it with props, emphasizing the use of the map method on products data, which includes ID, name, price, and description.', 'The products data consists of an array of objects with properties like ID, name, price, and description, intended for practicing creating functional components, passing props, and rendering correct content.', 'The tutorial encourages practicing passing the entire product object as one prop and accessing its properties through props.product, along with using the toLocaleString method to display the price as currency.']}, {'end': 7092.856, 'start': 6697.438, 'title': 'React components and conditional rendering', 'summary': 'Covers the process of rendering product components, handling warnings about key props, and dynamically creating to-do items through mapping and props, with a hint on how to handle completed tasks.', 'duration': 395.418, 'highlights': ['The chapter covers rendering product components and addressing the warning about the key prop to correctly place items in the application.', 'The process of dynamically creating to-do items through mapping and props, transforming an array of raw data into elements on the application.', 'A hint is given on how to handle completed tasks by setting the checkbox as checked when the item is considered completed.']}], 'duration': 1427.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc445665338.jpg', 'highlights': ['The map method optimizes rendering and enhances application functionality', 'Using higher-order array methods like map for data manipulation in React', 'Creating a product component in React and rendering it with props', 'Exploring conditional rendering using the ternary operator in JSX', 'Rendering components based on incoming props and using inline styling']}, {'end': 9374.044, 'segs': [{'end': 7170.926, 'src': 'embed', 'start': 7134.125, 'weight': 0, 'content': [{'end': 7137.248, 'text': "we're going to find that a functional component can't do everything that we need it to do.", 'start': 7134.125, 'duration': 3.123}, {'end': 7142.649, 'text': "And so at this point, what we're going to do is actually learn to create a class based component.", 'start': 7137.768, 'duration': 4.881}, {'end': 7147.17, 'text': 'For now, our class based component is going to do exactly what our functional component does.', 'start': 7143.169, 'duration': 4.001}, {'end': 7152.792, 'text': "And then, in upcoming lessons, we're going to talk about what class based components can do for us,", 'start': 7147.631, 'duration': 5.161}, {'end': 7156.713, 'text': 'such as allowing us to implement state and lifecycle methods.', 'start': 7152.792, 'duration': 3.921}, {'end': 7161.637, 'text': "But for now, let's just look at converting a functional component into a class based component.", 'start': 7157.313, 'duration': 4.324}, {'end': 7165.721, 'text': "If you're not really familiar yet with the class syntax in ES six,", 'start': 7161.978, 'duration': 3.743}, {'end': 7170.926, 'text': "then I'd recommend going over to the screen by ES six course and learning a little bit about classes.", 'start': 7165.721, 'duration': 5.205}], 'summary': 'Transition from functional to class component for state and lifecycle methods.', 'duration': 36.801, 'max_score': 7134.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc447134125.jpg'}, {'end': 7351.684, 'src': 'embed', 'start': 7327.608, 'weight': 1, 'content': [{'end': 7334.837, 'text': 'And then from inside the render method, you can call your method by using this dot and then the name of your method.', 'start': 7327.608, 'duration': 7.229}, {'end': 7346.843, 'text': "And if your method returns something, And this is where you put that a few lessons in the future, we're going to talk about some caveats with this.", 'start': 7334.857, 'duration': 11.986}, {'end': 7351.684, 'text': "But for now, it's just as easy to put your display logic here inside of the render method.", 'start': 7347.323, 'duration': 4.361}], 'summary': 'In the render method, you can call your method using this dot and the method name.', 'duration': 24.076, 'max_score': 7327.608, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc447327608.jpg'}, {'end': 7705.908, 'src': 'heatmap', 'start': 7519.133, 'weight': 0.849, 'content': [{'end': 7525.117, 'text': "And then the one thing that's always really easy to miss here is that instead of props it needs to be this dot props,", 'start': 7519.133, 'duration': 5.984}, {'end': 7526.738, 'text': 'because this is a class based component.', 'start': 7525.117, 'duration': 1.621}, {'end': 7531.522, 'text': "This third component looks a little bit more complex, but essentially, it's the same thing.", 'start': 7527.599, 'duration': 3.923}, {'end': 7535.044, 'text': 'Last greeting stands.', 'start': 7532.723, 'duration': 2.321}, {'end': 7545.252, 'text': 'And now, like I showed you in the previous lesson, we could decide just to put component here, which then means at the top we would need to import,', 'start': 7535.565, 'duration': 9.687}, {'end': 7546.973, 'text': 'react and component.', 'start': 7545.252, 'duration': 1.721}, {'end': 7554.093, 'text': 'then all of this logic is also going to go inside of.', 'start': 7550.45, 'duration': 3.643}, {'end': 7564.703, 'text': 'the render method looks like this component is not using props anywhere.', 'start': 7554.093, 'duration': 10.61}, {'end': 7571.71, 'text': "so I don't need to worry about changing that to this dot props and can see I still am getting exactly what I had at the beginning.", 'start': 7564.703, 'duration': 7.007}, {'end': 7575.469, 'text': "now, hopefully you also notice that there's a bug here.", 'start': 7572.708, 'duration': 2.761}, {'end': 7579.511, 'text': 'it says welcome, comma and then a space with nothing in it.', 'start': 7575.469, 'duration': 4.042}, {'end': 7588.335, 'text': "if you didn't do this in the beginning, take a second now to try and figure out why that is.", 'start': 7579.511, 'duration': 8.824}, {'end': 7593.418, 'text': "let's look at the component that's in charge of actually displaying this and that's our header.", 'start': 7588.335, 'duration': 5.083}, {'end': 7599.12, 'text': "here we notice that it's saying welcome, this dot props, that username.", 'start': 7595.017, 'duration': 4.103}, {'end': 7604.523, 'text': "for when I am creating an instance of header I'm not passing it any props.", 'start': 7599.12, 'duration': 5.403}, {'end': 7607.345, 'text': "so it's coming in as undefined.", 'start': 7604.523, 'duration': 2.822}, {'end': 7611.567, 'text': "so it's coming in with nothing and I need to actually pass something there.", 'start': 7607.345, 'duration': 4.222}, {'end': 7616.731, 'text': 'so the problem going to add is username wolves.', 'start': 7611.567, 'duration': 5.164}, {'end': 7618.432, 'text': 'then we can put whatever we want here.', 'start': 7616.731, 'duration': 1.701}, {'end': 7621.528, 'text': 'there we go.', 'start': 7620.987, 'duration': 0.541}, {'end': 7622.83, 'text': "that's fixed.", 'start': 7621.528, 'duration': 1.302}, {'end': 7624.832, 'text': "hopefully this wasn't too difficult of a challenge.", 'start': 7622.83, 'duration': 2.002}, {'end': 7632.322, 'text': 'if it was, then go back through it and try to convert these classes back into functions and then from functions back into classes.', 'start': 7624.832, 'duration': 7.49}, {'end': 7636.228, 'text': "that sounds pretty tedious, but honestly it's one of the better ways to learn.", 'start': 7632.322, 'duration': 3.906}, {'end': 7637.189, 'text': "once you're ready, let's move on.", 'start': 7636.228, 'duration': 0.961}, {'end': 7646.1, 'text': 'Okay, so we finally come to one of the most important parts of react.', 'start': 7642.958, 'duration': 3.142}, {'end': 7647.642, 'text': 'And that is understanding state.', 'start': 7646.181, 'duration': 1.461}, {'end': 7651.344, 'text': 'State is simply the data that a component maintains.', 'start': 7648.462, 'duration': 2.882}, {'end': 7655.247, 'text': 'And when I say maintains, I mean, it actually can change its value.', 'start': 7651.805, 'duration': 3.442}, {'end': 7667.016, 'text': "The reason that's a distinct feature over anything we've learned so far is because props the other way to pass data from a component to another component cannot be changed by the component receiving the props.", 'start': 7655.948, 'duration': 11.068}, {'end': 7671.2, 'text': 'They say in the react documentation that props are immutable or unchangeable.', 'start': 7667.517, 'duration': 3.683}, {'end': 7682.388, 'text': "all that means is that I can't receive a prop and then say this.props.something equals some new value.", 'start': 7671.9, 'duration': 10.488}, {'end': 7687.431, 'text': "I can't change props and if I do, it may cause some weirdness with react.", 'start': 7682.388, 'duration': 5.043}, {'end': 7694.877, 'text': "so state is different in that it's a way that a component can maintain its own data and change its own data if it needs to.", 'start': 7687.431, 'duration': 7.446}, {'end': 7698.059, 'text': 'let me get rid of this before becomes confusing, because you should not do this.', 'start': 7694.877, 'duration': 3.182}, {'end': 7705.908, 'text': "So anytime we're going to introduce state to a component, the first thing is that the component needs to be a class based component.", 'start': 7699.284, 'duration': 6.624}], 'summary': 'Transcript covers class-based components, props vs state, and component logic.', 'duration': 186.775, 'max_score': 7519.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc447519133.jpg'}, {'end': 7667.016, 'src': 'embed', 'start': 7636.228, 'weight': 2, 'content': [{'end': 7637.189, 'text': "once you're ready, let's move on.", 'start': 7636.228, 'duration': 0.961}, {'end': 7646.1, 'text': 'Okay, so we finally come to one of the most important parts of react.', 'start': 7642.958, 'duration': 3.142}, {'end': 7647.642, 'text': 'And that is understanding state.', 'start': 7646.181, 'duration': 1.461}, {'end': 7651.344, 'text': 'State is simply the data that a component maintains.', 'start': 7648.462, 'duration': 2.882}, {'end': 7655.247, 'text': 'And when I say maintains, I mean, it actually can change its value.', 'start': 7651.805, 'duration': 3.442}, {'end': 7667.016, 'text': "The reason that's a distinct feature over anything we've learned so far is because props the other way to pass data from a component to another component cannot be changed by the component receiving the props.", 'start': 7655.948, 'duration': 11.068}], 'summary': 'Understanding state is crucial in react for maintaining and changing component data.', 'duration': 30.788, 'max_score': 7636.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc447636228.jpg'}, {'end': 7917.885, 'src': 'embed', 'start': 7893.067, 'weight': 5, 'content': [{'end': 7904.776, 'text': "the only other thing I want to mention in this lesson for now is that react will do some really cool stuff if we ever change state and I don't mean changing it here manually in the initial value,", 'start': 7893.067, 'duration': 11.709}, {'end': 7909.819, 'text': "but I mean when we use the set state method that I mentioned, which we'll talk about in a couple lessons.", 'start': 7904.776, 'duration': 5.043}, {'end': 7917.885, 'text': 'but if we ever use that method and change the state, react will automatically update every child component that is receiving parts of that state,', 'start': 7909.819, 'duration': 8.066}], 'summary': 'React automatically updates child components when state changes using setstate method.', 'duration': 24.818, 'max_score': 7893.067, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc447893067.jpg'}, {'end': 8157.561, 'src': 'embed', 'start': 8127.379, 'weight': 4, 'content': [{'end': 8131.982, 'text': 'and do that as many times as it takes for the syntax to kind of be second nature.', 'start': 8127.379, 'duration': 4.603}, {'end': 8134.978, 'text': 'for you, doing that is going to do a number of things,', 'start': 8131.982, 'duration': 2.996}, {'end': 8145.107, 'text': "but mainly it's going to make it so that in the future you don't get so hung up on figuring out and remembering the syntax as much as figuring out how to solve specific problems.", 'start': 8134.978, 'duration': 10.129}, {'end': 8157.561, 'text': "so feel free to stop here, go back, redo this as many times as is necessary and then, when you're ready, feel free to move on, okay.", 'start': 8145.107, 'duration': 12.454}], 'summary': 'Repetition of syntax leads to problem-solving focus.', 'duration': 30.182, 'max_score': 8127.379, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc448127379.jpg'}], 'start': 7092.856, 'title': 'Converting to class-based components and react state management', 'summary': "Introduces the transition from functional components to class-based components in react, emphasizing the advantages of class components, covering the process of converting functional components to class-based components, the concept of state in react, handling events, and changing state in a class-based component. it also discusses the importance of render method, 'this.props', state initialization using a constructor, and conditional rendering, with a focus on problem-solving skills. additionally, it addresses passing state from parent to child components, event handling, and the setstate method, highlighting the potential of event handling in building robust applications.", 'chapters': [{'end': 7351.684, 'start': 7092.856, 'title': 'React: functional to class component', 'summary': 'Introduces the transition from functional components to class-based components in react, highlighting the advantages of class components in implementing state and lifecycle methods, and the importance of render method for display logic.', 'duration': 258.828, 'highlights': ['Class components allow the implementation of state and lifecycle methods, providing more functionality than functional components.', 'The render method in class components is crucial for display logic, including setting up style objects, conditional rendering, and other display-related logic.', 'Functional components are preferred to start with due to their simplicity and ease of understanding.']}, {'end': 7636.228, 'start': 7352.804, 'title': 'Class-based components and props', 'summary': "Discusses the process of converting functional components to class-based components, emphasizing the use of 'this.props' instead of 'props' and the transformation of 'return' statements into a 'render' method in react, and also addresses a bug related to passing props to components.", 'duration': 283.424, 'highlights': ["The process of converting functional components to class-based components involves changing 'function' to 'class', extending 'React.Component', replacing 'props' with 'this.props', and transforming 'return' statements into a 'render' method.", 'A bug related to passing props is addressed, where the absence of passed props results in undefined values, which can be fixed by providing the necessary props when creating an instance of the component.', "The chapter emphasizes the importance of using 'this.props' instead of 'props' when dealing with class-based components in React, to avoid potential bugs and ensure proper functionality."]}, {'end': 8145.107, 'start': 7636.228, 'title': 'React state and constructors', 'summary': "Covers the concept of state in react, highlighting its importance in maintaining component data, the distinction from props, the necessity of class-based components for state usage, and the process of initializing state using a constructor method, with a focus on the 'super' function and setting state values. it also discusses passing state from parent to child components and the automatic update of child components upon state changes.", 'duration': 508.879, 'highlights': ['State in React is crucial for maintaining component data and can be changed, unlike props, which are immutable.', 'Class-based components are required for introducing and utilizing state in components.', "The constructor method is used to initialize state in a component, with the 'super' function being called at the beginning and state being set as an object.", "State values can be accessed using 'this.state' and can be changed using the 'setState' method, leading to automatic updates in child components.", 'Repetition and practice are emphasized to strengthen understanding and familiarity with the syntax and concepts of state in React.']}, {'end': 8390.295, 'start': 8145.107, 'title': 'Converting to class-based component and conditional rendering', 'summary': "Covers converting a functional, stateless component to a class-based component, adding state, and implementing conditional rendering based on the state, with a challenge to render 'in' if the state is true or 'out' if it's false, to exercise problem-solving skills.", 'duration': 245.188, 'highlights': ['The chapter emphasizes converting a functional, stateless component to a class-based component, adding state, and implementing conditional rendering based on the state, as a way to exercise problem-solving skills.', "It challenges the learners to render 'in' if the state is true or 'out' if it's false, thus reinforcing the understanding and practical application of conditional rendering.", 'The instructor encourages learners to feel free to redo the practice as many times as necessary and to utilize their problem-solving skills, providing a supportive and adaptable learning environment.']}, {'end': 8826.274, 'start': 8390.295, 'title': 'Managing react state and handling events', 'summary': "Covers managing state in a react app by moving to-do data into the component's state, handling events using camel-cased javascript event handlers, and adding event listeners to elements to execute functions on specific events. it also emphasizes the importance of repetition in solidifying syntax and the potential of event handling in building robust applications.", 'duration': 435.979, 'highlights': ['The importance of repetition to solidify syntax and enable focus on problem-solving is emphasized, with the suggestion to practice writing code from scratch.', "Moving to-do data into the state of the app component is highlighted as a pivotal step in modifying the data, with a specific instruction to make the to-do's data live in the component's state.", "The process of managing state in a React component is outlined, from creating a class-based component to using the 'constructor' and 'setState' to update the state with the imported to-do's data.", 'The significance of handling events in React is explained, emphasizing the simplicity of event handling and the similarity to regular JavaScript event conventions, with a demonstration of adding event handlers using camel-cased JavaScript event handlers and executing functions on specific events.', "The task of adding an 'onchange' event to an input element to get rid of a warning related to a 'check' prop and console logging the change is presented as a challenge to reinforce the understanding of handling events."]}, {'end': 9374.044, 'start': 8826.615, 'title': 'Changing state in react components', 'summary': 'Discusses the process of changing state in a class-based component in react, emphasizing the importance of not directly modifying state and demonstrating the use of the setstate method with examples, showcasing the two different ways to pass parameters to setstate.', 'duration': 547.429, 'highlights': ['The setState method in React is essential for changing state in a class-based component, and it should be used instead of directly modifying the original version of state, as it provides a way to update the state without mutating the original version, ensuring proper rendering and functionality.', 'The first way to use setState is by passing an object that represents the new state, which is a simple and straightforward approach, but it does not allow accessing the previous state, and thus may not be suitable for scenarios where the previous state is required for the update.', 'The second way to use setState involves passing a function that receives the previous version of state as a parameter, enabling access to the previous state and allowing for the creation of the new state based on the previous state, providing more control and flexibility for state updates.']}], 'duration': 2281.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc447092856.jpg', 'highlights': ['Class components provide more functionality than functional components', 'The render method in class components is crucial for display logic', 'State in React is crucial for maintaining component data and can be changed', 'The process of converting functional components to class-based components involves specific steps', 'The importance of repetition to solidify syntax and enable focus on problem-solving is emphasized', 'The setState method in React is essential for changing state in a class-based component']}, {'end': 10842.586, 'segs': [{'end': 9394.338, 'src': 'embed', 'start': 9374.044, 'weight': 0, 'content': [{'end': 9394.338, 'text': "but this opens up so many possibilities and you're going to see from here on just how much we're going to be able to do with react now that we have the ability to have components maintain their own data and state and actually change their own data using set state mentioned before that you are allowed to pass state down to other components as props,", 'start': 9374.044, 'duration': 20.294}], 'summary': "React's new capabilities enable components to maintain and change their own data, and pass state to other components as props.", 'duration': 20.294, 'max_score': 9374.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc449374044.jpg'}, {'end': 9444.221, 'src': 'embed', 'start': 9417.914, 'weight': 1, 'content': [{'end': 9428.157, 'text': "what react will do is, anytime this value changes, anytime it sees that there's a child component that's receiving a value that changes,", 'start': 9417.914, 'duration': 10.243}, {'end': 9430.858, 'text': 'it will rerender this component.', 'start': 9428.157, 'duration': 2.701}, {'end': 9436.559, 'text': 'it will run that components render method once again or, if this is a functional component,', 'start': 9431.718, 'duration': 4.841}, {'end': 9444.221, 'text': "it will just run that function again so that that component can reflect the new version of props that it's receiving.", 'start': 9436.559, 'duration': 7.662}], 'summary': 'React will rerender component when value changes, ensuring reflection of new props.', 'duration': 26.307, 'max_score': 9417.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc449417914.jpg'}, {'end': 9543.95, 'src': 'embed', 'start': 9511.291, 'weight': 2, 'content': [{'end': 9516.254, 'text': 'and that function should return the object literal that represents the new version of state.', 'start': 9511.291, 'duration': 4.963}, {'end': 9522.058, 'text': 'now I just rattled off a lot of jargony stuff, so I want you to spend some time with this.', 'start': 9516.254, 'duration': 5.804}, {'end': 9524.98, 'text': 'state is going to be extremely important for you to understand.', 'start': 9522.058, 'duration': 2.922}, {'end': 9530.403, 'text': "we're going to be using it pretty much through the rest of the course to spend some serious time with this.", 'start': 9524.98, 'duration': 5.423}, {'end': 9535.387, 'text': "I'd highly recommend as I have in the past tried deleting this entirely, writing it from scratch,", 'start': 9530.403, 'duration': 4.984}, {'end': 9543.95, 'text': 'or probably a good stepping stone to that is rewinding this video to the beginning and seeing if you can add all of the stuff again.', 'start': 9536.403, 'duration': 7.547}], 'summary': 'Understanding state is crucial for the course. revisit and practice for better comprehension.', 'duration': 32.659, 'max_score': 9511.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc449511291.jpg'}, {'end': 10085.358, 'src': 'heatmap', 'start': 9530.403, 'weight': 0.93, 'content': [{'end': 9535.387, 'text': "I'd highly recommend as I have in the past tried deleting this entirely, writing it from scratch,", 'start': 9530.403, 'duration': 4.984}, {'end': 9543.95, 'text': 'or probably a good stepping stone to that is rewinding this video to the beginning and seeing if you can add all of the stuff again.', 'start': 9536.403, 'duration': 7.547}, {'end': 9548.594, 'text': "you're also welcome to try adding different events that may also change.", 'start': 9543.95, 'duration': 4.644}, {'end': 9551.916, 'text': "state can play with the state that's getting changed.", 'start': 9548.594, 'duration': 3.322}, {'end': 9554.799, 'text': 'maybe you want it to increase by more than one or something like that.', 'start': 9551.916, 'duration': 2.883}, {'end': 9556.02, 'text': "I don't know.", 'start': 9554.799, 'duration': 1.221}, {'end': 9563.346, 'text': 'one really good exercise is to have a button that will double the number and another button that will have the number.', 'start': 9556.02, 'duration': 7.326}, {'end': 9567.09, 'text': "so there's plenty of things that you can try to do with this.", 'start': 9564.227, 'duration': 2.863}, {'end': 9574.159, 'text': 'so use your creativity and your imagination, see what you can come up with, but spend some real time with this and play with it.', 'start': 9567.09, 'duration': 7.069}, {'end': 9576.842, 'text': "then, in the next lesson, we're going to get a chance to practice this.", 'start': 9574.159, 'duration': 2.683}, {'end': 9586.264, 'text': "Okay, we've come to a pretty beefy part of our to do app.", 'start': 9583.621, 'duration': 2.643}, {'end': 9591.328, 'text': "we're going to make it so that when we click the checkbox, it actually makes a change to our state.", 'start': 9586.264, 'duration': 5.064}, {'end': 9596.413, 'text': "And this actually is a little more involved than it may sound, but it's really not too bad.", 'start': 9592.089, 'duration': 4.324}, {'end': 9599.376, 'text': "Up near the top, I've written down what your challenge is.", 'start': 9597.114, 'duration': 2.262}, {'end': 9602.098, 'text': 'And some of this will help you accomplish this task.', 'start': 9599.716, 'duration': 2.382}, {'end': 9607.862, 'text': "and I've also stubbed out the handle change method and written some pseudocode inside here.", 'start': 9602.879, 'duration': 4.983}, {'end': 9611.804, 'text': 'so you have some hints essentially to help you accomplish this.', 'start': 9607.862, 'duration': 3.942}, {'end': 9616.847, 'text': "and just so there aren't any weird bugs, I've also bound this in the constructor for you.", 'start': 9611.804, 'duration': 5.043}, {'end': 9625.291, 'text': 'so your challenge is going to be to take this stubbed out handle change and actually implement it so that when somebody clicks the checkbox,', 'start': 9616.847, 'duration': 8.444}, {'end': 9629.292, 'text': 'it makes a change to your state and updates the item that they checked,', 'start': 9625.291, 'duration': 4.001}, {'end': 9632.773, 'text': 'so that the completed property flips from either true to false or false to true.', 'start': 9629.292, 'duration': 3.481}, {'end': 9638.154, 'text': "And then you're going to make sure to pass the handle change method down to your to do item.", 'start': 9633.453, 'duration': 4.701}, {'end': 9645.356, 'text': "And then over in your to do item, you'll need to implement the on change with the new method that you've passed to it.", 'start': 9638.774, 'duration': 6.582}, {'end': 9647.276, 'text': 'So let me go back here to app.', 'start': 9646.096, 'duration': 1.18}, {'end': 9649.997, 'text': 'Pause now and go ahead and get started.', 'start': 9648.417, 'duration': 1.58}, {'end': 9662.457, 'text': "okay, so I might do this a little bit out of order, but I think the very first thing I'm going to do in my handle change is just a console lock,", 'start': 9655.137, 'duration': 7.32}, {'end': 9666.231, 'text': 'something we changed.', 'start': 9662.457, 'duration': 3.774}, {'end': 9674.053, 'text': "And since we're getting the ID, let me just go ahead and add the ID to my console log so I can make sure that that's working.", 'start': 9667.172, 'duration': 6.881}, {'end': 9682.476, 'text': "And then I think what I'll do is hook up parts two or complete parts two and three, and just see if I can get this console log to happen.", 'start': 9674.694, 'duration': 7.782}, {'end': 9685.637, 'text': "And then we'll go ahead and add this logic in.", 'start': 9683.136, 'duration': 2.501}, {'end': 9690.859, 'text': 'So part two says that I need to pass the method down to the to do item component.', 'start': 9686.917, 'duration': 3.942}, {'end': 9695.281, 'text': 'So right here, I have my to do item, which gets a key and item.', 'start': 9690.919, 'duration': 4.362}, {'end': 9698.523, 'text': "And let's go ahead and pass down a handle change.", 'start': 9696.002, 'duration': 2.521}, {'end': 9702.991, 'text': 'was passed down this dot handle change.', 'start': 9700.97, 'duration': 2.021}, {'end': 9709.015, 'text': "And then over into do item, it's now receiving a prop called handle change.", 'start': 9703.832, 'duration': 5.183}, {'end': 9710.316, 'text': 'So props dot handle change.', 'start': 9709.075, 'duration': 1.241}, {'end': 9715.318, 'text': "And notice that it says it's going to be taking the ID as a parameter.", 'start': 9711.036, 'duration': 4.282}, {'end': 9721.122, 'text': 'However, we know that events when they fire, they actually receive an event property.', 'start': 9715.959, 'duration': 5.163}, {'end': 9725.665, 'text': "And so it won't be good enough to just say props dot handle change.", 'start': 9721.762, 'duration': 3.903}, {'end': 9732.648, 'text': "like this, because this is not going to receive an ID property, it's going to receive the event object instead.", 'start': 9726.545, 'duration': 6.103}, {'end': 9740.111, 'text': "And so what I can do is say, Well, this is the function that's saving the event here.", 'start': 9733.328, 'duration': 6.783}, {'end': 9743.932, 'text': 'And what it does is it calls props dot handle change.', 'start': 9740.791, 'duration': 3.141}, {'end': 9751.596, 'text': 'And now I can pass whatever properties I want to this, I want to say props dot item dot ID.', 'start': 9744.633, 'duration': 6.963}, {'end': 9755.437, 'text': "since I'm not actually using this event in this case.", 'start': 9752.856, 'duration': 2.581}, {'end': 9756.538, 'text': "I'm just going to get rid of that.", 'start': 9755.437, 'duration': 1.101}, {'end': 9762.5, 'text': "it'll just be an empty function that calls props, that handle change and passes the ID to it.", 'start': 9756.538, 'duration': 5.962}, {'end': 9767.383, 'text': "so me update my page and we'll open the console and just see if my console is working.", 'start': 9762.5, 'duration': 4.883}, {'end': 9773.686, 'text': 'Okay, change to change 31.', 'start': 9768.323, 'duration': 5.363}, {'end': 9777.428, 'text': "notice that it's matching up with the ID of the item that I'm clicking.", 'start': 9773.686, 'duration': 3.742}, {'end': 9781.251, 'text': 'so this is ID of one, ID of two, ID of three.', 'start': 9777.428, 'duration': 3.823}, {'end': 9785.893, 'text': 'if I click the clean Gecko tank number three, it says that it changed number three.', 'start': 9781.251, 'duration': 4.642}, {'end': 9789.335, 'text': "awesome. so we've made some good headway there by finishing parts two and three.", 'start': 9785.893, 'duration': 3.442}, {'end': 9794.399, 'text': "but let's get to actually updating our state.", 'start': 9790.436, 'duration': 3.963}, {'end': 9801.304, 'text': "this is the trickier part, and the part that's tricky about this is that we need to deal with the entire array,", 'start': 9794.399, 'duration': 6.905}, {'end': 9806.689, 'text': "because we're saving an array in our state and we never want to modify state directly.", 'start': 9801.304, 'duration': 5.385}, {'end': 9813.374, 'text': "it won't be as easy as just looping through this array, finding the item with this ID and then flipping it,", 'start': 9806.689, 'duration': 6.685}, {'end': 9815.876, 'text': 'because that will actually modify the existing state,', 'start': 9813.374, 'duration': 2.502}, {'end': 9825.984, 'text': 'but instead we can essentially do that same thing and just make sure that we return a brand new array where almost all of the items are exactly as they used to be,', 'start': 9816.636, 'duration': 9.348}, {'end': 9834.391, 'text': 'except one item has changed its completed property from true to false or false to true, and a great way to do that is to use the dot map method,', 'start': 9825.984, 'duration': 8.407}, {'end': 9837.113, 'text': 'because this returns a brand new array.', 'start': 9834.391, 'duration': 2.722}, {'end': 9846.006, 'text': "and so what I can do is I'm going to start my set state because I do care what I have in my previous state,", 'start': 9837.113, 'duration': 8.893}, {'end': 9857.114, 'text': "going to use the function way of updating state and receive my previous date, and then what I'll do is I will use map to loop over my previous state.", 'start': 9846.006, 'duration': 11.108}, {'end': 9870.372, 'text': "To do's Ray and look for a to do with the ID that is given here in the method And so I'll create a variable that says maybe updated to dues.", 'start': 9857.794, 'duration': 12.578}, {'end': 9874.375, 'text': "And that's going to be my old version of to dues.", 'start': 9871.613, 'duration': 2.762}, {'end': 9879.059, 'text': "And sorry, this shouldn't be this that state but rather prove state map.", 'start': 9874.915, 'duration': 4.144}, {'end': 9884.603, 'text': "And we're going to look at each one of the to dues in this array will run this function.", 'start': 9879.599, 'duration': 5.004}, {'end': 9893.15, 'text': "And we're going to say if current to do that we're looking at has an ID, that's equal to the ID we received from our parameter up here.", 'start': 9884.643, 'duration': 8.507}, {'end': 9900.399, 'text': 'then we know this is the to do item that we want to flip the completed property of.', 'start': 9894.775, 'duration': 5.624}, {'end': 9913.823, 'text': "so I can say the to do that completed should equal the opposite of whatever it currently is and whether or not we actually did that flipping of the completed property we're going to return the to do.", 'start': 9900.399, 'duration': 13.424}, {'end': 9920.384, 'text': 'that makes it so that it puts this to do item in our new array, in the same index of the original array.', 'start': 9913.823, 'duration': 6.561}, {'end': 9928.967, 'text': 'and all of this is my map, and so what my set state needs to do is actually return a new version of state, which is just an object.', 'start': 9920.384, 'duration': 8.583}, {'end': 9932.43, 'text': "our state is an object with a to do's property.", 'start': 9929.967, 'duration': 2.463}, {'end': 9938.678, 'text': "So I'll say to news now be the updated version of to do's the array that we just created.", 'start': 9932.47, 'duration': 6.208}, {'end': 9942.183, 'text': 'Let me clean this up a little bit, get rid of these comments.', 'start': 9938.698, 'duration': 3.485}, {'end': 9947.389, 'text': "This And let's try flipping these.", 'start': 9943.785, 'duration': 3.604}, {'end': 9951.675, 'text': 'Awesome and it looks like everything is working.', 'start': 9947.61, 'duration': 4.065}, {'end': 9953.275, 'text': 'we should.', 'start': 9951.675, 'duration': 1.6}, {'end': 9961.358, 'text': "so, as a recap, we are looking at our previous state and we're creating a new array that almost perfectly mirrors what it used to be,", 'start': 9953.275, 'duration': 8.083}, {'end': 9968.44, 'text': 'except one of the items which has the same ID as this function received from the on change handler.', 'start': 9961.358, 'duration': 7.082}, {'end': 9975.222, 'text': 'that is happening when we click these checkboxes that one item is changing from true to false or false to true,', 'start': 9968.44, 'duration': 6.782}, {'end': 9981.071, 'text': 'And then this brand new array is essentially replacing the old array that we had up here.', 'start': 9975.982, 'duration': 5.089}, {'end': 9984.217, 'text': 'And it gets rendered to the page.', 'start': 9982.013, 'duration': 2.204}, {'end': 10010.247, 'text': "then we're taking this handle change method and we're passing it down to every one of the to do items that we create in our map down here and those to do items are receiving the handle change and anytime it's checkbox gets checked because on change and that has an anonymous function which then calls handle change and passes this items ID so that we can correctly identify which in the array we need to flip.", 'start': 9985.472, 'duration': 24.775}, {'end': 10017.589, 'text': 'and as a reminder, the reason the checkbox is actually showing up or not showing up is because of this checked property.', 'start': 10011.32, 'duration': 6.269}, {'end': 10022.896, 'text': 'checked determines whether the checkbox should be checked or not and it says if the item is completed,', 'start': 10017.589, 'duration': 5.307}, {'end': 10026.361, 'text': "then it should be checked and if the item is not completed and it shouldn't be checked.", 'start': 10022.896, 'duration': 3.465}, {'end': 10029.527, 'text': 'And essentially what we have now is a working to do app.', 'start': 10027.165, 'duration': 2.362}, {'end': 10032.549, 'text': "we're going to do some small tweaks to it, but great job.", 'start': 10029.527, 'duration': 3.022}, {'end': 10035.592, 'text': "Hopefully everything that we've covered so far makes sense.", 'start': 10033.27, 'duration': 2.322}, {'end': 10042.638, 'text': "And we'll be revisiting this soon to talk a little bit more about styling, but feel free to celebrate a little bit and whenever you're ready,", 'start': 10036.273, 'duration': 6.365}, {'end': 10043.378, 'text': "we'll go forward.", 'start': 10042.638, 'duration': 0.74}, {'end': 10060.275, 'text': "One of the really nice things that we've mentioned about react is how we get to essentially just write vanilla JavaScript And react is taking care of a lot of stuff behind the scenes.", 'start': 10049.303, 'duration': 10.972}, {'end': 10063.42, 'text': "Well, with the stuff that's going on behind the scenes,", 'start': 10060.916, 'duration': 2.504}, {'end': 10072.633, 'text': 'every single component that we create is actually going to go through a series of phases or milestones during its time being alive in your react application.', 'start': 10063.42, 'duration': 9.213}, {'end': 10078.896, 'text': 'Often, this is analogous to a human being who is born, has life milestones, and dies.', 'start': 10073.454, 'duration': 5.442}, {'end': 10085.358, 'text': "Similarly, every React component will undergo a series of events when it's being rendered and updated.", 'start': 10079.656, 'duration': 5.702}], 'summary': 'The transcript covers implementing state changes in a to-do app using react components and handling checkbox events, achieving a working to-do app.', 'duration': 554.955, 'max_score': 9530.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc449530403.jpg'}, {'end': 9586.264, 'src': 'embed', 'start': 9551.916, 'weight': 12, 'content': [{'end': 9554.799, 'text': 'maybe you want it to increase by more than one or something like that.', 'start': 9551.916, 'duration': 2.883}, {'end': 9556.02, 'text': "I don't know.", 'start': 9554.799, 'duration': 1.221}, {'end': 9563.346, 'text': 'one really good exercise is to have a button that will double the number and another button that will have the number.', 'start': 9556.02, 'duration': 7.326}, {'end': 9567.09, 'text': "so there's plenty of things that you can try to do with this.", 'start': 9564.227, 'duration': 2.863}, {'end': 9574.159, 'text': 'so use your creativity and your imagination, see what you can come up with, but spend some real time with this and play with it.', 'start': 9567.09, 'duration': 7.069}, {'end': 9576.842, 'text': "then, in the next lesson, we're going to get a chance to practice this.", 'start': 9574.159, 'duration': 2.683}, {'end': 9586.264, 'text': "Okay, we've come to a pretty beefy part of our to do app.", 'start': 9583.621, 'duration': 2.643}], 'summary': 'Experiment with increasing numbers using buttons, prepare for next lesson.', 'duration': 34.348, 'max_score': 9551.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc449551916.jpg'}, {'end': 9645.356, 'src': 'embed', 'start': 9616.847, 'weight': 13, 'content': [{'end': 9625.291, 'text': 'so your challenge is going to be to take this stubbed out handle change and actually implement it so that when somebody clicks the checkbox,', 'start': 9616.847, 'duration': 8.444}, {'end': 9629.292, 'text': 'it makes a change to your state and updates the item that they checked,', 'start': 9625.291, 'duration': 4.001}, {'end': 9632.773, 'text': 'so that the completed property flips from either true to false or false to true.', 'start': 9629.292, 'duration': 3.481}, {'end': 9638.154, 'text': "And then you're going to make sure to pass the handle change method down to your to do item.", 'start': 9633.453, 'duration': 4.701}, {'end': 9645.356, 'text': "And then over in your to do item, you'll need to implement the on change with the new method that you've passed to it.", 'start': 9638.774, 'duration': 6.582}], 'summary': 'Implement handle change to toggle completed property on checkbox click.', 'duration': 28.509, 'max_score': 9616.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc449616847.jpg'}, {'end': 9975.222, 'src': 'embed', 'start': 9947.61, 'weight': 4, 'content': [{'end': 9951.675, 'text': 'Awesome and it looks like everything is working.', 'start': 9947.61, 'duration': 4.065}, {'end': 9953.275, 'text': 'we should.', 'start': 9951.675, 'duration': 1.6}, {'end': 9961.358, 'text': "so, as a recap, we are looking at our previous state and we're creating a new array that almost perfectly mirrors what it used to be,", 'start': 9953.275, 'duration': 8.083}, {'end': 9968.44, 'text': 'except one of the items which has the same ID as this function received from the on change handler.', 'start': 9961.358, 'duration': 7.082}, {'end': 9975.222, 'text': 'that is happening when we click these checkboxes that one item is changing from true to false or false to true,', 'start': 9968.44, 'duration': 6.782}], 'summary': 'Creating a new array mirroring the previous state, with one item changing based on checkbox selection.', 'duration': 27.612, 'max_score': 9947.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc449947610.jpg'}, {'end': 10029.527, 'src': 'embed', 'start': 9985.472, 'weight': 6, 'content': [{'end': 10010.247, 'text': "then we're taking this handle change method and we're passing it down to every one of the to do items that we create in our map down here and those to do items are receiving the handle change and anytime it's checkbox gets checked because on change and that has an anonymous function which then calls handle change and passes this items ID so that we can correctly identify which in the array we need to flip.", 'start': 9985.472, 'duration': 24.775}, {'end': 10017.589, 'text': 'and as a reminder, the reason the checkbox is actually showing up or not showing up is because of this checked property.', 'start': 10011.32, 'duration': 6.269}, {'end': 10022.896, 'text': 'checked determines whether the checkbox should be checked or not and it says if the item is completed,', 'start': 10017.589, 'duration': 5.307}, {'end': 10026.361, 'text': "then it should be checked and if the item is not completed and it shouldn't be checked.", 'start': 10022.896, 'duration': 3.465}, {'end': 10029.527, 'text': 'And essentially what we have now is a working to do app.', 'start': 10027.165, 'duration': 2.362}], 'summary': 'Passing handle change method to to do items, checkbox determines completion status.', 'duration': 44.055, 'max_score': 9985.472, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc449985472.jpg'}, {'end': 10180.076, 'src': 'embed', 'start': 10157.559, 'weight': 3, 'content': [{'end': 10165.586, 'text': 'Its job is to determine exactly what gets rendered to the screen, which in turn is how the component is displayed to the world.', 'start': 10157.559, 'duration': 8.027}, {'end': 10168.854, 'text': 'Now the render method can be called many times.', 'start': 10166.653, 'duration': 2.201}, {'end': 10177.716, 'text': 'Anytime React determines that something changes, like state or props, which might affect how the component is supposed to display,', 'start': 10169.594, 'duration': 8.122}, {'end': 10180.076, 'text': 'React may run the render method once again.', 'start': 10177.716, 'duration': 2.36}], 'summary': 'The render method determines component display, being called when state or props change.', 'duration': 22.517, 'max_score': 10157.559, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4410157559.jpg'}, {'end': 10234.65, 'src': 'embed', 'start': 10200.642, 'weight': 7, 'content': [{'end': 10203.763, 'text': 'So I might say componentDidMount.', 'start': 10200.642, 'duration': 3.121}, {'end': 10206.024, 'text': 'CamelCase like this.', 'start': 10204.643, 'duration': 1.381}, {'end': 10213.387, 'text': "ComponentDidMount is a lifecycle method that's essentially like saying you were just born.", 'start': 10208.985, 'duration': 4.402}, {'end': 10217.469, 'text': 'The component, this component, did just mount to the screen.', 'start': 10214.387, 'duration': 3.082}, {'end': 10222.968, 'text': 'The very first time the component shows up, react will run the component did mount method.', 'start': 10218.427, 'duration': 4.541}, {'end': 10227.389, 'text': 'Now this method will only run once while the component is showing up on the screen.', 'start': 10223.608, 'duration': 3.781}, {'end': 10234.65, 'text': 'Things like a rerender, which changes the way that the component is displayed does not rerun component did mount.', 'start': 10228.189, 'duration': 6.461}], 'summary': 'Componentdidmount is a lifecycle method that runs once when the component first shows up on the screen.', 'duration': 34.008, 'max_score': 10200.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4410200642.jpg'}, {'end': 10497.886, 'src': 'embed', 'start': 10461.973, 'weight': 8, 'content': [{'end': 10469.499, 'text': "we can implement some logic here that allows the component to determine whether or not it's important for it to even think about updating.", 'start': 10461.973, 'duration': 7.526}, {'end': 10471.32, 'text': 'To help make that decision.', 'start': 10470.139, 'duration': 1.181}, {'end': 10476.924, 'text': 'This is going to receive the incoming props and the incoming state.', 'start': 10471.74, 'duration': 5.184}, {'end': 10480.207, 'text': "which we'll call nextProps and nextState.", 'start': 10477.865, 'duration': 2.342}, {'end': 10497.886, 'text': "And in the body of the function, we need to either return true if we do want it to update or we can return false if we don't want it to.", 'start': 10480.808, 'duration': 17.078}], 'summary': 'Component determines update based on incoming props and state.', 'duration': 35.913, 'max_score': 10461.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4410461973.jpg'}, {'end': 10558.117, 'src': 'embed', 'start': 10530.438, 'weight': 11, 'content': [{'end': 10540.862, 'text': "The main use case for component will unmount is to do some kind of cleanup or tear down of anything that you've set up that could potentially lead to clutter in the DOM or in your application.", 'start': 10530.438, 'duration': 10.424}, {'end': 10547.487, 'text': 'One of the most common use cases for this is if you in component did mount set up like an event listener.', 'start': 10541.742, 'duration': 5.745}, {'end': 10558.117, 'text': 'For example, you wanted to run some code every time somebody scrolled on the screen, this would be a chance to remove the event listener.', 'start': 10547.968, 'duration': 10.149}], 'summary': 'Componentwillunmount is used for cleanup, such as removing event listeners to prevent clutter in the dom or application.', 'duration': 27.679, 'max_score': 10530.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4410530438.jpg'}, {'end': 10652.418, 'src': 'embed', 'start': 10619.266, 'weight': 10, 'content': [{'end': 10626.972, 'text': 'you had a chance to go over this link here, which is the announcement of react 16.3 and the changes that came with it.', 'start': 10619.266, 'duration': 7.706}, {'end': 10631.596, 'text': "you'll have read about the three lifecycle methods that have been deprecated, one we talked about already.", 'start': 10626.972, 'duration': 4.624}, {'end': 10634.118, 'text': "this component will receive props that's going away.", 'start': 10631.596, 'duration': 2.522}, {'end': 10638.001, 'text': 'a couple more lifecycle methods that are also being removed.', 'start': 10634.118, 'duration': 3.883}, {'end': 10652.418, 'text': "our component will mount I'm just going to comment that out right away as well as component will update, which I'll also comment out.", 'start': 10638.001, 'duration': 14.417}], 'summary': 'React 16.3 announcement: 3 lifecycle methods deprecated, component will receive props going away, component will mount and update being removed.', 'duration': 33.152, 'max_score': 10619.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4410619266.jpg'}, {'end': 10761.857, 'src': 'embed', 'start': 10735.838, 'weight': 5, 'content': [{'end': 10742.464, 'text': "However, if you're interested in learning more about it, here's a link to the docs on get derived state from props.", 'start': 10735.838, 'duration': 6.626}, {'end': 10749.291, 'text': "And the last lifecycle method, the new one that's being introduced is called get snapshot before update.", 'start': 10743.525, 'duration': 5.766}, {'end': 10761.857, 'text': 'you can think of get snapshot before update as a lifecycle method that allows you to sort of create a backup of the current way things are.', 'start': 10751.721, 'duration': 10.136}], 'summary': "New lifecycle method 'get snapshot before update' allows creating a backup of the current state.", 'duration': 26.019, 'max_score': 10735.838, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4410735838.jpg'}], 'start': 9374.044, 'title': 'React state management', 'summary': 'Covers the concept of state management in react, handling state changes, updating state with the map method, and the key lifecycle methods of react components, emphasizing practical implementation and deprecation of specific methods in react 16.3.', 'chapters': [{'end': 9530.403, 'start': 9374.044, 'title': 'React state management', 'summary': 'Explains the concept of state management in react, emphasizing how components can maintain their own data and state, pass state as props to child components, and trigger rerendering upon state changes, with a focus on the importance of understanding state for future use in the course.', 'duration': 156.359, 'highlights': ['Components can maintain their own data and state, and change their data using setState, enabling a wide range of possibilities for React (e.g., increased flexibility and functionality).', 'State can be passed down to child components as props, leading to rerendering of components upon state changes, thereby ensuring that components reflect the new version of props they receive.', 'The importance of understanding state is emphasized, with a directive to spend significant time comprehending its significance for future use in the course.']}, {'end': 9762.5, 'start': 9530.403, 'title': 'Handling state changes', 'summary': 'Introduces the concept of handling state changes in a to do app, emphasizing the need to implement a method that updates the state when a checkbox is clicked and pass it down to the to do item component.', 'duration': 232.097, 'highlights': ['The chapter emphasizes the need to implement a method that updates the state when a checkbox is clicked and pass it down to the to do item component, with a specific focus on flipping the completed property from true to false or false to true. (relevance: 5)', 'It recommends experimenting with different events and using creativity to explore various ways to interact with the state, such as having a button that doubles the number and another that halves it. (relevance: 4)', 'The instructor provides guidance on implementing the handle change method and passing it down to the to do item component, addressing the challenge of updating the state when a checkbox is clicked. (relevance: 3)']}, {'end': 10029.527, 'start': 9762.5, 'title': 'Updating state with map method', 'summary': 'Explains how to update the state using the map method, ensuring a new array is created to maintain the integrity of the state. the method involves flipping the completed property of a to do item when its corresponding checkbox is clicked, resulting in a fully functional to do app.', 'duration': 267.027, 'highlights': ['The method involves using the map function to create a new array that almost perfectly mirrors the previous state, except one item with the same ID as the function received from the on change handler, effectively replacing the old array with the new one.', "The handle change method is passed down to every to do item created in the map, allowing the checkboxes to correctly identify and flip the corresponding item's completed property, resulting in a fully functional to do app.", "The checkbox's appearance and functionality are determined by the checked property, which reflects the completion status of the to do item, ensuring a user-friendly experience."]}, {'end': 10573.533, 'start': 10029.527, 'title': 'React component lifecycle', 'summary': 'Covers the key lifecycle methods of react components, including render, componentdidmount, componentwillreceiveprops, shouldcomponentupdate, and componentwillunmount, with insights into their applications and deprecation.', 'duration': 544.006, 'highlights': ['The render method determines what gets rendered to the screen, and can be called multiple times when there are changes in state or props.', 'The componentDidMount method is used for actions such as making API calls when the component is first mounted, and it runs only once upon the initial rendering.', 'The componentWillReceiveProps method is used to handle incoming props from parent components, but it is deprecated in React 16.3 and will be removed in React 17.', 'The shouldComponentUpdate method provides a chance to optimize the app by allowing the component to decide whether it needs to update, based on incoming props and state.', 'The componentWillUnmount method is used for cleanup or teardown operations, such as removing event listeners, before the component is unmounted.']}, {'end': 10842.586, 'start': 10576.454, 'title': 'React lifecycle methods', 'summary': "Covers the deprecation of three lifecycle methods in react 16.3, the introduction of two new lifecycle methods, and the react team's discouragement of using getderivedstatefromprops and getsnapshotbeforeupdate.", 'duration': 266.132, 'highlights': ['The deprecation of three lifecycle methods - componentWillMount, componentWillReceiveProps, and componentWillUpdate - in React 16.3, and the introduction of two new lifecycle methods in their place.', "The introduction of two new lifecycle methods - getDerivedStateFromProps and getSnapshotBeforeUpdate - in React, with an emphasis on the React team's discouragement of using getDerivedStateFromProps due to potential misuse and performance issues.", 'Emphasizing the use of componentDidMount and render as the primary lifecycle methods for the course, with a recommendation to become familiar with other lifecycle methods as applications become more advanced.']}], 'duration': 1468.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc449374044.jpg', 'highlights': ['Components can maintain their own data and state, and change their data using setState, enabling a wide range of possibilities for React (e.g., increased flexibility and functionality).', 'State can be passed down to child components as props, leading to rerendering of components upon state changes, thereby ensuring that components reflect the new version of props they receive.', 'The importance of understanding state is emphasized, with a directive to spend significant time comprehending its significance for future use in the course.', 'The render method determines what gets rendered to the screen, and can be called multiple times when there are changes in state or props.', 'The method involves using the map function to create a new array that almost perfectly mirrors the previous state, except one item with the same ID as the function received from the on change handler, effectively replacing the old array with the new one.', "The introduction of two new lifecycle methods - getDerivedStateFromProps and getSnapshotBeforeUpdate - in React, with an emphasis on the React team's discouragement of using getDerivedStateFromProps due to potential misuse and performance issues.", "The checkbox's appearance and functionality are determined by the checked property, which reflects the completion status of the to do item, ensuring a user-friendly experience.", 'The componentDidMount method is used for actions such as making API calls when the component is first mounted, and it runs only once upon the initial rendering.', 'The shouldComponentUpdate method provides a chance to optimize the app by allowing the component to decide whether it needs to update, based on incoming props and state.', "The handle change method is passed down to every to do item created in the map, allowing the checkboxes to correctly identify and flip the corresponding item's completed property, resulting in a fully functional to do app.", 'The deprecation of three lifecycle methods - componentWillMount, componentWillReceiveProps, and componentWillUpdate - in React 16.3, and the introduction of two new lifecycle methods in their place.', 'The componentWillUnmount method is used for cleanup or teardown operations, such as removing event listeners, before the component is unmounted.', 'It recommends experimenting with different events and using creativity to explore various ways to interact with the state, such as having a button that doubles the number and another that halves it.', 'The instructor provides guidance on implementing the handle change method and passing it down to the to do item component, addressing the challenge of updating the state when a checkbox is clicked.']}, {'end': 11559.396, 'segs': [{'end': 10870.683, 'src': 'embed', 'start': 10843.126, 'weight': 0, 'content': [{'end': 10847.629, 'text': 'conditional rendering is where this kind of comes into full view.', 'start': 10843.126, 'duration': 4.503}, {'end': 10850.371, 'text': 'so I just wanted to start with that caveat before we get into this,', 'start': 10847.629, 'duration': 2.742}, {'end': 10856.235, 'text': "because I don't want anyone to think that the way I'm about to show you conditional rendering is the only way it can be done.", 'start': 10850.371, 'duration': 5.864}, {'end': 10862.52, 'text': "I'm going to cover a number of use cases, but there's for sure going to be other ways to use it that are totally legitimate.", 'start': 10856.235, 'duration': 6.285}, {'end': 10867.482, 'text': "so I've done here is I've added a class-based component.", 'start': 10863.34, 'duration': 4.142}, {'end': 10870.683, 'text': 'it has state with a property called is loading.', 'start': 10867.482, 'duration': 3.201}], 'summary': 'Conditional rendering in class-based component with state property called is loading.', 'duration': 27.557, 'max_score': 10843.126, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4410843126.jpg'}, {'end': 10996.482, 'src': 'embed', 'start': 10964.896, 'weight': 2, 'content': [{'end': 10969.781, 'text': "once we talk about using fetch to get data in a future lesson, we're actually going to be doing this for real.", 'start': 10964.896, 'duration': 4.885}, {'end': 10973.544, 'text': "but I just wanted to make sure this wasn't confusing before we move on.", 'start': 10969.781, 'duration': 3.763}, {'end': 10981.511, 'text': 'and actually this is a good time to talk about the lifecycle methods once again, because, once set, state changes is loading to false,', 'start': 10973.544, 'duration': 7.967}, {'end': 10985.655, 'text': 'our component or conditional component is now receiving a different prop,', 'start': 10981.511, 'duration': 4.144}, {'end': 10996.482, 'text': "because it's receiving is loading of true when it first loads and then when state changes and is loading is false, it's receiving a new prop.", 'start': 10986.195, 'duration': 10.287}], 'summary': 'Discussion on lifecycle methods and state changes in component, with props receiving different values.', 'duration': 31.586, 'max_score': 10964.896, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4410964896.jpg'}, {'end': 11246.107, 'src': 'embed', 'start': 11215.835, 'weight': 1, 'content': [{'end': 11222.978, 'text': "this is something that's been around for a while and it's very commonly used in react applications when it comes to conditional rendering,", 'start': 11215.835, 'duration': 7.143}, {'end': 11229.32, 'text': 'essentially the way it works is you provide a condition and then a question mark.', 'start': 11222.978, 'duration': 6.342}, {'end': 11239.842, 'text': "you provide a statement if it's true, followed by a colon, and then a statement if it's false.", 'start': 11229.32, 'duration': 10.522}, {'end': 11246.107, 'text': 'in our case, our condition is is props.is loading equal to true?', 'start': 11239.842, 'duration': 6.265}], 'summary': 'Conditional rendering in react is commonly used with a ternary operator, for example, for props.isloading.', 'duration': 30.272, 'max_score': 11215.835, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4411215835.jpg'}, {'end': 11345.44, 'src': 'embed', 'start': 11317.664, 'weight': 3, 'content': [{'end': 11328.57, 'text': "What's nice about this is that when I inevitably have other things on my page, like some kind of nav bar, which I'll represent with another h1 here,", 'start': 11317.664, 'duration': 10.906}, {'end': 11338.873, 'text': 'maybe a footer, I can still be rendering conditionally parts of my page.', 'start': 11328.57, 'duration': 10.303}, {'end': 11343.678, 'text': 'another simplification that I can make here is because is loading is already a boolean.', 'start': 11338.873, 'duration': 4.805}, {'end': 11345.44, 'text': "I technically don't need the triple equals.", 'start': 11343.678, 'duration': 1.762}], 'summary': 'Rendering conditional parts of the page, simplifying with boolean loading.', 'duration': 27.776, 'max_score': 11317.664, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4411317664.jpg'}, {'end': 11410.279, 'src': 'embed', 'start': 11386.065, 'weight': 4, 'content': [{'end': 11392.59, 'text': 'the truth is, our app component is probably the one that should be in charge of the conditional rendering.', 'start': 11386.065, 'duration': 6.525}, {'end': 11399.235, 'text': "reason is, whatever we put in, our conditional component should probably just be able to display when it's told to display.", 'start': 11392.59, 'duration': 6.645}, {'end': 11404.177, 'text': 'if our app is in charge of determining if something is loading,', 'start': 11399.975, 'duration': 4.202}, {'end': 11410.279, 'text': "then it's probably the one that should determine what should be rendered down here in the render method.", 'start': 11404.177, 'duration': 6.102}], 'summary': 'App component should handle conditional rendering for efficient display.', 'duration': 24.214, 'max_score': 11386.065, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4411386065.jpg'}], 'start': 10843.126, 'title': 'Conditional rendering in react', 'summary': 'Explains conditional rendering in react using state, props, and the ternary operator, and suggests simplification techniques such as using boolean and operator and structuring the app component based on loading state.', 'chapters': [{'end': 11316.743, 'start': 10843.126, 'title': 'Conditional rendering in react', 'summary': 'Explains conditional rendering in react, demonstrating the use of state and props to display loading content and switch between different components, while also introducing the ternary operator for conditional rendering.', 'duration': 473.617, 'highlights': ['The chapter emphasizes that conditional rendering in React can be achieved in various legitimate ways, offering flexibility in handling different use cases.', "It's highlighted that conditional rendering is commonly used when making API calls, where state is employed to manage the display of loading content, ensuring a smooth user experience, such as a 1500-millisecond delay before changing the loading state.", 'The process of conditional rendering is detailed, focusing on the use of state, lifecycle methods like componentDidMount, and the re-rendering of components based on state changes, providing practical insights into the React component lifecycle.', 'The concept of conditional rendering is further explained through the use of plain JavaScript if statements and the introduction of the ternary operator as a common approach for if-else rendering in React applications, highlighting its readability and utility in conditional rendering scenarios.']}, {'end': 11559.396, 'start': 11317.664, 'title': 'Conditional rendering simplification', 'summary': 'Explains conditional rendering simplification using boolean and operator, and suggests structuring the app component to determine what to render based on loading state.', 'duration': 241.732, 'highlights': ['The chapter highlights the simplification of conditional rendering by using the truthiness of a boolean with the example of loading state, eliminating the need for triple equals and making rendering more efficient.', 'It emphasizes the importance of structuring the app component to manage conditional rendering based on the loading state, suggesting that the app component should be in charge of determining what to render in the render method.']}], 'duration': 716.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4410843126.jpg', 'highlights': ['The chapter emphasizes the flexibility of conditional rendering in React for different use cases.', 'Conditional rendering is commonly used for managing loading content during API calls.', 'The chapter details the process of conditional rendering using state and lifecycle methods.', 'Simplification of conditional rendering is highlighted through the use of boolean truthiness.', 'Structuring the app component to manage conditional rendering based on loading state is emphasized.']}, {'end': 12313.019, 'segs': [{'end': 11583.191, 'src': 'embed', 'start': 11560.337, 'weight': 0, 'content': [{'end': 11571.404, 'text': "And so the and operator can be a way to conditionally render something if a condition is true, or just render nothing if it's false.", 'start': 11560.337, 'duration': 11.067}, {'end': 11577.967, 'text': "So with this little example that I've created, I've added some unread messages in state as an array of strings.", 'start': 11572.144, 'duration': 5.823}, {'end': 11583.191, 'text': 'And you can see here it says you have two unread messages because the length of the arrays to.', 'start': 11578.688, 'duration': 4.503}], 'summary': "Using the 'and' operator to conditionally render based on a true/false condition and demonstrating with an example of two unread messages in an array.", 'duration': 22.854, 'max_score': 11560.337, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4411560337.jpg'}, {'end': 11799.245, 'src': 'embed', 'start': 11744.669, 'weight': 1, 'content': [{'end': 11751.553, 'text': "So one thing is in order to add state, you'll need this to be a class based component.", 'start': 11744.669, 'duration': 6.884}, {'end': 11759.098, 'text': "And part of that is you'll need to add a constructor method to that class based component.", 'start': 11753.774, 'duration': 5.324}, {'end': 11771.952, 'text': 'For keeping track of whether the users logged in or not, you could use a Boolean is logged in via Boolean, either true or false.', 'start': 11760.118, 'duration': 11.834}, {'end': 11780.176, 'text': 'adding a button that logs the user out will require an event listener, which would be your on click, probably,', 'start': 11771.952, 'duration': 8.224}, {'end': 11788.5, 'text': 'and then both the extra challenge and challenge part number four would require some conditional rendering.', 'start': 11780.176, 'duration': 8.324}, {'end': 11799.245, 'text': "So if you're feeling a little bit stuck, feel free to pause it again and try it out now that you have some hints as to how to complete each step.", 'start': 11792.594, 'duration': 6.651}], 'summary': 'To add state, create a class-based component with constructor method. use boolean for tracking login status, add event listener for logout button, and implement conditional rendering for extra challenge and part four.', 'duration': 54.576, 'max_score': 11744.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4411744669.jpg'}, {'end': 12226.531, 'src': 'embed', 'start': 12195.424, 'weight': 2, 'content': [{'end': 12197.406, 'text': "Alright, we've reached the final part of our to do app.", 'start': 12195.424, 'duration': 1.982}, {'end': 12201.149, 'text': "And we're just going to hammer out this last little styling piece and we'll be done.", 'start': 12197.606, 'duration': 3.543}, {'end': 12206.233, 'text': "So your challenge is, notice, we're here in the to do item component.", 'start': 12201.869, 'duration': 4.364}, {'end': 12212.538, 'text': "what you're going to do is make it so that the items that are completed look a little bit different than the items that are incomplete.", 'start': 12206.233, 'duration': 6.305}, {'end': 12220.304, 'text': "I'd recommend maybe graying the text out, doing a line through it, maybe turning it to italics or something like that.", 'start': 12213.339, 'duration': 6.965}, {'end': 12221.805, 'text': "I'm probably going to do all three.", 'start': 12220.745, 'duration': 1.06}, {'end': 12226.531, 'text': 'but whatever kind of styling you want to add, go for it and pause the lesson.', 'start': 12222.546, 'duration': 3.985}], 'summary': 'To style completed to do items, consider graying text, adding a line through, and using italics.', 'duration': 31.107, 'max_score': 12195.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4412195424.jpg'}], 'start': 11560.337, 'title': 'Conditional rendering and implementing state in react', 'summary': "Covers conditional rendering using the 'and' operator, state management, conversion of functional components to class-based components, handling state with a constructor method, and implementing event listeners for interactive user experiences in react.", 'chapters': [{'end': 11743.929, 'start': 11560.337, 'title': 'Conditional rendering in react', 'summary': "Discusses using the 'and' operator for conditional rendering, demonstrating how to render content based on the truthiness of a state variable, and providing a challenge to implement conditional rendering for a login/logout button in a stateless functional component.", 'duration': 183.592, 'highlights': ["The 'and' operator is used for conditional rendering to render content based on the truthiness of a state variable.", "Demonstrates using the 'and' operator to conditionally render content based on the length of an array in the state, showing 'unread messages' based on the array length.", 'Provides a challenge to implement conditional rendering for a login/logout button in a stateless functional component, with hints for additional complexity.']}, {'end': 12313.019, 'start': 11744.669, 'title': 'Implementing state in react', 'summary': 'Explains the process of converting a functional component to a class-based component in order to add state, managing state using a constructor method, handling conditional rendering, and implementing event listeners for interactive user experiences.', 'duration': 568.35, 'highlights': ['The process of converting a functional component to a class-based component is necessary to add state, manage event listeners, and handle conditional rendering.', "State management involves using a constructor method to initialize state variables, such as 'isLoggedin' as a Boolean value, true or false.", "Implementing event listeners, such as 'onClick', is essential for interactive components, like a button that logs the user out.", 'Conditional rendering is vital for tasks like displaying text based on the current state, and it requires implementing logic to change state based on user interactions.', 'Styling completed items in a to-do app involves conditional rendering to apply specific styles, such as changing font style to italic, graying out the text, and adding a line through the text.']}], 'duration': 752.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4411560337.jpg', 'highlights': ["Demonstrates using the 'and' operator to conditionally render content based on the length of an array in the state, showing 'unread messages' based on the array length.", "State management involves using a constructor method to initialize state variables, such as 'isLoggedin' as a Boolean value, true or false.", 'Styling completed items in a to-do app involves conditional rendering to apply specific styles, such as changing font style to italic, graying out the text, and adding a line through the text.', "The 'and' operator is used for conditional rendering to render content based on the truthiness of a state variable.", "Implementing event listeners, such as 'onClick', is essential for interactive components, like a button that logs the user out."]}, {'end': 13677.668, 'segs': [{'end': 12754.503, 'src': 'embed', 'start': 12723.902, 'weight': 2, 'content': [{'end': 12728.025, 'text': 'usually I like to use some kind of fancy loading spinner or something like that,', 'start': 12723.902, 'duration': 4.123}, {'end': 12733.589, 'text': "but for now let's just make it display the word loading until that data comes back.", 'start': 12728.025, 'duration': 5.564}, {'end': 12740.753, 'text': 'This will illustrate a little bit of the power of saving state in your component and updating state as you go to.', 'start': 12734.429, 'duration': 6.324}, {'end': 12747.078, 'text': "a really simple way to do this is to add to my state a Boolean as to whether or not we're loading.", 'start': 12740.753, 'duration': 6.325}, {'end': 12748.499, 'text': "I'll start by saying it's false.", 'start': 12747.078, 'duration': 1.421}, {'end': 12754.503, 'text': "And then, right before we perform our fetch, I'm going to change it to true.", 'start': 12749.339, 'duration': 5.164}], 'summary': 'Demonstrating state management by using loading indicator with boolean state.', 'duration': 30.601, 'max_score': 12723.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4412723902.jpg'}, {'end': 13129.086, 'src': 'embed', 'start': 13097.047, 'weight': 0, 'content': [{'end': 13101.829, 'text': 'Instead of waiting until the very end, right before submitting the form, to gather all of the information,', 'start': 13097.047, 'duration': 4.782}, {'end': 13106.672, 'text': "we're actually going to constantly keep track of all the information in state,", 'start': 13101.829, 'duration': 4.843}, {'end': 13115.657, 'text': "which means on every keystroke we're actually going to update state so that we can always have the most updated version of what the user is typing into the form.", 'start': 13106.672, 'duration': 8.985}, {'end': 13121.56, 'text': "To really illustrate this, let's just start with a single text input down here instead of a div.", 'start': 13116.237, 'duration': 5.323}, {'end': 13129.086, 'text': "I'm going to render a form and they'll put a single input inside of there.", 'start': 13121.56, 'duration': 7.526}], 'summary': 'Constantly update state on every keystroke for real-time user input tracking.', 'duration': 32.039, 'max_score': 13097.047, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4413097047.jpg'}, {'end': 13609.763, 'src': 'embed', 'start': 13565.858, 'weight': 1, 'content': [{'end': 13571.001, 'text': "before we get there, there's one more thing I want to touch on, and that's the concept of a controlled form.", 'start': 13565.858, 'duration': 5.143}, {'end': 13577.426, 'text': "if you did what you're supposed to do and went over and read the react documentation on forms, you read about controlled forms.", 'start': 13571.001, 'duration': 6.425}, {'end': 13585.552, 'text': "The idea is that we actually want what's displayed inside of our form to perfectly match up with what is in our state.", 'start': 13578.326, 'duration': 7.226}, {'end': 13594.999, 'text': "Right now state is being reactive, as in every time the input in the box changes state updates according to what's in the input box.", 'start': 13586.293, 'duration': 8.706}, {'end': 13605.502, 'text': 'Well, with the controlled form, state actually directs what is inside and showing up inside of the input box is kind of a splitting hairs distinction,', 'start': 13595.74, 'duration': 9.762}, {'end': 13609.763, 'text': 'but it really jives well with the idea that state should be the single source of truth.', 'start': 13605.502, 'duration': 4.261}], 'summary': 'Controlled forms in react ensure form content aligns with state, promoting a single source of truth.', 'duration': 43.905, 'max_score': 13565.858, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4413565858.jpg'}], 'start': 12313.019, 'title': 'React component lifecycle and form handling', 'summary': 'Covers practical application and usage of lifecycle methods like componentdidmount, state management, and real-time data tracking in react, showcasing the efficiency and ease of use in comparison to more imperative approaches. it also discusses controlled forms and the concept of state directing the displayed input box content.', 'chapters': [{'end': 12488.985, 'start': 12313.019, 'title': 'React component lifecycle methods', 'summary': 'Discusses the importance of practical application in learning and the usage of lifecycle methods, focusing on the component did mount method and the tools fetch and star wars api, to fetch and display data.', 'duration': 175.966, 'highlights': ["The chapter emphasizes the necessity of practical application in learning, stating that watching someone else do it isn't sufficient.", 'The importance of the component did mount method in React is highlighted, explaining its role in running code immediately after the component first mounts to the DOM and obtaining data required for the component to display or function.', 'The usage of fetch, a promise-based JavaScript tool, is introduced as a way to perform HTTP requests to obtain necessary data for the component.', 'The Star Wars API is recommended as a resource due to its CORS enabled feature, ensuring no issues with the frontend application getting data from their database.']}, {'end': 13052.935, 'start': 12488.985, 'title': 'React component lifecycle and state management', 'summary': 'Covers using the componentdidmount method to fetch data from the star wars api, implementing a loading feature, and highlighting the declarative nature of react in handling state and rendering content, showcasing the efficiency and ease of use in comparison to more imperative approaches.', 'duration': 563.95, 'highlights': ['The chapter covers using the componentDidMount method to fetch data from the Star Wars API, showcasing practical implementation and usage of the fetch function to retrieve specific data, such as the details of Luke Skywalker, and the conversion of fetched data into a JavaScript object using the .json method, with the resulting data being logged for verification.', "Demonstration of state management in React, where the received data is saved in the component's state using setState, ensuring its persistence and accessibility for rendering, emphasizing the importance of state in maintaining and updating component data.", 'Introduction of a loading feature to inform users of ongoing data retrieval, illustrating the utilization of a boolean value in state to dynamically display a loading message until the data is fetched, enhancing user experience during potential delays in API responses.', 'Reflection on the declarative nature of React in managing state and rendering content, highlighting the ease and efficiency of utilizing state to control the display of loading messages and fetched data, emphasizing the advantages over imperative approaches in traditional web development.']}, {'end': 13292.9, 'start': 13053.875, 'title': 'React forms: keeping state updated', 'summary': 'Explains how to handle forms in react by constantly updating state on every keystroke, allowing for real-time data tracking and state management.', 'duration': 239.025, 'highlights': ['In React, the state is constantly updated on every keystroke, ensuring real-time tracking of user input and state management.', 'Unlike vanilla JavaScript, React tracks and updates the information in state as the user types, rather than waiting until the form is submitted.', 'The handle change function in React is triggered every time the input box changes, allowing for immediate state updates and real-time data tracking.']}, {'end': 13677.668, 'start': 13294.002, 'title': 'React controlled forms', 'summary': 'Discusses the implementation of a handle change function to update the state as characters are typed into an input box, the need to bind the class method calling set state inside the constructor, and the concept of controlled forms which allows the state to direct what is displayed inside the input box.', 'duration': 383.666, 'highlights': ['The implementation of the handle change function to update the state as characters are typed into the input box is demonstrated, ensuring that every single character updates the state.', "The need to bind the class method calling set state inside the constructor is highlighted, emphasizing the importance of binding it to avoid errors such as 'can't read the property set state of undefined.'", 'The concept of controlled forms is explained, where the state directs what is displayed inside the input box, and the addition of a value property is recommended to ensure the input box content matches the state.']}], 'duration': 1364.649, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4412313019.jpg', 'highlights': ['Real-time tracking of user input and state management in React ensures constant state updates on every keystroke.', 'Demonstration of state management in React emphasizes the importance of state in maintaining and updating component data.', 'Introduction of loading feature using boolean value in state enhances user experience during potential delays in API responses.', 'Controlled forms in React are explained, with the state directing the displayed input box content and the recommendation to use the value property for synchronization.']}, {'end': 14960.006, 'segs': [{'end': 13730.911, 'src': 'embed', 'start': 13678.248, 'weight': 1, 'content': [{'end': 13686.854, 'text': 'But a really good idea is instead of directly accessing the name and value properties by drilling into the event that target object.', 'start': 13678.248, 'duration': 8.606}, {'end': 13694.179, 'text': 'here you can save yourself a lot of grief by simply pulling those values out of the target before you set any state.', 'start': 13686.854, 'duration': 7.325}, {'end': 13697.08, 'text': 'using some basic object destructuring.', 'start': 13695.079, 'duration': 2.001}, {'end': 13705.604, 'text': 'I can say name value equals event target.', 'start': 13697.08, 'duration': 8.524}, {'end': 13711.202, 'text': 'then down here I can just say name value.', 'start': 13705.604, 'duration': 5.598}, {'end': 13714.083, 'text': "if this is something that you're actually super interested in understanding,", 'start': 13711.202, 'duration': 2.881}, {'end': 13719.966, 'text': 'you can look into react synthetic event and you may get a better understanding of why this is important.', 'start': 13714.083, 'duration': 5.883}, {'end': 13725.308, 'text': 'but it can be really helpful to make a copy of the name and value before you run set state.', 'start': 13719.966, 'duration': 5.342}, {'end': 13727.069, 'text': "okay, that's enough for this part of the lesson.", 'start': 13725.308, 'duration': 1.761}, {'end': 13730.911, 'text': 'take some time to over this again and digest it.', 'start': 13727.069, 'duration': 3.842}], 'summary': 'Use object destructuring to extract values from event.target before setting state in react. look into react synthetic event for better understanding.', 'duration': 52.663, 'max_score': 13678.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4413678248.jpg'}, {'end': 13833.35, 'src': 'embed', 'start': 13809.034, 'weight': 2, 'content': [{'end': 13815.14, 'text': 'what react has done is they wanted to make text area much more similar to the input element.', 'start': 13809.034, 'duration': 6.106}, {'end': 13820.525, 'text': "so in react there's a major difference in the text area element in that it is a self-closing element.", 'start': 13815.14, 'duration': 5.385}, {'end': 13826.868, 'text': 'This is actually really nice because we are able to use the value property now.', 'start': 13821.986, 'duration': 4.882}, {'end': 13830.669, 'text': 'And we can use it exactly the same way as we were with an input.', 'start': 13827.348, 'duration': 3.321}, {'end': 13833.35, 'text': 'This is nice for consistency.', 'start': 13831.669, 'duration': 1.681}], 'summary': 'React made text area similar to input, using self-closing element and value property for consistency.', 'duration': 24.316, 'max_score': 13809.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4413809034.jpg'}, {'end': 14026.762, 'src': 'embed', 'start': 14003.71, 'weight': 4, 'content': [{'end': 14010.794, 'text': "And now the tricky part comes in, because in an input box, we're keeping track of what's being typed into the input box.", 'start': 14003.71, 'duration': 7.084}, {'end': 14019.158, 'text': 'You might remember from our handle change, we are grabbing the value event dot target dot value, and updating state with the new value.', 'start': 14011.634, 'duration': 7.524}, {'end': 14022.86, 'text': "Well, our checkbox doesn't have a value, it has a checked property.", 'start': 14019.478, 'duration': 3.382}, {'end': 14026.762, 'text': 'And the checked property is actually going to return either true or false.', 'start': 14023.52, 'duration': 3.242}], 'summary': 'Handling input and checkbox events to update state with true or false values.', 'duration': 23.052, 'max_score': 14003.71, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4414003710.jpg'}, {'end': 14181.334, 'src': 'embed', 'start': 14155.399, 'weight': 6, 'content': [{'end': 14164.182, 'text': "Excellent Well, now let's talk about radio buttons, because radio buttons are kind of a combination of the input type text in the checkbox.", 'start': 14155.399, 'duration': 8.783}, {'end': 14171.024, 'text': 'What I mean by that is that they are going to use both a value property and a checked property.', 'start': 14165.462, 'duration': 5.562}, {'end': 14177.572, 'text': "So I'm going to make a copy of my checkbox so that I can quickly get something prototyped up.", 'start': 14172.048, 'duration': 5.524}, {'end': 14181.334, 'text': "I'm going to change the types here to radio.", 'start': 14178.072, 'duration': 3.262}], 'summary': 'Radio buttons combine text input and checkbox properties.', 'duration': 25.935, 'max_score': 14155.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4414155399.jpg'}, {'end': 14393.014, 'src': 'embed', 'start': 14338.912, 'weight': 0, 'content': [{'end': 14343.876, 'text': 'So you can take a look formic basically takes all of the pain out of writing react forms.', 'start': 14338.912, 'duration': 4.964}, {'end': 14350.361, 'text': "It's a library that you can install and just use their API to make your life dealing with forms much nicer.", 'start': 14344.536, 'duration': 5.825}, {'end': 14354.486, 'text': "Okay, the last form element that we're going to talk about is the select box.", 'start': 14351.061, 'duration': 3.425}, {'end': 14362.118, 'text': "And in regular HTML, you're probably used to having a select with options.", 'start': 14357.991, 'duration': 4.127}, {'end': 14374.805, 'text': 'And fortunately, react has chosen to use the value property again so that we can easily determine which of the select elements is chosen,', 'start': 14365.1, 'duration': 9.705}, {'end': 14377.906, 'text': 'and also to very easily be able to update state.', 'start': 14374.805, 'duration': 3.101}, {'end': 14385.99, 'text': "So for example, maybe we are deciding what our favorite color is, we'll have a state property called favorite color.", 'start': 14378.867, 'duration': 7.123}, {'end': 14393.014, 'text': 'And the value of this whole element is going to be whichever of these options we choose.', 'start': 14386.831, 'duration': 6.183}], 'summary': 'Formic simplifies react forms, making form management easier. react uses value property for select box, simplifying state updates.', 'duration': 54.102, 'max_score': 14338.912, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4414338912.jpg'}, {'end': 14527.344, 'src': 'embed', 'start': 14495.812, 'weight': 7, 'content': [{'end': 14499.535, 'text': "And when I change this, it's changing the value.", 'start': 14495.812, 'duration': 3.723}, {'end': 14513.279, 'text': "What's so cool about the way that react has chosen to implement the API regarding elements and forms is that it makes it so that we can write a single on change,", 'start': 14502.796, 'duration': 10.483}, {'end': 14514.94, 'text': 'or rather, handle change.', 'start': 14513.279, 'duration': 1.661}, {'end': 14521.922, 'text': 'you had to do one workaround with the checkboxes simply because the philosophy behind checkboxes is so different than all the other elements.', 'start': 14514.94, 'duration': 6.982}, {'end': 14527.344, 'text': "But essentially, we're reusing this one handle change, and it's working for all the elements in our form.", 'start': 14522.542, 'duration': 4.802}], 'summary': "React's api allows single handle change for all form elements.", 'duration': 31.532, 'max_score': 14495.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4414495812.jpg'}, {'end': 14563.425, 'src': 'embed', 'start': 14538.891, 'weight': 9, 'content': [{'end': 14546.395, 'text': 'or rather learning all of the syntax of every one of these elements that may distract you from all of the other coolness that react has to offer.', 'start': 14538.891, 'duration': 7.504}, {'end': 14552.259, 'text': "Instead, don't be afraid to just practice this a couple times and then come back to it whenever you need to.", 'start': 14547.056, 'duration': 5.203}, {'end': 14555.381, 'text': "eventually, you'll gain a muscle memory that will help you remember all of this.", 'start': 14552.259, 'duration': 3.122}, {'end': 14563.425, 'text': 'One last thing that I failed to mention in the previous lesson was how to actually submit this form or do something at the end of filling out this form.', 'start': 14556.401, 'duration': 7.024}], 'summary': "Focus on practicing to gain muscle memory and don't get distracted by syntax details. also, learn how to submit the form.", 'duration': 24.534, 'max_score': 14538.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4414538891.jpg'}, {'end': 14600.852, 'src': 'embed', 'start': 14574.812, 'weight': 8, 'content': [{'end': 14585.318, 'text': "Now, in HTML5, the button element, if it's found within a form, acts like the old input type submit, if you're familiar with using that,", 'start': 14574.812, 'duration': 10.506}, {'end': 14591.805, 'text': 'where you would give it a value that displayed the text on the button and so forth.', 'start': 14587.202, 'duration': 4.603}, {'end': 14600.852, 'text': 'I personally really dislike the way that input is used in so many different ways, and so I never use the input type submit myself.', 'start': 14591.805, 'duration': 9.047}], 'summary': 'In html5, the button element within a form acts like the input type submit, but the speaker dislikes using it.', 'duration': 26.04, 'max_score': 14574.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4414574812.jpg'}, {'end': 14653.541, 'src': 'embed', 'start': 14626.059, 'weight': 5, 'content': [{'end': 14629.584, 'text': 'And so I will have an on submit handler.', 'start': 14626.059, 'duration': 3.525}, {'end': 14636.631, 'text': "And we didn't write this, but it would be just as easy as creating another method.", 'start': 14631.488, 'duration': 5.143}, {'end': 14641.594, 'text': "that's called handle submit and doing something like submitting the form to an API or something like that.", 'start': 14636.631, 'duration': 4.963}, {'end': 14647.137, 'text': "Okay, take a deep breath, you've basically finished all of the most important parts of forms.", 'start': 14642.414, 'duration': 4.723}, {'end': 14653.541, 'text': "We've talked about input type text and other text based inputs like numbers and passwords and so forth.", 'start': 14647.157, 'duration': 6.384}], 'summary': 'The transcript covers creating an on submit handler, finishing important parts of forms, and discussing various input types.', 'duration': 27.482, 'max_score': 14626.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4414626059.jpg'}, {'end': 14708.769, 'src': 'embed', 'start': 14672.427, 'weight': 12, 'content': [{'end': 14677.41, 'text': 'Your challenge is to wire up the partially finished travel form below so that essentially it works in react.', 'start': 14672.427, 'duration': 4.983}, {'end': 14683.274, 'text': 'This challenge is actually one that we use at v school and the URL for the original challenges right here.', 'start': 14678.151, 'duration': 5.123}, {'end': 14686.777, 'text': "you'll probably want to go there so that you can see exactly what's supposed to be done.", 'start': 14683.274, 'duration': 3.503}, {'end': 14691.48, 'text': 'Now in v school, we use this as an plain HTML forms challenge.', 'start': 14687.557, 'duration': 3.923}, {'end': 14695.843, 'text': "So it doesn't really have anything to do with react, but I'm just adapting it for react for this lesson.", 'start': 14691.5, 'duration': 4.343}, {'end': 14708.769, 'text': "so pause this lesson, go, take a look at this website, learn some more about what you're trying to accomplish in this form and give this a go,", 'start': 14696.864, 'duration': 11.905}], 'summary': "Wire up the travel form to work in react, adapted from v school's html form challenge.", 'duration': 36.342, 'max_score': 14672.427, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4414672427.jpg'}], 'start': 13678.248, 'title': 'Best practices in react event handling and form management', 'summary': 'Emphasizes making a copy of the name and value before running set state in react event handling, explores various form elements in react, and discusses the usage of form elements in react, including input boxes, select boxes, and the formic library.', 'chapters': [{'end': 13730.911, 'start': 13678.248, 'title': 'React event handling best practice', 'summary': 'Emphasizes the importance of making a copy of the name and value before running set state in react event handling, highlighting the use of object destructuring to avoid directly accessing the event target object and recommending further exploration of react synthetic event.', 'duration': 52.663, 'highlights': ['The importance of making a copy of the name and value before running set state in React event handling.', 'Highlighting the use of object destructuring to avoid directly accessing the event target object.', 'Recommendation to explore react synthetic event for a better understanding of the importance.']}, {'end': 14318.598, 'start': 13730.911, 'title': 'React form elements', 'summary': 'Explores various form elements in react, including text area, checkboxes, and radio buttons, discussing their properties, usage, and state management.', 'duration': 587.687, 'highlights': ['The text area element in React is a self-closing element, allowing the use of the value property for consistency and easy state updates.', 'Checkboxes in React require a checked property, which is controlled by a Boolean value in the state, and the onChange handler is utilized to update the state.', 'Radio buttons in React use both value and checked properties, and their behavior is controlled by the state, requiring careful management for proper functionality.']}, {'end': 14555.381, 'start': 14318.858, 'title': 'React forms and formic library', 'summary': 'Discusses the usage of form elements in react, including input boxes, select boxes, and the formic library, highlighting the ease of state management and handling form elements using a single handlechange method.', 'duration': 236.523, 'highlights': ['The formic library simplifies writing React forms, providing a more convenient API for form management.', 'The value property in React is used for select boxes to easily determine the selected option and update the state.', 'The handleChange method in React can be reused for all form elements, except for checkboxes, simplifying form management.', 'Practicing and gaining muscle memory is recommended for better retention of React form syntax and to explore other features of React.']}, {'end': 14960.006, 'start': 14556.401, 'title': 'Handling form submission in html5', 'summary': 'Discusses handling form submission in html5, emphasizing the use of the button element within a form, the on submit handler for performing actions at the end of form filling, and the approach to wiring up a partially finished travel form in react.', 'duration': 403.605, 'highlights': ['The button element in HTML5, when found within a form, acts as a submit button, providing an alternative to using the input type submit, which the speaker personally dislikes.', 'The on submit handler can be used to perform actions when finishing the form, such as submitting the form to an API.', 'The approach to wiring up a partially finished travel form in React involves initializing the state with elements such as first name, age, destination, and dietary restrictions, and then wiring up the inputs and handle change method accordingly.']}], 'duration': 1281.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4413678248.jpg', 'highlights': ['The formic library simplifies writing React forms, providing a more convenient API for form management.', 'The importance of making a copy of the name and value before running set state in React event handling.', 'The text area element in React is a self-closing element, allowing the use of the value property for consistency and easy state updates.', 'The value property in React is used for select boxes to easily determine the selected option and update the state.', 'Checkboxes in React require a checked property, which is controlled by a Boolean value in the state, and the onChange handler is utilized to update the state.', 'The on submit handler can be used to perform actions when finishing the form, such as submitting the form to an API.', 'Radio buttons in React use both value and checked properties, and their behavior is controlled by the state, requiring careful management for proper functionality.', 'The handleChange method in React can be reused for all form elements, except for checkboxes, simplifying form management.', 'The button element in HTML5, when found within a form, acts as a submit button, providing an alternative to using the input type submit, which the speaker personally dislikes.', 'Practicing and gaining muscle memory is recommended for better retention of React form syntax and to explore other features of React.', 'Recommendation to explore react synthetic event for a better understanding of the importance.', 'Highlighting the use of object destructuring to avoid directly accessing the event target object.', 'The approach to wiring up a partially finished travel form in React involves initializing the state with elements such as first name, age, destination, and dietary restrictions, and then wiring up the inputs and handle change method accordingly.']}, {'end': 15938.661, 'segs': [{'end': 15026.543, 'src': 'embed', 'start': 15002.754, 'weight': 1, 'content': [{'end': 15010.997, 'text': 'and I like the text to be on the right side of the radio button myself, so that the radio buttons are nice and lined up on the left side.', 'start': 15002.754, 'duration': 8.243}, {'end': 15012.178, 'text': 'and remember,', 'start': 15010.997, 'duration': 1.181}, {'end': 15019.761, 'text': 'the radio buttons were kind of a combination of checkboxes where they have a checked property and also the text inputs where they have a value property.', 'start': 15012.178, 'duration': 7.583}, {'end': 15023.902, 'text': "so I'm going to be adding a lot of stuff to this radio button.", 'start': 15019.761, 'duration': 4.141}, {'end': 15026.543, 'text': 'you go ahead and start putting things on their own lines already.', 'start': 15023.902, 'duration': 2.641}], 'summary': 'Radio button text to be on the right, lined up neatly on the left.', 'duration': 23.789, 'max_score': 15002.754, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4415002754.jpg'}, {'end': 15120.648, 'src': 'embed', 'start': 15077.573, 'weight': 0, 'content': [{'end': 15094.087, 'text': "if that's working under your gender, put that state doesn't start as anything and choose mail, and there we go, change it to female.", 'start': 15077.573, 'duration': 16.514}, {'end': 15097.33, 'text': "Perfect All right, we're cruising.", 'start': 15094.908, 'duration': 2.422}, {'end': 15099.612, 'text': "So let's do our select box now.", 'start': 15097.37, 'duration': 2.242}, {'end': 15104.817, 'text': 'This is the select box for our locations or destinations.', 'start': 15100.973, 'duration': 3.844}, {'end': 15108.08, 'text': 'And this is going to be a select box.', 'start': 15106.078, 'duration': 2.002}, {'end': 15114.686, 'text': "And we know we're going to have some options in here.", 'start': 15112.224, 'duration': 2.462}, {'end': 15120.648, 'text': "and let's put four options.", 'start': 15118.087, 'duration': 2.561}], 'summary': 'Setting gender state to female, progressing to select box for destinations with four options.', 'duration': 43.075, 'max_score': 15077.573, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4415077573.jpg'}, {'end': 15490.049, 'src': 'embed', 'start': 15461.56, 'weight': 2, 'content': [{'end': 15471.288, 'text': "Then what I need to check is if the type is a checkbox, I'm actually going to do my set state on its own line.", 'start': 15461.56, 'duration': 9.728}, {'end': 15474.742, 'text': "it's going to get a little more complicated.", 'start': 15473.161, 'duration': 1.581}, {'end': 15480.965, 'text': "Remember that in this case, I can't just say to set the state of name, checked.", 'start': 15474.762, 'duration': 6.203}, {'end': 15485.006, 'text': "That's because I've chosen to have a nested object here.", 'start': 15481.825, 'duration': 3.181}, {'end': 15490.049, 'text': 'Apparently state does not have a property called is vegan or is kosher.', 'start': 15485.026, 'duration': 5.023}], 'summary': 'When setting state for a checkbox type, it becomes more complicated due to the use of a nested object.', 'duration': 28.489, 'max_score': 15461.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4415461560.jpg'}, {'end': 15534.751, 'src': 'embed', 'start': 15508.787, 'weight': 3, 'content': [{'end': 15515.051, 'text': 'if I update just one part of a nested object, if it will also update the rest of state.', 'start': 15508.787, 'duration': 6.264}, {'end': 15518.233, 'text': "so I'm going to be live testing this here with you.", 'start': 15515.051, 'duration': 3.182}, {'end': 15519.334, 'text': "let's give it a try.", 'start': 15518.233, 'duration': 1.101}, {'end': 15521.596, 'text': "first thing is, this won't work either way.", 'start': 15519.334, 'duration': 2.262}, {'end': 15527.087, 'text': 'so this will have to be dietary restrictions be an object.', 'start': 15521.596, 'duration': 5.491}, {'end': 15529.288, 'text': 'And we will update the name.', 'start': 15527.867, 'duration': 1.421}, {'end': 15534.751, 'text': 'Before I can test this, I need to finish my ternary because this is broken currently.', 'start': 15530.709, 'duration': 4.042}], 'summary': 'Testing the update of a nested object in state, encountering a broken ternary.', 'duration': 25.964, 'max_score': 15508.787, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4415508787.jpg'}, {'end': 15882.437, 'src': 'embed', 'start': 15859.62, 'weight': 4, 'content': [{'end': 15867.886, 'text': "So although I said it's not necessarily important to have each input type syntax memorized, still a really good idea to practice this play with it.", 'start': 15859.62, 'duration': 8.266}, {'end': 15874.851, 'text': 'See if you can really understand it so that when the time comes to build a form in your react app, you can do so relative ease.', 'start': 15868.347, 'duration': 6.504}, {'end': 15878.614, 'text': 'Thanks for your patience while we went through and debug some of this stuff.', 'start': 15875.752, 'duration': 2.862}, {'end': 15880.916, 'text': 'Hopefully that was a good exercise in general.', 'start': 15879.094, 'duration': 1.822}, {'end': 15882.437, 'text': "When you're ready, let's move on.", 'start': 15881.516, 'duration': 0.921}], 'summary': 'Practice input type syntax for building forms in react with relative ease.', 'duration': 22.817, 'max_score': 15859.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4415859620.jpg'}], 'start': 14960.006, 'title': 'Building forms in react', 'summary': 'Covers implementing and controlling form elements, handling checkbox changes, updating state using object notation, and building forms in react for enhancing web application development.', 'chapters': [{'end': 15410.798, 'start': 14960.006, 'title': 'Form elements and controls', 'summary': 'Covers the implementation of form elements such as radio buttons, select boxes, and checkboxes, including their properties and functionality, with a focus on creating a controlled form and handling state changes.', 'duration': 450.792, 'highlights': ['The process of setting up radio buttons by adding a name, value, and checked property, and handling state changes through the on.change method, resulting in the successful implementation of male and female gender options.', 'Creating a select box with options, assigning values, and ensuring the on.change function updates the state accordingly, demonstrating the selection of destinations in a controlled form.', 'Implementing checkboxes as a sub-object with Boolean values for dietary restrictions, utilizing the on.change method to update the state and displaying the options with corresponding labels within the form.']}, {'end': 15555.916, 'start': 15410.798, 'title': 'React: handling checkbox changes', 'summary': 'Discusses updating handle change to handle changes in a checkbox, identifying the need to check the checkbox type, and testing the state update for a nested object.', 'duration': 145.118, 'highlights': ['The need to check if the type is a checkbox to update the handle change function.', 'Identifying the nested object structure of state and the need for live testing the state update for a nested object.', 'The challenge of updating just one part of a nested object in state and the uncertainty of its impact on the rest of the state.']}, {'end': 15790.317, 'start': 15555.916, 'title': 'Updating state and object notation', 'summary': 'Discusses updating state using object spread notation and the challenges faced due to limitations in using object spread notation in scrimba. it also covers debugging and displaying boolean values in a react application.', 'duration': 234.401, 'highlights': ['The object spread notation is used to update state by passing in the previous state or using a function that receives the previous state as a parameter, allowing for the update of specific properties. (Relevance: 5)', 'Limitations in using object spread notation in scrimba due to the transpilation using Babel, leading to the need for a workaround by restructuring the properties in the state. (Relevance: 4)', 'Debugging process involved in identifying and resolving issues related to reading properties and updating the display of dietary restrictions in a React application. (Relevance: 3)', "Challenges faced in displaying boolean values as text on the screen in a React application, requiring a workaround to display 'yes' for true and 'no' for false. (Relevance: 2)"]}, {'end': 15938.661, 'start': 15790.317, 'title': 'Building forms in react', 'summary': 'Discusses the importance of understanding and practicing building forms in react, emphasizing that it enhances the ability to develop web applications and highlights the significance of form usage in various aspects of web development.', 'duration': 148.344, 'highlights': ['Understanding and practicing building forms in React is important for developing web applications (quantifiable data: enhancing developer skills for web applications).', 'Emphasizing the significance of form usage in various aspects of web development, such as checkbox, radio button, sign up, and login forms (quantifiable data: relevance of forms in web development).']}], 'duration': 978.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4414960006.jpg', 'highlights': ['Creating a select box with options and updating state through on.change function (Relevance: 5)', 'Setting up radio buttons with name, value, and checked properties (Relevance: 4)', 'Implementing checkboxes as sub-object with Boolean values and updating state (Relevance: 3)', 'Identifying nested object structure of state and live testing state updates (Relevance: 2)', 'Understanding and practicing building forms in React for web application development (Relevance: 1)']}, {'end': 18333.047, 'segs': [{'end': 15987.064, 'src': 'embed', 'start': 15958.474, 'weight': 1, 'content': [{'end': 15967.103, 'text': "and so this idea emerged a few years ago of having a presentational component and a smart component or component that's in charge of the business logic.", 'start': 15958.474, 'duration': 8.629}, {'end': 15974.591, 'text': "there's a lot of different names that you'll hear presentational and container components, smart components and dumb components,", 'start': 15967.563, 'duration': 7.028}, {'end': 15978.915, 'text': 'containers and components but they all refer to essentially the same thing.', 'start': 15974.591, 'duration': 4.324}, {'end': 15987.064, 'text': 'the idea is that you have one component whose job it is to maintain state and to have the methods that update state,', 'start': 15978.915, 'duration': 8.149}], 'summary': 'Having separate presentational and smart components allows for better organization and maintenance of state and methods.', 'duration': 28.59, 'max_score': 15958.474, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4415958474.jpg'}, {'end': 16791.181, 'src': 'embed', 'start': 16754.141, 'weight': 3, 'content': [{'end': 16773.085, 'text': 'yes, these comments in header import react from react, export the header and since this is going to be component that just displays things,', 'start': 16754.141, 'duration': 18.944}, {'end': 16777.509, 'text': 'will make it a functional component.', 'start': 16773.085, 'duration': 4.424}, {'end': 16786.317, 'text': "for now, always I'll just put something that says header and over in meme generator,", 'start': 16777.509, 'duration': 8.808}, {'end': 16789.88, 'text': 'since this will be holding data and making calls to an API and so forth.', 'start': 16786.317, 'duration': 3.563}, {'end': 16791.181, 'text': 'this should be a class.', 'start': 16789.88, 'duration': 1.301}], 'summary': "Creating a functional component to display 'header' and a class to hold data and make api calls.", 'duration': 37.04, 'max_score': 16754.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4416754141.jpg'}, {'end': 17046.809, 'src': 'embed', 'start': 17025.268, 'weight': 0, 'content': [{'end': 17033.896, 'text': "we're going to be using an API that provides a bunch of meme images and your task is to make an API call to that API, which I've provided the URL to,", 'start': 17025.268, 'duration': 8.628}, {'end': 17038.02, 'text': "and save the data that comes back, which you'll find under response.", 'start': 17033.896, 'duration': 4.124}, {'end': 17045.488, 'text': 'Data dot memes to a new state property called all meme images, and the data that comes back is going to be an array.', 'start': 17038.04, 'duration': 7.448}, {'end': 17046.809, 'text': 'pause now and give this a try.', 'start': 17045.488, 'duration': 1.321}], 'summary': "Use api to fetch meme images and store in 'all meme images' state property.", 'duration': 21.541, 'max_score': 17025.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4417025268.jpg'}, {'end': 17830.767, 'src': 'embed', 'start': 17798.929, 'weight': 2, 'content': [{'end': 17801.73, 'text': 'react is progressing really quickly.', 'start': 17798.929, 'duration': 2.801}, {'end': 17806.492, 'text': "if you've ever tried to watch tutorials of react from more than maybe two years ago,", 'start': 17801.73, 'duration': 4.762}, {'end': 17809.994, 'text': "you might notice that it's quite a bit different now than it used to be.", 'start': 17806.492, 'duration': 3.502}, {'end': 17821.239, 'text': 'we even had a lesson on how react version 16.3 introduced some new lifecycle methods and also started the process of deprecating some other lifecycle methods will.', 'start': 17809.994, 'duration': 11.245}, {'end': 17823.801, 'text': 'react 16.6 was just released.', 'start': 17821.239, 'duration': 2.562}, {'end': 17830.767, 'text': "there's even more new functionality now and a lot on the horizon for react version 17 and onward.", 'start': 17823.801, 'duration': 6.966}], 'summary': 'React is evolving rapidly, with version 16.6 just released and version 17 on the horizon.', 'duration': 31.838, 'max_score': 17798.929, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4417798929.jpg'}, {'end': 18146.307, 'src': 'embed', 'start': 18121.111, 'weight': 4, 'content': [{'end': 18127.074, 'text': "but it seems pretty clear that they're moving in a direction that they are encouraging the use of functional components more and more.", 'start': 18121.111, 'duration': 5.963}, {'end': 18136.3, 'text': "hopefully I'll get a chance to update this course to include some more topics as they become released and as I become more familiar with them.", 'start': 18127.734, 'duration': 8.566}, {'end': 18142.365, 'text': "for now, just know that react is changing constantly and it's always a good idea to be checking the change log,", 'start': 18136.3, 'duration': 6.065}, {'end': 18146.307, 'text': 'to be engaged in your community and watching for these changes,', 'start': 18142.365, 'duration': 3.942}], 'summary': 'React is evolving with focus on functional components. stay updated and engaged with the changes.', 'duration': 25.196, 'max_score': 18121.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4418121111.jpg'}], 'start': 15938.661, 'title': 'React components and meme generator project', 'summary': 'Covers the concept of presentational and smart components, refactoring form.js, building a meme generator project, creating a meme generator using an api, and introducing modern features in react, emphasizing the benefits of staying updated for career advancement.', 'chapters': [{'end': 16100.724, 'start': 15938.661, 'title': 'React presentational and smart components', 'summary': 'Discusses the concept of presentational and smart components in react, emphasizing the separation of ui logic and business logic, and the delegation of rendering to different components, optimizing code organization and simplifying maintenance.', 'duration': 162.063, 'highlights': ['The concept of presentational and smart components emphasizes the separation of UI logic and business logic, optimizing code organization and maintenance.', 'The idea is to have one component in charge of maintaining state and updating methods, while delegating UI logic to another component.', 'Dan Abramov, a primary developer of the react framework, discusses presentational and inner components in his Medium blog post.', 'Organizing code by creating separate components for form handling and rendering simplifies the overall structure and maintenance of the app.']}, {'end': 16565.026, 'start': 16101.565, 'title': 'Refactoring form.js with form container and form component', 'summary': 'Discusses refactoring a form by creating a separate form container and form component to separate concerns and delegate ui stuff from the business logic. the approach addresses issues related to state management and ui rendering, promoting a clearer separation of concerns.', 'duration': 463.461, 'highlights': ['Creating a separate Form Container and Form Component to delegate UI stuff from the business logic, addressing the issues related to state management and UI rendering, promoting a clearer separation of concerns.', 'Exploring different options for passing state properties to the Form Component, such as passing the entire state object or using the object spread operator, with a focus on making props management easier for future development and other developers.', 'Discussing the impact of libraries like Redux and the context API, highlighting that the container component split approach may not be as common when injecting context or global state, leading to a greater usage of functional components to consume data from Redux or global context.']}, {'end': 17015.378, 'start': 16565.768, 'title': 'Building meme generator project', 'summary': 'Covers the initial setup of the capstone project to build a meme generator, including creating the boilerplate code for react, setting up app components, creating header and meme generator components, and initializing state for the meme generator.', 'duration': 449.61, 'highlights': ['Creating the boilerplate code for React and setting up the app component to render on the screen', 'Creating separate header and meme generator components, with the latter being a class component holding state and making API calls', 'Initializing state for the meme generator to include top text, bottom text, and a random image']}, {'end': 17753.266, 'start': 17025.268, 'title': 'Meme generator using api', 'summary': 'Covers creating a meme generator using an api, making api calls, using lifecycle methods, setting state, creating input boxes, handling form submission, and displaying random memes, resulting in a completed meme generator.', 'duration': 727.998, 'highlights': ['Creating a meme generator using an API, including making API calls, using lifecycle methods, setting state, creating input boxes, handling form submission, and displaying random memes.', "Using the component did mount lifecycle method to fetch data from the provided URL and turning the response into a JavaScript object using the 'fetch' function.", "Setting the state property 'all meme images' with the array of memes received from the API response and logging the first item to verify the data.", 'Stubbing out a form with input boxes for top and bottom text, creating controlled forms, and instructing to create the on change handler for the input boxes.', 'Implementing the on change handler method to update the corresponding state property on every change of the input box and binding the method in the constructor.', "Building the area to display memes, selecting a random meme from the 'all meme images' array, and displaying the chosen meme along with the entered top and bottom text.", "Creating a method to choose a meme at random when the 'gen' button is clicked, setting the 'random image' property in the state with the chosen meme's URL, and completing the meme generator."]}, {'end': 18333.047, 'start': 17754.126, 'title': 'React modern features overview', 'summary': 'Introduces the rapid progress of react, covering the release of react 16.6, the modern features available in react apps, and the shift towards functional components. it emphasizes the benefits of staying updated on the latest react features for career advancement.', 'duration': 578.921, 'highlights': ['The rapid progress of React with the release of React 16.6 and the introduction of modern features such as arrow functions for methods and the ability to create class variables outside of a constructor.', 'The emphasis on staying updated on the most advanced and modern React features for career advancement and the encouragement to be engaged in the React community and check the change log regularly.', 'The introduction of the context API as a replacement for Redux, the availability of advanced React topics like error boundaries, render props, higher order components, and the significant changes in React towards functional components.']}], 'duration': 2394.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/DLX62G4lc44/pics/DLX62G4lc4415938661.jpg', 'highlights': ['Creating a meme generator using an API, including making API calls, using lifecycle methods, setting state, creating input boxes, handling form submission, and displaying random memes.', 'The concept of presentational and smart components emphasizes the separation of UI logic and business logic, optimizing code organization and maintenance.', 'The rapid progress of React with the release of React 16.6 and the introduction of modern features such as arrow functions for methods and the ability to create class variables outside of a constructor.', 'Creating separate header and meme generator components, with the latter being a class component holding state and making API calls.', 'The emphasis on staying updated on the most advanced and modern React features for career advancement and the encouragement to be engaged in the React community and check the change log regularly.']}], 'highlights': ['Creating a meme generator using an API, including making API calls, using lifecycle methods, setting state, creating input boxes, handling form submission, and displaying random memes.', 'The map method optimizes rendering and enhances application functionality', 'The chapter emphasizes the flexibility of conditional rendering in React for different use cases.', 'The chapter covers creating parent and child components in React, emphasizing the hierarchy of components and the distinction between components and elements.', 'Real-time tracking of user input and state management in React ensures constant state updates on every keystroke.']}