title
Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks
description
Learn the basics of React in this comprehensive course. You will learn about fundamentals, hooks, context API, react router, custom hooks, and more.
React is one of the most popular ways to build user interfaces using JavaScript.
🎥 React projects video: https://www.youtube.com/watch?v=a_7Z7C_JCyo
✏️ Course from John Smilga of the Coding Addict channel. Check out his channel: https://www.youtube.com/codingaddict
💻 Basic React Code: https://github.com/john-smilga/react-basics-2020
💻 Advanced React: https://github.com/john-smilga/react-advanced-2020
⭐️ Course Contents ⭐️
⌨️ (00:00) Intro
⌨️ (01:09) About React
⌨️ (06:51) Goals
⌨️ (08:50) Structure
⌨️ (09:46) Course Requirements
⌨️ (11:45) Dev Environment Setup
⌨️ (16:26) Text Editor Setup
⌨️ (18:20) Command Line Basics
⌨️ (25:00) NPM Basics
⌨️ (35:07) Create-React-App
⌨️ (37:05) Install Create-React-App
⌨️ (43:19) Folder Structure
⌨️ (52:25) Clean Boilerplate
⌨️ (54:00) First Component
⌨️ (1:04:13) Text Editor Setup
⌨️ (1:12:29) First Component In Detail
⌨️ (1:19:18) JSX Rules
⌨️ (1:28:55) Nested Components And Tools
⌨️ (1:34:50) Mini Book Project
⌨️ (1:42:59) CSS Basics
⌨️ (1:54:41) JSX Css
⌨️ (2:01:31) JSX Javascript
⌨️ (2:09:30) Props
⌨️ (2:25:41) Props Destructuring
⌨️ (2:29:44) Props - Children
⌨️ (2:36:13) Simple List
⌨️ (2:45:12) Proper List
⌨️ (2:52:49) Key Prop And Spread Operator
⌨️ (2:58:52) Event Basics
⌨️ (3:11:12) Import And Export Statements
⌨️ (3:23:25) Free Hosting
⌨️ (3:28:22) Advanced Intro
⌨️ (3:30:42) Get Starter Project
⌨️ (3:31:35) Install Starter
⌨️ (3:33:43) Starter Overview
⌨️ (3:39:00) UseState - Simple Use Case
⌨️ (3:48:44) UseState - Basics
⌨️ (4:00:47) General Rules Of Hooks
⌨️ (4:03:39) UseState - Array Example
⌨️ (4:17:27) UseState - Object Example
⌨️ (4:23:00) UseState - Multiple State Values
⌨️ (4:26:17) Simple Counter
⌨️ (4:32:10) Functional Update Form
⌨️ (4:44:55) Matching Project
⌨️ (4:47:27) useEffect - Basics
⌨️ (4:57:47) useEffect - Conditional
⌨️ (5:01:40) useEffect - Dependency List
⌨️ (5:07:13) useEffect - Cleanup Function
⌨️ (5:19:24) useEffect - Fetch Data
⌨️ (5:31:29) Multiple Returns
⌨️ (5:37:09) Multiple Returns - Fetching Data
⌨️ (5:52:07) Short - Circuit Evaluation
⌨️ (6:02:50) Ternary Operator
⌨️ (6:11:30) Show/Hide Component
⌨️ (6:20:15) Form Basics
⌨️ (6:28:53) Controlled Inputs
⌨️ (6:38:09) Add Item To The List
⌨️ (6:50:32) Multiple Inputs
⌨️ (7:06:29) useRef
⌨️ (7:16:20) useReducer - UseState Setup
⌨️ (7:29:52) useReducer - Refactor
⌨️ (7:37:15) useReducer - Add Item
⌨️ (7:53:14) useReducer - Remove Item
⌨️ (8:00:56) Prop Drilling -
⌨️ (8:14:36) Context API / - useContext
⌨️ (8:26:22) Custom Hooks - useFetch
⌨️ (8:38:09) PropTypes - Setup
⌨️ (8:47:48) PropTypes - Images
⌨️ (8:55:48) PropTypes - Default Values
⌨️ (9:00:41) React Router Intro
⌨️ (9:05:52) React Router - Basic Setup
⌨️ (9:15:50) React Router - Error And Switch Component
⌨️ (9:18:51) React Router - Links
⌨️ (9:23:22) React Router - URL Params And Placeholder
⌨️ (9:37:51) React Optimization Warning
⌨️ (9:41:21) React.memo
⌨️ (9:49:50) useCallback
⌨️ (9:58:00) useMemo
⌨️ (10:04:15) useCallback - Fetch Example
--
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
detail
{'title': 'Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks', 'heatmap': [{'end': 2557.117, 'start': 2179.479, 'weight': 0.739}, {'end': 4377.235, 'start': 3643.871, 'weight': 0.774}, {'end': 6933.904, 'start': 6565.456, 'weight': 0.884}, {'end': 10581.718, 'start': 10204.874, 'weight': 0.702}, {'end': 12769.834, 'start': 12397.689, 'weight': 0.737}, {'end': 16417.807, 'start': 16043.252, 'weight': 0.782}, {'end': 18968.445, 'start': 18601.805, 'weight': 0.726}, {'end': 20061.805, 'start': 19695.242, 'weight': 0.724}, {'end': 25533.96, 'start': 25164.179, 'weight': 0.767}, {'end': 27357.107, 'start': 26623.135, 'weight': 0.81}, {'end': 28823.81, 'start': 28448.371, 'weight': 1}, {'end': 30273.936, 'start': 29906.799, 'weight': 0.773}], 'summary': 'A comprehensive react course covering fundamentals, essential tools setup, jsx syntax, component styling, props usage, javascript basics, hooks, state management, component toggling, redux, custom hooks, react router, url parameters, e-commerce integration, and performance optimization with practical examples and insights.', 'chapters': [{'end': 256.846, 'segs': [{'end': 151.008, 'src': 'embed', 'start': 99.25, 'weight': 0, 'content': [{'end': 106.875, 'text': "That's it, my friends, not a PhD dissertation paper, just a short, concise one sentence explanation.", 'start': 99.25, 'duration': 7.625}, {'end': 109.816, 'text': "I'm a big fan of straight to the point answers.", 'start': 107.615, 'duration': 2.201}, {'end': 113.217, 'text': 'And this one by far sums up react the best.', 'start': 110.316, 'duration': 2.901}, {'end': 115.658, 'text': 'Let me elaborate a bit on that.', 'start': 113.778, 'duration': 1.88}, {'end': 119.86, 'text': 'So react was developed at Facebook in 2011.', 'start': 116.098, 'duration': 3.762}, {'end': 122.841, 'text': 'And currently, it is by far the most popular.', 'start': 119.86, 'duration': 2.981}, {'end': 129.163, 'text': 'Yes, you heard correctly, the most popular JavaScript library to build user interfaces.', 'start': 123.441, 'duration': 5.722}, {'end': 134.149, 'text': 'As I know, some of react competitors are angular view.', 'start': 129.964, 'duration': 4.185}, {'end': 144.46, 'text': "And so if there's one thing that I would want you to take away from this video, it is this one, when it comes to react, it's all about components.", 'start': 134.709, 'duration': 9.751}, {'end': 151.008, 'text': 'And you can think of components as independent chunks of user interfaces.', 'start': 145.321, 'duration': 5.687}], 'summary': 'React, developed at facebook in 2011, is the most popular javascript library for building user interfaces, focusing on independent ui components.', 'duration': 51.758, 'max_score': 99.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW499250.jpg'}], 'start': 0.229, 'title': 'React fundamentals', 'summary': 'Covers the fundamentals of react, highlighting its popularity as the most used javascript library for building user interfaces, emphasizing the importance of components, and the benefits of using react to develop applications.', 'chapters': [{'end': 256.846, 'start': 0.229, 'title': 'React tutorial: building user interfaces', 'summary': 'Covers the fundamentals of react, including its popularity as the most used javascript library for building user interfaces, emphasizing the importance of components, and highlighting the benefits of using react to develop applications.', 'duration': 256.617, 'highlights': ['React is the most popular JavaScript library for building user interfaces, developed at Facebook in 2011.', 'Components in React allow for building independent, isolated, and reusable user interfaces.', 'The benefits of using React include building independent pieces of user interfaces, reusing components throughout the app, and centralized component code for easy maintenance.']}], 'duration': 256.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW4229.jpg', 'highlights': ['React is the most popular JavaScript library for building user interfaces, developed at Facebook in 2011.', 'Components in React allow for building independent, isolated, and reusable user interfaces.', 'The benefits of using React include building independent pieces of user interfaces, reusing components throughout the app, and centralized component code for easy maintenance.']}, {'end': 1215.847, 'segs': [{'end': 306.135, 'src': 'embed', 'start': 257.346, 'weight': 1, 'content': [{'end': 265.813, 'text': 'You see behind the scenes, react is using something called virtual DOM, where only the component that needs to be updated is affected.', 'start': 257.346, 'duration': 8.467}, {'end': 274.46, 'text': "And what's really cool, it's done without re rendering the whole app, which in turn, of course, increases the speed of your final product.", 'start': 266.714, 'duration': 7.746}, {'end': 277.763, 'text': 'And as a result, the user experience as well.', 'start': 275.261, 'duration': 2.502}, {'end': 286.908, 'text': 'Before I let you go, I also want to show you somewhat typical example that everyone uses to show react components in action.', 'start': 278.303, 'duration': 8.605}, {'end': 290.37, 'text': 'And that is no other than our beloved Twitter.', 'start': 287.669, 'duration': 2.701}, {'end': 297.332, 'text': "So as we're looking at the screen, and by the way, I can see you getting distracted by my content feed.", 'start': 291.25, 'duration': 6.082}, {'end': 301.053, 'text': 'Focus people focus, we are here to learn.', 'start': 297.972, 'duration': 3.081}, {'end': 304.114, 'text': 'Where was I? Oh, yes, the components.', 'start': 301.874, 'duration': 2.24}, {'end': 306.135, 'text': "Let's take a look at the sidebar.", 'start': 304.595, 'duration': 1.54}], 'summary': "React's virtual dom speeds up app rendering, enhancing user experience.", 'duration': 48.789, 'max_score': 257.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW4257346.jpg'}, {'end': 701.236, 'src': 'embed', 'start': 665.012, 'weight': 0, 'content': [{'end': 668.273, 'text': 'where we cover react specific JavaScript topics.', 'start': 665.012, 'duration': 3.261}, {'end': 670.714, 'text': "I'm constantly adding new topics.", 'start': 668.873, 'duration': 1.841}, {'end': 678.217, 'text': "So while at the time of recording, there are only three videos, by the time you'll be watching this, there will be more.", 'start': 671.194, 'duration': 7.023}, {'end': 682.798, 'text': "So again, the channel that you're looking for is coding addict.", 'start': 678.757, 'duration': 4.041}, {'end': 687.94, 'text': 'And more specifically, the playlist name is JavaScript nuggets.', 'start': 683.278, 'duration': 4.662}, {'end': 689.922, 'text': 'So the way it works.', 'start': 688.44, 'duration': 1.482}, {'end': 701.236, 'text': "as I'm recording the course and once I hit a specific JavaScript topic, for example map or unique values or dynamic object keys,", 'start': 689.922, 'duration': 11.314}], 'summary': "Coding addict's javascript nuggets playlist covers react-specific topics, with plans for continuous additions.", 'duration': 36.224, 'max_score': 665.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW4665012.jpg'}, {'end': 958.082, 'src': 'embed', 'start': 928.291, 'weight': 6, 'content': [{'end': 933.093, 'text': "But in your case, if you don't have it installed, then of course, you'll have add to Chrome.", 'start': 928.291, 'duration': 4.802}, {'end': 938.235, 'text': "So you'll add that extension, and what you're looking for are the components and the profiler.", 'start': 933.553, 'duration': 4.682}, {'end': 947.138, 'text': "Keep in mind that, of course, if for example, you are at the page that doesn't use react, and of course, is just going to be gray.", 'start': 938.635, 'duration': 8.503}, {'end': 948.698, 'text': "And what I'm talking about?", 'start': 947.638, 'duration': 1.06}, {'end': 951.639, 'text': 'this little icon, notice this react developer tools.', 'start': 948.698, 'duration': 2.941}, {'end': 952.92, 'text': "essentially, it's going to be gray.", 'start': 951.639, 'duration': 1.281}, {'end': 958.082, 'text': "However, if the site is using react, then of course you'll be able to see it.", 'start': 953.84, 'duration': 4.242}], 'summary': 'To use react developer tools, add the extension to chrome and look for components and profiler. if the site uses react, the icon will be visible; otherwise, it will be gray.', 'duration': 29.791, 'max_score': 928.291, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW4928291.jpg'}], 'start': 257.346, 'title': 'React course tools & essential setup', 'summary': 'Covers the benefits of using react components for app performance and code reusability, outlines the course goals and structure. it also discusses the essential tools like node.js, web browser, visual studio code, and react developer tools. additionally, it provides guidance on setting up react developer tools in chrome and vs code through github, along with the importance of understanding basic terminal and npm commands.', 'chapters': [{'end': 637.272, 'start': 257.346, 'title': 'React component benefits & course overview', 'summary': 'Discusses the benefits of using react components to enhance app performance, user experience, and code reusability, and outlines the main goals and structure of the course, focusing on building projects and becoming comfortable with using external resources and applying theory to practice.', 'duration': 379.926, 'highlights': ['React components improve app performance and user experience by using virtual DOM and selective rendering, increasing the speed of the final product.', 'The course goal is to make students comfortable with React, enabling them to utilize external resources and apply theory to practice by building their own projects.', 'The course structure involves starting with setting up the development environment, followed by an extensive React tutorial and building projects to expand knowledge and comfort with the framework.', 'Familiarity with HTML, CSS, and JavaScript, particularly ES6 topics such as spread operators and arrow functions, is beneficial for learning React.']}, {'end': 928.251, 'start': 638.072, 'title': 'React course tools & javascript nuggets', 'summary': "Discusses the essential tools required for the react course including node.js, web browser, visual studio code, and react developer tools, and suggests utilizing the youtube channel 'coding addict' for specific javascript topics.", 'duration': 290.179, 'highlights': ["The chapter suggests utilizing the YouTube channel 'Coding Addict' and its JavaScript Nuggets playlist for specific JavaScript topics, with constant additions to the content.", "The minimum version of Node.js required for the course is 5.2, and the use of NPX for installing 'create react app' is recommended.", 'The recommended tools for the dev environment include Node.js, a web browser (preferably Google Chrome), Visual Studio Code, and React Developer Tools.']}, {'end': 1215.847, 'start': 928.291, 'title': 'Setting up react developer tools and visual studio code', 'summary': 'Covers the setup of react developer tools in chrome, including the components and profiler, and provides guidance on accessing vs code setup and extensions through github, as well as the importance of understanding basic terminal and npm commands for the upcoming react course.', 'duration': 287.556, 'highlights': ['The chapter covers the setup of React Developer Tools in Chrome, including the components and profiler', 'Provides guidance on accessing VS Code setup and extensions through GitHub', 'Importance of understanding basic terminal and npm commands for the upcoming React course']}], 'duration': 958.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW4257346.jpg', 'highlights': ['React components improve app performance using virtual DOM and selective rendering', 'Course goal: make students comfortable with React, apply theory to practice', 'Course structure: setting up dev environment, extensive React tutorial, building projects', "Minimum Node.js version required for the course is 5.2, NPX for installing 'create react app'", 'Recommended tools: Node.js, web browser (preferably Google Chrome), Visual Studio Code, React Developer Tools', 'Setup of React Developer Tools in Chrome, including components and profiler', 'Guidance on accessing VS Code setup and extensions through GitHub', 'Importance of understanding basic terminal and npm commands for the upcoming React course', 'Familiarity with HTML, CSS, and JavaScript, particularly ES6 topics, is beneficial for learning React', "Suggested YouTube channel 'Coding Addict' and its JavaScript Nuggets playlist for specific JavaScript topics"]}, {'end': 3011.651, 'segs': [{'end': 1269.373, 'src': 'embed', 'start': 1216.428, 'weight': 1, 'content': [{'end': 1218.569, 'text': "And that's where the terminal comes in.", 'start': 1216.428, 'duration': 2.141}, {'end': 1223.052, 'text': 'I fully understand that the first time seeing this is scary.', 'start': 1219.17, 'duration': 3.882}, {'end': 1226.995, 'text': "But don't worry, it is not as bad as it looks like.", 'start': 1223.553, 'duration': 3.442}, {'end': 1235.502, 'text': 'And the first command that I want to look at is p wd, which will show us a full path name to a current directory.', 'start': 1227.735, 'duration': 7.767}, {'end': 1243.808, 'text': 'So where are we at, as far as our machine in the terminal, so we just type p wd.', 'start': 1236.162, 'duration': 7.646}, {'end': 1246.731, 'text': 'And I can tell you right away that we will be in route.', 'start': 1244.129, 'duration': 2.602}, {'end': 1250.654, 'text': 'By the way, you can notice this by this little symbol.', 'start': 1247.171, 'duration': 3.483}, {'end': 1257.758, 'text': 'Okay, so now, where is my route? It is forward slash users, and then forward slash my last name.', 'start': 1251.089, 'duration': 6.669}, {'end': 1261.202, 'text': 'So that is my route directory.', 'start': 1258.278, 'duration': 2.924}, {'end': 1269.373, 'text': 'Now, if I want to see what directories I have in that folder, Well, I just go by LS.', 'start': 1261.643, 'duration': 7.73}], 'summary': 'Introduction to using terminal commands, including pwd and ls, to navigate directories.', 'duration': 52.945, 'max_score': 1216.428, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW41216428.jpg'}, {'end': 1345.236, 'src': 'embed', 'start': 1296.235, 'weight': 0, 'content': [{'end': 1304.498, 'text': 'Now, if I would want to navigate to a specific folder, we would need to type CD, and then whatever folder name.', 'start': 1296.235, 'duration': 8.263}, {'end': 1310.721, 'text': 'So in this case, if I would want to navigate to a desktop, I would just need to write this up.', 'start': 1305.039, 'duration': 5.682}, {'end': 1311.461, 'text': "that's it.", 'start': 1311.161, 'duration': 0.3}, {'end': 1313.962, 'text': 'Now, of course, we navigate to add this stuff.', 'start': 1311.801, 'duration': 2.161}, {'end': 1316.983, 'text': 'And I can clearly see that here as well.', 'start': 1314.542, 'duration': 2.441}, {'end': 1326.747, 'text': 'Now, if I would want to navigate one level up, basically back to a parent, I would need to go to CD, and then dot dot.', 'start': 1317.604, 'duration': 9.143}, {'end': 1331.489, 'text': "Now, of course, you can again, see that I'm sitting in the room.", 'start': 1327.228, 'duration': 4.261}, {'end': 1343.575, 'text': 'So if we would want to navigate back to a desktop again, we will type CD desktop or Also remember that we have option of using arrow key up or down,', 'start': 1331.95, 'duration': 11.625}, {'end': 1345.236, 'text': 'where we can look for previous commands.', 'start': 1343.575, 'duration': 1.661}], 'summary': 'Learn how to navigate folders using cd command and arrow keys for previous commands.', 'duration': 49.001, 'max_score': 1296.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW41296235.jpg'}, {'end': 1392.355, 'src': 'embed', 'start': 1365.12, 'weight': 6, 'content': [{'end': 1374.325, 'text': "Now, once I'm in the desktop, if I'll run LS, you'll notice that technically, it doesn't return anything, because of course, my desktop is empty.", 'start': 1365.12, 'duration': 9.205}, {'end': 1381.409, 'text': "However, there's going to be maybe some cases once in a while, where you would want to also check for hidden folders.", 'start': 1374.685, 'duration': 6.724}, {'end': 1386.612, 'text': 'And most likely in our course that is going to have to do with Git.', 'start': 1382.329, 'duration': 4.283}, {'end': 1392.355, 'text': 'And in that case, you can run with LS, and hyphen and then a.', 'start': 1387.392, 'duration': 4.963}], 'summary': 'When running ls on the desktop, it returns nothing as the desktop is empty. however, for hidden folders related to git, ls can be run with the -a option.', 'duration': 27.235, 'max_score': 1365.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW41365120.jpg'}, {'end': 1604.444, 'src': 'embed', 'start': 1551.751, 'weight': 7, 'content': [{'end': 1559.193, 'text': "And for the most part, you'll be just hitting npm start on a keyboard for the remainder of the course.", 'start': 1551.751, 'duration': 7.442}, {'end': 1562.995, 'text': "a command that we'll cover a bit later in the course.", 'start': 1559.893, 'duration': 3.102}, {'end': 1570.22, 'text': 'As far as general npm commands, we have npm in it, that is going to create package JSON.', 'start': 1563.796, 'duration': 6.424}, {'end': 1575.803, 'text': 'So essentially the manifest file for our project.', 'start': 1570.72, 'duration': 5.083}, {'end': 1576.383, 'text': "we're also.", 'start': 1575.803, 'duration': 0.58}, {'end': 1578.885, 'text': "we'll see list of dependencies.", 'start': 1576.383, 'duration': 2.502}, {'end': 1584.088, 'text': 'then we can install package by running npm install and then package name.', 'start': 1578.885, 'duration': 5.203}, {'end': 1586.91, 'text': 'And then we would need to run dash dash save.', 'start': 1584.548, 'duration': 2.362}, {'end': 1588.531, 'text': 'Now as far as dash.', 'start': 1587.53, 'duration': 1.001}, {'end': 1589.432, 'text': 'dash save.', 'start': 1588.531, 'duration': 0.901}, {'end': 1597.999, 'text': "in the latest versions of node, you already don't have to run that, meaning this would just save it to a list of dependencies.", 'start': 1589.432, 'duration': 8.567}, {'end': 1604.444, 'text': "Or like I said, in the latest versions of node, you don't have to do that anymore.", 'start': 1598.559, 'duration': 5.885}], 'summary': 'Learn to use npm commands and manage dependencies in the course.', 'duration': 52.693, 'max_score': 1551.751, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW41551751.jpg'}, {'end': 1871.836, 'src': 'embed', 'start': 1844.885, 'weight': 3, 'content': [{'end': 1853.153, 'text': "In this case, when I'm opening up the integrated terminal from the Visual Studio code, I'm right away at my project.", 'start': 1844.885, 'duration': 8.268}, {'end': 1854.995, 'text': "So I'm in a testing.", 'start': 1853.593, 'duration': 1.402}, {'end': 1858.099, 'text': 'Now of course, I would want to install first dependency.', 'start': 1855.335, 'duration': 2.764}, {'end': 1860.602, 'text': "And I'll just randomly install bootstrap.", 'start': 1858.68, 'duration': 1.922}, {'end': 1867.51, 'text': 'So we go with npm install, and then whatever is the package name, so I know that it is bootstrap.', 'start': 1861.002, 'duration': 6.508}, {'end': 1871.836, 'text': "And then like I said, just in case I'll run dash dash save.", 'start': 1867.991, 'duration': 3.845}], 'summary': 'Using visual studio code, npm installed bootstrap package in testing project.', 'duration': 26.951, 'max_score': 1844.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW41844885.jpg'}, {'end': 2557.117, 'src': 'heatmap', 'start': 2179.479, 'weight': 0.739, 'content': [{'end': 2188.785, 'text': 'So a Babel is a JavaScript transpiler that converts the newest JavaScript into the good old JavaScript.', 'start': 2179.479, 'duration': 9.306}, {'end': 2192.147, 'text': 'So we can use all the newest features of the JavaScript language.', 'start': 2189.025, 'duration': 3.122}, {'end': 2199.432, 'text': 'So think things like spread operator, the structuring, and all the other goodies that come with year six.', 'start': 2192.748, 'duration': 6.684}, {'end': 2210.539, 'text': "And behind the scenes babble, we'll turn it into years five, which in turn will make sure that our app runs smoothly in the older browsers as well.", 'start': 2200.092, 'duration': 10.447}, {'end': 2214.522, 'text': 'So essentially, we can have our cake and eat it too.', 'start': 2211.04, 'duration': 3.482}, {'end': 2217.224, 'text': 'Well, webpack does a lot of other things as well.', 'start': 2214.962, 'duration': 2.262}, {'end': 2221.106, 'text': 'Essentially, webpack works as a module bundler.', 'start': 2217.564, 'duration': 3.542}, {'end': 2229.409, 'text': 'The main features of Webpack would be bundling our resources, watching for changes, and running Babel transpiler.', 'start': 2221.586, 'duration': 7.823}, {'end': 2235.972, 'text': 'In order to bootstrap a fresh instance of react app, they suggest using NPX.', 'start': 2229.949, 'duration': 6.023}, {'end': 2244.095, 'text': "So essentially, we won't need to install their CLI tool on our machine, which is a setup they had before.", 'start': 2236.492, 'duration': 7.603}, {'end': 2250.938, 'text': "And as a side note, that's why our npm version needs to be at least 5.2.", 'start': 2244.935, 'duration': 6.003}, {'end': 2255.22, 'text': 'Since we do want to use and p x.', 'start': 2250.938, 'duration': 4.282}, {'end': 2266.565, 'text': "So, while we're still on the subject, their previous setup was that we had to install the CLI tool, the create react app, globally,", 'start': 2255.22, 'duration': 11.345}, {'end': 2268.286, 'text': 'or now they switched to NPX.', 'start': 2266.565, 'duration': 1.721}, {'end': 2275.752, 'text': "And they're also suggesting that if you have already installed the create react globally so, for example,", 'start': 2269.286, 'duration': 6.466}, {'end': 2284.96, 'text': "maybe you're watching some other tutorial and you already installed create react app globally they suggest that you uninstall.", 'start': 2275.752, 'duration': 9.208}, {'end': 2293.167, 'text': 'So you need to run this command the npm uninstall, and then G create react app to uninstall the CLI tool.', 'start': 2285.36, 'duration': 7.807}, {'end': 2300.27, 'text': 'because that way, it ensures that NPX uses always the latest version.', 'start': 2293.547, 'duration': 6.723}, {'end': 2301.97, 'text': 'Now, I already did that.', 'start': 2300.75, 'duration': 1.22}, {'end': 2303.491, 'text': "So I'm good to go.", 'start': 2302.27, 'duration': 1.221}, {'end': 2306.612, 'text': "And we're only looking for this command.", 'start': 2303.511, 'duration': 3.101}, {'end': 2308.537, 'text': 'Now you can grab the whole thing.', 'start': 2307.156, 'duration': 1.381}, {'end': 2312.358, 'text': 'That just means that your app will be called my app.', 'start': 2308.557, 'duration': 3.801}, {'end': 2316.939, 'text': "In my case, I'll just copy npx, create react app.", 'start': 2312.778, 'duration': 4.161}, {'end': 2319.42, 'text': "So I'm going to navigate back.", 'start': 2317.52, 'duration': 1.9}, {'end': 2326.983, 'text': 'And by the way, if you want to check what is your npm version, same as with node, we just run npm.', 'start': 2319.88, 'duration': 7.103}, {'end': 2329.164, 'text': "And then there's dash version.", 'start': 2327.843, 'duration': 1.321}, {'end': 2333.465, 'text': 'And of course, you can see that I have 6.12.', 'start': 2329.644, 'duration': 3.821}, {'end': 2341.028, 'text': 'Now at this point, I would want to navigate to a desktop like so, and then copy and paste my command.', 'start': 2333.465, 'duration': 7.563}, {'end': 2345.83, 'text': 'And once I have command in place, I just need to come up with a name of my folder.', 'start': 2341.628, 'duration': 4.202}, {'end': 2349.412, 'text': "And in my case, I'm going to go with tutorial.", 'start': 2346.611, 'duration': 2.801}, {'end': 2356.975, 'text': "And you'll see how the create react app starts bootstrapping your react application.", 'start': 2350.052, 'duration': 6.923}, {'end': 2359.238, 'text': 'Now, it does take a little bit of time.', 'start': 2357.575, 'duration': 1.663}, {'end': 2362.882, 'text': 'So I will stop the video.', 'start': 2359.758, 'duration': 3.124}, {'end': 2367.268, 'text': "I'll resume it once all the dependencies are in place.", 'start': 2363.042, 'duration': 4.226}, {'end': 2377.04, 'text': 'And once create react app is done, installing all dependencies and essentially setting up a ready to go react application,', 'start': 2367.949, 'duration': 9.091}, {'end': 2383.065, 'text': 'we can see in the terminal that we have quite a few commands that we can use.', 'start': 2377.04, 'duration': 6.025}, {'end': 2390.212, 'text': "Now again, as we're progressing with tutorial, don't worry, we will cover other ones as well.", 'start': 2383.686, 'duration': 6.526}, {'end': 2399.08, 'text': 'But for time being, the one that we really need is the npm start, which starts the development server.', 'start': 2390.292, 'duration': 8.788}, {'end': 2404.985, 'text': 'Now, let me tell you right away, that there are two places where you can run the commands.', 'start': 2399.66, 'duration': 5.325}, {'end': 2414.354, 'text': 'So, essentially, start up the dev server or build the production ready application or, for example, install the dependency.', 'start': 2405.326, 'duration': 9.028}, {'end': 2417.877, 'text': "I don't know extra dependency, for example react icon.", 'start': 2414.354, 'duration': 3.523}, {'end': 2424.778, 'text': 'And these two places are following where I can run all my commands in a terminal.', 'start': 2418.577, 'duration': 6.201}, {'end': 2430.56, 'text': "However, I just need to make sure that of course, I'm located in my folder.", 'start': 2424.859, 'duration': 5.701}, {'end': 2434.46, 'text': 'So for example, in this case, I would need to navigate to tutorial.', 'start': 2430.82, 'duration': 3.64}, {'end': 2439.061, 'text': 'And then I can run, for example, command of npm start.', 'start': 2435.461, 'duration': 3.6}, {'end': 2443.082, 'text': 'And the other place is going to be our text error.', 'start': 2439.781, 'duration': 3.301}, {'end': 2448.786, 'text': "Now, I'm going to run my commands in text error in the integrated terminal.", 'start': 2443.542, 'duration': 5.244}, {'end': 2457.873, 'text': "The reason why I'm showing you this is that, once in a while, some students who use Windows have complained that, unfortunately,", 'start': 2449.106, 'duration': 8.767}, {'end': 2465.098, 'text': "when they run their commands in the integrated terminal in the Visual Studio code, they're getting some issues.", 'start': 2457.873, 'duration': 7.225}, {'end': 2470.479, 'text': "So just keep in mind, you don't have to run your commands in integrated terminal.", 'start': 2465.498, 'duration': 4.981}, {'end': 2475.981, 'text': "Now, of course, I will do that throughout the course, because I'm not having any issues.", 'start': 2470.859, 'duration': 5.122}, {'end': 2482.843, 'text': 'Once I do that, however, if you do, just remember that you can always set them up in your terminal as well.', 'start': 2476.201, 'duration': 6.642}, {'end': 2493.068, 'text': "So in my case, I'm going to drag and drop my application And then I'll right away set up side by side a browser,", 'start': 2483.223, 'duration': 9.845}, {'end': 2496.731, 'text': "because that's just how I prefer while I'm developing.", 'start': 2493.068, 'duration': 3.663}, {'end': 2500.053, 'text': 'So this is going to be a fresh instance of the browser.', 'start': 2497.311, 'duration': 2.742}, {'end': 2502.155, 'text': 'And this is going to be our project.', 'start': 2500.533, 'duration': 1.622}, {'end': 2503.075, 'text': "Now don't worry.", 'start': 2502.475, 'duration': 0.6}, {'end': 2514.644, 'text': "in the next video we'll take a closer look of what is our folder structure and what essentially we can find in the fresh instance of create react.", 'start': 2503.075, 'duration': 11.569}, {'end': 2518.787, 'text': 'app However, for now, we just want to spin up my dev server.', 'start': 2514.884, 'duration': 3.903}, {'end': 2524.712, 'text': 'So like I said, I will open up the integrated terminal with control and tilde.', 'start': 2519.168, 'duration': 5.544}, {'end': 2532.519, 'text': 'And then we run npm and then start on localhost 3000.', 'start': 2525.313, 'duration': 7.206}, {'end': 2537.323, 'text': "We're going to get a brand new instance of our application.", 'start': 2532.519, 'duration': 4.804}, {'end': 2541.846, 'text': "So essentially, we'll see what create rehab created for us.", 'start': 2537.563, 'duration': 4.283}, {'end': 2545.208, 'text': 'Now, you see that we have some logo, we have some text.', 'start': 2542.226, 'duration': 2.982}, {'end': 2549.651, 'text': "And like I said, in the next video, we'll take a closer look at the folder structure.", 'start': 2545.589, 'duration': 4.062}, {'end': 2557.117, 'text': "But for the time being, I would just want to showcase that the way the dev server works is each and every time we'll make some change.", 'start': 2550.152, 'duration': 6.965}], 'summary': 'Babel transpiles new javascript to old, webpack bundles resources, npx simplifies react setup.', 'duration': 377.638, 'max_score': 2179.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW42179479.jpg'}], 'start': 1216.428, 'title': 'Terminal navigation and npm usage', 'summary': "Covers terminal basics such as 'pwd' and 'ls', npm overview, local and global npm package installation, and webpack setup for react app, aiming to demystify terminal usage and provide insights into npm commands and package management.", 'chapters': [{'end': 1295.615, 'start': 1216.428, 'title': 'Terminal navigation basics', 'summary': "Covers the basics of using the terminal, including commands like 'pwd' to show the current directory, 'ls' to list directories, and navigating through the directory structure, aiming to demystify the intimidating nature of the terminal.", 'duration': 79.187, 'highlights': ["The 'pwd' command shows the full path name to the current directory, which in this case is '/users/lastname', providing clarity on the current location within the terminal.", "The 'ls' command lists the directories in the current directory, providing a way to view the contents of the current location within the terminal.", "The transcript aims to demystify the intimidating nature of the terminal by assuring the audience that it's not as scary as it may seem at first, aiming to alleviate any initial apprehension towards using the terminal."]}, {'end': 1795.926, 'start': 1296.235, 'title': 'Terminal navigation and npm overview', 'summary': 'Covers basic commands for terminal navigation, including cd, ls, and mkdir, and provides an overview of npm, emphasizing its role in saving time, automating tasks, and managing dependencies, and also discusses global and development-specific package installation.', 'duration': 499.691, 'highlights': ['npm allows us to save time, automate our tasks and avoid reinventing the wheel, installing packages or dependencies.', "CD command is used for navigating to a specific folder, and navigating one level up (to parent) is done using 'CD dot dot'.", "MKDIR command is used to create a new directory, and hidden folders can be displayed using 'LS -a'.", "Overview of npm commands including 'npm init' for creating a package JSON file, 'npm install' for installing packages, 'npm install package-name -g' for global installation, and 'npm install package-name --save-dev' for development-specific installation."]}, {'end': 2192.147, 'start': 1796.346, 'title': 'Npm installation: local and global packages', 'summary': "Covers the installation of dependencies using npm, showcasing the process of installing a package locally and globally, emphasizing the convenience of using visual studio code's integrated terminal and the benefits of using create react app for setting up react applications.", 'duration': 395.801, 'highlights': ["Visual Studio code's integrated terminal provides convenience by instantly accessing the project folder and allows for easy installation of npm packages locally.", 'The process of installing a package locally using npm install is demonstrated, showing the creation of a node_modules folder containing dependencies such as bootstrap, with the package.json file being the recommended file for sharing.', 'The benefits of using create react app for setting up React applications are highlighted, emphasizing its capability to handle heavy lifting and simplify the process by focusing on scripts and dev server setup.', 'The convenience and time-saving aspect of using create react app, built by Facebook developers, for setting up React applications is emphasized, with a recommendation to use it for a smoother development experience.', 'The advantages of using create react app to save time and maintain sanity by avoiding complex Webpack and Babel configurations are highlighted, with an emphasis on the benefits of Babel as a JavaScript transpiler.']}, {'end': 3011.651, 'start': 2192.748, 'title': 'Webpack and react app setup', 'summary': 'Covers setting up a react app using webpack, highlighting the use of npx, babel transpiler, and npm commands, emphasizing the importance of npm version 5.2, and providing an overview of the folder structure in a create-react-app project.', 'duration': 818.903, 'highlights': ['Setting up a React app using Webpack, including the use of NPX, Babel transpiler, and npm commands', 'Importance of npm version 5.2 for using NPX', 'Overview of the folder structure in a create-react-app project']}], 'duration': 1795.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW41216428.jpg', 'highlights': ['The benefits of using create react app for setting up React applications are highlighted, emphasizing its capability to handle heavy lifting and simplify the process by focusing on scripts and dev server setup.', 'The convenience and time-saving aspect of using create react app, built by Facebook developers, for setting up React applications is emphasized, with a recommendation to use it for a smoother development experience.', 'The advantages of using create react app to save time and maintain sanity by avoiding complex Webpack and Babel configurations are highlighted, with an emphasis on the benefits of Babel as a JavaScript transpiler.', 'npm allows us to save time, automate our tasks and avoid reinventing the wheel, installing packages or dependencies.', 'The process of installing a package locally using npm install is demonstrated, showing the creation of a node_modules folder containing dependencies such as bootstrap, with the package.json file being the recommended file for sharing.', "Overview of npm commands including 'npm init' for creating a package JSON file, 'npm install' for installing packages, 'npm install package-name -g' for global installation, and 'npm install package-name --save-dev' for development-specific installation.", 'Setting up a React app using Webpack, including the use of NPX, Babel transpiler, and npm commands', "Visual Studio code's integrated terminal provides convenience by instantly accessing the project folder and allows for easy installation of npm packages locally.", "The 'pwd' command shows the full path name to the current directory, which in this case is '/users/lastname', providing clarity on the current location within the terminal.", "The 'ls' command lists the directories in the current directory, providing a way to view the contents of the current location within the terminal.", "The transcript aims to demystify the intimidating nature of the terminal by assuring the audience that it's not as scary as it may seem at first, aiming to alleviate any initial apprehension towards using the terminal."]}, {'end': 4395.351, 'segs': [{'end': 3031.51, 'src': 'embed', 'start': 3012.131, 'weight': 0, 'content': [{'end': 3023.144, 'text': 'And even though there is a lot of things already here, most importantly, what I would want you to notice is that we are targeting that root div.', 'start': 3012.131, 'duration': 11.013}, {'end': 3031.51, 'text': 'Remember, I showed you in the index HTML, I said that, of course, this is where all our application is going to live.', 'start': 3023.584, 'duration': 7.926}], 'summary': 'Targeting root div for application location', 'duration': 19.379, 'max_score': 3012.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW43012131.jpg'}, {'end': 3135.304, 'src': 'embed', 'start': 3107.537, 'weight': 8, 'content': [{'end': 3111.778, 'text': 'the provider, the hosting provider, does the build process for you.', 'start': 3107.537, 'duration': 4.241}, {'end': 3118.579, 'text': 'And then of course, at the end, like I said, there is a package JSON, where we have the manifest of our project.', 'start': 3112.138, 'duration': 6.441}, {'end': 3128.241, 'text': 'Most importantly, we care about the dependencies, as well as the commands that we can run, start and build all the way at the bottom.', 'start': 3118.999, 'duration': 9.242}, {'end': 3135.304, 'text': 'we have readme, which is a markdown file that just contains information about our project.', 'start': 3128.681, 'duration': 6.623}], 'summary': 'Hosting provider handles build process, project manifest in package json, dependencies and commands in readme file.', 'duration': 27.767, 'max_score': 3107.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW43107537.jpg'}, {'end': 3279.329, 'src': 'embed', 'start': 3227.938, 'weight': 1, 'content': [{'end': 3236.324, 'text': 'But for the time being, we just want to remove all this unnecessary boilerplate that we have in source folder.', 'start': 3227.938, 'duration': 8.386}, {'end': 3240.426, 'text': 'So that should be a start where we have a clean screen.', 'start': 3237.084, 'duration': 3.342}, {'end': 3244.229, 'text': 'And of course, we can create our first react component.', 'start': 3240.787, 'duration': 3.442}, {'end': 3251.573, 'text': "Awesome Once we have removed all the boilerplate, let's kick things into gear and start our react land adventure.", 'start': 3244.669, 'duration': 6.904}, {'end': 3256.115, 'text': 'And the first thing I want to do is to create our first component.', 'start': 3252.433, 'duration': 3.682}, {'end': 3264.379, 'text': 'Normally, in order to do that, we will need only two things, a import from react dependency, and a function.', 'start': 3256.775, 'duration': 7.604}, {'end': 3273.064, 'text': "However, keep in mind that since index j s is our JavaScript entry point, we'll need to add some additional code.", 'start': 3264.94, 'duration': 8.124}, {'end': 3277.147, 'text': "But normally, it's just react on a function.", 'start': 3273.624, 'duration': 3.523}, {'end': 3279.329, 'text': "So let's start working on that.", 'start': 3277.748, 'duration': 1.581}], 'summary': 'Removing unnecessary boilerplate, creating first react component, starting react adventure', 'duration': 51.391, 'max_score': 3227.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW43227938.jpg'}, {'end': 3492.787, 'src': 'embed', 'start': 3440.536, 'weight': 4, 'content': [{'end': 3446.097, 'text': 'Now one gotcha was the fact that we needed to capitalize the first letter.', 'start': 3440.536, 'duration': 5.561}, {'end': 3451.659, 'text': "So that way, JavaScript knows, I'm sorry, React knows that this is special.", 'start': 3446.437, 'duration': 5.222}, {'end': 3453.419, 'text': 'So this is a component.', 'start': 3451.959, 'duration': 1.46}, {'end': 3459.824, 'text': 'And then from react component, we would want to return html.', 'start': 3454.079, 'duration': 5.745}, {'end': 3466.869, 'text': "Now technically, it is not called HTML, or you'll see that in a lot of blog posts and videos and all that.", 'start': 3460.544, 'duration': 6.325}, {'end': 3469.211, 'text': 'Technically, it is called JSX.', 'start': 3467.35, 'duration': 1.861}, {'end': 3473.415, 'text': "And don't worry, we'll cover JSX in more detail.", 'start': 3469.672, 'duration': 3.743}, {'end': 3476.898, 'text': 'For now, I would just want to have something on the screen.', 'start': 3473.715, 'duration': 3.183}, {'end': 3482.821, 'text': 'So, from this function we must, must, must, must, must, return again.', 'start': 3477.498, 'duration': 5.323}, {'end': 3490.585, 'text': "I will call this HTML and you'll see that as HTML in bunch of places, or keep in mind that it is officially called JSX.", 'start': 3482.821, 'duration': 7.764}, {'end': 3492.787, 'text': 'So we go with our return.', 'start': 3490.986, 'duration': 1.801}], 'summary': "React components return jsx, not html, as it's officially called, to display content on the screen.", 'duration': 52.251, 'max_score': 3440.536, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW43440536.jpg'}, {'end': 4377.235, 'src': 'heatmap', 'start': 3643.871, 'weight': 0.774, 'content': [{'end': 3648.693, 'text': 'And the moment I save it, if everything is correct, I should see.', 'start': 3643.871, 'duration': 4.822}, {'end': 3649.935, 'text': 'Now let me double check.', 'start': 3648.713, 'duration': 1.222}, {'end': 3654.242, 'text': 'Of course, what happens right now, my dev server is not running.', 'start': 3650.236, 'duration': 4.006}, {'end': 3656.205, 'text': "Of course, that's why I cannot see anything.", 'start': 3654.803, 'duration': 1.402}, {'end': 3658.689, 'text': 'So go with npm start.', 'start': 3656.646, 'duration': 2.043}, {'end': 3661.193, 'text': "I'll spin up my dev server.", 'start': 3659.29, 'duration': 1.903}, {'end': 3669.103, 'text': 'And now on the screen, I should see my heading for the text will be this is john.', 'start': 3662.72, 'duration': 6.383}, {'end': 3671.704, 'text': 'And this is my first component.', 'start': 3669.463, 'duration': 2.241}, {'end': 3673.285, 'text': 'And of course, there it is.', 'start': 3672.284, 'duration': 1.001}, {'end': 3674.806, 'text': "Now it's kind of small.", 'start': 3673.565, 'duration': 1.241}, {'end': 3676.786, 'text': 'So let me zoom in.', 'start': 3674.926, 'duration': 1.86}, {'end': 3679.408, 'text': 'And I can clearly see that this is john.', 'start': 3677.187, 'duration': 2.221}, {'end': 3682.049, 'text': 'And this is my first component.', 'start': 3679.828, 'duration': 2.221}, {'end': 3697.334, 'text': 'Now the gotcha about the closing tags in react is simple, where, even though your HTML element might not have a closing tag as example, that could be,', 'start': 3682.629, 'duration': 14.705}, {'end': 3704.837, 'text': "for example, image, because you know that for the image you don't have closing tags, you still need to self close it.", 'start': 3697.334, 'duration': 7.503}, {'end': 3709.438, 'text': "So what I'm trying to say, in this grading, I cannot pass it like this.", 'start': 3705.197, 'duration': 4.241}, {'end': 3711.659, 'text': "So I'm going to get a error.", 'start': 3709.878, 'duration': 1.781}, {'end': 3713.74, 'text': 'So, in order to avoid that,', 'start': 3712.219, 'duration': 1.521}, {'end': 3722.324, 'text': "or either I would need to set up two tags like so around the greeting and then I'm closing out the greeting component as well.", 'start': 3713.74, 'duration': 8.584}, {'end': 3725.006, 'text': 'And once I save it, notice how everything works.', 'start': 3722.765, 'duration': 2.241}, {'end': 3734.671, 'text': "Or if you don't want to add this empty closing tag or, for example, in the image tag you already don't have that closing tag,", 'start': 3725.846, 'duration': 8.825}, {'end': 3740.774, 'text': 'then you would still need to add this closing tag inside the opening brackets.', 'start': 3734.671, 'duration': 6.103}, {'end': 3742.975, 'text': "So that's something you need to keep in mind.", 'start': 3741.374, 'duration': 1.601}, {'end': 3746.439, 'text': 'Because with HTML5, of course, we can do that willy nilly.', 'start': 3743.016, 'duration': 3.423}, {'end': 3751.103, 'text': "For the image, we can include it, we can omit it, it's up to us.", 'start': 3747.099, 'duration': 4.004}, {'end': 3759.31, 'text': 'But in react, you must must must must must have the self closing tag if there is no closing tag.', 'start': 3751.163, 'duration': 8.147}, {'end': 3769.258, 'text': "And let's go over the setup one more time, where, if we would want to create a component, we need to import react from react.", 'start': 3760.01, 'duration': 9.248}, {'end': 3771.7, 'text': 'we need to set up a function.', 'start': 3769.258, 'duration': 2.442}, {'end': 3773.501, 'text': 'that function will be component.', 'start': 3771.7, 'duration': 1.801}, {'end': 3784.731, 'text': 'So this is our component, how are in order for react to know that it is going to be a component, you need to set this up as a capital case letter.', 'start': 3773.902, 'duration': 10.829}, {'end': 3786.352, 'text': "So that's how react knows.", 'start': 3785.151, 'duration': 1.201}, {'end': 3790.717, 'text': 'Alright, so this is not just a regular function, this is going to be my component.', 'start': 3786.413, 'duration': 4.304}, {'end': 3797.324, 'text': 'And then from the component, we are returning HTML, which officially is called JSX.', 'start': 3791.077, 'duration': 6.247}, {'end': 3801.288, 'text': "Because of course there's some nice goodies that we can do.", 'start': 3797.404, 'duration': 3.884}, {'end': 3807.472, 'text': "it's not just going to be a simple HTML, And since this is a entry point,", 'start': 3801.288, 'duration': 6.184}, {'end': 3813.534, 'text': 'show only in this case and essentially I can tell right away that in most cases is just going to be in one place in your application.', 'start': 3807.472, 'duration': 6.062}, {'end': 3815.314, 'text': 'So you only have to do it once.', 'start': 3813.794, 'duration': 1.52}, {'end': 3819.615, 'text': "And by the way, if you're using create react app, you won't even have to do that.", 'start': 3815.374, 'duration': 4.241}, {'end': 3827.077, 'text': 'But normally, you would do that in one place where you inject your JavaScript into that index HTML.', 'start': 3820.035, 'duration': 7.042}, {'end': 3830.358, 'text': 'And we do that by importing react DOM.', 'start': 3827.397, 'duration': 2.961}, {'end': 3836.222, 'text': 'And then we have a render function And in that function we pass into things,', 'start': 3830.918, 'duration': 5.304}, {'end': 3840.986, 'text': "we pass in whatever we're going to render and then where we're going to render.", 'start': 3836.222, 'duration': 4.764}, {'end': 3847.312, 'text': 'And then since of course, in the index HTML, we already have the div with an ID of root.', 'start': 3841.367, 'duration': 5.945}, {'end': 3849.695, 'text': "That's why we're targeting that div.", 'start': 3847.793, 'duration': 1.902}, {'end': 3856.581, 'text': 'And now of course, we have our first component successfully displayed on a screen.', 'start': 3850.155, 'duration': 6.426}, {'end': 3861.118, 'text': 'Awesome. Before we continue exploring, react.', 'start': 3857.001, 'duration': 4.117}, {'end': 3872.421, 'text': 'now would be a great time for me to show you which extensions and which settings JSON setup is going to be really helpful throughout the course.', 'start': 3861.118, 'duration': 11.303}, {'end': 3879.383, 'text': 'So first, let me show you the extension that will help us to format the code.', 'start': 3873.061, 'duration': 6.322}, {'end': 3885.927, 'text': 'as I keep on scrolling, notice here, I have the extension by the name of prettier code format.', 'start': 3880.263, 'duration': 5.664}, {'end': 3888.429, 'text': 'Now, of course, in my case, I already have installed it.', 'start': 3886.307, 'duration': 2.122}, {'end': 3891.931, 'text': "But if you don't have it, you need to install.", 'start': 3888.949, 'duration': 2.982}, {'end': 3896.234, 'text': 'And then once you install, you can navigate to a settings.', 'start': 3892.391, 'duration': 3.843}, {'end': 3900.497, 'text': 'So this is going to be a GUI for sending so graphical interface.', 'start': 3896.714, 'duration': 3.783}, {'end': 3903.819, 'text': "And also later, we'll take a look at the JSON file.", 'start': 3900.977, 'duration': 2.842}, {'end': 3911.524, 'text': 'But for time being, just check for the prettier or you know what, no, you can just go for format.', 'start': 3904.359, 'duration': 7.165}, {'end': 3920.171, 'text': "And then once you look for the format in a graphical interface, you'll find format on paste, as well as format on save.", 'start': 3912.045, 'duration': 8.126}, {'end': 3924.455, 'text': 'So I would suggest checking both of these boxes.', 'start': 3920.632, 'duration': 3.823}, {'end': 3930.94, 'text': "And then as a result, as you're typing prayer will format the code for you.", 'start': 3925.015, 'duration': 5.925}, {'end': 3938.642, 'text': 'Now, what am I talking about, for example, if I just keep on adding some spaces in between?', 'start': 3931.34, 'duration': 7.302}, {'end': 3941.083, 'text': 'basically, I just make it a big fat mess.', 'start': 3938.642, 'duration': 2.441}, {'end': 3947.085, 'text': 'the moment I serve it, notice how prayer right away nicely formats the code for me.', 'start': 3941.083, 'duration': 6.002}, {'end': 3948.586, 'text': 'So that will be the first thing.', 'start': 3947.465, 'duration': 1.121}, {'end': 3952.307, 'text': 'Now, the second thing that I would want to show you is the emmett.', 'start': 3949.066, 'duration': 3.241}, {'end': 3961.833, 'text': "So you're probably aware that when we work with HTML and CSS, we have option of using Emmett, which essentially just speeds up our workflow.", 'start': 3952.907, 'duration': 8.926}, {'end': 3973.48, 'text': "And of course, in the Visual Studio code, that is built in our when you work with React, as far as JSX, it won't work right out of the box.", 'start': 3962.833, 'duration': 10.647}, {'end': 3975.621, 'text': 'Now, what am I first of all talking about?', 'start': 3973.9, 'duration': 1.721}, {'end': 3984.009, 'text': "for example, if I want a heading for or I don't know the div with some kind of IDs and classes which we'll add later,", 'start': 3975.621, 'duration': 8.388}, {'end': 3991.136, 'text': "I don't have to start with opening tag and then type in for or article or whatever HTML element.", 'start': 3984.009, 'duration': 7.127}, {'end': 3993.138, 'text': 'I can just go with heading four.', 'start': 3991.136, 'duration': 2.002}, {'end': 3997.043, 'text': 'And right away notice how Emmett gives me the suggestion.', 'start': 3993.499, 'duration': 3.544}, {'end': 4003.588, 'text': 'again, we can go the same route we article or we can go with section or whatever.', 'start': 3997.523, 'duration': 6.065}, {'end': 4006.57, 'text': 'Notice how it right away creates for me.', 'start': 4004.008, 'duration': 2.562}, {'end': 4010.554, 'text': "Now of course, it's going to be way more beneficial once we start adding classes.", 'start': 4006.811, 'duration': 3.743}, {'end': 4013.256, 'text': 'But there are some gotchas about classes in JSX.', 'start': 4010.974, 'duration': 2.282}, {'end': 4016.218, 'text': "That's why I'm not going to cover them right now.", 'start': 4013.816, 'duration': 2.402}, {'end': 4020.701, 'text': 'But essentially in order to have these suggestions.', 'start': 4017.199, 'duration': 3.502}, {'end': 4029.965, 'text': "so essentially in order for you to have this option, so you don't have to type out everything from scratch, you need to go to your settings.", 'start': 4020.701, 'duration': 9.264}, {'end': 4038.489, 'text': "And once you navigate there, the property you're looking for is this Emmett, and it is include languages.", 'start': 4030.585, 'duration': 7.904}, {'end': 4043.55, 'text': "and then you'd want to set up JavaScript, and then JavaScript react.", 'start': 4039.329, 'duration': 4.221}, {'end': 4045.711, 'text': "So that's the code you'll need.", 'start': 4043.95, 'duration': 1.761}, {'end': 4051.452, 'text': 'Again, if you just want to copy and paste the code, I would suggest going to a GitHub.', 'start': 4046.131, 'duration': 5.321}, {'end': 4056.013, 'text': 'Again, my handle is going to be john hyphen smelter.', 'start': 4052.092, 'duration': 3.921}, {'end': 4059.874, 'text': "And then you're looking for the s code setup.", 'start': 4056.433, 'duration': 3.441}, {'end': 4062.635, 'text': "So in here, you'll find settings JSON.", 'start': 4060.534, 'duration': 2.101}, {'end': 4066.096, 'text': "And then of course, this is the property that you're looking for.", 'start': 4063.035, 'duration': 3.061}, {'end': 4073.281, 'text': 'So if you set this up as a raw, you can right away, just copy and paste this particular value.', 'start': 4066.616, 'duration': 6.665}, {'end': 4079.786, 'text': 'So that will enable Emmett in your JSX as well.', 'start': 4073.721, 'duration': 6.065}, {'end': 4084.827, 'text': "as I don't notice, this is going to be format on paste and format on save.", 'start': 4080.405, 'duration': 4.422}, {'end': 4089.83, 'text': 'you can also add them manually, like so, meaning in the settings JSON.', 'start': 4084.827, 'duration': 5.003}, {'end': 4091.431, 'text': "you don't have to do that in a GUI.", 'start': 4089.83, 'duration': 1.601}, {'end': 4100.395, 'text': 'And then I have some particular things for a prettier, for example, here, I set up only the single quotes, and my JSX.', 'start': 4091.951, 'duration': 8.444}, {'end': 4102.198, 'text': 'But that is irrelevant.', 'start': 4101.018, 'duration': 1.18}, {'end': 4108.144, 'text': 'That is really up to you whether that is your preference as far as the single quotes or double quotes.', 'start': 4102.599, 'duration': 5.545}, {'end': 4116.452, 'text': "However, using Emmett will definitely speed up your workflow when you're working in JSX as well.", 'start': 4108.505, 'duration': 7.947}, {'end': 4128.616, 'text': 'And lastly, I have this awesome, awesome, awesome extension by the name of ES seven react Redux GraphQL react native snippets.', 'start': 4116.932, 'duration': 11.684}, {'end': 4136.098, 'text': 'Now why this particular extension is so cool, because it saves us on the boilerplate.', 'start': 4129.116, 'duration': 6.982}, {'end': 4140.462, 'text': 'So for time being, let me just go back to whatever I had.', 'start': 4136.738, 'duration': 3.724}, {'end': 4143.567, 'text': "So I don't have some kind of error.", 'start': 4141.084, 'duration': 2.483}, {'end': 4144.988, 'text': 'So let me save it here.', 'start': 4143.948, 'duration': 1.04}, {'end': 4150.256, 'text': "And let's just create another testing file in source.", 'start': 4145.77, 'duration': 4.486}, {'end': 4152.158, 'text': "So in source, let's create a new file.", 'start': 4150.515, 'duration': 1.643}, {'end': 4153.8, 'text': "and I'll call this testing.", 'start': 4152.658, 'duration': 1.142}, {'end': 4155.322, 'text': "Now don't worry, we won't use it.", 'start': 4153.921, 'duration': 1.401}, {'end': 4159.027, 'text': 'But just to showcase how the extension is going to work.', 'start': 4155.643, 'duration': 3.384}, {'end': 4168.379, 'text': "For example, if I would want to create this new react component, I don't have to type import react and then set up the component.", 'start': 4159.508, 'duration': 8.871}, {'end': 4170.401, 'text': 'I can simply type my snippet.', 'start': 4168.379, 'duration': 2.022}, {'end': 4179.27, 'text': "where if I go with our A, F, C, and E, right away, we'll create it as a arrow function.", 'start': 4170.982, 'duration': 8.288}, {'end': 4181.513, 'text': "And it's ready to go.", 'start': 4180.27, 'duration': 1.243}, {'end': 4190.502, 'text': 'So notice how it right away imported the react right away, set up the component, and you right away have the return as well.', 'start': 4181.792, 'duration': 8.71}, {'end': 4197.405, 'text': "Now, don't be confused by the fact that in this case, it is set up with a lowercase.", 'start': 4191.062, 'duration': 6.343}, {'end': 4202.447, 'text': "The only reason for that is because we're exporting something that we'll cover later.", 'start': 4197.765, 'duration': 4.682}, {'end': 4208.249, 'text': 'And then once we import, then we will still need to use it with a uppercase.', 'start': 4202.887, 'duration': 5.362}, {'end': 4215.652, 'text': "Okay, so it's not like I was just making this up, where this needs to be uppercase, you can clearly test it out.", 'start': 4208.269, 'duration': 7.383}, {'end': 4220.654, 'text': "If you'll go with greeting, and greeting, you'll see that there is an error.", 'start': 4215.852, 'duration': 4.802}, {'end': 4222.895, 'text': "So essentially, you don't see anything on the screen.", 'start': 4220.834, 'duration': 2.061}, {'end': 4229.999, 'text': 'Because of course, you must must must must must have this component with a capital case.', 'start': 4223.255, 'duration': 6.744}, {'end': 4233.641, 'text': "Again, in this case, it's a little bit different because we're exporting.", 'start': 4230.159, 'duration': 3.482}, {'end': 4235.422, 'text': "We're not at that point yet.", 'start': 4233.821, 'duration': 1.601}, {'end': 4237.082, 'text': "So we'll cover that later.", 'start': 4235.922, 'duration': 1.16}, {'end': 4245.907, 'text': "But this extension just gives you a awesome setup where you don't have to keep on typing this boilerplate.", 'start': 4237.603, 'duration': 8.304}, {'end': 4249.77, 'text': 'Now, of course, the arrow function is not the only component that you can create.', 'start': 4246.207, 'duration': 3.563}, {'end': 4252.132, 'text': 'you can create components with regular functions.', 'start': 4249.77, 'duration': 2.362}, {'end': 4255.855, 'text': 'you can create them with classes, which is the older syntax.', 'start': 4252.132, 'duration': 3.723}, {'end': 4263.761, 'text': 'And if you want to see what kind of options you have for the snippets, just go for the extension.', 'start': 4256.476, 'duration': 7.285}, {'end': 4265.803, 'text': 'keep on scrolling and notice.', 'start': 4263.761, 'duration': 2.042}, {'end': 4268.866, 'text': 'you can use IMP for imports, for example.', 'start': 4265.803, 'duration': 3.063}, {'end': 4271.268, 'text': 'keep on scrolling, keep on scrolling.', 'start': 4269.406, 'duration': 1.862}, {'end': 4274.292, 'text': 'These are all the options that you have here.', 'start': 4271.649, 'duration': 2.643}, {'end': 4279.738, 'text': 'And I think the regular function was our FC.', 'start': 4274.992, 'duration': 4.746}, {'end': 4284.983, 'text': "So this is going to be 40 class components, we're going to keep on scrolling.", 'start': 4280.198, 'duration': 4.785}, {'end': 4289.749, 'text': 'And eventually we should see the regular function component.', 'start': 4285.003, 'duration': 4.746}, {'end': 4290.649, 'text': 'And there it is.', 'start': 4290.149, 'duration': 0.5}, {'end': 4298.432, 'text': 'So RFC is going to be just a react component, but with a traditional syntax.', 'start': 4291.029, 'duration': 7.403}, {'end': 4302.114, 'text': 'So if I go back, I can right away delete everything.', 'start': 4298.812, 'duration': 3.302}, {'end': 4306.575, 'text': 'And instead of our a, I type our FC.', 'start': 4302.294, 'duration': 4.281}, {'end': 4309.016, 'text': "And then again, I'll add right away export.", 'start': 4306.936, 'duration': 2.08}, {'end': 4310.217, 'text': "So we're exporting.", 'start': 4309.357, 'duration': 0.86}, {'end': 4317.82, 'text': 'Notice how we create the same component, or in this case, it is using regular function syntax.', 'start': 4310.677, 'duration': 7.143}, {'end': 4327.39, 'text': 'So these are the things that I would suggest adding to your project, as far as the extensions, as well as the settings JSON,', 'start': 4318.36, 'duration': 9.03}, {'end': 4331.214, 'text': 'because they will improve your workflow tremendously.', 'start': 4327.39, 'duration': 3.824}, {'end': 4338.838, 'text': "Now, you know what, by the end of this video, can just delete the testing dress, we won't need it as well as close my extension.", 'start': 4331.774, 'duration': 7.064}, {'end': 4341.98, 'text': 'And now of course, we can go back to react.', 'start': 4339.279, 'duration': 2.701}, {'end': 4347.201, 'text': 'Now the one thing of course, is the fact that I will need to change this back to a greeting.', 'start': 4342.04, 'duration': 5.161}, {'end': 4354.304, 'text': "Because remember, when we're setting up react component, when we want to render it, it must be capitalized.", 'start': 4347.642, 'duration': 6.662}, {'end': 4355.504, 'text': 'beautiful job.', 'start': 4354.904, 'duration': 0.6}, {'end': 4359.546, 'text': "Once we're back from the useful extensions detour.", 'start': 4355.905, 'duration': 3.641}, {'end': 4365.409, 'text': 'Now I would want to make a plunge into our component.', 'start': 4360.167, 'duration': 5.242}, {'end': 4370.652, 'text': 'So, essentially, we know that we will cover imports a little bit later.', 'start': 4365.949, 'duration': 4.703}, {'end': 4377.235, 'text': 'we know that, as far as the render, it is only in one place, essentially where we inject our JavaScript.', 'start': 4370.652, 'duration': 6.583}], 'summary': 'Demonstrating react component setup and key extensions for improved workflow.', 'duration': 733.364, 'max_score': 3643.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW43643871.jpg'}, {'end': 3697.334, 'src': 'embed', 'start': 3654.803, 'weight': 3, 'content': [{'end': 3656.205, 'text': "Of course, that's why I cannot see anything.", 'start': 3654.803, 'duration': 1.402}, {'end': 3658.689, 'text': 'So go with npm start.', 'start': 3656.646, 'duration': 2.043}, {'end': 3661.193, 'text': "I'll spin up my dev server.", 'start': 3659.29, 'duration': 1.903}, {'end': 3669.103, 'text': 'And now on the screen, I should see my heading for the text will be this is john.', 'start': 3662.72, 'duration': 6.383}, {'end': 3671.704, 'text': 'And this is my first component.', 'start': 3669.463, 'duration': 2.241}, {'end': 3673.285, 'text': 'And of course, there it is.', 'start': 3672.284, 'duration': 1.001}, {'end': 3674.806, 'text': "Now it's kind of small.", 'start': 3673.565, 'duration': 1.241}, {'end': 3676.786, 'text': 'So let me zoom in.', 'start': 3674.926, 'duration': 1.86}, {'end': 3679.408, 'text': 'And I can clearly see that this is john.', 'start': 3677.187, 'duration': 2.221}, {'end': 3682.049, 'text': 'And this is my first component.', 'start': 3679.828, 'duration': 2.221}, {'end': 3697.334, 'text': 'Now the gotcha about the closing tags in react is simple, where, even though your HTML element might not have a closing tag as example, that could be,', 'start': 3682.629, 'duration': 14.705}], 'summary': "Using npm start, developer sees 'this is john' as heading in first component.", 'duration': 42.531, 'max_score': 3654.803, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW43654803.jpg'}, {'end': 3885.927, 'src': 'embed', 'start': 3857.001, 'weight': 7, 'content': [{'end': 3861.118, 'text': 'Awesome. Before we continue exploring, react.', 'start': 3857.001, 'duration': 4.117}, {'end': 3872.421, 'text': 'now would be a great time for me to show you which extensions and which settings JSON setup is going to be really helpful throughout the course.', 'start': 3861.118, 'duration': 11.303}, {'end': 3879.383, 'text': 'So first, let me show you the extension that will help us to format the code.', 'start': 3873.061, 'duration': 6.322}, {'end': 3885.927, 'text': 'as I keep on scrolling, notice here, I have the extension by the name of prettier code format.', 'start': 3880.263, 'duration': 5.664}], 'summary': 'Introduction to the prettier code format extension for code formatting.', 'duration': 28.926, 'max_score': 3857.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW43857001.jpg'}, {'end': 4298.432, 'src': 'embed', 'start': 4269.406, 'weight': 9, 'content': [{'end': 4271.268, 'text': 'keep on scrolling, keep on scrolling.', 'start': 4269.406, 'duration': 1.862}, {'end': 4274.292, 'text': 'These are all the options that you have here.', 'start': 4271.649, 'duration': 2.643}, {'end': 4279.738, 'text': 'And I think the regular function was our FC.', 'start': 4274.992, 'duration': 4.746}, {'end': 4284.983, 'text': "So this is going to be 40 class components, we're going to keep on scrolling.", 'start': 4280.198, 'duration': 4.785}, {'end': 4289.749, 'text': 'And eventually we should see the regular function component.', 'start': 4285.003, 'duration': 4.746}, {'end': 4290.649, 'text': 'And there it is.', 'start': 4290.149, 'duration': 0.5}, {'end': 4298.432, 'text': 'So RFC is going to be just a react component, but with a traditional syntax.', 'start': 4291.029, 'duration': 7.403}], 'summary': 'Comparison of 40 class components with regular function component in react.', 'duration': 29.026, 'max_score': 4269.406, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW44269406.jpg'}], 'start': 3012.131, 'title': 'React project setup and component creation', 'summary': "Discusses cleaning up the react project's folder structure, creating the first react component, rendering react components and setting up vs code with useful extensions, emphasizing improved workflow and productivity.", 'chapters': [{'end': 3251.573, 'start': 3012.131, 'title': 'React boilerplate cleanup and component creation', 'summary': "Discusses cleaning up the react project's folder structure, removing unnecessary boilerplate files and preparing to create the first react component, emphasizing the importance of targeting the root div and the need for a clean screen to begin component creation.", 'duration': 239.442, 'highlights': ["The chapter discusses cleaning up the React project's folder structure.", 'Removing unnecessary boilerplate files and preparing to create the first React component.', 'Emphasizing the importance of targeting the root div and the need for a clean screen to begin component creation.']}, {'end': 3572.299, 'start': 3252.433, 'title': 'Creating first react component', 'summary': "Covers creating the first react component by importing the 'react' dependency, creating a function, and capitalizing the component's name, with a brief explanation of jsx and the need to inject the component into the 'index.html' file.", 'duration': 319.866, 'highlights': ["When creating a React component, it is essential to import the 'react' dependency and create a function, with the component name capitalized.", "The instructor emphasizes the need to inject the created component into the 'index.html' file, which serves as the JavaScript entry point.", 'The chapter briefly touches on the concept of JSX, emphasizing its use for rendering HTML elements within React components.']}, {'end': 3856.581, 'start': 3572.839, 'title': 'Rendering react components', 'summary': 'Explains how to render a react component using the render method, highlighting the need for closing tags and the setup process for creating a component.', 'duration': 283.742, 'highlights': ['The render method in React is used to render components and requires two parameters: what to render and where to render it.', "In React, even elements like images that don't have closing tags must be self-closed to avoid errors.", "To create a component in React, one needs to import 'react', set up a function with JSX (HTML), and then use the render method to display it on the screen.", 'When using create react app, the setup process for rendering components might not be required, as the JavaScript is injected into the index HTML automatically.']}, {'end': 4395.351, 'start': 3857.001, 'title': 'Vs code setup and useful extensions', 'summary': 'Covers setting up the vs code with helpful extensions such as prettier code format, emmett for jsx, and es7 react redux graphql react native snippets, which significantly improves workflow by automatically formatting code, providing helpful suggestions, and reducing boilerplate code.', 'duration': 538.35, 'highlights': ["The Prettier code format extension helps in formatting the code by enabling 'format on paste' and 'format on save', resulting in improved code readability and consistency.", 'The Emmett extension provides suggestions and speeds up workflow by enabling support for JSX in Visual Studio Code, thereby reducing the time taken to write HTML and CSS elements.', 'The ES7 React Redux GraphQL React Native Snippets extension saves time by reducing boilerplate code, offering snippets for creating components with arrow functions, regular functions, and classes, thus improving productivity.']}], 'duration': 1383.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW43012131.jpg', 'highlights': ['The Prettier code format extension improves code readability and consistency', 'The ES7 React Redux GraphQL React Native Snippets extension enhances productivity', 'The Emmett extension speeds up workflow by supporting JSX in Visual Studio Code', 'The render method in React requires two parameters: what to render and where to render it', "Creating a component in React involves importing 'react', setting up a function with JSX, and using the render method to display it", 'When using create react app, the setup process for rendering components might not be required', "The chapter discusses cleaning up the React project's folder structure", 'The importance of targeting the root div and the need for a clean screen to begin component creation', 'The concept of JSX is briefly touched upon, emphasizing its use for rendering HTML elements within React components', "In React, even elements like images that don't have closing tags must be self-closed to avoid errors", "When creating a React component, it is essential to import the 'react' dependency and create a function with the component name capitalized", "The need to inject the created component into the 'index.html' file is emphasized as the JavaScript entry point"]}, {'end': 5628.275, 'segs': [{'end': 4450.828, 'src': 'embed', 'start': 4423.523, 'weight': 0, 'content': [{'end': 4427.744, 'text': "And of course, you can see that at least now we don't have the error.", 'start': 4423.523, 'duration': 4.221}, {'end': 4432.725, 'text': 'Now I also want to talk about this j s x.', 'start': 4428.324, 'duration': 4.401}, {'end': 4440.886, 'text': "Because technically, you don't have to type here this HTML, this HTML is to help you.", 'start': 4432.725, 'duration': 8.161}, {'end': 4450.828, 'text': 'Okay, I know it sounds weird, because for a lot of people probably seeing that we are returning just HTML might seem a little bit foreign.', 'start': 4440.906, 'duration': 9.922}], 'summary': 'Discussion about jsx and its benefits for simplifying html in code.', 'duration': 27.305, 'max_score': 4423.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW44423523.jpg'}, {'end': 4519.388, 'src': 'embed', 'start': 4478.191, 'weight': 3, 'content': [{'end': 4481.033, 'text': "for we're still making those function calls.", 'start': 4478.191, 'duration': 2.842}, {'end': 4489.299, 'text': "Now since we cannot have two components, we have the same exact name, I'm too lazy to come up with new component and then change it over here.", 'start': 4481.493, 'duration': 7.806}, {'end': 4491.14, 'text': "I'll just comment this out.", 'start': 4489.819, 'duration': 1.321}, {'end': 4494.062, 'text': "And let's set up our component one more time.", 'start': 4491.54, 'duration': 2.522}, {'end': 4496.424, 'text': 'So in here, we go with function.', 'start': 4494.582, 'duration': 1.842}, {'end': 4504.232, 'text': "And you know what, why don't we do in this case, as a arrow function, just so you can see that it's going to work the same way.", 'start': 4496.905, 'duration': 7.327}, {'end': 4506.735, 'text': "So we're going to go here with a greeting.", 'start': 4504.653, 'duration': 2.082}, {'end': 4509.358, 'text': 'So that is going to be my arrow function.', 'start': 4507.155, 'duration': 2.203}, {'end': 4519.388, 'text': 'And then instead of returning HTML, which is to help us to have a little bit easier syntax, what we could do is go with return.', 'start': 4509.878, 'duration': 9.51}], 'summary': 'Creating and using arrow function for component setup.', 'duration': 41.197, 'max_score': 4478.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW44478191.jpg'}, {'end': 4577.727, 'src': 'embed', 'start': 4545.489, 'weight': 1, 'content': [{'end': 4548.151, 'text': "Now as far as the element, I think I'm going to go with heading one.", 'start': 4545.489, 'duration': 2.662}, {'end': 4552.512, 'text': "And then like I said, props object haven't covered props yet.", 'start': 4549.531, 'duration': 2.981}, {'end': 4554.133, 'text': "So let's just pass empty object.", 'start': 4552.592, 'duration': 1.541}, {'end': 4556.574, 'text': 'And then last thing is going to be the children.', 'start': 4554.673, 'duration': 1.901}, {'end': 4559.035, 'text': "So in here, I'm going to go with Hello world.", 'start': 4556.954, 'duration': 2.081}, {'end': 4563.517, 'text': 'And then once you save, notice, everything works, correct.', 'start': 4559.496, 'duration': 4.021}, {'end': 4571.361, 'text': "So like I said, we can use the arrow function that still works, we are returning heading one, and then we're using Hello world.", 'start': 4564.038, 'duration': 7.323}, {'end': 4577.727, 'text': "Now one thing that when you're passing in the element here, you need to pass it in the quotation marks.", 'start': 4571.801, 'duration': 5.926}], 'summary': "Using heading one element with 'hello world' as children in props.", 'duration': 32.238, 'max_score': 4545.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW44545489.jpg'}, {'end': 5485.021, 'src': 'embed', 'start': 5454.426, 'weight': 2, 'content': [{'end': 5455.687, 'text': "In this case, I'm going to go with cons.", 'start': 5454.426, 'duration': 1.261}, {'end': 5457.488, 'text': 'Now we do need to come up with a name.', 'start': 5455.967, 'duration': 1.521}, {'end': 5460.269, 'text': "So I'm going to go with a person.", 'start': 5458.048, 'duration': 2.221}, {'end': 5462.649, 'text': 'And this is going to be my implicit return.', 'start': 5460.749, 'duration': 1.9}, {'end': 5467.811, 'text': 'So for those of you who are familiar with our functions, of course, I can add here curly braces.', 'start': 5463.15, 'duration': 4.661}, {'end': 5473.434, 'text': "So of course, then I would need to set up explicit return, which we'll do in the next component.", 'start': 5468.312, 'duration': 5.122}, {'end': 5479.817, 'text': "Or I can simply say that whatever I'll type Well, that is what I'm going to be returning.", 'start': 5474.134, 'duration': 5.683}, {'end': 5482.78, 'text': 'So, in this case, what I would like to return?', 'start': 5480.217, 'duration': 2.563}, {'end': 5485.021, 'text': 'well, I would want to return John Doe, right?', 'start': 5482.78, 'duration': 2.241}], 'summary': "Using javascript, a function is created to return the name 'john doe.'", 'duration': 30.595, 'max_score': 5454.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW45454426.jpg'}], 'start': 4396.292, 'title': 'Jsx syntax and component structure in react', 'summary': 'Covers rules and best practices for jsx, emphasizing the importance of always returning something in jsx, creating components with proper structure and nesting for reusability and modularity, and adhering to html semantics and syntax. it also highlights the usage of arrow functions, jsx fragments, and proper attribute usage.', 'chapters': [{'end': 4478.191, 'start': 4396.292, 'title': 'Rules of jsx and returning something', 'summary': "Discusses the importance of always returning something in jsx, even if it's an empty html element, and emphasizes that jsx is just a tool to help write html, which under the hood is still calling functions.", 'duration': 81.899, 'highlights': ["The biggest rule in JSX is always returning something, even if it's an empty HTML element, to avoid errors.", 'Emphasizes that JSX is a tool to help write HTML, and under the hood, it is still calling functions.']}, {'end': 4794.29, 'start': 4478.191, 'title': 'React component structure', 'summary': 'Covers creating components in react, including the use of arrow functions and jsx syntax, highlighting the need to return a single element and the usage of create element function to render elements.', 'duration': 316.099, 'highlights': ['The chapter emphasizes the use of arrow functions to define components, showcasing how it simplifies the syntax and works effectively for rendering elements, ensuring smooth functionality and ease of use.', 'It explains the usage of JSX syntax and the create element function to render elements, highlighting the need to pass in the element, props object, and children, demonstrating the process with examples and emphasizing the importance of maintaining readable code.', 'The chapter also addresses the need to return a single element from a component, indicating the potential complexity when using create element function to render multiple nested elements, underscoring the significance of understanding the underlying process for efficient coding practices.']}, {'end': 5162.853, 'start': 4794.791, 'title': 'Jsx syntax and best practices', 'summary': 'Discusses jsx syntax and best practices, emphasizing the importance of adhering to html semantics, using jsx fragments, and applying proper attributes like capitalization and class naming.', 'duration': 368.062, 'highlights': ["The importance of adhering to HTML semantics and using proper tags like section and article instead of creating 'div soup' is emphasized.", 'The use of JSX fragment is introduced as an alternative to enclosing elements in a div, ensuring cleaner HTML without errors.', "The necessity of capitalizing attributes like 'onClick' and using 'className' instead of 'class' in JSX to avoid errors is explained.", 'The requirement to close out elements, including those without closing tags in HTML5, is highlighted with an example of an image tag in JSX.']}, {'end': 5317.959, 'start': 5163.293, 'title': 'Jsx rules and best practices', 'summary': 'Explains the importance of using parentheses in jsx to avoid errors, highlights the necessity of returning a single element, and emphasizes the use of camel case for attributes.', 'duration': 154.666, 'highlights': ['Emphasizes the use of camel case for attributes', 'Explains the importance of using parentheses in JSX', 'Highlights the necessity of returning a single element']}, {'end': 5628.275, 'start': 5318.68, 'title': 'React components and nesting', 'summary': 'Discusses the benefits of nesting components in a react application, splitting the application into separate chunks for reusability and modularity, using jsx rules, and creating nested component structures.', 'duration': 309.595, 'highlights': ['The chapter discusses the benefits of nesting components in a React application.', 'It emphasizes the idea of splitting the application into separate chunks of functionality for reusability and modularity.', 'Using JSX rules is covered in the chapter.']}], 'duration': 1231.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW44396292.jpg', 'highlights': ["The biggest rule in JSX is always returning something, even if it's an empty HTML element, to avoid errors.", 'The chapter emphasizes the use of arrow functions to define components, showcasing how it simplifies the syntax and works effectively for rendering elements, ensuring smooth functionality and ease of use.', "The importance of adhering to HTML semantics and using proper tags like section and article instead of creating 'div soup' is emphasized.", 'The chapter discusses the benefits of nesting components in a React application.', 'Emphasizes the idea of splitting the application into separate chunks of functionality for reusability and modularity.']}, {'end': 6570.399, 'segs': [{'end': 5686.653, 'src': 'embed', 'start': 5658.517, 'weight': 4, 'content': [{'end': 5660.739, 'text': "And then we're looking for the components.", 'start': 5658.517, 'duration': 2.222}, {'end': 5663.121, 'text': "And now you'll notice something interesting.", 'start': 5661.339, 'duration': 1.782}, {'end': 5666.703, 'text': 'where this is going to be our root component.', 'start': 5663.641, 'duration': 3.062}, {'end': 5668.864, 'text': 'So at the moment, we call this greeting.', 'start': 5667.263, 'duration': 1.601}, {'end': 5675.667, 'text': 'And then of course, inside the greeting, I have a person and a message.', 'start': 5669.544, 'duration': 6.123}, {'end': 5677.808, 'text': "Again, we haven't covered props.", 'start': 5676.087, 'duration': 1.721}, {'end': 5680.31, 'text': 'So none of that makes sense.', 'start': 5678.429, 'duration': 1.881}, {'end': 5686.653, 'text': 'Or we can clearly see that this is going to be our component structure.', 'start': 5680.85, 'duration': 5.803}], 'summary': 'Discussion on component structure and its elements.', 'duration': 28.136, 'max_score': 5658.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW45658517.jpg'}, {'end': 5861.083, 'src': 'embed', 'start': 5835.271, 'weight': 1, 'content': [{'end': 5839.672, 'text': 'And this is just a showcase that it is up to you how you want to structure your application.', 'start': 5835.271, 'duration': 4.401}, {'end': 5843.134, 'text': 'If you want to create everything as a component, you can definitely do it.', 'start': 5840.153, 'duration': 2.981}, {'end': 5847.875, 'text': 'Or you can just place everything in one book component.', 'start': 5843.834, 'duration': 4.041}, {'end': 5854.701, 'text': "So where we have the book list, right after that, I'm going to create another component.", 'start': 5848.419, 'duration': 6.282}, {'end': 5858.222, 'text': "Now in this case, though, I'm going to use our function.", 'start': 5855.101, 'duration': 3.121}, {'end': 5861.083, 'text': 'Again, you can use regular function if you want.', 'start': 5858.622, 'duration': 2.461}], 'summary': 'You have the flexibility to structure your application with components or as a single component.', 'duration': 25.812, 'max_score': 5835.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW45835271.jpg'}, {'end': 5941.762, 'src': 'embed', 'start': 5916.178, 'weight': 3, 'content': [{'end': 5925.246, 'text': "So what that means is that the moment I'll change something in my book, that of course, it will affect all the instances that I have.", 'start': 5916.178, 'duration': 9.068}, {'end': 5932.393, 'text': "So in here, I'll say this is a book, I'll change this around to this is a car.", 'start': 5925.746, 'duration': 6.647}, {'end': 5933.974, 'text': "Now of course, it's not gonna make sense.", 'start': 5932.733, 'duration': 1.241}, {'end': 5941.762, 'text': "But you'll see right away that all my instances in here are changed, which is really, really, really cool.", 'start': 5934.395, 'duration': 7.367}], 'summary': 'Changing book to car affects all instances, demonstrating cool functionality.', 'duration': 25.584, 'max_score': 5916.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW45916178.jpg'}, {'end': 5991.432, 'src': 'embed', 'start': 5965.76, 'weight': 5, 'content': [{'end': 5970.722, 'text': "Because notice, it's not like I have to hop from one place to another one to change this text.", 'start': 5965.76, 'duration': 4.962}, {'end': 5972.303, 'text': 'I just set up the component.', 'start': 5970.722, 'duration': 1.581}, {'end': 5974.344, 'text': 'I copied how many times I wanted.', 'start': 5972.303, 'duration': 2.041}, {'end': 5980.468, 'text': "And then once I change something in here, that's it, all the instances will be affected.", 'start': 5974.665, 'duration': 5.803}, {'end': 5984.188, 'text': 'Now, I will go back to my one single book.', 'start': 5981.027, 'duration': 3.161}, {'end': 5987.75, 'text': "And like I said, it's going to be a little bit of overkill right now.", 'start': 5984.669, 'duration': 3.081}, {'end': 5991.432, 'text': "But I'll set up three separate components.", 'start': 5988.25, 'duration': 3.182}], 'summary': 'Setting up components allows for easy text changes across multiple instances, reducing time and effort.', 'duration': 25.672, 'max_score': 5965.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW45965760.jpg'}, {'end': 6371.436, 'src': 'embed', 'start': 6343.744, 'weight': 2, 'content': [{'end': 6351.653, 'text': "Now how do we usually add CSS, we create some kind of CSS file, correct? So let's navigate back to our project.", 'start': 6343.744, 'duration': 7.909}, {'end': 6357.781, 'text': "And we're looking for in the source, and we'll create a new file, we can call it whatever we want.", 'start': 6352.634, 'duration': 5.147}, {'end': 6366.152, 'text': 'But of course, convention is that if this is the file for index.js, then I might as well call it index c s s.', 'start': 6357.881, 'duration': 8.271}, {'end': 6371.436, 'text': 'So once I create this file, let me just add some general styling.', 'start': 6366.713, 'duration': 4.723}], 'summary': 'Adding css to a project by creating a new file named index.css for general styling.', 'duration': 27.692, 'max_score': 6343.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW46343744.jpg'}, {'end': 6478.449, 'src': 'embed', 'start': 6452.995, 'weight': 0, 'content': [{'end': 6461.299, 'text': "Now the gotcha here is following where, if it's going to be a JavaScript files that we haven't covered, of course we'll cover that a little bit later.", 'start': 6452.995, 'duration': 8.304}, {'end': 6463.44, 'text': "then we don't need to add the extension.", 'start': 6461.299, 'duration': 2.141}, {'end': 6467.882, 'text': 'However, if it is a CSS, you need to provide a full path.', 'start': 6463.54, 'duration': 4.342}, {'end': 6478.449, 'text': "So if I'm going for CSS, I'm still going for the import, then I need to use the relative path, because this is not my project's dependency anymore.", 'start': 6468.442, 'duration': 10.007}], 'summary': 'For javascript files, no extension needed; for css, provide full path.', 'duration': 25.454, 'max_score': 6452.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW46452995.jpg'}], 'start': 5628.676, 'title': 'React components and styling', 'summary': 'Covers nesting components in react, using react developer tools, controlling component rendering, improving presentation with a grid layout, and adding css to achieve a more presentable appearance.', 'chapters': [{'end': 5941.762, 'start': 5628.676, 'title': 'React components and developer tools', 'summary': 'Demonstrates nesting components in react and utilizing the react developer tools to visualize component structures and showcases the flexibility of structuring applications with multiple instances of components.', 'duration': 313.086, 'highlights': ['The chapter demonstrates nesting components in React and utilizing the React Developer Tools.', 'Showcases the flexibility of structuring applications with multiple instances of components.']}, {'end': 6219.562, 'start': 5942.142, 'title': 'React component rendering', 'summary': 'Explains the process of rendering components in a react project, showcasing the ability to control multiple instances from one place and the need to focus on improving the presentation with a grid layout and better coloring.', 'duration': 277.42, 'highlights': ['The ability to control multiple component instances from one place is demonstrated, emphasizing the convenience and efficiency of managing changes across all instances.', 'The process of rendering components, including creating separate components for image, title, and author, is outlined, highlighting the nesting of components within a book list.', 'The need to focus on improving the presentation with a grid layout, columns, and better coloring is mentioned, indicating the intention to enhance the visual aspect of the project.', "A plan to address hard-coded values and add CSS to the React project is mentioned, reflecting the intention to refine and customize the project's styling and functionality."]}, {'end': 6570.399, 'start': 6220.103, 'title': 'Adding css to react project', 'summary': 'Demonstrates how to add css to a react project, including creating a css file, connecting it to the project, and styling elements, ultimately achieving a more presentable appearance.', 'duration': 350.296, 'highlights': ['The chapter demonstrates how to add CSS to a React project', 'Creating a CSS file and connecting it to the project', 'Styling elements to achieve a more presentable appearance']}], 'duration': 941.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW45628676.jpg', 'highlights': ['The ability to control multiple component instances from one place is demonstrated, emphasizing the convenience and efficiency of managing changes across all instances.', 'The process of rendering components, including creating separate components for image, title, and author, is outlined, highlighting the nesting of components within a book list.', "A plan to address hard-coded values and add CSS to the React project is mentioned, reflecting the intention to refine and customize the project's styling and functionality.", 'The chapter demonstrates nesting components in React and utilizing the React Developer Tools.', 'The need to focus on improving the presentation with a grid layout, columns, and better coloring is mentioned, indicating the intention to enhance the visual aspect of the project.', 'Creating a CSS file and connecting it to the project', 'Styling elements to achieve a more presentable appearance', 'Showcases the flexibility of structuring applications with multiple instances of components.']}, {'end': 8669.561, 'segs': [{'end': 6919.57, 'src': 'embed', 'start': 6889.219, 'weight': 0, 'content': [{'end': 6893.681, 'text': 'Well, adding your CSS from the CSS file is definitely an option.', 'start': 6889.219, 'duration': 4.462}, {'end': 6898.725, 'text': 'We also can do it directly in the JSX.', 'start': 6894.202, 'duration': 4.523}, {'end': 6901.566, 'text': 'Now for my example.', 'start': 6899.605, 'duration': 1.961}, {'end': 6904.106, 'text': 'I will pick my heading for.', 'start': 6901.566, 'duration': 2.54}, {'end': 6913.828, 'text': 'just please keep in mind the same rules would apply for heading one or image, or article, or whatever HTML element we are placing.', 'start': 6904.106, 'duration': 9.722}, {'end': 6919.57, 'text': "Now of course, I'm doing the air quotes right now around the HTML element, the end of the course, it is a JSX.", 'start': 6914.089, 'duration': 5.481}], 'summary': 'Using css in css file or jsx, applicable to various html elements', 'duration': 30.351, 'max_score': 6889.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW46889219.jpg'}, {'end': 7442.818, 'src': 'embed', 'start': 7413.304, 'weight': 1, 'content': [{'end': 7418.107, 'text': "And then of course, I'm going to go back to the CSS that I added in the previous video.", 'start': 7413.304, 'duration': 4.803}, {'end': 7420.468, 'text': 'So in here, of course, we just need to change it.', 'start': 7418.567, 'duration': 1.901}, {'end': 7427.772, 'text': 'Where if I remember correctly, the color that I had was hashtag.', 'start': 7421.008, 'duration': 6.764}, {'end': 7431.853, 'text': 'So let me go back, hashtag, and 617.', 'start': 7428.732, 'duration': 3.121}, {'end': 7438.596, 'text': "And then D nine, eight, van letter spacing, I'm not going to add that.", 'start': 7431.853, 'duration': 6.743}, {'end': 7440.337, 'text': 'And by the way, I messed it up here.', 'start': 7439.097, 'duration': 1.24}, {'end': 7442.818, 'text': "So it's not F, it is six.", 'start': 7440.777, 'duration': 2.041}], 'summary': 'Adjust css color to #617d98 and fix letter spacing to 6.', 'duration': 29.514, 'max_score': 7413.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW47413304.jpg'}, {'end': 8505.361, 'src': 'embed', 'start': 8455.862, 'weight': 3, 'content': [{'end': 8462.367, 'text': "And then where I'm accessing the props right now, I'm not going to be looking for job title number, since I will remove them.", 'start': 8455.862, 'duration': 6.505}, {'end': 8465.969, 'text': "However, for the image, I'm going to go for props.", 'start': 8462.507, 'duration': 3.462}, {'end': 8471.154, 'text': "And then I'm looking for the I am G.", 'start': 8466.71, 'duration': 4.444}, {'end': 8478.08, 'text': "Now of course, again, I'm grabbing whatever I have in the first book, I would need to do the same thing for a title.", 'start': 8471.154, 'duration': 6.926}, {'end': 8480.942, 'text': 'So again, the prop name is title.', 'start': 8478.34, 'duration': 2.602}, {'end': 8483.704, 'text': "Again, we're going back to a JavaScript land.", 'start': 8481.442, 'duration': 2.262}, {'end': 8488.629, 'text': "And in here, I'm accessing first book, and then I'm looking for the title.", 'start': 8484.305, 'duration': 4.324}, {'end': 8499.337, 'text': "So say, first book, online title, again, let me emphasize something where it doesn't have to be an object, we could have just access the properties.", 'start': 8489.349, 'duration': 9.988}, {'end': 8505.361, 'text': 'But since I would want to set up two of them to objects, since I would want to have two different values.', 'start': 8499.717, 'duration': 5.644}], 'summary': 'Accessing and setting props in javascript for title and image', 'duration': 49.499, 'max_score': 8455.862, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW48455862.jpg'}], 'start': 6570.659, 'title': 'React styling and component integration', 'summary': 'Discusses creating a grid layout for a book list with a three-column layout at 768 pixels, adding css styles to react components, integrating return values into a single react component, incorporating javascript in jsx, and accessing props for components in react, emphasizing best practices and key considerations.', 'chapters': [{'end': 6732.653, 'start': 6570.659, 'title': 'Creating grid layout and styling booklist', 'summary': 'Discusses setting up a grid layout for a book list, using media queries to achieve a three-column layout at 768 pixels, and adding styling to the book items, emphasizing the use of class names and css properties.', 'duration': 161.994, 'highlights': ['Setting up a grid layout for the booklist', 'Implementing a three-column layout using media queries', 'Adding styling to book items using classes and CSS properties']}, {'end': 7334.078, 'start': 6733.193, 'title': 'Adding css and javascript styles to react', 'summary': 'Covers adding css styles to react components using external css files and inline styles, as well as the considerations and implications of each approach, including the potential conflicts between inline styles and external css, and the flexibility of choosing between css in js or traditional css.', 'duration': 600.885, 'highlights': ['The chapter covers adding CSS styles to React components using external CSS files and inline styles', 'Considerations and implications of each approach, including the potential conflicts between inline styles and external CSS', 'Flexibility of choosing between CSS in JS or traditional CSS']}, {'end': 7687.393, 'start': 7335.43, 'title': 'React component styling and javascript integration', 'summary': 'Explores integrating return values into a single react component, demonstrate javascript variable usage and highlight the necessity for javascript expressions in jsx, emphasizing the importance of understanding jsx syntax and providing tips for finding keyboard shortcuts.', 'duration': 351.963, 'highlights': ['The chapter explores integrating return values into a single React component, demonstrating a preference for minimal splitting up of components, showcasing the flexibility of React component design, and emphasizing the importance of understanding JSX syntax for efficient development.', 'The transcript highlights the demonstration of JavaScript variable usage, including the declaration of const and the utilization of variables in JSX, providing a practical example of using variables in a React component.', 'The necessity for JavaScript expressions in JSX is emphasized, with a demonstration of the requirement for expressions over statements in JSX to ensure proper functionality and avoid errors during development.', 'The importance of understanding JSX syntax is emphasized, with the transcript providing tips for finding keyboard shortcuts in Visual Studio Code and highlighting the significance of familiarity with shortcuts for efficient coding.', 'The chapter provides tips for finding keyboard shortcuts in Visual Studio Code and emphasizes the importance of familiarity with shortcuts for efficient coding, catering to developers using different operating systems and encouraging the use of shortcuts for enhanced productivity.']}, {'end': 8213.959, 'start': 7687.714, 'title': 'Javascript in jsx and working with props', 'summary': 'Demonstrates how to incorporate javascript in jsx, making it more dynamic and efficient, and explains the process of setting up and accessing props for components in react, emphasizing the usage of parameters and arguments to pass and access values.', 'duration': 526.245, 'highlights': ['Incorporating JavaScript in JSX improves its dynamism and efficiency, making it unnecessary to hard code everything.', 'Demonstrating the process of setting up and accessing props for components in React, emphasizing the usage of parameters and arguments to pass and access values.', 'Explaining the usage of parameters and arguments to pass and access values in React components.']}, {'end': 8669.561, 'start': 8214.48, 'title': 'React props and component access', 'summary': 'Demonstrates accessing and utilizing props in react components to dynamically display data, emphasizing the need to match prop names across different instances to avoid rendering issues.', 'duration': 455.081, 'highlights': ['Accessing and utilizing props in React components to dynamically display data, emphasizing the importance of matching prop names across different instances to avoid rendering issues.', "Emphasizing the need to ensure that the props being passed match the components' expected props to avoid rendering issues.", 'Illustrating the process of setting up two separate objects for different book instances and accessing their properties through props in React components.']}], 'duration': 2098.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW46570659.jpg', 'highlights': ['Demonstrating a preference for minimal splitting up of components, showcasing the flexibility of React component design, and emphasizing the importance of understanding JSX syntax for efficient development.', 'Accessing and utilizing props in React components to dynamically display data, emphasizing the importance of matching prop names across different instances to avoid rendering issues.', 'Incorporating JavaScript in JSX improves its dynamism and efficiency, making it unnecessary to hard code everything.', 'The chapter covers adding CSS styles to React components using external CSS files and inline styles, considering potential conflicts between inline styles and external CSS.', 'Setting up a grid layout for the booklist and implementing a three-column layout using media queries.']}, {'end': 9653.256, 'segs': [{'end': 9089.426, 'src': 'embed', 'start': 9060.463, 'weight': 0, 'content': [{'end': 9065.627, 'text': 'Now, this is going to be the case where only one of them will have that description.', 'start': 9060.463, 'duration': 5.164}, {'end': 9067.148, 'text': "So I'm going to go with the first one.", 'start': 9066.067, 'duration': 1.081}, {'end': 9069.25, 'text': 'But as always, you can pick whichever you would like.', 'start': 9067.208, 'duration': 2.042}, {'end': 9079.818, 'text': "So of course, first, I would need to change this around where I'm not going to be self closing, because children prop will be here in between my tags.", 'start': 9069.75, 'duration': 10.068}, {'end': 9084.181, 'text': "And I'm just going to go with a paragraph and I'm going to use a lorem ipsum.", 'start': 9080.539, 'duration': 3.642}, {'end': 9089.426, 'text': 'So in Visual Studio code, you just need to type lorem and how many words you would like.', 'start': 9084.642, 'duration': 4.784}], 'summary': 'Using visual studio code to insert lorem ipsum in html.', 'duration': 28.963, 'max_score': 9060.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW49060463.jpg'}, {'end': 9343.452, 'src': 'embed', 'start': 9314.997, 'weight': 2, 'content': [{'end': 9320.879, 'text': 'If you like this type of CSS matter, where each card has its own height, you can keep it.', 'start': 9314.997, 'duration': 5.882}, {'end': 9323.06, 'text': "If you don't, then of course, don't add it.", 'start': 9321.319, 'duration': 1.741}, {'end': 9328.32, 'text': 'So for example, if I comment this out, then of course, notice how both of them are extended.', 'start': 9323.14, 'duration': 5.18}, {'end': 9336.867, 'text': "Now, I will add a little bit of CSS where I'm going to say book, and we'll just say margin top.", 'start': 9328.82, 'duration': 8.047}, {'end': 9343.452, 'text': "And we're going to go with I don't know, point five rms, something like that.", 'start': 9337.988, 'duration': 5.464}], 'summary': 'Css customization for individual card height and margin top applied.', 'duration': 28.455, 'max_score': 9314.997, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW49314997.jpg'}, {'end': 9490.94, 'src': 'embed', 'start': 9465.783, 'weight': 1, 'content': [{'end': 9472.307, 'text': "Now let me just quickly mention the reason why we keep on refactoring because of course, we're starting with the most basic example.", 'start': 9465.783, 'duration': 6.524}, {'end': 9475.329, 'text': "And then we're slowly building up.", 'start': 9473.068, 'duration': 2.261}, {'end': 9479.312, 'text': "And then as we're building up, yes, we will delete some stuff.", 'start': 9476.01, 'duration': 3.302}, {'end': 9481.293, 'text': 'Yes, we will refactor some stuff.', 'start': 9479.632, 'duration': 1.661}, {'end': 9484.635, 'text': "Because that's the only way we can do that.", 'start': 9481.713, 'duration': 2.922}, {'end': 9490.94, 'text': "So I will remove my children, for the time being, we really don't care about the children.", 'start': 9484.855, 'duration': 6.085}], 'summary': 'Refactoring is necessary for building up the codebase and removing unnecessary components.', 'duration': 25.157, 'max_score': 9465.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW49465783.jpg'}, {'end': 9534.338, 'src': 'embed', 'start': 9510.174, 'weight': 3, 'content': [{'end': 9516.821, 'text': 'So first, where I have the first book and second book, I can just simply remove both variables.', 'start': 9510.174, 'duration': 6.647}, {'end': 9520.284, 'text': 'So these will become our objects.', 'start': 9517.701, 'duration': 2.583}, {'end': 9525.369, 'text': 'Now what do we need to do over here is simply set up array.', 'start': 9521.005, 'duration': 4.364}, {'end': 9527.031, 'text': "I'll call this books.", 'start': 9525.389, 'duration': 1.642}, {'end': 9529.533, 'text': 'So const is equal to a box.', 'start': 9527.251, 'duration': 2.282}, {'end': 9534.338, 'text': "And then of course, let's enclose both of our objects.", 'start': 9530.093, 'duration': 4.245}], 'summary': "Transformed two variables into objects and created an array called 'books'.", 'duration': 24.164, 'max_score': 9510.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW49510174.jpg'}], 'start': 8670.361, 'title': 'Working with props in react', 'summary': 'Covers creating lists with unique values using props in javascript, accessing props in react components through destructuring, accessing the children prop, and handling nested structures. it also explores working with the children prop in react, emphasizing the need for refactoring to avoid repetition and improve practicality.', 'chapters': [{'end': 8720.824, 'start': 8670.361, 'title': 'Creating lists with unique values', 'summary': 'Discusses creating lists with unique values using props in javascript, emphasizing the flexibility of passing in values as variables or objects.', 'duration': 50.463, 'highlights': ['Discussing creating lists with unique values using props in JavaScript', 'Emphasizing the flexibility of passing in values as variables or objects']}, {'end': 9158.461, 'start': 8721.504, 'title': 'Accessing props in react', 'summary': 'Explains three ways to access props in react components, including destructuring properties from objects, accessing the children prop, and handling nested structures, emphasizing that these methods are not specific to react but are part of javascript.', 'duration': 436.957, 'highlights': ['The chapter explains three ways to access props in React components', 'Emphasizes that these methods are not specific to React but are part of JavaScript', 'Explains the process of accessing props using object destructuring', 'Discusses accessing the children prop and its usage', 'Highlights the handling of nested structures in props']}, {'end': 9653.256, 'start': 9158.862, 'title': 'Working with children prop in react', 'summary': 'Discusses working with the children prop in react, demonstrating how to render components using the children prop and highlighting the need for refactoring to avoid repetition and improve practicality, as well as addressing errors when rendering objects as react children.', 'duration': 494.394, 'highlights': ['Refactoring to use an array for objects and iterating over it to display books instead of repeating the same component for each book, improving practicality and avoiding repetition.', 'Demonstrating the process of rendering components using the children prop and the need to refactor to improve the application, emphasizing the iterative process of building up the application and making necessary changes.', 'Addressing errors when rendering objects as React children and demonstrating the need to ensure proper data access and usage, providing insights for handling errors related to rendering objects.']}], 'duration': 982.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW48670361.jpg', 'highlights': ['Refactoring to use an array for objects and iterating over it to display books instead of repeating the same component for each book, improving practicality and avoiding repetition.', 'Demonstrating the process of rendering components using the children prop and the need to refactor to improve the application, emphasizing the iterative process of building up the application and making necessary changes.', 'The chapter explains three ways to access props in React components, emphasizing that these methods are not specific to React but are part of JavaScript.', 'Discussing creating lists with unique values using props in JavaScript, emphasizing the flexibility of passing in values as variables or objects.', 'Explains the process of accessing props using object destructuring and discusses accessing the children prop and its usage, highlighting the handling of nested structures in props.', 'Addressing errors when rendering objects as React children and demonstrating the need to ensure proper data access and usage, providing insights for handling errors related to rendering objects.']}, {'end': 11758.15, 'segs': [{'end': 9684.217, 'src': 'embed', 'start': 9653.256, 'weight': 1, 'content': [{'end': 9658.819, 'text': "that just means that you either haven't structured properly or you're not accessing properly.", 'start': 9653.256, 'duration': 5.563}, {'end': 9661.761, 'text': "And now let's start out with those strings.", 'start': 9659.299, 'duration': 2.462}, {'end': 9664.302, 'text': "So now I'm going to go back to names.", 'start': 9662.241, 'duration': 2.061}, {'end': 9665.863, 'text': 'And life is awesome.', 'start': 9665.002, 'duration': 0.861}, {'end': 9670.146, 'text': 'I am displaying my array correctly in react.', 'start': 9666.523, 'duration': 3.623}, {'end': 9684.217, 'text': "Now the gotcha here, of course, is that I'm not wrapping those names in anything, right? Now how we can wrap our JavaScript values in the HTML.", 'start': 9670.967, 'duration': 13.25}], 'summary': 'Discussion on structuring and accessing data in javascript, with a mention of displaying arrays in react.', 'duration': 30.961, 'max_score': 9653.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW49653256.jpg'}, {'end': 9742.273, 'src': 'embed', 'start': 9713.447, 'weight': 6, 'content': [{'end': 9717.11, 'text': 'So const new names, and that is equal to a names.', 'start': 9713.447, 'duration': 3.663}, {'end': 9721.495, 'text': "And now of course, I'm iterating over this array using a map method.", 'start': 9717.23, 'duration': 4.265}, {'end': 9727.781, 'text': 'And now what I would want is to wrap each and every name in heading one.', 'start': 9722.216, 'duration': 5.565}, {'end': 9731.865, 'text': "at the moment, yeah, it's nice, I can see my list of names.", 'start': 9728.542, 'duration': 3.323}, {'end': 9737.549, 'text': "But it's also somewhat meaningless, because it is not displayed nicely.", 'start': 9732.485, 'duration': 5.064}, {'end': 9742.273, 'text': "So I already know that with map method, I'm accessing each and every name.", 'start': 9738.23, 'duration': 4.043}], 'summary': 'Iterating over array using map method to wrap names in heading one for better display.', 'duration': 28.826, 'max_score': 9713.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW49713447.jpg'}, {'end': 9807.666, 'src': 'embed', 'start': 9786.134, 'weight': 9, 'content': [{'end': 9795.079, 'text': "Why don't we wrap this in the HTML, meaning instead of just displaying what items I have in my array now,", 'start': 9786.134, 'duration': 8.945}, {'end': 9799.882, 'text': "I'd want to display each and every item wrapped in a heading one?", 'start': 9795.079, 'duration': 4.803}, {'end': 9807.666, 'text': "And the only thing I would need to do is go with return, then I'll set up my heading one, and then I'll pass in the name.", 'start': 9800.282, 'duration': 7.384}], 'summary': 'Wrap array items in html heading one tags.', 'duration': 21.532, 'max_score': 9786.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW49786134.jpg'}, {'end': 9857.488, 'src': 'embed', 'start': 9833.297, 'weight': 4, 'content': [{'end': 9840.88, 'text': 'Now, of course, if I check it out my value, then this will be already different than I had before.', 'start': 9833.297, 'duration': 7.583}, {'end': 9843.001, 'text': 'before that I had undefined.', 'start': 9841.36, 'duration': 1.641}, {'end': 9847.483, 'text': "Now essentially, you can see that I'm getting something interesting.", 'start': 9843.621, 'duration': 3.862}, {'end': 9850.905, 'text': 'Now that something interesting is my heading one.', 'start': 9847.923, 'duration': 2.982}, {'end': 9857.488, 'text': "Now what I'm trying to say over here is by the way, not I want to rename this to new names.", 'start': 9851.385, 'duration': 6.103}], 'summary': "The value has changed from undefined to 'heading one' and now needs renaming.", 'duration': 24.191, 'max_score': 9833.297, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW49833297.jpg'}, {'end': 10131.404, 'src': 'embed', 'start': 10101.795, 'weight': 2, 'content': [{'end': 10105.759, 'text': 'The key, of course, was that we could not render the object.', 'start': 10101.795, 'duration': 3.964}, {'end': 10108.862, 'text': "That's why specifically, we need to look for those properties.", 'start': 10106.039, 'duration': 2.823}, {'end': 10109.623, 'text': 'Okay, good.', 'start': 10109.082, 'duration': 0.541}, {'end': 10117.951, 'text': 'Now, well, if we put two and two together, I already have the book, correct, I already have the component.', 'start': 10110.524, 'duration': 7.427}, {'end': 10124.798, 'text': "So in here, if I can return whatever I want, why don't we return a book.", 'start': 10118.632, 'duration': 6.166}, {'end': 10131.404, 'text': 'So what we would need to do is just change around the div to a book.', 'start': 10125.639, 'duration': 5.765}], 'summary': 'Troubleshooting code to render object as book instead of div.', 'duration': 29.609, 'max_score': 10101.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW410101795.jpg'}, {'end': 10191.58, 'src': 'embed', 'start': 10160.385, 'weight': 0, 'content': [{'end': 10162.126, 'text': "So in this video, I'll show you the first one.", 'start': 10160.385, 'duration': 1.741}, {'end': 10167.128, 'text': "And then in the next video, I'll show you how we can use a spread operator instead.", 'start': 10162.626, 'duration': 4.502}, {'end': 10178.792, 'text': "So instead of passing all of them here, one by one, I could simply say, Alright, you know what, there's going to be a book prop.", 'start': 10167.908, 'duration': 10.884}, {'end': 10184.274, 'text': "And that book prop will be equal to a book that I'm passing in.", 'start': 10179.492, 'duration': 4.782}, {'end': 10191.58, 'text': 'So remember, we were looking for what we were looking for the object here, correct.', 'start': 10185.054, 'duration': 6.526}], 'summary': 'Demonstrating use of spread operator for passing props in react components.', 'duration': 31.195, 'max_score': 10160.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW410160385.jpg'}, {'end': 10581.718, 'src': 'heatmap', 'start': 10204.874, 'weight': 0.702, 'content': [{'end': 10216.346, 'text': "Why? Well, because now props is not simply a object with IMG title and author, it's going to be a object with a book object.", 'start': 10204.874, 'duration': 11.472}, {'end': 10219.469, 'text': "So let's see, we're going to go with props.", 'start': 10216.866, 'duration': 2.603}, {'end': 10225.251, 'text': "And like I said, there's going to be no values here, because we're not accessing the title.", 'start': 10220.51, 'duration': 4.741}, {'end': 10230.812, 'text': 'But notice how props now has the property that is the value.', 'start': 10225.651, 'duration': 5.161}, {'end': 10235.953, 'text': 'And then in that object, I see that I have my properties.', 'start': 10231.292, 'duration': 4.661}, {'end': 10241.534, 'text': 'So what do we need to do over here? Well, simply, we would just need to set up props.', 'start': 10236.453, 'duration': 5.081}, {'end': 10246.755, 'text': "And then the property that I'm looking for, what is the property is, of course, a book.", 'start': 10241.974, 'duration': 4.781}, {'end': 10253.76, 'text': 'So once I do that, now I only have this warning about the child, which we will fix in the next video.', 'start': 10247.637, 'duration': 6.123}, {'end': 10259.063, 'text': "However, let's see the cool thing where now I'm iterating over my array.", 'start': 10253.84, 'duration': 5.223}, {'end': 10263.906, 'text': "And for each and every object, I'm returning that book.", 'start': 10259.543, 'duration': 4.363}, {'end': 10270.129, 'text': 'And what that means is, for example, I can go and find another book.', 'start': 10264.586, 'duration': 5.543}, {'end': 10276.611, 'text': "So for example, this one, I'm gonna go, I'm gonna set up a copy image address.", 'start': 10270.649, 'duration': 5.962}, {'end': 10281.173, 'text': "And in here, let's just make another object.", 'start': 10277.372, 'duration': 3.801}, {'end': 10291.517, 'text': "So copy and paste, as far as the image value, that is, of course, going to be equal to my new book, then of course, we'll also get the author.", 'start': 10281.553, 'duration': 9.964}, {'end': 10293.456, 'text': 'like so.', 'start': 10292.935, 'duration': 0.521}, {'end': 10298.143, 'text': 'And I would want to do the same thing with a title as well.', 'start': 10293.977, 'duration': 4.166}, {'end': 10299.585, 'text': 'So copy that value.', 'start': 10298.363, 'duration': 1.222}, {'end': 10303.491, 'text': "And of course, I'll pass it in the title.", 'start': 10300.226, 'duration': 3.265}, {'end': 10307.357, 'text': 'Now, if we navigate to a bigger screen, check it out.', 'start': 10303.551, 'duration': 3.806}, {'end': 10311.32, 'text': 'whatever items we will have in our array.', 'start': 10308.178, 'duration': 3.142}, {'end': 10313.821, 'text': 'Now, of course, we are displaying them.', 'start': 10311.84, 'duration': 1.981}, {'end': 10319.625, 'text': "And for each and every item that we have, we're using that book component.", 'start': 10314.522, 'duration': 5.103}, {'end': 10321.486, 'text': 'And we set up the map method.', 'start': 10320.185, 'duration': 1.301}, {'end': 10331.132, 'text': "So now we don't need to manually keep on adding this book component each and every time and we don't need to manually keep on adding IMG title and author.", 'start': 10321.826, 'duration': 9.306}, {'end': 10342.077, 'text': 'But what we could do instead is just grab our book, meaning our parameter, which will point always back to that item in the array,', 'start': 10331.832, 'duration': 10.245}, {'end': 10343.717, 'text': 'which in our case is the object.', 'start': 10342.077, 'duration': 1.64}, {'end': 10348.76, 'text': 'And then of course, where we have the props, we are just destructuring.', 'start': 10344.158, 'duration': 4.602}, {'end': 10354.642, 'text': "However, in this case, we're not destructuring the props, we're destructuring the book property.", 'start': 10348.9, 'duration': 5.742}, {'end': 10359.752, 'text': 'In this case, of course, I can just remove this book altogether.', 'start': 10355.142, 'duration': 4.61}, {'end': 10365.578, 'text': 'Correct And now of course, I can see in my console that I have three items.', 'start': 10360.133, 'duration': 5.445}, {'end': 10369.461, 'text': 'Why? Well, because now I have three items in the array.', 'start': 10366.138, 'duration': 3.323}, {'end': 10372.344, 'text': 'So I guess I can remove this console log as well.', 'start': 10369.902, 'duration': 2.442}, {'end': 10381.873, 'text': 'Now we just need to fix this little warning about the fact that each child must have a unique key prop.', 'start': 10372.884, 'duration': 8.989}, {'end': 10391.421, 'text': 'Excellent job, we have our list, the only nagging thing is the fact that we have this warning about that unique key prop.', 'start': 10382.373, 'duration': 9.048}, {'end': 10399.607, 'text': "So what is happening here on how we can fix it, you see later, as we're progressing with react course.", 'start': 10392.121, 'duration': 7.486}, {'end': 10405.111, 'text': 'what we would want to do with lists is, for example, to remove some items or maybe add the items.', 'start': 10399.607, 'duration': 5.504}, {'end': 10411.416, 'text': "And react wants to keep a track of what we're adding, what we're moving.", 'start': 10405.712, 'duration': 5.704}, {'end': 10414.738, 'text': 'So react is always in the loop.', 'start': 10411.936, 'duration': 2.802}, {'end': 10422.644, 'text': "Now, in order to do that, we would need to set up a special key prop for each and every item that we're turning.", 'start': 10415.619, 'duration': 7.025}, {'end': 10430.369, 'text': 'So essentially, each and every time you have a list in react, you need to add a key prop with a unique value.', 'start': 10422.924, 'duration': 7.445}, {'end': 10435.353, 'text': "Now I can tell you right away that in most cases, we'll be hitting up the API anyway.", 'start': 10430.79, 'duration': 4.563}, {'end': 10442.038, 'text': "So there's always some kind of unique value, whether that is for the product, whether that is for the user or whatever.", 'start': 10435.873, 'duration': 6.165}, {'end': 10449.123, 'text': 'however, in this case, since we are the ones who are setting up this items, well, of course I would need to add that.', 'start': 10442.038, 'duration': 7.085}, {'end': 10454.967, 'text': "here, we just need to go with ID, and then whatever value you'd want, as long as it is unique.", 'start': 10449.703, 'duration': 5.264}, {'end': 10462.812, 'text': "So in my case, I'm just going to go with ID of one, then ID of two, and then ID of three as well.", 'start': 10455.327, 'duration': 7.485}, {'end': 10466.395, 'text': 'So copy and paste, and then ID of three.', 'start': 10463.213, 'duration': 3.182}, {'end': 10471.537, 'text': "So now of course, you'll notice that, well, we have the error because we're not passing in.", 'start': 10466.795, 'duration': 4.742}, {'end': 10476.22, 'text': 'Now how I can access that, well, I could destructure it if I want, correct.', 'start': 10472.078, 'duration': 4.142}, {'end': 10481.323, 'text': "However, in this case, I think it's just going to be simple where I go with book, and then ID.", 'start': 10476.58, 'duration': 4.743}, {'end': 10485.485, 'text': "Now, I don't need to deal with that key, anything in the actual book.", 'start': 10481.863, 'duration': 3.622}, {'end': 10491.708, 'text': "But now you'll notice that react is not going to complain anymore, where now everything is fine.", 'start': 10485.905, 'duration': 5.803}, {'end': 10494.269, 'text': 'as long as you pass this special prop.', 'start': 10492.148, 'duration': 2.121}, {'end': 10496.349, 'text': 'Again, this is not shake and bake.', 'start': 10494.769, 'duration': 1.58}, {'end': 10500.07, 'text': 'This has to be a key and unique value.', 'start': 10496.689, 'duration': 3.381}, {'end': 10508.993, 'text': "No one thing you'll notice once in a while where people are adding index because in the map, you can access index.", 'start': 10500.59, 'duration': 8.403}, {'end': 10511.593, 'text': 'Yes, you can technically do that.', 'start': 10509.593, 'duration': 2}, {'end': 10520.096, 'text': "In this case, there's going to be no problem you can, or it's going to be a problem if you're actually doing something with the.", 'start': 10512.034, 'duration': 8.062}, {'end': 10527.019, 'text': 'So my suggestion would be following where, if you know that your list will never pretty much change,', 'start': 10520.876, 'duration': 6.143}, {'end': 10533.641, 'text': "so you won't be removing the items or adding them dynamically you can technically let the slide and use the index.", 'start': 10527.019, 'duration': 6.622}, {'end': 10536.583, 'text': 'However, it is a better setup.', 'start': 10534.202, 'duration': 2.381}, {'end': 10544.126, 'text': 'If you always definitely use something unique because keep in mind that indexes change as your array is changing.', 'start': 10537.123, 'duration': 7.003}, {'end': 10548.49, 'text': "already ID, so that unique property won't change.", 'start': 10544.746, 'duration': 3.744}, {'end': 10549.29, 'text': 'All right.', 'start': 10548.93, 'duration': 0.36}, {'end': 10557.117, 'text': 'And the last thing that I would want to talk about in this video is another way how we can pass in those props.', 'start': 10549.811, 'duration': 7.306}, {'end': 10568.688, 'text': "So one of the ways was setting up this book as an object prop, where I have the book prop, and then I'm passing in, of course, this book object.", 'start': 10557.538, 'duration': 11.15}, {'end': 10572.731, 'text': "However, there's also a case where we can use a spread operator.", 'start': 10569.048, 'duration': 3.683}, {'end': 10581.718, 'text': 'Again, my job is to show you multiple syntaxes, multiple ways how you can solve it, it is up to you whichever way you prefer.', 'start': 10572.971, 'duration': 8.747}], 'summary': 'Iterating over an array to display and fix unique key warning, also discussing different ways to pass props.', 'duration': 376.844, 'max_score': 10204.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW410204874.jpg'}, {'end': 10511.593, 'src': 'embed', 'start': 10485.905, 'weight': 7, 'content': [{'end': 10491.708, 'text': "But now you'll notice that react is not going to complain anymore, where now everything is fine.", 'start': 10485.905, 'duration': 5.803}, {'end': 10494.269, 'text': 'as long as you pass this special prop.', 'start': 10492.148, 'duration': 2.121}, {'end': 10496.349, 'text': 'Again, this is not shake and bake.', 'start': 10494.769, 'duration': 1.58}, {'end': 10500.07, 'text': 'This has to be a key and unique value.', 'start': 10496.689, 'duration': 3.381}, {'end': 10508.993, 'text': "No one thing you'll notice once in a while where people are adding index because in the map, you can access index.", 'start': 10500.59, 'duration': 8.403}, {'end': 10511.593, 'text': 'Yes, you can technically do that.', 'start': 10509.593, 'duration': 2}], 'summary': 'React no longer complains when the special prop is passed. unique values needed.', 'duration': 25.688, 'max_score': 10485.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW410485905.jpg'}, {'end': 10612.311, 'src': 'embed', 'start': 10582.179, 'weight': 8, 'content': [{'end': 10585.241, 'text': "If you don't like the spread operator setup, you don't have to use it.", 'start': 10582.179, 'duration': 3.062}, {'end': 10587.123, 'text': 'However, that is my favorite.', 'start': 10585.301, 'duration': 1.822}, {'end': 10591.887, 'text': 'So I will use it somewhat often throughout the course.', 'start': 10587.303, 'duration': 4.584}, {'end': 10602.519, 'text': "So what am I doing over here, instead of passing this as a object, what I'm saying is that I would want to spread out all the properties.", 'start': 10592.327, 'duration': 10.192}, {'end': 10612.311, 'text': 'So in year six, we have spread operator, where I just go with dot dot dot, and then whatever is the name of the object.', 'start': 10603.06, 'duration': 9.251}], 'summary': 'Using spread operator for object properties, to be used frequently in the course.', 'duration': 30.132, 'max_score': 10582.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW410582179.jpg'}, {'end': 11340.602, 'src': 'embed', 'start': 11315.706, 'weight': 3, 'content': [{'end': 11323.011, 'text': 'Also, I would like to mention that in all the functions in all our event handlers, we can access the event object.', 'start': 11315.706, 'duration': 7.305}, {'end': 11327.273, 'text': "In this case, I'll just show you with one with a click handler.", 'start': 11323.431, 'duration': 3.842}, {'end': 11328.274, 'text': 'just please understand.', 'start': 11327.273, 'duration': 1.001}, {'end': 11333.177, 'text': 'of course you can access in all of them where essentially we have our event object.', 'start': 11328.274, 'duration': 4.903}, {'end': 11336.659, 'text': 'And we can do things we can console log event.', 'start': 11333.898, 'duration': 2.761}, {'end': 11340.602, 'text': 'And we can also for example, go for event target.', 'start': 11337.16, 'duration': 3.442}], 'summary': 'Event object can be accessed in all event handlers for various functions and actions.', 'duration': 24.896, 'max_score': 11315.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW411315706.jpg'}], 'start': 9653.256, 'title': 'React development', 'summary': 'Covers rendering arrays and components, props and event handling, javascript event handling, react events, and es6 modules. it discusses using the map method, event handling, and the fundamentals of es6 modules, with a focus on import/export statements.', 'chapters': [{'end': 9968.621, 'start': 9653.256, 'title': 'React rendering arrays', 'summary': 'Covers rendering arrays in react using the map method to iterate over an array and wrap each item in html, demonstrating how to display values in a meaningful format, and the limitations when rendering arrays with objects.', 'duration': 315.365, 'highlights': ['Using the map method to iterate over an array and wrap each item in HTML, such as heading one, to display values in a meaningful format.', 'Demonstrating the process of accessing and iterating over each item in the array using a callback function and the console log to display the values.', 'Highlighting the limitations of directly rendering arrays with objects, and the need to return a component for each item when dealing with objects within the array.']}, {'end': 10485.485, 'start': 9969.201, 'title': 'React component iteration', 'summary': 'Discusses using the map method to iterate over an array of objects, returning components for each object, utilizing destructuring, and adding a unique key prop for each item in a list.', 'duration': 516.284, 'highlights': ['Using the map method to iterate over an array of objects, returning components for each object', 'Utilizing destructuring to access object properties', 'Adding a unique key prop for each item in a list']}, {'end': 10927.926, 'start': 10485.905, 'title': 'React props and event handling', 'summary': 'Covers the proper usage of unique props in react, the spread operator for passing props, and the setup of event handling using camel case attributes and event handlers. it also introduces the concept of state for more interactive examples and refers to the react documentation for a complete list of supported events.', 'duration': 442.021, 'highlights': ['The importance of using unique props in React', 'Usage of spread operator for passing props', 'Setup of event handling using camel case attributes and event handlers']}, {'end': 11360.302, 'start': 10927.926, 'title': 'Event handling in javascript', 'summary': 'Explains event handling in javascript, showcasing examples of setting up event handlers as reference or inline functions and the gotcha of passing values to event handlers, with key points including setting up event handlers, passing values dynamically, and accessing the event object.', 'duration': 432.376, 'highlights': ['Setting up event handlers as reference or inline functions', 'The gotcha of passing values dynamically to event handlers', 'Accessing the event object in event handlers']}, {'end': 11758.15, 'start': 11360.723, 'title': 'React events & es6 modules', 'summary': 'Covers listening to events in react and the fundamentals of es6 modules, with a focus on import and export statements. it also demonstrates the process of setting up event listeners and importing/exporting code for easier management.', 'duration': 397.427, 'highlights': ['The chapter covers listening to events in React and the fundamentals of ES6 modules', 'Practical demonstration of setting up event listeners in React', 'Import and export statements in ES6 modules']}], 'duration': 2104.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW49653256.jpg', 'highlights': ['Using the map method to iterate over an array and wrap each item in HTML, such as heading one, to display values in a meaningful format.', 'The importance of using unique props in React', 'Setting up event handlers as reference or inline functions', 'The chapter covers listening to events in React and the fundamentals of ES6 modules', 'Utilizing destructuring to access object properties', 'Adding a unique key prop for each item in a list', 'Usage of spread operator for passing props', 'Accessing the event object in event handlers', 'Demonstrating the process of accessing and iterating over each item in the array using a callback function and the console log to display the values.', 'Highlighting the limitations of directly rendering arrays with objects, and the need to return a component for each item when dealing with objects within the array.']}, {'end': 14387.989, 'segs': [{'end': 11804.614, 'src': 'embed', 'start': 11758.77, 'weight': 0, 'content': [{'end': 11761.374, 'text': 'However, in this case, we need to have a relative path.', 'start': 11758.77, 'duration': 2.604}, {'end': 11769.744, 'text': "But since the box is in the same folder, I just go dot, then forward slash, and then I'm looking for the file.", 'start': 11761.854, 'duration': 7.89}, {'end': 11771.126, 'text': 'And I go here with books.', 'start': 11770.025, 'duration': 1.101}, {'end': 11776.092, 'text': "Now, since it is a JS file, we don't need to have the extension.", 'start': 11771.607, 'duration': 4.485}, {'end': 11784.379, 'text': "Previously, remember, when we work with CSS, we needed to have the CSS extension with JavaScript, we don't have to do that.", 'start': 11776.693, 'duration': 7.686}, {'end': 11788.662, 'text': 'So if it is a JavaScript file, excellent, we just keep on moving on.', 'start': 11784.559, 'duration': 4.103}, {'end': 11789.903, 'text': 'So now we save it.', 'start': 11789.082, 'duration': 0.821}, {'end': 11791.104, 'text': 'Okay, beautiful.', 'start': 11790.203, 'duration': 0.901}, {'end': 11793.405, 'text': 'And notice how our app still works.', 'start': 11791.544, 'duration': 1.861}, {'end': 11796.448, 'text': 'So everything works as expected.', 'start': 11793.906, 'duration': 2.542}, {'end': 11804.614, 'text': "Now, of course, like I said, a file, for example, set this up as data, and I'll save it, notice, it will say, well, books is not defined.", 'start': 11796.808, 'duration': 7.806}], 'summary': 'Using relative path for js file, no need for extension, app works as expected.', 'duration': 45.844, 'max_score': 11758.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW411758770.jpg'}, {'end': 12769.834, 'src': 'heatmap', 'start': 12397.689, 'weight': 0.737, 'content': [{'end': 12402.153, 'text': 'And what I would want is of course, everything is saved up over here.', 'start': 12397.689, 'duration': 4.464}, {'end': 12413.604, 'text': "And what I would want is to open this sucker up, I have my build, and I'm looking for this build folder, like I said, we'll just drag and drop.", 'start': 12403.034, 'duration': 10.57}, {'end': 12417.528, 'text': 'So grab the build folder, and just drag and drop over here.', 'start': 12414.065, 'duration': 3.463}, {'end': 12423.044, 'text': "then I'll maximize my window again, it's going to give you this interesting name.", 'start': 12418.9, 'duration': 4.144}, {'end': 12426.847, 'text': 'And at the end, you will notice this Netlify dot app.', 'start': 12423.504, 'duration': 3.343}, {'end': 12430.731, 'text': 'Now of course, eventually, you can have a custom name.', 'start': 12427.328, 'duration': 3.403}, {'end': 12434.994, 'text': 'So if you have already domain, you can connect to Netlify.', 'start': 12431.291, 'duration': 3.703}, {'end': 12443.042, 'text': "But for our purposes, we'll just use this option, where essentially, there's going to be this Netlify dot app.", 'start': 12435.455, 'duration': 7.587}, {'end': 12444.883, 'text': "So we're looking for site settings.", 'start': 12443.522, 'duration': 1.361}, {'end': 12449.346, 'text': 'If we want to change the name, we go for change site name.', 'start': 12445.463, 'duration': 3.883}, {'end': 12452.047, 'text': 'And then you can come up with whatever name you want.', 'start': 12449.786, 'duration': 2.261}, {'end': 12460.973, 'text': "So I'm going to go with react tutorial or basics tutorial, basics tutorial, and then 2020.", 'start': 12452.067, 'duration': 8.906}, {'end': 12462.414, 'text': "So that's the name I chose.", 'start': 12460.973, 'duration': 1.441}, {'end': 12468.437, 'text': "Of course, if you'll go with some type of name that is already used, of course, it's not going to be available.", 'start': 12462.794, 'duration': 5.643}, {'end': 12470.058, 'text': 'So it will complain.', 'start': 12468.937, 'duration': 1.121}, {'end': 12472.479, 'text': "But in my case, I think I'm going to be good to go.", 'start': 12470.098, 'duration': 2.381}, {'end': 12474.721, 'text': 'So of course, that is my site.', 'start': 12472.86, 'duration': 1.861}, {'end': 12480.664, 'text': 'So now what I would want is either go to overview, and then just click on this URL.', 'start': 12475.161, 'duration': 5.503}, {'end': 12483.906, 'text': "And you'll notice that this is our project.", 'start': 12481.204, 'duration': 2.702}, {'end': 12491.289, 'text': 'And now it is successfully running online, where you can share it with your friends and your family.', 'start': 12484.346, 'duration': 6.943}, {'end': 12497.872, 'text': 'Essentially, all the projects that you create, you can host it with Netlify within matter of seconds.', 'start': 12491.589, 'duration': 6.283}, {'end': 12502.274, 'text': 'Again, you would sign up for free account and I can ask you for your credit card,', 'start': 12498.272, 'duration': 4.002}, {'end': 12510.7, 'text': 'And what you could do is just use this drag and drop option where you run npm, run build first, then drag and drop.', 'start': 12503.074, 'duration': 7.626}, {'end': 12516.625, 'text': 'And then of course, you have your project online within a matter of seconds.', 'start': 12511.16, 'duration': 5.465}, {'end': 12517.685, 'text': 'Nicely done.', 'start': 12517.205, 'duration': 0.48}, {'end': 12520.748, 'text': 'Hopefully you were familiar with react basics.', 'start': 12517.705, 'duration': 3.043}, {'end': 12527.133, 'text': 'And I think this is a perfect time to dive into more interesting and more complex react topics.', 'start': 12521.308, 'duration': 5.825}, {'end': 12534.516, 'text': 'Now, when it comes to advanced react, a lot of our attention will be spent on something called hooks.', 'start': 12527.893, 'duration': 6.623}, {'end': 12545.762, 'text': 'And by the way, you can see that by just looking at the names of our upcoming topics, if it has the name use in it, so use state use effect.', 'start': 12535.377, 'duration': 10.385}, {'end': 12552.165, 'text': 'And along those lines, that just means that it is certain react hook, we will talk about.', 'start': 12546.382, 'duration': 5.783}, {'end': 12562.671, 'text': 'So why hooks, you see, if all we have is a component with some static data, or a component with a list, life is great.', 'start': 12552.865, 'duration': 9.806}, {'end': 12573.677, 'text': 'But once we want to make our components dynamic and more complex and, of course, as a result, also our app, we will need to use react hooks,', 'start': 12563.271, 'duration': 10.406}, {'end': 12579.14, 'text': 'which are functions react provides, to help us to complete various tasks.', 'start': 12573.677, 'duration': 5.463}, {'end': 12587.106, 'text': 'For example, adding removing the atoms from the list, toggling the model, and fetching the data, just to name a few.', 'start': 12579.58, 'duration': 7.526}, {'end': 12589.327, 'text': 'There are quite a few hooks out there.', 'start': 12587.706, 'duration': 1.621}, {'end': 12599.415, 'text': "But I can honestly say that if you understand only two of them, use state and use effect, you'll be already in extremely good shape.", 'start': 12589.828, 'duration': 9.587}, {'end': 12604.18, 'text': "That's why we'll cover them first have the most number of examples on them.", 'start': 12599.975, 'duration': 4.205}, {'end': 12612.189, 'text': "And we'll keep on using them, even if the main topic of the lecture will be some other hook or different subject.", 'start': 12604.841, 'duration': 7.348}, {'end': 12619.117, 'text': "As we'll be approaching the end of the section, you might find some repetition, but it was done on purpose.", 'start': 12612.81, 'duration': 6.307}, {'end': 12625.382, 'text': 'only because I definitely would want you to be familiar with those two hooks.', 'start': 12619.737, 'duration': 5.645}, {'end': 12627.925, 'text': 'So use state and use effect.', 'start': 12625.863, 'duration': 2.062}, {'end': 12634.071, 'text': 'And my experience when it comes to learning important stuff is well worth repeating.', 'start': 12628.485, 'duration': 5.586}, {'end': 12642.878, 'text': 'Now, even though react hooks will be the main focus of this upcoming section, we will cover other useful topics as well,', 'start': 12634.671, 'duration': 8.207}, {'end': 12650.524, 'text': 'like conditional rendering forms and react prop drilling, context API, as well as react router all included.', 'start': 12642.878, 'duration': 7.646}, {'end': 12656.229, 'text': 'So by the end of the section, you can easily build cool and complex react apps.', 'start': 12650.804, 'duration': 5.425}, {'end': 12662.034, 'text': "In order to follow along with the upcoming part of the video, you'll need a starter project.", 'start': 12656.869, 'duration': 5.165}, {'end': 12665.818, 'text': 'I provide a link at johnsmilk.com.', 'start': 12662.995, 'duration': 2.823}, {'end': 12669.823, 'text': 'So bravely navigate to johnsmilk.com.', 'start': 12666.358, 'duration': 3.465}, {'end': 12672.846, 'text': 'And then look for the videos page.', 'start': 12670.423, 'duration': 2.423}, {'end': 12677.431, 'text': 'And in the videos page, of course, we are looking for react.', 'start': 12673.607, 'duration': 3.824}, {'end': 12679.654, 'text': 'So So click on that page.', 'start': 12677.451, 'duration': 2.203}, {'end': 12683.998, 'text': "And then of course, at this point, I haven't uploaded the video.", 'start': 12680.234, 'duration': 3.764}, {'end': 12687.241, 'text': "So that's why for me, I can see the JavaScript.", 'start': 12684.198, 'duration': 3.043}, {'end': 12694.088, 'text': "But by the time you'll be watching this, of course, there's going to be a big massive react logo.", 'start': 12687.381, 'duration': 6.707}, {'end': 12697.572, 'text': "And then you're looking for this source code link.", 'start': 12694.609, 'duration': 2.963}, {'end': 12698.652, 'text': 'click on that.', 'start': 12698.072, 'duration': 0.58}, {'end': 12705.575, 'text': 'And this is going to direct you to my GitHub, more specifically, react advanced 2020 repo.', 'start': 12699.293, 'duration': 6.282}, {'end': 12708.557, 'text': 'And once you get there, you are in good shape.', 'start': 12706.216, 'duration': 2.341}, {'end': 12711.658, 'text': "And once we have a good idea of what we're going to cover.", 'start': 12709.177, 'duration': 2.481}, {'end': 12719.222, 'text': 'next, I want to start by getting the starter project, So just follow the link that I provided.', 'start': 12711.658, 'duration': 7.564}, {'end': 12722.824, 'text': 'And you can either download zip, fork or clone.', 'start': 12719.242, 'duration': 3.582}, {'end': 12728.247, 'text': "And I think I'm going to go with clone option, navigate back to my desktop.", 'start': 12723.424, 'duration': 4.823}, {'end': 12731.089, 'text': "And I'll zoom in just so you can see.", 'start': 12728.848, 'duration': 2.241}, {'end': 12738.233, 'text': "So of course, I'm in terminal navigating to a desktop, and I'm just gonna run get clone.", 'start': 12731.489, 'duration': 6.744}, {'end': 12744.918, 'text': "And of course, now I have my repo, then I'll open up the Visual Studio code.", 'start': 12739.034, 'duration': 5.884}, {'end': 12746.439, 'text': 'drag and drop.', 'start': 12745.578, 'duration': 0.861}, {'end': 12750.942, 'text': 'Now my preference is right away set it side by side with a browser.', 'start': 12746.919, 'duration': 4.023}, {'end': 12752.763, 'text': 'But of course, that is up to you.', 'start': 12750.982, 'duration': 1.781}, {'end': 12755.665, 'text': "I'll also have one bigger browser window open as well.", 'start': 12752.863, 'duration': 2.802}, {'end': 12758.146, 'text': "So in this case, I'm going to go with new window.", 'start': 12755.685, 'duration': 2.461}, {'end': 12762.869, 'text': "And then I'll set side by side with my text editor.", 'start': 12758.867, 'duration': 4.002}, {'end': 12769.834, 'text': "So I'll have browser on a small screen, of course, and also on the big one as well.", 'start': 12763.57, 'duration': 6.264}], 'summary': 'Tutorial on hosting projects with netlify and introduction to advanced react topics with a focus on hooks and other useful topics.', 'duration': 372.145, 'max_score': 12397.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW412397689.jpg'}], 'start': 11758.77, 'title': 'React and javascript basics', 'summary': 'Covers working with javascript files, react export and import basics, netlify deployment, advanced react topics, and understanding the use state in react, emphasizing the importance of these concepts for smooth app functionality and deployment, and dynamic component behaviors.', 'chapters': [{'end': 11828.492, 'start': 11758.77, 'title': 'Working with javascript files', 'summary': 'Explains how to reference a javascript file using relative path, omitting file extension, and handling import errors, ensuring smooth functionality of the app.', 'duration': 69.722, 'highlights': ['Referencing a JavaScript file using relative path and omitting file extension ensures smooth functionality of the app.', 'Handling import errors by ensuring the correct naming convention for named exports is essential for proper functionality.']}, {'end': 12299.32, 'start': 11828.532, 'title': 'React export and import basics', 'summary': 'Covers the basics of exporting and importing components in react, highlighting the need for exact name matching, differences between named and default exports, and the usage of import and export statements in creating a react app.', 'duration': 470.788, 'highlights': ['The chapter covers the basics of exporting and importing components in React', 'Highlighting the need for exact name matching', 'Differences between named and default exports', 'Usage of import and export statements in creating a React app']}, {'end': 12976.833, 'start': 12299.6, 'title': 'Netlify deployment and advanced react topics', 'summary': 'Covers deploying a project using netlify and highlights the process of drag-and-drop deployment, setting up production build using npm run build, and customizing the site name. additionally, it introduces advanced react topics focusing on hooks, particularly use state and use effect, to make components dynamic and complex, emphasizing the importance of understanding these hooks and providing an overview of the upcoming lectures.', 'duration': 677.233, 'highlights': ['Deploying a project using Netlify involves drag-and-drop deployment, setting up production build using npm run build, and customizing the site name.', 'Introduction to advanced React topics, particularly focusing on hooks like use state and use effect to make components dynamic and complex.']}, {'end': 13351.956, 'start': 12977.253, 'title': 'React tutorial overview', 'summary': 'Covers an overview of advanced react tutorial, including topics on importing, css, file structure, and use state hook, providing insights on file setup and the need for use state hook in building complex applications.', 'duration': 374.703, 'highlights': ['The tutorial folder contains various subfolders for different topics, each with setup folders and complete source code, ensuring easy navigation and quick access to complete source code for reference.', 'The importance of use state hook is highlighted, emphasizing its necessity for building complex applications, with a detailed explanation provided through a basic example located in the tutorial folder.', 'The chapter addresses the use of containers for styling examples, showcasing the addition of a container class in index CSS and its application to wrap examples for improved visual presentation.']}, {'end': 14387.989, 'start': 13352.456, 'title': 'Understanding use state in react', 'summary': 'Introduces the use state in react, explaining its purpose and functionality, with an example showcasing how to use it to manage state and trigger component rerenders, ultimately demonstrating its importance in managing component state.', 'duration': 1035.533, 'highlights': ['The chapter introduces the use state in React, explaining its purpose and functionality', 'Example showcasing how to use it to manage state and trigger component rerenders', 'Demonstrating its importance in managing component state']}], 'duration': 2629.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW411758770.jpg', 'highlights': ['Deploying a project using Netlify involves drag-and-drop deployment, setting up production build using npm run build, and customizing the site name.', 'The importance of use state hook is highlighted, emphasizing its necessity for building complex applications, with a detailed explanation provided through a basic example located in the tutorial folder.', 'Introduction to advanced React topics, particularly focusing on hooks like use state and use effect to make components dynamic and complex.', 'The chapter covers the basics of exporting and importing components in React.', 'The chapter introduces the use state in React, explaining its purpose and functionality.']}, {'end': 16215.333, 'segs': [{'end': 14568.966, 'src': 'embed', 'start': 14543.607, 'weight': 0, 'content': [{'end': 14549.27, 'text': "there's going to be a big fat error because you need to invoke the hook again.", 'start': 14543.607, 'duration': 5.663}, {'end': 14556.295, 'text': 'whether that is use state or whichever hook you would want, it needs to be invoked in the function body.', 'start': 14549.27, 'duration': 7.025}, {'end': 14560.719, 'text': "And then the last thing is something that we'll take a look at later.", 'start': 14556.976, 'duration': 3.743}, {'end': 14564.862, 'text': 'And that is that we cannot call the hook conditionally.', 'start': 14561.6, 'duration': 3.262}, {'end': 14568.966, 'text': "And I'll show you that with use effect, because it's just going to make a little bit more sense.", 'start': 14565.363, 'duration': 3.603}], 'summary': 'Invoke the hook in function body, avoid conditional hook calls.', 'duration': 25.359, 'max_score': 14543.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW414543607.jpg'}, {'end': 14860.343, 'src': 'embed', 'start': 14831.707, 'weight': 2, 'content': [{'end': 14838.393, 'text': 'So now what I would want is to pass in that data array as my default value.', 'start': 14831.707, 'duration': 6.686}, {'end': 14839.974, 'text': 'Alright, awesome.', 'start': 14838.913, 'duration': 1.061}, {'end': 14842.717, 'text': "And then of course, let's work on our return.", 'start': 14840.395, 'duration': 2.322}, {'end': 14845.938, 'text': 'Now, I could go with react fragment.', 'start': 14843.277, 'duration': 2.661}, {'end': 14856.181, 'text': "Or remember, there is a shortcut, where if I go with my angle brackets, now essentially, I'm creating my fragment, and I don't have that diff soup.", 'start': 14846.518, 'duration': 9.663}, {'end': 14860.343, 'text': 'So now what I would want is to iterate over my array.', 'start': 14856.681, 'duration': 3.662}], 'summary': 'Passing data array as default value, using react fragment for iteration.', 'duration': 28.636, 'max_score': 14831.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW414831707.jpg'}, {'end': 14971.386, 'src': 'embed', 'start': 14944.976, 'weight': 1, 'content': [{'end': 14955.919, 'text': 'Again, I used use state hook, then I provided some default value, which in my case was an array, I could have added the empty array.', 'start': 14944.976, 'duration': 10.943}, {'end': 14959.88, 'text': 'But in my case, I already prepared an array in data.js.', 'start': 14956.399, 'duration': 3.481}, {'end': 14962.581, 'text': 'And it is a array of objects.', 'start': 14960.38, 'duration': 2.201}, {'end': 14964.362, 'text': 'then of course, I invoked it.', 'start': 14963.161, 'duration': 1.201}, {'end': 14966.463, 'text': "And then I'm getting two things.", 'start': 14965.402, 'duration': 1.061}, {'end': 14969.825, 'text': "I'm getting whatever default value I have.", 'start': 14967.063, 'duration': 2.762}, {'end': 14971.386, 'text': 'So that is my state value.', 'start': 14970.045, 'duration': 1.341}], 'summary': 'Using usestate hook, initialized and invoked an array of objects from data.js.', 'duration': 26.41, 'max_score': 14944.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW414944976.jpg'}], 'start': 14388.909, 'title': 'React hooks and state management', 'summary': 'Covers the basics of usestate hook, its usage with arrays and objects, removing items functionality, and practical examples with naming conventions. it also discusses setting up a functional update form and event handling, providing insights into react state management.', 'chapters': [{'end': 14581.709, 'start': 14388.909, 'title': 'Understanding use state hook in react', 'summary': 'Covers the basics of the use state hook in react, including how to invoke the function, control state values, and naming conventions. it also explains the naming conventions and rules for using hooks in react components.', 'duration': 192.8, 'highlights': ['The basics of use state hook in react, including how to invoke the function, control state values, and naming conventions', 'The components where we invoke those hooks must be uppercase, a small gotcha that can catch up in very random times', 'The hook needs to be in the function or component body and cannot be called conditionally', 'The function of that controls the value and how each time the function is invoked, the new state value is passed in']}, {'end': 14944.376, 'start': 14582.249, 'title': 'React custom hooks: usestate with arrays', 'summary': 'Discusses the usage of usestate with arrays, providing examples and practical explanations of how to set up and utilize the state value as an array, along with considerations for choosing between importing and using the usestate function. it also demonstrates how to iterate over an array and utilize the map method to render meaningful content.', 'duration': 362.127, 'highlights': ['The chapter discusses the usage of useState with arrays, providing examples and practical explanations of how to set up and utilize the state value as an array, along with considerations for choosing between importing and using the useState function.', 'It demonstrates how to iterate over an array and utilize the map method to render meaningful content.']}, {'end': 15176.642, 'start': 14944.976, 'title': 'Using state hook in react', 'summary': 'Covers the use of state hook in react, including setting default values, invoking functions, and removing items from an array, highlighted by showcasing the use of inline functions and function references.', 'duration': 231.666, 'highlights': ['The chapter covers the use of state hook in React', 'showcasing the use of inline functions and function references', 'setting default values and invoking functions']}, {'end': 15382.551, 'start': 15177.123, 'title': 'React: removing items functionality', 'summary': 'Explains the process of setting up a functionality to remove items from an array in a react application, demonstrating the use of arrow functions and event handling, resulting in the successful removal of specific items upon button click.', 'duration': 205.428, 'highlights': ['The functionality to remove items in a React application involves setting up an arrow function that is invoked with a specific ID, running only when a button is clicked.', 'The process involves filtering out the array to leave items without a matching ID, and explicit variable creation to handle the state value, resulting in the successful removal of specific items upon button click.', "Upon implementing the functionality, specific items can be successfully removed from the array upon button click, with the demonstration of the process using the example of removing 'john' and 'Peter'."]}, {'end': 16215.333, 'start': 15382.811, 'title': 'Using use state hook with arrays and objects', 'summary': 'Covers using the use state hook with arrays and objects, highlighting the gotchas and solutions, as well as showcasing how to work with numbers and set up a functional update form.', 'duration': 832.522, 'highlights': ['The chapter covers using the use state hook with arrays and objects, highlighting the gotchas and solutions.', 'Showcases how to work with numbers and set up a functional update form.']}], 'duration': 1826.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW414388909.jpg', 'highlights': ['The functionality to remove items in a React application involves setting up an arrow function that is invoked with a specific ID, running only when a button is clicked.', 'The chapter discusses the usage of useState with arrays, providing examples and practical explanations of how to set up and utilize the state value as an array, along with considerations for choosing between importing and using the useState function.', 'The basics of use state hook in react, including how to invoke the function, control state values, and naming conventions', 'The chapter covers using the use state hook with arrays and objects, highlighting the gotchas and solutions.', 'The chapter covers the use of state hook in React']}, {'end': 18555.459, 'segs': [{'end': 16435.501, 'src': 'embed', 'start': 16409.501, 'weight': 3, 'content': [{'end': 16417.807, 'text': 'Why am I calling this a complex increase, because I would want to add a little bit of the timeout.', 'start': 16409.501, 'duration': 8.306}, {'end': 16422.311, 'text': 'So essentially, once I collect, there should be some delay.', 'start': 16418.367, 'duration': 3.944}, {'end': 16430.097, 'text': "So once we click, we'll set up two seconds delay, and only then the value should be updated.", 'start': 16423.131, 'duration': 6.966}, {'end': 16435.501, 'text': "In the process, we'll see why we'd want to use that functional updater form.", 'start': 16430.197, 'duration': 5.304}], 'summary': 'Implement a 2-second delay for updating values to understand functional updater form.', 'duration': 26, 'max_score': 16409.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW416409501.jpg'}, {'end': 16569.169, 'src': 'embed', 'start': 16543.3, 'weight': 2, 'content': [{'end': 16548.583, 'text': "And you can probably already guess since we're setting up the whole example, that there has to be a gotcha.", 'start': 16543.3, 'duration': 5.283}, {'end': 16549.744, 'text': "So let's try it out.", 'start': 16549.025, 'duration': 0.719}, {'end': 16552.447, 'text': "What I'm going to do right now is click three times.", 'start': 16550.646, 'duration': 1.801}, {'end': 16559.537, 'text': 'the moment you click, you notice that yeah, after two seconds, something happens.', 'start': 16553.649, 'duration': 5.888}, {'end': 16566.446, 'text': 'But essentially, I have clicked only once, meaning my value only increased by once.', 'start': 16560.297, 'duration': 6.149}, {'end': 16569.169, 'text': "So why is that happening? Well, let's think about it.", 'start': 16567.147, 'duration': 2.022}], 'summary': 'Clicking three times only increases value by once after two seconds.', 'duration': 25.869, 'max_score': 16543.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW416543300.jpg'}, {'end': 16615.04, 'src': 'embed', 'start': 16594.63, 'weight': 1, 'content': [{'end': 16605.475, 'text': "So again I can click three times, And yeah, it's going to increase, but again only by one, because all those three times, when we call the set value,", 'start': 16594.63, 'duration': 10.845}, {'end': 16610.218, 'text': "we'll still be looking for that old value, meaning to one or whatever.", 'start': 16605.475, 'duration': 4.743}, {'end': 16615.04, 'text': "So essentially, we're not using the current value in a state.", 'start': 16610.658, 'duration': 4.382}], 'summary': 'Clicking three times increases value by one, not using current state.', 'duration': 20.41, 'max_score': 16594.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW416594630.jpg'}, {'end': 18332.933, 'src': 'embed', 'start': 18306.148, 'weight': 0, 'content': [{'end': 18314.245, 'text': 'And then the moment we change something about that value, of course, then we trigger use effect to run one more time.', 'start': 18306.148, 'duration': 8.097}, {'end': 18319.769, 'text': 'Since in dependency array, we have this value.', 'start': 18314.966, 'duration': 4.803}, {'end': 18323.032, 'text': "So each and every time we'll change something about this value.", 'start': 18320.51, 'duration': 2.522}, {'end': 18327.075, 'text': 'Essentially, we will run the use effect as well.', 'start': 18323.632, 'duration': 3.443}, {'end': 18332.933, 'text': "So that's something to remember, where, by default, if you have no dependency array,", 'start': 18327.731, 'duration': 5.202}], 'summary': 'Changing value triggers use effect to run, with dependency array.', 'duration': 26.785, 'max_score': 18306.148, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW418306148.jpg'}], 'start': 16215.333, 'title': 'React function setup and state update', 'summary': 'Explores multiple ways of setting up functions in react, emphasizing the importance of using a functional approach in state updates, and provides an overview of the react tutorial and detailed explanation of the use effect hook, including practical demonstrations and examples.', 'chapters': [{'end': 16594.25, 'start': 16215.333, 'title': 'Multiple ways of setting up functions', 'summary': 'Explains multiple ways of setting up functions in react, including passing values directly and using functional updater forms, and highlights the issue of asynchronous behavior in the set function, resulting in unexpected behavior.', 'duration': 378.917, 'highlights': ['The chapter showcases multiple ways of setting up functions in React, including passing values directly and using functional updater forms, emphasizing that there are cases where inline or reference methods can be used.', 'The transcript explains the process of setting up inline functions for buttons to increase, decrease, and reset values, demonstrating the practical application of passing values directly in the set function.', 'It introduces the concept of functional updater forms, showcasing a complex increase function with a two-second delay using the set timeout method and elucidates the asynchronous behavior of the set function, leading to unexpected results when updating values.']}, {'end': 17201.708, 'start': 16594.63, 'title': 'Using functional approach in state update', 'summary': 'Illustrates the importance of using the functional approach in updating state values, emphasizing the significance of returning a new state value from the function, and encourages practical application through project-based learning.', 'duration': 607.078, 'highlights': ['The functional approach is crucial in updating state values, as it enables the retrieval of the current state value before the update, thus allowing for accurate and immediate state updates.', 'Returning a new state value from the function is essential, as failing to do so may lead to functional errors and incorrect state updates.', "Practical application of the concepts covered is encouraged through project-based learning, with the 'birthday reminder' project highlighted as a starting point for implementation."]}, {'end': 18259.461, 'start': 17202.148, 'title': 'React tutorial overview and use effect basics', 'summary': 'Covers an overview of the react tutorial, including encouragement to work on a birthday reminder project, a mention of the two completed projects, and a detailed explanation of the use effect hook with examples and practical demonstrations of side effects, including updating the document title, conditional rendering, and the use of the second parameter for control over when the use effect runs.', 'duration': 1057.313, 'highlights': ['The chapter covers an overview of the React tutorial, including encouragement to work on a birthday reminder project, a mention of the two completed projects, and a detailed explanation of the use effect hook with examples and practical demonstrations of side effects, including updating the document title, conditional rendering, and the use of the second parameter for control over when the use effect runs.', 'The use effect hook is explained in detail, with an emphasis on side effects and practical examples, including updating the document title and conditional rendering based on a value.', 'Practical demonstrations of side effects include updating the document title and conditional rendering based on a value, showcasing the use of the use effect hook for managing such behaviors.']}, {'end': 18555.459, 'start': 18259.981, 'title': 'Understanding use effect in react', 'summary': 'Explains the use of dependency array in the use effect, the impact of setting an empty dependency array, and the possibility of having multiple use effects, along with a demonstration of using a cleanup function in use effect.', 'duration': 295.478, 'highlights': ['The use effect runs each time a component gets rerendered, including the initial render, if no dependency array is set.', 'Setting an empty dependency array will cause the use effect to run only once when the component is rendered.', 'Multiple use effects can be set up to run on different triggers or events.', 'Demonstration of using a cleanup function in use effect for checking the size of the window.']}], 'duration': 2340.126, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW416215333.jpg', 'highlights': ['The chapter covers an overview of the React tutorial, including the use effect hook with practical demonstrations and examples.', 'The functional approach is crucial in updating state values, enabling accurate and immediate state updates.', 'Practical demonstrations of side effects include updating the document title and conditional rendering based on a value using the use effect hook.', 'The use effect runs each time a component gets rerendered, including the initial render, if no dependency array is set.', 'Multiple ways of setting up functions in React are showcased, emphasizing the importance of using a functional approach in state updates.']}, {'end': 20377.132, 'segs': [{'end': 18968.445, 'src': 'heatmap', 'start': 18601.805, 'weight': 0.726, 'content': [{'end': 18606.108, 'text': "And now let's set up a vent listener on the window.", 'start': 18601.805, 'duration': 4.303}, {'end': 18610.211, 'text': 'And for that case, we will use the use effect.', 'start': 18606.868, 'duration': 3.343}, {'end': 18613.113, 'text': "So we're gonna go here, we'll say use effect.", 'start': 18610.951, 'duration': 2.162}, {'end': 18619.777, 'text': 'And then in the use effect, what I would want, of course, is to pass in my callback function.', 'start': 18613.853, 'duration': 5.924}, {'end': 18620.838, 'text': 'Yeah, that is true.', 'start': 18620.037, 'duration': 0.801}, {'end': 18627.182, 'text': 'And then within that callback function, I will want to add the event listener on the window.', 'start': 18621.338, 'duration': 5.844}, {'end': 18631.164, 'text': "So first, I'll be listening for resize event.", 'start': 18627.702, 'duration': 3.462}, {'end': 18632.185, 'text': "That's number one.", 'start': 18631.444, 'duration': 0.741}, {'end': 18634.306, 'text': 'And then we need that callback function.', 'start': 18632.685, 'duration': 1.621}, {'end': 18641.331, 'text': 'So essentially, a function that will run each and every time the event will take place.', 'start': 18634.547, 'duration': 6.784}, {'end': 18642.352, 'text': 'So the resize one.', 'start': 18641.491, 'duration': 0.861}, {'end': 18645.814, 'text': "And in this case, I think I'll call this check size.", 'start': 18643.012, 'duration': 2.802}, {'end': 18648.135, 'text': "So let's write check size.", 'start': 18647.035, 'duration': 1.1}, {'end': 18651.918, 'text': 'Now the thing is, of course, we need to create that particular function.', 'start': 18648.175, 'duration': 3.743}, {'end': 18655.399, 'text': "So let's create it, we'll say check size.", 'start': 18652.438, 'duration': 2.961}, {'end': 18661.602, 'text': 'And as far as the function, it will all the time update the size.', 'start': 18656.099, 'duration': 5.503}, {'end': 18667.384, 'text': 'So all right here, set size, and then whatever is the value, get the inner width.', 'start': 18662.162, 'duration': 5.222}, {'end': 18675.466, 'text': "So what we're doing here is we have the use effect, we have the callback function, and we're setting up the event listener on a window.", 'start': 18668.084, 'duration': 7.382}, {'end': 18683.488, 'text': 'And each and every time this event will take place, the resize one, we will invoke the check size function.', 'start': 18676.006, 'duration': 7.482}, {'end': 18691.551, 'text': 'And as far as check size, well, we just call set size, and we get the current width of the window.', 'start': 18684.088, 'duration': 7.463}, {'end': 18694.372, 'text': "So let's say whether this is going to work.", 'start': 18691.991, 'duration': 2.381}, {'end': 18696.954, 'text': 'So the moment of course, this is 1463.', 'start': 18694.752, 'duration': 2.202}, {'end': 18702.78, 'text': "Now let's see whether we can update and everything works nicely, correct.", 'start': 18696.954, 'duration': 5.826}, {'end': 18705.842, 'text': 'So we can make it bigger, we can make it smaller.', 'start': 18703.34, 'duration': 2.502}, {'end': 18710.626, 'text': "And each and every time I'm resizing the window, I'm getting the correct value.", 'start': 18706.323, 'duration': 4.303}, {'end': 18715.87, 'text': "Because again, we have the event listener, we're getting the values, and everything is beautiful.", 'start': 18711.027, 'duration': 4.843}, {'end': 18719.473, 'text': 'Or let me throw you a mine grenade.', 'start': 18716.671, 'duration': 2.802}, {'end': 18725.077, 'text': "What if we will go to elements, then we'll check event listeners.", 'start': 18720.173, 'duration': 4.904}, {'end': 18728.059, 'text': "And then we'll check for the resize one.", 'start': 18725.858, 'duration': 2.201}, {'end': 18732.723, 'text': "Now what do you think how many will have there? we shouldn't have one correct.", 'start': 18728.64, 'duration': 4.083}, {'end': 18736.345, 'text': "Now does that look like one? No, it doesn't.", 'start': 18733.443, 'duration': 2.902}, {'end': 18744.75, 'text': "And the problem with this one is that eventually you'll just have a memory leak, where the moment your app gets bigger and bigger and bigger.", 'start': 18736.966, 'duration': 7.784}, {'end': 18754.437, 'text': 'And if you have a bunch of components that are setting up these event listeners left and right, it will cause huge problems.', 'start': 18744.79, 'duration': 9.647}, {'end': 18762.822, 'text': 'So there has to be a way where once we of course, exit, then we remove that event listener.', 'start': 18755.197, 'duration': 7.625}, {'end': 18770.847, 'text': 'Now, first, we need to understand, well, why is that happening here? Well, we have the user correct, we have the window listener.', 'start': 18763.282, 'duration': 7.565}, {'end': 18777.811, 'text': 'Now, in the callback function, what are we doing over here? What do you think? we have set size correct.', 'start': 18771.567, 'duration': 6.244}, {'end': 18779.814, 'text': 'Now, what is the set size doing??', 'start': 18778.332, 'duration': 1.482}, {'end': 18783.618, 'text': 'It is triggering the rerender, correct?', 'start': 18780.635, 'duration': 2.983}, {'end': 18791.848, 'text': 'Because the moment we invoke set size, we update the value as far as the state value, as far as the size.', 'start': 18784.119, 'duration': 7.729}, {'end': 18799.414, 'text': 'And what was you stay doing, it was preserving the values, it was triggering the rerender.', 'start': 18792.649, 'duration': 6.765}, {'end': 18809.02, 'text': 'So each and every time we call this callback function, meaning each and every time we resize the window, we also trigger the rerender.', 'start': 18800.254, 'duration': 8.766}, {'end': 18814.004, 'text': 'So the moment we trigger a render, then again, we call the use effect.', 'start': 18809.801, 'duration': 4.203}, {'end': 18819.689, 'text': "Now if you want, you can just simply console log and you'll see that in a console where I'll say hello world.", 'start': 18814.384, 'duration': 5.305}, {'end': 18824.813, 'text': 'And the moment we refresh, notice, technically, we have one correct.', 'start': 18820.509, 'duration': 4.304}, {'end': 18826.895, 'text': 'So now we have one event listener.', 'start': 18825.253, 'duration': 1.642}, {'end': 18834.742, 'text': "But of course, the moment I'll start adding some changes, you'll notice first on the console, I have a bunch of fellow worlds.", 'start': 18827.515, 'duration': 7.227}, {'end': 18843.49, 'text': "So, each and every time I'm calling the use effect and, of course, if I'll check my events and if I'll refresh,", 'start': 18835.282, 'duration': 8.208}, {'end': 18846.933, 'text': "I'll have a bunch of event listeners as well.", 'start': 18843.49, 'duration': 3.443}, {'end': 18851.518, 'text': 'And this is where the cleanup function come into play.', 'start': 18847.534, 'duration': 3.984}, {'end': 18859.858, 'text': 'So every time we have this use effect, we also have an option of returning a function.', 'start': 18852.153, 'duration': 7.705}, {'end': 18861.959, 'text': 'So we go here with return.', 'start': 18860.318, 'duration': 1.641}, {'end': 18870.725, 'text': 'And as far as the function, whatever we place over here will be invoked once we exit.', 'start': 18863.44, 'duration': 7.285}, {'end': 18877.209, 'text': "And I think the best way to showcase that is adding another console log I'll say clean up here.", 'start': 18871.285, 'duration': 5.924}, {'end': 18880.39, 'text': "And let's set up a remove event listener.", 'start': 18877.949, 'duration': 2.441}, {'end': 18884.432, 'text': "So we'll go with window and remove event listener.", 'start': 18880.79, 'duration': 3.642}, {'end': 18889.874, 'text': 'Again, we need to set up a resize and the same callback function.', 'start': 18884.932, 'duration': 4.942}, {'end': 18895.856, 'text': 'So we would want to remove once essentially, we are done.', 'start': 18890.434, 'duration': 5.422}, {'end': 18899.398, 'text': "And what you'll notice right now is something really interesting.", 'start': 18896.517, 'duration': 2.881}, {'end': 18904.161, 'text': 'where we call the hello world course of that is initial render.', 'start': 18899.978, 'duration': 4.183}, {'end': 18911.747, 'text': "But what you'll notice before we do anything, so before we set up another event.", 'start': 18904.722, 'duration': 7.025}, {'end': 18916.671, 'text': 'listener. because notice, this is happening as I keep changing the screen size.', 'start': 18911.747, 'duration': 4.924}, {'end': 18919.994, 'text': 'Then we also call the cleanup function.', 'start': 18917.251, 'duration': 2.743}, {'end': 18925.258, 'text': 'So I think the best case scenario is going to be adding your console log.', 'start': 18920.634, 'duration': 4.624}, {'end': 18935.927, 'text': "And I'll say a render, then in here, we'll call this use effect, use an effect, and then we'll have our cleanup.", 'start': 18925.838, 'duration': 10.089}, {'end': 18937.088, 'text': "You'll notice how it works.", 'start': 18936.047, 'duration': 1.041}, {'end': 18943.133, 'text': 'So initially, we have the render correct, then we call the use effect.', 'start': 18937.568, 'duration': 5.565}, {'end': 18950.476, 'text': "Now, before we call the use effect one more time, we'll also clean up.", 'start': 18943.593, 'duration': 6.883}, {'end': 18960.081, 'text': "So we have our initial render, again, don't pay attention, then there's two of them, there is initial render, then we invoke the use effect.", 'start': 18951.177, 'duration': 8.904}, {'end': 18968.445, 'text': 'And then again, once we trigger rerender, once we render the component one more time before we call that use effect.', 'start': 18960.621, 'duration': 7.824}], 'summary': 'Setting up a vent listener on the window using useeffect to avoid memory leaks and triggering the rerender.', 'duration': 366.64, 'max_score': 18601.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW418601805.jpg'}, {'end': 18736.345, 'src': 'embed', 'start': 18711.027, 'weight': 4, 'content': [{'end': 18715.87, 'text': "Because again, we have the event listener, we're getting the values, and everything is beautiful.", 'start': 18711.027, 'duration': 4.843}, {'end': 18719.473, 'text': 'Or let me throw you a mine grenade.', 'start': 18716.671, 'duration': 2.802}, {'end': 18725.077, 'text': "What if we will go to elements, then we'll check event listeners.", 'start': 18720.173, 'duration': 4.904}, {'end': 18728.059, 'text': "And then we'll check for the resize one.", 'start': 18725.858, 'duration': 2.201}, {'end': 18732.723, 'text': "Now what do you think how many will have there? we shouldn't have one correct.", 'start': 18728.64, 'duration': 4.083}, {'end': 18736.345, 'text': "Now does that look like one? No, it doesn't.", 'start': 18733.443, 'duration': 2.902}], 'summary': 'Using event listener to check for resize event, expecting one but finding more.', 'duration': 25.318, 'max_score': 18711.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW418711027.jpg'}, {'end': 20061.805, 'src': 'heatmap', 'start': 19695.242, 'weight': 0.724, 'content': [{'end': 19699.504, 'text': "So again, we'll set up curly braces, we'll say users on a map.", 'start': 19695.242, 'duration': 4.262}, {'end': 19703.226, 'text': "So we're mapping over for each and every user.", 'start': 19699.804, 'duration': 3.422}, {'end': 19705.907, 'text': "Of course, I'll have my parameters.", 'start': 19703.866, 'duration': 2.041}, {'end': 19707.608, 'text': 'So call this user.', 'start': 19706.007, 'duration': 1.601}, {'end': 19712.19, 'text': "And as far as the return, I don't know, I'm gonna go with list item.", 'start': 19708.248, 'duration': 3.942}, {'end': 19717.132, 'text': "And you know what, I think I'll place this in the onward list.", 'start': 19713.05, 'duration': 4.082}, {'end': 19718.833, 'text': 'So let me fix this a little bit.', 'start': 19717.632, 'duration': 1.201}, {'end': 19720.754, 'text': "where I'll add the honor list.", 'start': 19719.033, 'duration': 1.721}, {'end': 19722.354, 'text': "Let's add a class name.", 'start': 19721.214, 'duration': 1.14}, {'end': 19727.256, 'text': 'By the way, this class is coming from the index jazz, it just adds a little bit of styling.', 'start': 19722.474, 'duration': 4.782}, {'end': 19732.118, 'text': "And then let's wrap our users in that on order list.", 'start': 19727.756, 'duration': 4.362}, {'end': 19736.7, 'text': "And then for each and every user, of course, like I said, I'm returning a list item.", 'start': 19732.478, 'duration': 4.222}, {'end': 19746.159, 'text': "Now user is an object and I'll right away set up my structuring where I'm looking for ID login, and then avatar, and then URL.", 'start': 19737.256, 'duration': 8.903}, {'end': 19750.4, 'text': 'Now, if you want to console log, if you want to see what is the user be my guest.', 'start': 19746.559, 'duration': 3.841}, {'end': 19754.301, 'text': "But in order to speed up everything, I'm won't do that.", 'start': 19750.96, 'duration': 3.341}, {'end': 19759.843, 'text': "Turn here, I'm going to say HTML URL, these are just the properties that are on the object.", 'start': 19754.782, 'duration': 5.061}, {'end': 19762.624, 'text': 'And that is coming from my user.', 'start': 19760.163, 'duration': 2.461}, {'end': 19769.947, 'text': 'And as far as the list item, remember, each and every time we had a list, we needed to pass this unique key.', 'start': 19763.184, 'duration': 6.763}, {'end': 19771.867, 'text': "And of course, this is what I'm doing over here.", 'start': 19770.307, 'duration': 1.56}, {'end': 19782.811, 'text': 'And then for the user, I would want to have the image as far as the source, it is equal to the avatar, and then underscore URL.', 'start': 19772.428, 'duration': 10.383}, {'end': 19789.554, 'text': "And then as far as the alternative, you know what, let's pass in the login, just so we have some reasonable value.", 'start': 19783.372, 'duration': 6.182}, {'end': 19792.216, 'text': "And then let's go with a dev.", 'start': 19790.154, 'duration': 2.062}, {'end': 19796.379, 'text': "So right next to our image, we're going to have a dev with a heading four.", 'start': 19792.496, 'duration': 3.883}, {'end': 19800.483, 'text': "And then let's place here to login, that is going to be my name.", 'start': 19796.98, 'duration': 3.503}, {'end': 19803.945, 'text': 'Once I save, it should look something like this.', 'start': 19801.063, 'duration': 2.882}, {'end': 19810.831, 'text': "And then right below it, let's add a link that just links back to a user profile.", 'start': 19804.506, 'duration': 6.325}, {'end': 19814.154, 'text': 'So here we will go with HTML URL.', 'start': 19811.371, 'duration': 2.783}, {'end': 19817.557, 'text': "And let's just type profile, like so.", 'start': 19814.794, 'duration': 2.763}, {'end': 19819.577, 'text': "And we're in good shape.", 'start': 19818.577, 'duration': 1}, {'end': 19827.439, 'text': "We're essentially within a matter of minutes, we set up a data fetching where we're looking for GitHub users.", 'start': 19820.098, 'duration': 7.341}, {'end': 19836.362, 'text': 'Again, the biggest takeaway would be the fact that if you have some kind of functionality within the function,', 'start': 19827.88, 'duration': 8.482}, {'end': 19844.424, 'text': "whether that is directly in a callback function or within one of the functions that you're calling within the callback function of the use effect,", 'start': 19836.362, 'duration': 8.062}, {'end': 19852.96, 'text': 'if you are triggering re render, make sure that you have the dependency array.', 'start': 19844.424, 'duration': 8.536}, {'end': 19863.832, 'text': 'So our either you only run it once they come on renders, or if certain values change, but be very, very careful of how you set this up.', 'start': 19853.52, 'duration': 10.312}, {'end': 19869.435, 'text': "Essentially, if you will fail to do that, then you'll get the infinite loop.", 'start': 19864.673, 'duration': 4.762}, {'end': 19872.836, 'text': "Again, I keep on repeating it's not the end of the world,", 'start': 19870.035, 'duration': 2.801}, {'end': 19883.44, 'text': "but it might just get annoying to keep on restarting your browser just because you're not checking when you are triggering the rerender.", 'start': 19872.836, 'duration': 10.604}, {'end': 19886.321, 'text': 'And of course, when the use effect runs.', 'start': 19883.9, 'duration': 2.421}, {'end': 19891.137, 'text': 'done on completing the use effect part of the tutorial.', 'start': 19887.194, 'duration': 3.943}, {'end': 19900.725, 'text': 'And before we jump over to the project and start practicing by building something useful, I would want to cover one more topic.', 'start': 19891.978, 'duration': 8.747}, {'end': 19906.129, 'text': 'And that is not going to be a hook or it is going to be a very important topic.', 'start': 19901.446, 'duration': 4.683}, {'end': 19908.932, 'text': 'And that is conditional rendering.', 'start': 19906.27, 'duration': 2.662}, {'end': 19920.324, 'text': 'essentially, what that means is that we will display different components or different content based on some condition.', 'start': 19909.512, 'duration': 10.812}, {'end': 19928.554, 'text': "And then once we cover this topic, yes, then we'll right away, jump over to project and practice it.", 'start': 19920.785, 'duration': 7.769}, {'end': 19933.357, 'text': "So let's start first by importing a specific file.", 'start': 19928.954, 'duration': 4.403}, {'end': 19941.802, 'text': "And you can probably already guess that we're looking for folder number three, name is conditional rendering, of course, we're working in setup.", 'start': 19934.297, 'duration': 7.505}, {'end': 19945.885, 'text': "And we're looking for this multiple returns file.", 'start': 19942.383, 'duration': 3.502}, {'end': 19950.048, 'text': "So here in the app, Jess, I'm going to go with import again.", 'start': 19946.425, 'duration': 3.623}, {'end': 19952.389, 'text': "I'll call this setup from online.", 'start': 19950.048, 'duration': 2.341}, {'end': 19953.69, 'text': "we're looking for tutorial.", 'start': 19952.389, 'duration': 1.301}, {'end': 19962.377, 'text': "we're looking for conditional rendering and setup, of course, and finally the multiple returns file.", 'start': 19953.69, 'duration': 8.687}, {'end': 19966.419, 'text': "And here, let's render our setup component.", 'start': 19962.997, 'duration': 3.422}, {'end': 19968.221, 'text': "And let's see what we've got.", 'start': 19967.1, 'duration': 1.121}, {'end': 19972.584, 'text': 'And you should see on the screen simple multiple returns.', 'start': 19968.781, 'duration': 3.803}, {'end': 19981.239, 'text': 'So what is happening over here, Well, if you take a look at the component, you know that it is a function.', 'start': 19973.324, 'duration': 7.915}, {'end': 19987.024, 'text': 'Correct. Now, what can we do in a function as far as returns??', 'start': 19981.94, 'duration': 5.084}, {'end': 19990.627, 'text': 'Well, we can have no returns, of course.', 'start': 19987.845, 'duration': 2.782}, {'end': 19994.331, 'text': "that just means that we're returning on the fine, which will be an issue.", 'start': 19990.627, 'duration': 3.704}, {'end': 19999.115, 'text': "So if I'll comment this out, where you know that there's going to be a big fat issue.", 'start': 19994.731, 'duration': 4.384}, {'end': 20004.006, 'text': 'However, what it also means that we can have multiple returns.', 'start': 19999.215, 'duration': 4.791}, {'end': 20011.016, 'text': 'And based on some condition, I can, for example, return one piece of content.', 'start': 20005.448, 'duration': 5.568}, {'end': 20016.644, 'text': 'And if the condition is not met, then of course, I can return something else.', 'start': 20011.857, 'duration': 4.787}, {'end': 20029.227, 'text': 'So how is that going to look like? Well, I could simply say before the return, before the multiple returns, I can just return a hello world.', 'start': 20017.305, 'duration': 11.922}, {'end': 20032.588, 'text': 'Correct And everything is going to work nicely.', 'start': 20029.587, 'duration': 3.001}, {'end': 20033.828, 'text': 'I have Hello world.', 'start': 20032.988, 'duration': 0.84}, {'end': 20042.37, 'text': 'Why? Well, because in JavaScript, we know that once we have our first return, and of course, everything else is just ignored.', 'start': 20033.888, 'duration': 8.482}, {'end': 20048.474, 'text': "would be the basics are what we're looking for is some kind of condition.", 'start': 20043.29, 'duration': 5.184}, {'end': 20054.919, 'text': 'And of course, based on that condition, then we are returning some type of content.', 'start': 20048.975, 'duration': 5.944}, {'end': 20061.805, 'text': "So how is it going to look like? Well, on the most basic example, we're just going to go here with loading.", 'start': 20055.38, 'duration': 6.425}], 'summary': 'Setting up data fetching for github users and covering conditional rendering in react.', 'duration': 366.563, 'max_score': 19695.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW419695242.jpg'}, {'end': 19732.118, 'src': 'embed', 'start': 19703.866, 'weight': 2, 'content': [{'end': 19705.907, 'text': "Of course, I'll have my parameters.", 'start': 19703.866, 'duration': 2.041}, {'end': 19707.608, 'text': 'So call this user.', 'start': 19706.007, 'duration': 1.601}, {'end': 19712.19, 'text': "And as far as the return, I don't know, I'm gonna go with list item.", 'start': 19708.248, 'duration': 3.942}, {'end': 19717.132, 'text': "And you know what, I think I'll place this in the onward list.", 'start': 19713.05, 'duration': 4.082}, {'end': 19718.833, 'text': 'So let me fix this a little bit.', 'start': 19717.632, 'duration': 1.201}, {'end': 19720.754, 'text': "where I'll add the honor list.", 'start': 19719.033, 'duration': 1.721}, {'end': 19722.354, 'text': "Let's add a class name.", 'start': 19721.214, 'duration': 1.14}, {'end': 19727.256, 'text': 'By the way, this class is coming from the index jazz, it just adds a little bit of styling.', 'start': 19722.474, 'duration': 4.782}, {'end': 19732.118, 'text': "And then let's wrap our users in that on order list.", 'start': 19727.756, 'duration': 4.362}], 'summary': 'Parameters set, user called, return as list item, class added for styling.', 'duration': 28.252, 'max_score': 19703.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW419703866.jpg'}, {'end': 19844.424, 'src': 'embed', 'start': 19820.098, 'weight': 1, 'content': [{'end': 19827.439, 'text': "We're essentially within a matter of minutes, we set up a data fetching where we're looking for GitHub users.", 'start': 19820.098, 'duration': 7.341}, {'end': 19836.362, 'text': 'Again, the biggest takeaway would be the fact that if you have some kind of functionality within the function,', 'start': 19827.88, 'duration': 8.482}, {'end': 19844.424, 'text': "whether that is directly in a callback function or within one of the functions that you're calling within the callback function of the use effect,", 'start': 19836.362, 'duration': 8.062}], 'summary': 'Set up data fetching for github users within minutes.', 'duration': 24.326, 'max_score': 19820.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW419820098.jpg'}, {'end': 20033.828, 'src': 'embed', 'start': 20005.448, 'weight': 5, 'content': [{'end': 20011.016, 'text': 'And based on some condition, I can, for example, return one piece of content.', 'start': 20005.448, 'duration': 5.568}, {'end': 20016.644, 'text': 'And if the condition is not met, then of course, I can return something else.', 'start': 20011.857, 'duration': 4.787}, {'end': 20029.227, 'text': 'So how is that going to look like? Well, I could simply say before the return, before the multiple returns, I can just return a hello world.', 'start': 20017.305, 'duration': 11.922}, {'end': 20032.588, 'text': 'Correct And everything is going to work nicely.', 'start': 20029.587, 'duration': 3.001}, {'end': 20033.828, 'text': 'I have Hello world.', 'start': 20032.988, 'duration': 0.84}], 'summary': "Demonstrates conditional content return, including 'hello world'.", 'duration': 28.38, 'max_score': 20005.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW420005448.jpg'}, {'end': 20327.742, 'src': 'embed', 'start': 20300.947, 'weight': 0, 'content': [{'end': 20311.495, 'text': 'this is one of those common scenarios where a convention is to use this is if you have some kind of Boolean and then whatever name,', 'start': 20300.947, 'duration': 10.548}, {'end': 20313.156, 'text': "again there's no rule for it.", 'start': 20311.495, 'duration': 1.661}, {'end': 20316.637, 'text': 'is just something that you will see.', 'start': 20313.896, 'duration': 2.741}, {'end': 20325.021, 'text': 'I would say somewhat a lot more people just add this is and whatever is the name, and then of course we still have our set function.', 'start': 20316.637, 'duration': 8.384}, {'end': 20327.742, 'text': 'But again, it is just the naming convention.', 'start': 20325.581, 'duration': 2.161}], 'summary': "Naming convention for boolean variables is to use 'is' followed by the name. commonly used by many people.", 'duration': 26.795, 'max_score': 20300.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW420300947.jpg'}], 'start': 18555.459, 'title': 'React component management', 'summary': 'Explains setting up window resize event listener and accessing state value, discusses event listeners in react, demonstrates use effect function for side effects and data fetching, and addresses infinite loop issue in react component with conditional rendering, offering solutions. it also highlights the process of fetching and setting up github user data from the fetch api.', 'chapters': [{'end': 18634.306, 'start': 18555.459, 'title': 'Window resize event setup', 'summary': 'Explains the process of setting up a window resize event listener using the useeffect hook and accessing the state value to dynamically display the window size, with a focus on setting up the event listener and accessing the state value in react.', 'duration': 78.847, 'highlights': ['Setting up a window resize event listener using the useEffect hook and accessing the state value to dynamically display the window size.', 'Focus on setting up the event listener and accessing the state value in React.', 'Using a callback function within the useEffect hook to add an event listener for the resize event on the window.']}, {'end': 18851.518, 'start': 18634.547, 'title': 'Event listener and memory management', 'summary': 'Discusses the use of event listeners in react to update window size, the potential memory leaks caused by multiple event listeners, and the necessity of cleanup functions to remove event listeners after use.', 'duration': 216.971, 'highlights': ['The chapter explains the use of event listeners in React to update window size and trigger a rerender.', 'The chapter highlights the potential memory leaks caused by multiple event listeners and the necessity of cleanup functions to remove event listeners after use.', 'The chapter emphasizes the importance of cleanup functions in removing event listeners to avoid memory leaks and performance issues in React applications.']}, {'end': 19422.114, 'start': 18852.153, 'title': 'Understanding use effect and fetching data', 'summary': 'Explains the use of the use effect function in react to handle side effects, including event listeners and cleanup functions, and demonstrates how to fetch data using the use effect function, with a focus on creating a component to display github users fetched from an api, utilizing async/await syntax and the fetch api.', 'duration': 569.961, 'highlights': ['The chapter explains the use of the use effect function in React to handle side effects, including event listeners and cleanup functions.', 'Demonstrates how to fetch data using the use effect function, with a focus on creating a component to display GitHub users fetched from an API, utilizing async/await syntax and the fetch API.']}, {'end': 19602.136, 'start': 19422.595, 'title': 'Fetching and setting github user data', 'summary': 'Discusses using the fetch api to retrieve data from github.com, specifically 30 users, and the process of setting up and iterating over this data in jsx, while also highlighting the potential issue of triggering a rerender.', 'duration': 179.541, 'highlights': ['The fetch API is used to retrieve data from github.com, specifically 30 users, and then the data is set up and iterated over in JSX.', 'The potential issue of triggering a rerender is highlighted, as the use state preserves the value and triggers a rerender after every render.', 'The process of setting up and iterating over the retrieved user data in JSX is explained, including the use of set users and the structure of the user data.']}, {'end': 19796.379, 'start': 19602.796, 'title': 'Solving infinite loop in react component', 'summary': 'Discusses the issue of an infinite loop in a react component due to triggering rerender on user update, suggesting the solution by adding a dependency list and iterating over users with a map function to avoid the loop.', 'duration': 193.583, 'highlights': ['The chapter discusses the issue of an infinite loop in a React component.', 'Suggests the solution by adding a dependency list and iterating over users with a map function to avoid the loop.']}, {'end': 20377.132, 'start': 19796.98, 'title': 'Conditional rendering in react', 'summary': 'Covers setting up a data fetching for github users, emphasizing the importance of using a dependency array in the useeffect function to avoid infinite loops and then delves into the concept of conditional rendering, showcasing the ability to display different components based on certain conditions.', 'duration': 580.152, 'highlights': ['Setting up data fetching for GitHub users', 'Introduction to conditional rendering']}], 'duration': 1821.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW418555459.jpg', 'highlights': ['Using a callback function within the useEffect hook to add an event listener for the resize event on the window.', 'Demonstrates how to fetch data using the useEffect function, focusing on creating a component to display GitHub users fetched from an API.', 'The potential issue of triggering a rerender is highlighted, as the useState preserves the value and triggers a rerender after every render.', 'Suggests the solution by adding a dependency list and iterating over users with a map function to avoid the infinite loop in a React component.', 'The chapter emphasizes the importance of cleanup functions in removing event listeners to avoid memory leaks and performance issues in React applications.', 'The fetch API is used to retrieve data from github.com, specifically 30 users, and then the data is set up and iterated over in JSX.']}, {'end': 22178.371, 'segs': [{'end': 20460.658, 'src': 'embed', 'start': 20425.82, 'weight': 1, 'content': [{'end': 20430.321, 'text': "And again, I'll just skip a little bit by copying pasting.", 'start': 20425.82, 'duration': 4.501}, {'end': 20438.123, 'text': 'And now say there was an error or error, something rather nice, short and sweet.', 'start': 20430.801, 'duration': 7.322}, {'end': 20443.104, 'text': "So let's say that, of course, now we have loading one, because this is true, correct.", 'start': 20438.823, 'duration': 4.281}, {'end': 20446.045, 'text': 'And then as far as there, it is false to begin with.', 'start': 20443.604, 'duration': 2.441}, {'end': 20448.847, 'text': 'And then eventually, we have the default cache.', 'start': 20446.585, 'duration': 2.262}, {'end': 20460.658, 'text': "So if there is no loading, if there's no error, then of course, I would want to display my user, which simply will be a div same way.", 'start': 20449.508, 'duration': 11.15}], 'summary': 'The transcript discusses error handling and displaying user data based on certain conditions.', 'duration': 34.838, 'max_score': 20425.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW420425820.jpg'}, {'end': 20600.798, 'src': 'embed', 'start': 20573.389, 'weight': 4, 'content': [{'end': 20576.39, 'text': 'Because as far as the fetch, it has a gotcha.', 'start': 20573.389, 'duration': 3.001}, {'end': 20580.33, 'text': 'So now at the moment, we fetch everything we return JSON.', 'start': 20576.89, 'duration': 3.44}, {'end': 20588.573, 'text': "Beautiful Well, what are we doing after that? Well, in between, we'll set up another dot of time.", 'start': 20580.77, 'duration': 7.803}, {'end': 20591.174, 'text': 'So in here, we should have the user.', 'start': 20589.133, 'duration': 2.041}, {'end': 20599.317, 'text': "So let's set up our function again, user for time being, let's just log whether we're getting the user.", 'start': 20591.834, 'duration': 7.483}, {'end': 20600.798, 'text': "So let's save it here.", 'start': 20600.058, 'duration': 0.74}], 'summary': 'Setting up a function to fetch and return json data for the user.', 'duration': 27.409, 'max_score': 20573.389, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW420573389.jpg'}, {'end': 20692.738, 'src': 'embed', 'start': 20659.386, 'weight': 2, 'content': [{'end': 20661.127, 'text': "And then let's hide that loading.", 'start': 20659.386, 'duration': 1.741}, {'end': 20666.232, 'text': 'Now I already know that user will be here in the login.', 'start': 20661.667, 'duration': 4.565}, {'end': 20669.715, 'text': "That's what I would want to actually display.", 'start': 20667.253, 'duration': 2.462}, {'end': 20673.479, 'text': "So since the user is an object, I'll just say const.", 'start': 20670.296, 'duration': 3.183}, {'end': 20677.723, 'text': "And I'll be looking for the login that is coming from the user.", 'start': 20674.139, 'duration': 3.584}, {'end': 20679.605, 'text': 'And then I have two functions.', 'start': 20678.283, 'duration': 1.322}, {'end': 20684.79, 'text': 'I have set user, and then I have set is loading.', 'start': 20680.445, 'duration': 4.345}, {'end': 20692.738, 'text': 'So since my initial loading is true, since it is showing now, of course, once I have the user, then I would want to hide.', 'start': 20685.35, 'duration': 7.388}], 'summary': 'Code sets user object and hides loading', 'duration': 33.352, 'max_score': 20659.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW420659386.jpg'}, {'end': 22003.909, 'src': 'embed', 'start': 21978.327, 'weight': 0, 'content': [{'end': 21983.071, 'text': "How the first time I click it, it's going to check all right, what is the value it is false.", 'start': 21978.327, 'duration': 4.744}, {'end': 21988.456, 'text': 'So let me flip is error to true, because that is going to be opposite.', 'start': 21983.531, 'duration': 4.925}, {'end': 21994.021, 'text': "And of course, the next time when it is already true, then again, we're on the same function.", 'start': 21988.916, 'duration': 5.105}, {'end': 21996.423, 'text': 'So now of course, it will change it back to false.', 'start': 21994.041, 'duration': 2.382}, {'end': 21999.426, 'text': 'So initially, we set up a toggle state.', 'start': 21996.903, 'duration': 2.523}, {'end': 22003.909, 'text': "where the moment I click notice, now I'm displaying the error.", 'start': 22000.026, 'duration': 3.883}], 'summary': 'Toggling error state based on user click.', 'duration': 25.582, 'max_score': 21978.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW421978327.jpg'}], 'start': 20377.853, 'title': 'React fetch requests, conditional rendering, and short circuit evaluation', 'summary': 'Covers implementing fetch requests using useeffect in react, including conditional rendering based on loading and error states, and showcasing short circuit evaluation for conditional rendering and dynamic state toggling, emphasizing the importance of useeffect and logical operators.', 'chapters': [{'end': 20475.531, 'start': 20377.853, 'title': 'React fetch request and conditional rendering', 'summary': 'Covers the implementation of a fetch request using useeffect in react, including conditional rendering based on loading and error states, and displaying user data. it emphasizes the importance of useeffect and showcases conditional rendering for loading, error, and user data.', 'duration': 97.678, 'highlights': ['The chapter showcases conditional rendering for loading, error, and user data, emphasizing the importance of useEffect in React.', 'The implementation covers handling loading and error states while fetching data, with a demonstration of conditional rendering based on these states.', 'The chapter emphasizes the use of useEffect for making fetch requests and demonstrates conditional rendering for loading, error, and user data in React.']}, {'end': 21109, 'start': 20476.192, 'title': 'React fetch request and loading state', 'summary': 'Covers setting up a fetch request in a useeffect hook to control loading state, handling errors, and dynamically changing state based on fetch responses, showcasing multiple ways to achieve the same functionality.', 'duration': 632.808, 'highlights': ['Setting up a fetch request in a useEffect hook to control loading state', 'Handling errors and dynamically changing state based on fetch responses', 'Showcasing multiple ways to achieve the same functionality']}, {'end': 21382.958, 'start': 21109.401, 'title': 'React short circuit evaluation', 'summary': 'Covers the concept of short circuit evaluation in react, explaining its importance in conditional rendering and handling expressions, with an emphasis on utilizing the short circuit and ternary operators for conditional display.', 'duration': 273.557, 'highlights': ['The importance of short circuit evaluation in React is highlighted, emphasizing its role in handling expressions and enabling conditional rendering, with a focus on utilizing the short circuit and ternary operators for conditional display.', "Demonstration of short circuit evaluation using the 'or' and 'and' operators in JavaScript, showcasing how it handles falsey values and returns the appropriate value based on the evaluation."]}, {'end': 21652.145, 'start': 21383.358, 'title': 'Logical operators in jsx', 'summary': 'Discusses the usage of logical operators (and and or) in jsx to control the rendering of components based on the truthiness of values, exemplifying with a scenario involving the display of default values and the conditional rendering of components.', 'duration': 268.787, 'highlights': ['The chapter explains the usage of OR operator in JSX to return a default value if the original value is falsy.', 'The chapter demonstrates the use of the AND operator in JSX to conditionally render components based on the truthiness of values.', 'The chapter highlights the importance of understanding logical operators for setting up expressions in JSX.']}, {'end': 22178.371, 'start': 21652.525, 'title': 'React short circuit evaluation', 'summary': "Explains the implementation of short circuit evaluation in react, including the use of 'or' and 'and' operators, as well as the application of the ternary operator for conditional rendering and dynamic state toggling.", 'duration': 525.846, 'highlights': ["The chapter explains the implementation of short circuit evaluation in React, including the use of 'or' and 'and' operators.", 'The application of the ternary operator for conditional rendering and dynamic state toggling is demonstrated.', "The process of toggling state dynamically using a button and the 'set' function is described."]}], 'duration': 1800.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW420377853.jpg', 'highlights': ['The chapter emphasizes the use of useEffect for making fetch requests and demonstrates conditional rendering for loading, error, and user data in React.', 'The importance of short circuit evaluation in React is highlighted, emphasizing its role in handling expressions and enabling conditional rendering, with a focus on utilizing the short circuit and ternary operators for conditional display.', 'Setting up a fetch request in a useEffect hook to control loading state', 'Handling errors and dynamically changing state based on fetch responses', 'The application of the ternary operator for conditional rendering and dynamic state toggling is demonstrated']}, {'end': 24354.414, 'segs': [{'end': 22275.36, 'src': 'embed', 'start': 22250.553, 'weight': 10, 'content': [{'end': 22256.335, 'text': "So first, I'll have my error, we already covered that, because that is, of course, our and operator.", 'start': 22250.553, 'duration': 5.782}, {'end': 22260.476, 'text': 'But then I have my paragraph with there is a error.', 'start': 22256.795, 'duration': 3.681}, {'end': 22269.538, 'text': 'So those are the ways how we can display elements or components conditionally in react.', 'start': 22261.136, 'duration': 8.402}, {'end': 22275.36, 'text': "Because please keep in mind, we cannot use if because if doesn't return the value.", 'start': 22269.898, 'duration': 5.462}], 'summary': "Ways to display elements conditionally in react; avoid using if as it doesn't return value.", 'duration': 24.807, 'max_score': 22250.553, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW422250553.jpg'}, {'end': 22520.214, 'src': 'embed', 'start': 22492.748, 'weight': 0, 'content': [{'end': 22497.453, 'text': 'And of course, I do need to be a bit more specific here, where it is a component.', 'start': 22492.748, 'duration': 4.705}, {'end': 22499.895, 'text': 'And of course, it is hidden by default.', 'start': 22497.893, 'duration': 2.002}, {'end': 22502.138, 'text': 'But the moment we click, check it out.', 'start': 22500.076, 'duration': 2.062}, {'end': 22505.281, 'text': 'Now I have window and size.', 'start': 22502.718, 'duration': 2.563}, {'end': 22509.325, 'text': "So as you can see, now I'm toggling the component.", 'start': 22505.721, 'duration': 3.604}, {'end': 22513.511, 'text': 'correct It is important because of two reasons.', 'start': 22510.029, 'duration': 3.482}, {'end': 22520.214, 'text': "First, the fact that we're not limited to just HTML elements, like we had in a previous example.", 'start': 22513.591, 'duration': 6.623}], 'summary': 'Toggling component size visible on click, not limited to html elements.', 'duration': 27.466, 'max_score': 22492.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW422492748.jpg'}, {'end': 23573.025, 'src': 'embed', 'start': 23548.262, 'weight': 5, 'content': [{'end': 23555.808, 'text': "And since it is an empty string, that's why you can type all day long, and nothing won't change in the form.", 'start': 23548.262, 'duration': 7.546}, {'end': 23560.513, 'text': "With that said, now let's set up our on change handler.", 'start': 23556.109, 'duration': 4.404}, {'end': 23562.635, 'text': 'So we go here with on change.', 'start': 23560.993, 'duration': 1.642}, {'end': 23573.025, 'text': 'And again, we can set up a reference, meaning we can set up a separate function, and just reference it, or we can set up the inline one.', 'start': 23563.235, 'duration': 9.79}], 'summary': 'Empty string causes unchanging form; setting up on change handler.', 'duration': 24.763, 'max_score': 23548.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW423548262.jpg'}, {'end': 23704.158, 'src': 'embed', 'start': 23678.692, 'weight': 2, 'content': [{'end': 23688.385, 'text': 'because we have connected our form each and every time I type something in the form, the on change function fires.', 'start': 23678.692, 'duration': 9.693}, {'end': 23694.974, 'text': "And then within that function, I have set first name, and then I'm controlling the state.", 'start': 23688.966, 'duration': 6.008}, {'end': 23698.616, 'text': "Now, in turn, I'm also controlling the input.", 'start': 23695.775, 'duration': 2.841}, {'end': 23704.158, 'text': 'Remember, when it was just empty string, while we could type all day long, and nothing was changing in the input.', 'start': 23698.656, 'duration': 5.502}], 'summary': 'Form on-change function fires with controlled input and state.', 'duration': 25.466, 'max_score': 23678.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW423678692.jpg'}, {'end': 23974.516, 'src': 'embed', 'start': 23945.941, 'weight': 8, 'content': [{'end': 23952.905, 'text': 'Now, what is the next step? Well, once I submit the form, I can see that I can grab these values.', 'start': 23945.941, 'duration': 6.964}, {'end': 23963.75, 'text': "So wouldn't it make sense that once we submit the form, I would want to add that new person that I'm creating to my people.", 'start': 23953.425, 'duration': 10.325}, {'end': 23964.37, 'text': 'All right.', 'start': 23964.13, 'duration': 0.24}, {'end': 23966.051, 'text': 'I think that would make sense.', 'start': 23965.07, 'duration': 0.981}, {'end': 23974.516, 'text': "Now, before we do anything, though, let's think about it, do we want to have the functionality where once we click, we can also submit the form.", 'start': 23966.611, 'duration': 7.905}], 'summary': 'After submitting the form, consider adding the new person to the database and adding functionality to submit the form upon clicking.', 'duration': 28.575, 'max_score': 23945.941, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW423945941.jpg'}, {'end': 24014.667, 'src': 'embed', 'start': 23990.006, 'weight': 4, 'content': [{'end': 23996.952, 'text': "So essentially, if I would want to set up some kind of functionality where I'm adding this to a people array, I can definitely do that.", 'start': 23990.006, 'duration': 6.946}, {'end': 24004.92, 'text': "So that's why I'll right away set up the condition where I'm only going to submit before,", 'start': 23997.473, 'duration': 7.447}, {'end': 24014.667, 'text': "meaning I'm only going to add my item to the array if both of the values are true, because we already know that empty string is falsely value.", 'start': 24004.92, 'duration': 9.747}], 'summary': 'Setting up functionality to add item to array based on conditions.', 'duration': 24.661, 'max_score': 23990.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW423990006.jpg'}, {'end': 24239.151, 'src': 'embed', 'start': 24182.737, 'weight': 1, 'content': [{'end': 24187.18, 'text': 'Now next, I would want to add this new person to my array.', 'start': 24182.737, 'duration': 4.443}, {'end': 24198.568, 'text': 'Correct How do we do that? Well, we go with set people And just so we can keep on practicing on a function setup as well.', 'start': 24187.74, 'duration': 10.828}, {'end': 24203.552, 'text': 'Remember, that was my old people or current people or whatever.', 'start': 24199.109, 'duration': 4.443}, {'end': 24213.12, 'text': "So I will call this same thing, the people just remember that we're talking about the current value in the state.", 'start': 24204.173, 'duration': 8.947}, {'end': 24218.466, 'text': 'And then what I would want to return for from this function is dot dot dot.', 'start': 24213.921, 'duration': 4.545}, {'end': 24224.495, 'text': "So whatever we have as far as the values in the array, so we're using the spread operator.", 'start': 24218.987, 'duration': 5.508}, {'end': 24231.185, 'text': "And then of course, I'm returning a new array, however, I would want to add that person object as well.", 'start': 24224.956, 'duration': 6.229}, {'end': 24239.151, 'text': 'Again, I know I said this 20, 000 times, but we also have an option of just passing this directly in set people.', 'start': 24231.946, 'duration': 7.205}], 'summary': 'Add new person to array using spread operator and set function.', 'duration': 56.414, 'max_score': 24182.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW424182737.jpg'}], 'start': 22178.911, 'title': 'React component toggling & controlled inputs', 'summary': 'Covers conditional rendering, toggling components, setting up event listeners, controlled inputs, and adding new items to an array in react, emphasizing the use of cleanup functions and es6 shorthand syntax with the goal of updating the state and preventing performance issues.', 'chapters': [{'end': 22406.685, 'start': 22178.911, 'title': 'Conditional rendering in react', 'summary': 'Covers conditional rendering in react, including the use of ternary operator and short circuit operator, with an example of toggling a component and the importance of cleanup function, emphasizing the need for cleanup function and its usage in conditional rendering.', 'duration': 227.774, 'highlights': ['The chapter covers conditional rendering in React', 'including the use of ternary operator and short circuit operator', 'with an example of toggling a component', 'and the importance of cleanup function, emphasizing the need for cleanup function and its usage in conditional rendering']}, {'end': 22785.155, 'start': 22407.145, 'title': 'React component toggle & event listeners', 'summary': 'Covers toggling a react component based on a show/hide value, setting up event listeners for window resizing, and the importance of using cleanup functions to prevent multiple event listeners from being set up, which can lead to performance issues and unexpected behavior.', 'duration': 378.01, 'highlights': ['The importance of using cleanup functions for event listeners is emphasized due to the potential performance issues and unexpected behavior caused by setting up multiple event listeners.', "The transcript discusses toggling a React component based on a show/hide value and the implementation of conditional rendering using the 'if' statement.", "Setting up event listeners for window resizing using the 'resize' event and the use of the 'removeEventListener' function to clean up the event listener."]}, {'end': 23656.297, 'start': 22785.495, 'title': 'React component toggling and controlled inputs', 'summary': 'Covers the toggling of components in react using show and toggle, the importance of using cleanup function, and the setup of controlled inputs for forms with on change event listeners and use state values for updating the input fields.', 'duration': 870.802, 'highlights': ['The importance of using cleanup function', 'Setting up controlled inputs for forms', 'Toggling of components in React using show and toggle']}, {'end': 23945.481, 'start': 23656.838, 'title': 'Controlled inputs in react', 'summary': 'Discusses the implementation of controlled inputs in react, emphasizing the use of state values, on change event listeners, and event objects. it also demonstrates the process of adding dynamic items to a list.', 'duration': 288.643, 'highlights': ['The chapter discusses the implementation of controlled inputs in React', 'Emphasizes the use of state values, on change event listeners, and event objects', 'Demonstrates the process of adding dynamic items to a list']}, {'end': 24354.414, 'start': 23945.941, 'title': 'Adding new person to array', 'summary': 'Discusses adding a new person to an array, setting conditions for form submission, and using es6 shorthand syntax, with the goal of updating the state and displaying the added person in the array.', 'duration': 408.473, 'highlights': ['Setting conditions for form submission', 'Using ES6 shorthand syntax for object property assignment', 'Updating the state with the added person']}], 'duration': 2175.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW422178911.jpg', 'highlights': ['The chapter covers conditional rendering in React', 'The importance of using cleanup functions for event listeners is emphasized', 'Setting up controlled inputs for forms', 'The chapter discusses the implementation of controlled inputs in React', 'Setting conditions for form submission', 'Using ES6 shorthand syntax for object property assignment', 'Toggling of components in React using show and toggle', 'Demonstrates the process of adding dynamic items to a list', 'Including the use of ternary operator and short circuit operator', 'Emphasizes the use of state values, on change event listeners, and event objects', "Setting up event listeners for window resizing using the 'resize' event"]}, {'end': 26939.663, 'segs': [{'end': 24409.707, 'src': 'embed', 'start': 24380.363, 'weight': 2, 'content': [{'end': 24382.845, 'text': "Now, I'm not going to do that in this particular example.", 'start': 24380.363, 'duration': 2.482}, {'end': 24389.03, 'text': "But in general, you don't want to use index once you start adding and removing items to the list.", 'start': 24382.885, 'duration': 6.145}, {'end': 24395.175, 'text': 'So even though you are technically in this example, we might let it slide and then use the index.', 'start': 24389.07, 'duration': 6.105}, {'end': 24396.436, 'text': "I'm not going to do that.", 'start': 24395.656, 'duration': 0.78}, {'end': 24403.202, 'text': "I'll show you how we can quickly set up the unique key as far as when we're creating the person.", 'start': 24396.516, 'duration': 6.686}, {'end': 24405.183, 'text': "So for now, let's just go with div.", 'start': 24403.522, 'duration': 1.661}, {'end': 24409.707, 'text': 'And notice how we destructure the first name and email from the person.', 'start': 24405.964, 'duration': 3.743}], 'summary': 'Avoid using index when adding/removing list items. set up unique key when creating person.', 'duration': 29.344, 'max_score': 24380.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW424380363.jpg'}, {'end': 24537.493, 'src': 'embed', 'start': 24510.165, 'weight': 3, 'content': [{'end': 24514.346, 'text': "And we're going to go with get time to string, we invoke it.", 'start': 24510.165, 'duration': 4.181}, {'end': 24521.007, 'text': "And now what you'll notice that each and every time you create that person, there's going to be that unique ID.", 'start': 24514.866, 'duration': 6.141}, {'end': 24532.21, 'text': "So you fall console log the person in this case, and we're going to go with Susan, for example, Susan, and then Susan at gmail.com.", 'start': 24521.587, 'duration': 10.623}, {'end': 24532.93, 'text': 'Check it out.', 'start': 24532.43, 'duration': 0.5}, {'end': 24537.493, 'text': 'And once we have the person, there it is, now of course, we have the ID.', 'start': 24533.61, 'duration': 3.883}], 'summary': 'Creating a person with unique id and details like name and email.', 'duration': 27.328, 'max_score': 24510.165, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW424510165.jpg'}, {'end': 25118.993, 'src': 'embed', 'start': 25086.287, 'weight': 0, 'content': [{'end': 25095.416, 'text': 'So if I go here with const name, equal to event, target, name, copy and paste.', 'start': 25086.287, 'duration': 9.129}, {'end': 25102.002, 'text': 'And if we go here with a value, changes around again to event target.', 'start': 25096.157, 'duration': 5.845}, {'end': 25104.484, 'text': "So that is the input where we're typing.", 'start': 25102.442, 'duration': 2.042}, {'end': 25107.125, 'text': 'Same how we access value.', 'start': 25105.764, 'duration': 1.361}, {'end': 25113.209, 'text': 'In my previous case, remember in the controlled inputs, we use the value correct.', 'start': 25107.666, 'duration': 5.543}, {'end': 25118.993, 'text': 'When we were setting up the first name or the email, we use event target to access the input.', 'start': 25113.729, 'duration': 5.264}], 'summary': 'Using event.target to access input values for controlled inputs.', 'duration': 32.706, 'max_score': 25086.287, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW425086287.jpg'}, {'end': 25533.96, 'src': 'heatmap', 'start': 25164.179, 'weight': 0.767, 'content': [{'end': 25170.86, 'text': "Now, nothing is displayed right now in the input, because we haven't updated the person yet.", 'start': 25164.179, 'duration': 6.681}, {'end': 25177.401, 'text': "Meaning we're accessing, of course, the person that first night, and we're not doing anything with that person yet.", 'start': 25171.6, 'duration': 5.801}, {'end': 25179.462, 'text': "But don't worry, we'll do that in a second.", 'start': 25177.901, 'duration': 1.561}, {'end': 25186.003, 'text': 'But if we change to an email, beautiful, not ours, again, it gets me the name of the input.', 'start': 25179.842, 'duration': 6.161}, {'end': 25188.663, 'text': 'And it also gets me that current value.', 'start': 25186.423, 'duration': 2.24}, {'end': 25192.424, 'text': 'And the same, of course, is going to be with an edge.', 'start': 25189.543, 'duration': 2.881}, {'end': 25201.549, 'text': 'Now, why is that so cool? Well, because now once I know the name and the value, I can use the dynamic object properties.', 'start': 25193.084, 'duration': 8.465}, {'end': 25204.571, 'text': 'Again, this is coming from JavaScript.', 'start': 25202.01, 'duration': 2.561}, {'end': 25214.837, 'text': 'So please either utilize my JavaScript nugget series, or just Google dynamic properties, how you would set them up in JavaScript.', 'start': 25205.191, 'duration': 9.646}, {'end': 25217.879, 'text': 'So now I have the object, correct.', 'start': 25215.298, 'duration': 2.581}, {'end': 25220.721, 'text': 'And of course, the object is set person.', 'start': 25218.7, 'duration': 2.021}, {'end': 25226.305, 'text': 'So what I could do here is I could say, set person.', 'start': 25221.261, 'duration': 5.044}, {'end': 25230.348, 'text': 'And then remember, I need to copy the old values first.', 'start': 25226.986, 'duration': 3.362}, {'end': 25235.232, 'text': 'Because since it is an object, it has multiple properties.', 'start': 25231.149, 'duration': 4.083}, {'end': 25243.398, 'text': "As I'm updating one, for example, name, I don't want to remove or delete the email NIH.", 'start': 25235.973, 'duration': 7.425}, {'end': 25246, 'text': "That's why we first start by spread operator.", 'start': 25243.819, 'duration': 2.181}, {'end': 25250.242, 'text': 'dot dot dot, we copy the person from the state.', 'start': 25247.121, 'duration': 3.121}, {'end': 25252.183, 'text': 'And then we add a comma.', 'start': 25250.722, 'duration': 1.461}, {'end': 25258.105, 'text': 'And then after the comma, we would want to come up with whichever property we would want to update.', 'start': 25252.723, 'duration': 5.382}, {'end': 25262.866, 'text': "Now, of course, that is going to depend on which input we're typing in.", 'start': 25258.565, 'duration': 4.301}, {'end': 25273.01, 'text': 'Correct. And this is the case where we can do this dynamically, where I can say you know what, get me the name on that object,', 'start': 25263.166, 'duration': 9.844}, {'end': 25274.872, 'text': "because in here I'll pass in the value.", 'start': 25273.01, 'duration': 1.862}, {'end': 25281.018, 'text': 'Now, what were my values, it was either first name, it was either email, or it was age.', 'start': 25275.453, 'duration': 5.565}, {'end': 25288.025, 'text': "So now we'll dynamically update this property, equal to whatever value we have.", 'start': 25281.599, 'duration': 6.426}, {'end': 25295.352, 'text': "please keep in mind it's the same thing as you'd write over here first name and then it is equal to a value.", 'start': 25288.025, 'duration': 7.327}, {'end': 25299.934, 'text': 'Now the difference is that we are doing this dynamically, because we have three inputs.', 'start': 25295.752, 'duration': 4.182}, {'end': 25307.778, 'text': "So if I'll just leave this as a first name, you'll notice that each and every time I type something, it's actually is displayed over here,", 'start': 25300.334, 'duration': 7.444}, {'end': 25309.239, 'text': "which kind of doesn't make sense, right?", 'start': 25307.778, 'duration': 1.461}, {'end': 25314.001, 'text': "Why?. Well, because I'm not setting this dynamically.", 'start': 25309.639, 'duration': 4.362}, {'end': 25315.362, 'text': "I'm saying first name.", 'start': 25314.001, 'duration': 1.361}, {'end': 25323.825, 'text': 'where if I have access to the name, and of course, those names need to match to whatever I have in the object.', 'start': 25316.022, 'duration': 7.803}, {'end': 25332.208, 'text': "Now, each and every time I'll type in any of the inputs, I'll dynamically update that state value as well.", 'start': 25324.405, 'duration': 7.803}, {'end': 25334.548, 'text': "So that's why I need to go with that name.", 'start': 25332.648, 'duration': 1.9}, {'end': 25338.07, 'text': "And that's why we added the name right from the get go.", 'start': 25334.749, 'duration': 3.321}, {'end': 25340.07, 'text': "Now you're not going to use it all the time.", 'start': 25338.59, 'duration': 1.48}, {'end': 25349.155, 'text': "But there's going to be some use cases where it is very nifty to update whichever state value references the input.", 'start': 25340.09, 'duration': 9.065}, {'end': 25351.676, 'text': "So now again, let's navigate to a bigger screen.", 'start': 25349.595, 'duration': 2.081}, {'end': 25353.417, 'text': 'Notice I have my state.', 'start': 25352.076, 'duration': 1.341}, {'end': 25354.678, 'text': 'And now check it out.', 'start': 25353.897, 'duration': 0.781}, {'end': 25357.799, 'text': "Where I have the name, I'll start typing.", 'start': 25355.178, 'duration': 2.621}, {'end': 25364.082, 'text': "And there it is in my state in the person, right away, I'll access the first name.", 'start': 25358.299, 'duration': 5.783}, {'end': 25366.423, 'text': 'And of course, that it will be equal to a john.', 'start': 25364.602, 'duration': 1.821}, {'end': 25371.907, 'text': 'Now if I go with email, I go with john at gmail.com.', 'start': 25366.923, 'duration': 4.984}, {'end': 25375.05, 'text': 'And there it is now we have john gmail.com.', 'start': 25372.588, 'duration': 2.462}, {'end': 25379.213, 'text': 'And lastly, we have age of 24.', 'start': 25375.55, 'duration': 3.663}, {'end': 25383.777, 'text': 'So notice how nicely we updated all the values.', 'start': 25379.213, 'duration': 4.564}, {'end': 25388.741, 'text': "And now what's left to do is again, to submit the form.", 'start': 25384.278, 'duration': 4.463}, {'end': 25390.463, 'text': 'So we prevented default.', 'start': 25388.961, 'duration': 1.502}, {'end': 25396.546, 'text': "And now I would want to check if, and in this case, I'm checking for three things.", 'start': 25391.323, 'duration': 5.223}, {'end': 25402.207, 'text': 'So first name, and person, then dot email.', 'start': 25397.066, 'duration': 5.141}, {'end': 25405.128, 'text': 'And then last property, of course, was age.', 'start': 25402.947, 'duration': 2.181}, {'end': 25412.71, 'text': 'So I only would want to submit this form, if all three of them are more than just an empty string.', 'start': 25405.748, 'duration': 6.962}, {'end': 25418.691, 'text': "And then let's do the same thing where we are creating a new person.", 'start': 25413.37, 'duration': 5.321}, {'end': 25421.712, 'text': 'Correct So we go here with const.', 'start': 25419.111, 'duration': 2.601}, {'end': 25423.633, 'text': 'then new person.', 'start': 25422.472, 'duration': 1.161}, {'end': 25433.121, 'text': "And then as far as the value, I want to copy the person value from the state, this one, since this is what we're setting up as far as the input.", 'start': 25424.134, 'duration': 8.987}, {'end': 25435.844, 'text': 'And now I also want to add that ID.', 'start': 25433.502, 'duration': 2.342}, {'end': 25443.89, 'text': "So I'm going to go with ID is equal to a new date, and get time, get time invoked.", 'start': 25436.324, 'duration': 7.566}, {'end': 25447.754, 'text': 'And then we have to string invoked as well.', 'start': 25444.291, 'duration': 3.463}, {'end': 25453.821, 'text': "And lastly, let's just add person to a set people.", 'start': 25448.454, 'duration': 5.367}, {'end': 25456.985, 'text': "And then let's set up person back to an empty string.", 'start': 25454.282, 'duration': 2.703}, {'end': 25459.569, 'text': 'So we go with set people.', 'start': 25457.446, 'duration': 2.123}, {'end': 25461.551, 'text': 'That is my array, of course.', 'start': 25460.209, 'duration': 1.342}, {'end': 25470.463, 'text': "And like I said, previously, we use the function in this case, I'm just going to pass in your array, where I'll copy the values from the state.", 'start': 25462.032, 'duration': 8.431}, {'end': 25473.627, 'text': "And then I'll add that new version.", 'start': 25470.963, 'duration': 2.664}, {'end': 25481.617, 'text': "So we're just practicing in the previous example, where we used a function, we can also pass directly here to value.", 'start': 25474.087, 'duration': 7.53}, {'end': 25487.34, 'text': 'And then like I said, I also want to set person back to empty values.', 'start': 25482.117, 'duration': 5.223}, {'end': 25495.704, 'text': 'So we pass on the object, we say first name is equal to an empty string, then email is empty string.', 'start': 25487.54, 'duration': 8.164}, {'end': 25499.165, 'text': 'And then the age is empty string.', 'start': 25496.184, 'duration': 2.981}, {'end': 25506.969, 'text': "Now let's just set out on a bigger screen, where we go with Susan, then we're looking for Susan at gmail.com.", 'start': 25499.446, 'duration': 7.523}, {'end': 25510.871, 'text': 'And then the age will be 25.', 'start': 25507.589, 'duration': 3.282}, {'end': 25514.372, 'text': 'And the moment we add the person of errors, there is our Susan.', 'start': 25510.871, 'duration': 3.501}, {'end': 25520.835, 'text': 'Now, if you want, of course you can add also in the JSX that particular age.', 'start': 25514.833, 'duration': 6.002}, {'end': 25524.916, 'text': "if that's what you're shooting for, of course we're going to go here with age.", 'start': 25520.835, 'duration': 4.081}, {'end': 25530.318, 'text': "And then in the first name, instead of the first name, we're going to go with paragraph.", 'start': 25525.697, 'duration': 4.621}, {'end': 25533.96, 'text': "And let's just say age like so.", 'start': 25531.379, 'duration': 2.581}], 'summary': "Demonstrates dynamic updating of state values based on user input, with example values of 'john', 'john@gmail.com', and '24'.", 'duration': 369.781, 'max_score': 25164.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW425164179.jpg'}, {'end': 25702.689, 'src': 'embed', 'start': 25676.952, 'weight': 4, 'content': [{'end': 25683.537, 'text': 'Like I just mentioned, one of the most popular use cases is targeting the DOM element.', 'start': 25676.952, 'duration': 6.585}, {'end': 25693.483, 'text': 'just like all the other hooks, we import as a named import, or we use react and then dot, and then whatever the hook name.', 'start': 25683.997, 'duration': 9.486}, {'end': 25699.067, 'text': "Now I'll start with my return, because I simply would want to create a form.", 'start': 25694.043, 'duration': 5.024}, {'end': 25702.689, 'text': "So I'm going to go here with form element.", 'start': 25699.707, 'duration': 2.982}], 'summary': 'Popular use case: targeting dom element with hooks in react.', 'duration': 25.737, 'max_score': 25676.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW425676952.jpg'}], 'start': 24354.914, 'title': 'Setting up react state and form inputs', 'summary': 'Covers the importance of unique keys for list items in react, combining controlled inputs with list rendering and multiple inputs, setting up multiple values, handling form submission with useref, and setting up react components and state in a basic setup.', 'chapters': [{'end': 24509.144, 'start': 24354.914, 'title': 'React: setting unique keys for list items', 'summary': 'Explains the importance of setting unique keys for list items in react, demonstrating the use of unique ids and destructuring for creating and displaying a list of people, with a brief mention of the uuid npm package.', 'duration': 154.23, 'highlights': ['The importance of setting unique keys for list items in React is explained, emphasizing the need for something unique for the list and the potential issues with using index as the key.', 'The concept of destructuring is demonstrated while creating and displaying a list of people in React, showcasing the extraction of first name and email from the person object.', "A brief mention of the UUID npm package is made, highlighting its popularity for setting up unique IDs, with a suggestion to use it in place of the demonstrated 'cheat' of using new Date().getTime() as the unique ID."]}, {'end': 24900.283, 'start': 24510.165, 'title': 'Combining controlled inputs with list rendering and multiple inputs', 'summary': 'Demonstrates how to combine controlled inputs with list rendering and multiple inputs, emphasizing the use of unique ids, controlled form submission, and the use of a single state value and function for multiple inputs.', 'duration': 390.118, 'highlights': ['The chapter emphasizes the importance of using unique IDs when rendering a list of items, ensuring no console errors and enabling the tracking of individual items within the list.', 'The chapter showcases the process of combining controlled inputs with list rendering, enabling the addition of items to the list and the clear display of properties on the screen.', 'The chapter discusses the implementation of a single state value and function for handling multiple inputs, promoting efficient code management and ease of making changes in one place for all inputs.']}, {'end': 25730.548, 'start': 24900.768, 'title': 'Setting up multiple values', 'summary': 'Discusses setting up controlled inputs for a form, utilizing a single handle change function to dynamically update the state values for first name, email, and age, allowing for efficient management of multiple inputs and demonstrating the use of useref for uncontrolled inputs.', 'duration': 829.78, 'highlights': ['Setting up controlled inputs with a single handle change function', 'Demonstrating dynamic object property updates based on input name', 'Utilizing useRef for uncontrolled inputs']}, {'end': 26462.605, 'start': 25731.088, 'title': 'Handle submit with useref', 'summary': 'Discusses the usage of useref hook in handling form submission, focusing on input elements, accessing dom nodes, and the basics of the useref hook. it also introduces the usereducer hook for managing state in more complex setups.', 'duration': 731.517, 'highlights': ["The useRef hook is used to preserve the value between renders without triggering a rerender, and it's mostly used to target DOM nodes.", 'The useReducer hook adds more structure to the state, ensuring that state changes go through certain steps, making it useful for complex app setups and team collaboration.', 'The index.js file in a folder serves as the main entry, allowing for easy import without specifying the file name.']}, {'end': 26939.663, 'start': 26463.085, 'title': 'Setting up react components and state', 'summary': 'Covers setting up react components and state in a basic setup, including importing data, setting state values, handling form submission, and displaying lists of items.', 'duration': 476.578, 'highlights': ['Setting up React components and state in a basic setup', 'Handling form submission and setting state values', 'Displaying lists of items and updating state']}], 'duration': 2584.749, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW424354914.jpg', 'highlights': ['The useReducer hook adds more structure to the state, ensuring that state changes go through certain steps, making it useful for complex app setups and team collaboration.', "The useRef hook is used to preserve the value between renders without triggering a rerender, and it's mostly used to target DOM nodes.", 'The chapter emphasizes the importance of using unique IDs when rendering a list of items, ensuring no console errors and enabling the tracking of individual items within the list.', 'The importance of setting unique keys for list items in React is explained, emphasizing the need for something unique for the list and the potential issues with using index as the key.', 'The chapter discusses the implementation of a single state value and function for handling multiple inputs, promoting efficient code management and ease of making changes in one place for all inputs.']}, {'end': 30831.48, 'segs': [{'end': 26990.411, 'src': 'embed', 'start': 26940.424, 'weight': 0, 'content': [{'end': 26944.55, 'text': 'And once I refresh, it will also happen if I try to submit the empty value.', 'start': 26940.424, 'duration': 4.126}, {'end': 26949.216, 'text': 'So that would be a scenario if we use these state values.', 'start': 26944.89, 'duration': 4.326}, {'end': 26954.164, 'text': "And like I said, if you have a small application, there's nothing wrong with that.", 'start': 26949.717, 'duration': 4.447}, {'end': 26960.993, 'text': 'But as your app gets bigger, bigger, bigger, bigger, you would want to have some kind of structure.', 'start': 26954.704, 'duration': 6.289}, {'end': 26967.458, 'text': 'because notice here how we have no problems changing state values however we would like.', 'start': 26961.414, 'duration': 6.044}, {'end': 26972.701, 'text': "That's not usually a best use case if you have a big app.", 'start': 26968.658, 'duration': 4.043}, {'end': 26983.047, 'text': "And if you work as a team, you would want to have some kind of guardrails where you're only updating the state in a certain way.", 'start': 26972.921, 'duration': 10.126}, {'end': 26986.048, 'text': 'So that way everyone is on the same page.', 'start': 26983.347, 'duration': 2.701}, {'end': 26990.411, 'text': "This is exactly what we're going to do starting from that next video.", 'start': 26986.408, 'duration': 4.003}], 'summary': 'State management becomes crucial as app grows larger and team collaboration increases.', 'duration': 49.987, 'max_score': 26940.424, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW426940424.jpg'}, {'end': 28823.81, 'src': 'heatmap', 'start': 28448.371, 'weight': 1, 'content': [{'end': 28459.657, 'text': 'And the only thing that I would want to do as far as this functionality is again to return all the state values and then change is model to false.', 'start': 28448.371, 'duration': 11.286}, {'end': 28473.005, 'text': "we're going to go, if action and then type is equal, to close and then underscore model, then return again, copy all the previous state values state.", 'start': 28459.657, 'duration': 13.348}, {'end': 28478.193, 'text': "And let's go with is model open.", 'start': 28473.605, 'duration': 4.588}, {'end': 28481.316, 'text': "And let's set it equal to a false.", 'start': 28478.834, 'duration': 2.482}, {'end': 28485.739, 'text': 'Now the gotcha here is that I would want to call it in the model.', 'start': 28482.036, 'duration': 3.703}, {'end': 28489.582, 'text': 'I would want to call it after three seconds.', 'start': 28485.759, 'duration': 3.823}, {'end': 28497.469, 'text': 'So what I would want is to pass this close model as a prop down to a model.', 'start': 28490.503, 'duration': 6.966}, {'end': 28506.096, 'text': "So let's go with close model is equal to a close model, like so.", 'start': 28498.53, 'duration': 7.566}, {'end': 28509.758, 'text': 'And then once we do that in the model, of course, we can access it.', 'start': 28506.836, 'duration': 2.922}, {'end': 28514.12, 'text': "So I'm going to say here, close, close model.", 'start': 28510.238, 'duration': 3.882}, {'end': 28523.166, 'text': 'And in the model, I would want to set up a use effect, where like I just said, I want to close it after three seconds.', 'start': 28515.061, 'duration': 8.105}, {'end': 28525.067, 'text': "So let's go here with use effect.", 'start': 28523.746, 'duration': 1.321}, {'end': 28529.969, 'text': "And in our callback function, let's just set up a timeout.", 'start': 28525.967, 'duration': 4.002}, {'end': 28533.13, 'text': "And let's say we have a callback function.", 'start': 28530.829, 'duration': 2.301}, {'end': 28536.131, 'text': 'And I would want to go with close model here.', 'start': 28533.83, 'duration': 2.301}, {'end': 28540.093, 'text': 'And I would want to call it after three seconds.', 'start': 28536.832, 'duration': 3.261}, {'end': 28543.275, 'text': 'And that of course, is 3000 milliseconds.', 'start': 28540.653, 'duration': 2.622}, {'end': 28549.197, 'text': 'So once we type something, first of all, that item should be added, we added the item.', 'start': 28543.775, 'duration': 5.422}, {'end': 28552.919, 'text': 'But then after three seconds, notice how we dispatch.', 'start': 28549.577, 'duration': 3.342}, {'end': 28555.841, 'text': 'we dispatch this action of close model.', 'start': 28553.539, 'duration': 2.302}, {'end': 28563.768, 'text': 'And of course, model is and similarly, we could add here a button to our items.', 'start': 28556.281, 'duration': 7.487}, {'end': 28565.95, 'text': 'And then remove that item.', 'start': 28564.869, 'duration': 1.081}, {'end': 28568.472, 'text': 'If we click on that button.', 'start': 28566.69, 'duration': 1.782}, {'end': 28571.655, 'text': "And for that, of course, again, we'll have to dispatch an action.", 'start': 28568.792, 'duration': 2.863}, {'end': 28582.644, 'text': "And of course, we'll have to handle that action in the reducer, right below the heading for let's go with button, I'll set up on click right away.", 'start': 28572.155, 'duration': 10.489}, {'end': 28586.287, 'text': "And then in here, let's pass in our callback function.", 'start': 28583.625, 'duration': 2.662}, {'end': 28589.149, 'text': 'And I would want to dispatch an action.', 'start': 28586.947, 'duration': 2.202}, {'end': 28591.391, 'text': 'Now type will be remove item.', 'start': 28589.67, 'duration': 1.721}, {'end': 28596.495, 'text': 'So type, and then we go with remove underscore item.', 'start': 28591.911, 'duration': 4.584}, {'end': 28603.44, 'text': 'And then I would want to add the payload again, why? Well, because I need to be specific, which item I would want to remove.', 'start': 28596.956, 'duration': 6.484}, {'end': 28606.782, 'text': "Notice in this case, we're not passing that ID.", 'start': 28604.081, 'duration': 2.701}, {'end': 28610.025, 'text': 'Otherwise, how do I know which item I would need to remove.', 'start': 28607.203, 'duration': 2.822}, {'end': 28611.666, 'text': 'So again, we go with payload.', 'start': 28610.425, 'duration': 1.241}, {'end': 28617.89, 'text': 'And payload in this case, is going to be equal to that person, and then dot ID.', 'start': 28612.306, 'duration': 5.584}, {'end': 28622.433, 'text': 'So once we save, of course, we should be able to see that.', 'start': 28618.55, 'duration': 3.883}, {'end': 28623.393, 'text': 'And there it is.', 'start': 28622.853, 'duration': 0.54}, {'end': 28626.195, 'text': 'And by the way, should have added the item class.', 'start': 28623.453, 'duration': 2.742}, {'end': 28628.516, 'text': "First of all, it's gonna look a little bit better.", 'start': 28626.255, 'duration': 2.261}, {'end': 28634.44, 'text': 'And then also, I would want to add some kind of text here.', 'start': 28628.536, 'duration': 5.904}, {'end': 28636.101, 'text': "So let's say remove.", 'start': 28634.82, 'duration': 1.281}, {'end': 28638.463, 'text': 'And of course, let me try item.', 'start': 28637.102, 'duration': 1.361}, {'end': 28642.366, 'text': 'And then once we have there is our item.', 'start': 28640.444, 'duration': 1.922}, {'end': 28644.387, 'text': 'Now that is our model.', 'start': 28642.886, 'duration': 1.501}, {'end': 28646.75, 'text': 'Okay, it is hidden after three seconds.', 'start': 28644.407, 'duration': 2.343}, {'end': 28649.572, 'text': 'And now we want to handle that remove item.', 'start': 28647.25, 'duration': 2.322}, {'end': 28654.116, 'text': "So if I'll click right now, what do you think is gonna happen? Well, we're not handling that, right.", 'start': 28649.872, 'duration': 4.244}, {'end': 28656.138, 'text': 'So we should have this error.', 'start': 28654.496, 'duration': 1.642}, {'end': 28657.519, 'text': 'And this is awesome.', 'start': 28656.818, 'duration': 0.701}, {'end': 28665.023, 'text': "Because at least tells us, hey, listen, you are dispatching an action that you're not handling in the reducer.", 'start': 28657.979, 'duration': 7.044}, {'end': 28674.808, 'text': 'So I go with if action, and then dot type is equal to remove item, remove, remove item.', 'start': 28665.363, 'duration': 9.445}, {'end': 28682.632, 'text': "So within my condition, I'm going to come up with new variable new people, that is equal to state people.", 'start': 28675.308, 'duration': 7.324}, {'end': 28685.253, 'text': 'And I would want to use filter.', 'start': 28683.332, 'duration': 1.921}, {'end': 28690.636, 'text': "I'm going to access each and every item as far as the parameter of person.", 'start': 28686.414, 'duration': 4.222}, {'end': 28697.799, 'text': "And then I'll say person ID does not match to a action and payload.", 'start': 28691.336, 'duration': 6.463}, {'end': 28703.181, 'text': "So that is the case, then I wouldn't want to return this particular item.", 'start': 28698.159, 'duration': 5.022}, {'end': 28705.522, 'text': 'And now of course, I just need to return the state.', 'start': 28703.601, 'duration': 1.921}, {'end': 28709.804, 'text': 'So say here, return a new object.', 'start': 28706.363, 'duration': 3.441}, {'end': 28719.109, 'text': "So we'll go with dot dot dot and then state where we have the people that is going to be equal to a new people.", 'start': 28710.425, 'duration': 8.684}, {'end': 28721.13, 'text': 'All right, we save it.', 'start': 28719.349, 'duration': 1.781}, {'end': 28726.473, 'text': 'And what should happen once we click the button, the model shows up.', 'start': 28721.81, 'duration': 4.663}, {'end': 28728.294, 'text': 'for three seconds.', 'start': 28727.133, 'duration': 1.161}, {'end': 28731.296, 'text': 'And it says, Hey, please enter the value.', 'start': 28728.955, 'duration': 2.341}, {'end': 28740.364, 'text': 'Now, if we successfully add that item, example, say random item, then once we add it, it displays random item.', 'start': 28731.857, 'duration': 8.507}, {'end': 28742.726, 'text': 'And of course, we can remove it as well.', 'start': 28740.664, 'duration': 2.062}, {'end': 28748.51, 'text': "So that's how we can set up our state using user juicer.", 'start': 28743.486, 'duration': 5.024}, {'end': 28753.494, 'text': 'where notice how it adds way more structure.', 'start': 28749.571, 'duration': 3.923}, {'end': 28764.222, 'text': 'And last thing that I want to showcase is that normally, since reducers are going to have a lot of functionality, you do move them to a separate file.', 'start': 28754.275, 'duration': 9.947}, {'end': 28773.046, 'text': 'So in the setup, I would want you to create a reducer j s, then take everything as far as the function.', 'start': 28764.682, 'duration': 8.364}, {'end': 28777.268, 'text': 'So reducer, cut it out, like so.', 'start': 28773.807, 'duration': 3.461}, {'end': 28779.97, 'text': 'And then in the reducer copy and paste.', 'start': 28777.989, 'duration': 1.981}, {'end': 28785.172, 'text': 'Now, of course, we would want to export now if you want to export this as default, you can definitely do it.', 'start': 28780.47, 'duration': 4.702}, {'end': 28789.495, 'text': 'Marcus, I will export this as a named export.', 'start': 28785.653, 'duration': 3.842}, {'end': 28793.597, 'text': 'And here we go with import, then reduce.', 'start': 28790.075, 'duration': 3.522}, {'end': 28799.56, 'text': 'And then of course, we are importing this from the reducer.', 'start': 28794.337, 'duration': 5.223}, {'end': 28803.422, 'text': 'And now our functionality should still work.', 'start': 28800.18, 'duration': 3.242}, {'end': 28806.743, 'text': 'But I just need to make sure it is a reducer.', 'start': 28803.962, 'duration': 2.781}, {'end': 28813.166, 'text': 'And now of course, I can keep on working with my form, and everything will work.', 'start': 28808.544, 'duration': 4.622}, {'end': 28823.81, 'text': 'And now notice how much cleaner and more structured is our application, where we have the reducer that just deals with our data.', 'start': 28813.546, 'duration': 10.264}], 'summary': 'The functionality returns all state values and changes model to false after 3 seconds, dispatches actions to add and remove items in the model.', 'duration': 375.439, 'max_score': 28448.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW428448371.jpg'}, {'end': 29276.769, 'src': 'embed', 'start': 29248.33, 'weight': 3, 'content': [{'end': 29251.452, 'text': "And I'm returning a people map.", 'start': 29248.33, 'duration': 3.122}, {'end': 29254.375, 'text': "So a new array, we're iterating over people.", 'start': 29251.513, 'duration': 2.862}, {'end': 29262.442, 'text': 'And then for each and every item in my array, I return a single person component.', 'start': 29254.895, 'duration': 7.547}, {'end': 29265.603, 'text': 'And since there is less than need to pass in the key.', 'start': 29262.982, 'duration': 2.621}, {'end': 29272.967, 'text': "And then in this component, of course, I'm accessing the ID and name, which I'm not using at the moment.", 'start': 29266.564, 'duration': 6.403}, {'end': 29276.769, 'text': "And as far as the return, I'm returning a single item.", 'start': 29273.447, 'duration': 3.322}], 'summary': 'Iterating over people array to return a single person component.', 'duration': 28.439, 'max_score': 29248.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW429248330.jpg'}, {'end': 29607.018, 'src': 'embed', 'start': 29578.543, 'weight': 4, 'content': [{'end': 29591.668, 'text': 'And again, idea of prop drilling is following where list component technically does not does not need to have access to the remove person.', 'start': 29578.543, 'duration': 13.125}, {'end': 29601.454, 'text': 'But we have no other way to pass down our function into the single person, unless we actually pass it through the list.', 'start': 29591.848, 'duration': 9.606}, {'end': 29607.018, 'text': "That is something called prop drilling, because we need to understand that there's definitely could be more components.", 'start': 29601.494, 'duration': 5.524}], 'summary': 'Prop drilling is used to pass functions down through components.', 'duration': 28.475, 'max_score': 29578.543, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW429578543.jpg'}, {'end': 30273.936, 'src': 'heatmap', 'start': 29906.799, 'weight': 0.773, 'content': [{'end': 29914.124, 'text': "And what's even more cool, I can also use use context to access this value, whatever it is.", 'start': 29906.799, 'duration': 7.325}, {'end': 29921.086, 'text': 'And to showcase that, if I go to single person, I can simply say, cons.', 'start': 29915.605, 'duration': 5.481}, {'end': 29924.867, 'text': "And I know that there's going to be some kind of value.", 'start': 29921.866, 'duration': 3.001}, {'end': 29926.927, 'text': "So I'll call this data.", 'start': 29925.387, 'duration': 1.54}, {'end': 29930.188, 'text': "Right now, we'll refactor it a little bit later.", 'start': 29927.587, 'duration': 2.601}, {'end': 29932.988, 'text': "But for now, let's just say that it is data.", 'start': 29930.208, 'duration': 2.78}, {'end': 29936.729, 'text': "And then now let's use our use context hook.", 'start': 29933.708, 'duration': 3.021}, {'end': 29942.89, 'text': 'And inside the use context hook, we need to pass this context that we created.', 'start': 29937.509, 'duration': 5.381}, {'end': 29945.231, 'text': "So please don't mix the two.", 'start': 29943.57, 'duration': 1.661}, {'end': 29954.716, 'text': 'We have person, that context provider, that needs to wrap your whole component tree or later in different projects,', 'start': 29945.891, 'duration': 8.825}, {'end': 29956.297, 'text': 'it will wrap our whole application.', 'start': 29954.716, 'duration': 1.581}, {'end': 29958.458, 'text': 'Okay, that is important.', 'start': 29956.317, 'duration': 2.141}, {'end': 29959.539, 'text': 'Please keep that in mind.', 'start': 29958.599, 'duration': 0.94}, {'end': 29966.023, 'text': 'But when we talk about personal context, we need to pass in that context into the use context.', 'start': 29959.919, 'duration': 6.104}, {'end': 29967.844, 'text': "So don't mix and match.", 'start': 29966.663, 'duration': 1.181}, {'end': 29969.845, 'text': "Don't say personal context that provider here.", 'start': 29967.884, 'duration': 1.961}, {'end': 29976.25, 'text': "Now here we're looking for the person context, but we would want to wrap our component tree,", 'start': 29970.305, 'duration': 5.945}, {'end': 29981.254, 'text': 'or our whole application in the person context dot provider.', 'start': 29976.25, 'duration': 5.004}, {'end': 29987.699, 'text': 'Now, of course, I keep on all the time mentioning person context, whatever name you have over here for the context.', 'start': 29981.334, 'duration': 6.365}, {'end': 29989.921, 'text': 'okay, in my case that is person context.', 'start': 29987.699, 'duration': 2.222}, {'end': 29994.925, 'text': 'if you would have bananas context, then you would go to bananas context dot provider.', 'start': 29989.921, 'duration': 5.004}, {'end': 30002.016, 'text': "And what's really cool that if you log data, you'll notice something really, really interesting.", 'start': 29995.546, 'duration': 6.47}, {'end': 30005.339, 'text': 'Check it out in a console, I have Hello, hello, hello.', 'start': 30002.656, 'duration': 2.683}, {'end': 30016.449, 'text': "And isn't that awesome? Because what that means is that I have here person context provider, all the way down in my component tree.", 'start': 30006.48, 'duration': 9.969}, {'end': 30026.018, 'text': "And I can pass whatever values, regardless of how many levels deep, and I'll have access without this prop drilling.", 'start': 30017.009, 'duration': 9.009}, {'end': 30034.026, 'text': "So without passing it through the list, now you're probably saying, Okay, you just pass in a simple hello.", 'start': 30026.198, 'duration': 7.828}, {'end': 30035.408, 'text': "I mean, it's not a big deal.", 'start': 30034.447, 'duration': 0.961}, {'end': 30038.21, 'text': 'Yeah, but remember, we are using JSX.', 'start': 30035.928, 'duration': 2.282}, {'end': 30047.378, 'text': "Correct So why don't we pass in the object, again, we have first curly braces, which just means that we're going back to JavaScript land.", 'start': 30038.29, 'duration': 9.088}, {'end': 30055.164, 'text': "And here, I'm just saying object, again, this is not some secret JSX syntax, where we have double curlies.", 'start': 30047.398, 'duration': 7.766}, {'end': 30057.947, 'text': "It just simply means, yeah, I'm going back to JavaScript.", 'start': 30055.605, 'duration': 2.342}, {'end': 30059.989, 'text': 'And in here, I would want to have an object.', 'start': 30058.267, 'duration': 1.722}, {'end': 30065.931, 'text': 'Now, what do I really want in that object? Well, I would want to remove person, correct.', 'start': 30060.629, 'duration': 5.302}, {'end': 30068.872, 'text': "So here's what I can do and say remove person.", 'start': 30066.491, 'duration': 2.381}, {'end': 30071.793, 'text': 'And now, of course, I need to scroll down.', 'start': 30069.552, 'duration': 2.241}, {'end': 30074.394, 'text': 'I know that this is going to be an object.', 'start': 30072.813, 'duration': 1.581}, {'end': 30076.134, 'text': 'So I can right away destructure it.', 'start': 30074.574, 'duration': 1.56}, {'end': 30079.195, 'text': 'And I can say, remove person.', 'start': 30076.574, 'duration': 2.621}, {'end': 30084.078, 'text': "And now you'll notice that our functionality still works.", 'start': 30079.856, 'duration': 4.222}, {'end': 30090.961, 'text': 'Now of course, is going to be a big fat massive complaint, because the name is exactly the same.', 'start': 30084.678, 'duration': 6.283}, {'end': 30098.466, 'text': "So now what I would want is to return or to remove all these instances, I don't need it over here.", 'start': 30091.421, 'duration': 7.045}, {'end': 30101.228, 'text': "I also don't need it over here.", 'start': 30098.486, 'duration': 2.742}, {'end': 30107.774, 'text': "Correct Lastly, I don't need it, where I'm setting up my list.", 'start': 30102.109, 'duration': 5.665}, {'end': 30110.037, 'text': 'So I can remove all of them.', 'start': 30108.335, 'duration': 1.702}, {'end': 30114.761, 'text': 'Now of course, data is the same name like I have as far as the import.', 'start': 30110.057, 'duration': 4.704}, {'end': 30116.202, 'text': 'So now let me remove it.', 'start': 30115.181, 'duration': 1.021}, {'end': 30120.665, 'text': 'And there is now my functionality still works.', 'start': 30117.163, 'duration': 3.502}, {'end': 30125.767, 'text': 'But I was able to go around that list.', 'start': 30121.365, 'duration': 4.402}, {'end': 30135.831, 'text': 'So if I would have two or three more components that are inside the single person, I would be still able to do it.', 'start': 30126.627, 'duration': 9.204}, {'end': 30138.012, 'text': 'So we set this up in a route.', 'start': 30136.391, 'duration': 1.621}, {'end': 30148.62, 'text': 'And then whatever is set up inside here, all those components will have access to whatever we pass it down into the value.', 'start': 30138.473, 'duration': 10.147}, {'end': 30151.321, 'text': 'In this case, of course, it was just remove person.', 'start': 30149.06, 'duration': 2.261}, {'end': 30156.185, 'text': "But keep in mind that since you're setting up the object, you can do pretty much anything.", 'start': 30151.862, 'duration': 4.323}, {'end': 30162.169, 'text': 'And similarly, you can argue, well, we can also maybe omit the people.', 'start': 30157.045, 'duration': 5.124}, {'end': 30167.152, 'text': "And you're right, because I can pass here, the value of people.", 'start': 30162.709, 'duration': 4.443}, {'end': 30173.135, 'text': 'So the state value, and then I can access it where, well, in my list, right.', 'start': 30167.912, 'duration': 5.223}, {'end': 30178.479, 'text': "So now I don't need to pass it through the component as a prop.", 'start': 30173.576, 'duration': 4.903}, {'end': 30183.544, 'text': 'I can simply say that I want to access it using the use context.', 'start': 30179.139, 'duration': 4.405}, {'end': 30187.107, 'text': "Now, in order to speed this up, I'm just gonna copy and paste.", 'start': 30184.044, 'duration': 3.063}, {'end': 30189.75, 'text': 'And then notice we have the remote person.', 'start': 30187.748, 'duration': 2.002}, {'end': 30193.453, 'text': 'Now in this case, I will showcase that it is an object.', 'start': 30190.17, 'duration': 3.283}, {'end': 30197.157, 'text': 'So let me call this main data.', 'start': 30193.734, 'duration': 3.423}, {'end': 30198.838, 'text': 'something like that.', 'start': 30198.158, 'duration': 0.68}, {'end': 30205.761, 'text': "And if you'll console log, you'll see that, of course, main data will be my object.", 'start': 30199.499, 'duration': 6.262}, {'end': 30209.962, 'text': "Now, it's going to complain that people is not defined.", 'start': 30206.041, 'duration': 3.921}, {'end': 30216.044, 'text': 'Because of course, now we will need to access that main data, and then dot people.', 'start': 30209.982, 'duration': 6.062}, {'end': 30217.745, 'text': 'Now, of course, everything works.', 'start': 30216.504, 'duration': 1.241}, {'end': 30223.348, 'text': 'Now the reason why I set up a separate variable, because I want you to understand that in this case,', 'start': 30218.225, 'duration': 5.123}, {'end': 30228.994, 'text': "we right away destructured the remove person from the object that we're getting back.", 'start': 30223.348, 'duration': 5.646}, {'end': 30234.339, 'text': "In this case, I'm just showcasing that, of course, we're accessing the object and you don't have to destructure.", 'start': 30229.514, 'duration': 4.825}, {'end': 30236.301, 'text': 'If you want to do it this way, you can do it this way.', 'start': 30234.359, 'duration': 1.942}, {'end': 30243.126, 'text': "whatever is the name of the object, whatever you're getting back, and then whichever property or method you want to choose.", 'start': 30236.701, 'duration': 6.425}, {'end': 30248.75, 'text': "So in my case, since I'm looking for people array that I just passed them.", 'start': 30243.526, 'duration': 5.224}, {'end': 30253.193, 'text': "that's why I go with main data and then dot people and then I'm iterating over.", 'start': 30248.75, 'duration': 4.443}, {'end': 30255.915, 'text': 'Now few things that I would want to mention.', 'start': 30253.833, 'duration': 2.082}, {'end': 30265.313, 'text': "I personally don't find it that useful if I have only one level meaning with the list.", 'start': 30257.651, 'duration': 7.662}, {'end': 30273.936, 'text': 'I see no problem of passing that people state value as a prop, where I would introduce the context.', 'start': 30265.313, 'duration': 8.623}], 'summary': 'Demonstration of using context to access and pass values in react components.', 'duration': 367.137, 'max_score': 29906.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW429906799.jpg'}, {'end': 30198.838, 'src': 'embed', 'start': 30173.576, 'weight': 5, 'content': [{'end': 30178.479, 'text': "So now I don't need to pass it through the component as a prop.", 'start': 30173.576, 'duration': 4.903}, {'end': 30183.544, 'text': 'I can simply say that I want to access it using the use context.', 'start': 30179.139, 'duration': 4.405}, {'end': 30187.107, 'text': "Now, in order to speed this up, I'm just gonna copy and paste.", 'start': 30184.044, 'duration': 3.063}, {'end': 30189.75, 'text': 'And then notice we have the remote person.', 'start': 30187.748, 'duration': 2.002}, {'end': 30193.453, 'text': 'Now in this case, I will showcase that it is an object.', 'start': 30190.17, 'duration': 3.283}, {'end': 30197.157, 'text': 'So let me call this main data.', 'start': 30193.734, 'duration': 3.423}, {'end': 30198.838, 'text': 'something like that.', 'start': 30198.158, 'duration': 0.68}], 'summary': 'Demonstrating accessing data using usecontext, showcasing an object as main data.', 'duration': 25.262, 'max_score': 30173.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW430173576.jpg'}, {'end': 30569.717, 'src': 'embed', 'start': 30542.423, 'weight': 2, 'content': [{'end': 30545.224, 'text': "And don't worry, we'll use it a little bit later in tutorial.", 'start': 30542.423, 'duration': 2.801}, {'end': 30548.226, 'text': "So you'll see what this is all about.", 'start': 30545.665, 'duration': 2.561}, {'end': 30555.63, 'text': "But essentially, it's just a bunch of product with some price with some name, and image and all that.", 'start': 30548.286, 'duration': 7.344}, {'end': 30562.173, 'text': "So we're fetching that I hit the URL, of course, I get the response, I run the JSON.", 'start': 30556.27, 'duration': 5.903}, {'end': 30569.717, 'text': 'And then I set two state values, I have set product, and then I have set loading to false.', 'start': 30562.653, 'duration': 7.064}], 'summary': 'Tutorial will use product data with price, name, image. fetching url triggers json response. state values set: product and loading=false.', 'duration': 27.294, 'max_score': 30542.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW430542423.jpg'}], 'start': 26940.424, 'title': 'Redux state management best practices', 'summary': 'Discusses refactoring state management to use a reducer, managing state updates using redux reducers, setting up state using usereducer, prop drilling, and context api, and introducing custom hooks for functionality reuse, emphasizing the need for structure and guardrails in larger applications, and the reusability of functionality.', 'chapters': [{'end': 27727.391, 'start': 26940.424, 'title': 'Refactoring to use reducer', 'summary': 'Discusses the refactoring of state management to use a reducer, emphasizing the need for structure and guardrails in larger applications, outlining the use of dispatch and reducer functions, and demonstrating the necessity of returning state in the reducer.', 'duration': 786.967, 'highlights': ['The chapter discusses the need for structure and guardrails in larger applications when managing state, emphasizing the limitations of directly changing state values and the need for a more structured approach.', 'The chapter explains the use of dispatch and reducer functions, outlining their roles in updating the state and demonstrating how they provide a more structured and controlled approach to state management.', 'The chapter demonstrates the necessity of returning state in the reducer function, highlighting the potential errors and lack of functionality that may occur if state is not properly returned.']}, {'end': 28321.973, 'start': 27728.291, 'title': 'Redux reducer best practices', 'summary': 'Explains how to manage state updates using redux reducers, emphasizing the importance of returning the state, handling different action types, and passing data using the payload property.', 'duration': 593.682, 'highlights': ['The importance of returning state from the reducer is emphasized to maintain the last state value, as demonstrated by console logging the state before and after updates.', 'Handling different action types in the reducer is discussed, with the option to throw an error if the action type does not match any of the defined types, providing a clue for unhandled actions.', 'Demonstrates the use of the payload property to pass data to the reducer, with an example of adding a new item to the state array using the payload property.']}, {'end': 28728.294, 'start': 28322.953, 'title': 'State management and action dispatching', 'summary': 'Discusses the importance of copying previous state values when dispatching actions, including examples of changing one or all properties, adding actions for closing a modal and removing an item, and handling these actions in the reducer function.', 'duration': 405.341, 'highlights': ['Dispatching actions requires copying previous state values and deciding which property value to change, as shown in the examples of changing one or all properties.', 'Adding actions for closing a modal and removing an item involves dispatching specific actions and handling them in the reducer function.', "Handling the 'remove item' action in the reducer function involves filtering the state based on the payload item's ID and returning the updated state."]}, {'end': 29330.917, 'start': 28728.955, 'title': 'Setting up state using usereducer and prop drilling', 'summary': 'Covers setting up state using usereducer, showcasing how to create reducers, export them, and integrate them into the application for cleaner and more structured functionality. it also introduces prop drilling and demonstrates its challenges, emphasizing the need for context api and use context hook for a better solution.', 'duration': 601.962, 'highlights': ['The chapter covers setting up state using useReducer, showcasing how to create reducers, export them, and integrate them into the application for cleaner and more structured functionality.', 'It also introduces prop drilling and demonstrates its challenges, emphasizing the need for context API and use context hook for a better solution.']}, {'end': 29842.504, 'start': 29332.697, 'title': 'Prop drilling and context api', 'summary': 'Discusses prop drilling, where functions are passed down to components, and introduces the use of context api to resolve the issue, with a focus on avoiding prop drilling and utilizing the use context hook for efficient function access.', 'duration': 509.807, 'highlights': ['The chapter explains the concept of prop drilling, where functions are passed down through components, illustrating the need for prop drilling and its limitations in scenarios with multiple components, emphasizing the use of Context API as a solution.', "The transcript demonstrates the process of passing down a 'remove person' function via prop drilling, highlighting the necessity of this method due to the lack of alternative ways to access the function within the single person component.", 'The use of the remove person function in the single person component is detailed, emphasizing the process of passing it down and accessing it through prop drilling, showcasing the necessity and limitations of this approach.']}, {'end': 30380.093, 'start': 29842.504, 'title': 'Context api and use context', 'summary': 'Discusses the implementation of context api and use context in react, showcasing how to avoid prop drilling by passing values through components using the provider and consumer pattern, as well as the benefits of using context api over prop drilling.', 'duration': 537.589, 'highlights': ['The importance of wrapping the root component in the context provider', 'The ability to pass values without prop drilling using Context API', 'Demonstration of passing and accessing values using use Context in React']}, {'end': 30831.48, 'start': 30380.554, 'title': 'Custom hooks: reusing functionality', 'summary': 'Introduces custom hooks as a way to reuse functionality, showcasing an example of creating a custom hook for fetching data from an api and emphasizing the reusability of the functionality across different components.', 'duration': 450.926, 'highlights': ['Custom hooks allow us to reuse the functionality, such as fetching data and saving to local storage.', 'The example demonstrates creating a custom hook for fetching data from an API, showcasing the setup and purpose of the custom hook.', 'The custom hook is designed to return an object containing loading and product state values, making it reusable by passing in a URL to fetch data from different components.']}], 'duration': 3891.056, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW426940424.jpg', 'highlights': ['The chapter discusses the need for structure and guardrails in larger applications when managing state, emphasizing the limitations of directly changing state values and the need for a more structured approach.', 'The chapter explains the use of dispatch and reducer functions, outlining their roles in updating the state and demonstrating how they provide a more structured and controlled approach to state management.', 'The chapter covers setting up state using useReducer, showcasing how to create reducers, export them, and integrate them into the application for cleaner and more structured functionality.', 'Custom hooks allow us to reuse the functionality, such as fetching data and saving to local storage.', 'The importance of returning state from the reducer is emphasized to maintain the last state value, as demonstrated by console logging the state before and after updates.', 'The importance of wrapping the root component in the context provider', 'Dispatching actions requires copying previous state values and deciding which property value to change, as shown in the examples of changing one or all properties.']}, {'end': 33586.901, 'segs': [{'end': 31314.719, 'src': 'embed', 'start': 31289.806, 'weight': 0, 'content': [{'end': 31295.929, 'text': 'Of course, what you could do is again, navigate to a browser, and then just copy and paste URL.', 'start': 31289.806, 'duration': 6.123}, {'end': 31298.89, 'text': "And you'll see that again, we have some kind of array.", 'start': 31296.209, 'duration': 2.681}, {'end': 31305.614, 'text': 'And then each and every item in the array is an object which represents product.', 'start': 31299.391, 'duration': 6.223}, {'end': 31312.117, 'text': 'And there we have the ID property, we have the name, we have some kind of image, of course, if you want, you can open this up.', 'start': 31305.634, 'duration': 6.483}, {'end': 31314.719, 'text': 'And then we also have the price.', 'start': 31312.658, 'duration': 2.061}], 'summary': 'Transcript describes navigating to a browser, copying and pasting a url, and viewing an array of product objects with id, name, image, and price.', 'duration': 24.913, 'max_score': 31289.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW431289806.jpg'}, {'end': 32068.049, 'src': 'embed', 'start': 32039.121, 'weight': 2, 'content': [{'end': 32042.404, 'text': "And by the way, there's extra single product that I don't need.", 'start': 32039.121, 'duration': 3.283}, {'end': 32046.985, 'text': 'And then for all the products that have those properties, life is great.', 'start': 32043.064, 'duration': 3.921}, {'end': 32056.227, 'text': 'But then the one that is missing, remember the last one, not only the image was missing, but also the price was missing.', 'start': 32047.545, 'duration': 8.682}, {'end': 32059.647, 'text': 'Now I can see that I see that default price.', 'start': 32056.687, 'duration': 2.96}, {'end': 32061.788, 'text': "So that's already a good start.", 'start': 32060.168, 'duration': 1.62}, {'end': 32068.049, 'text': "However, there's one more problem, where now of course, this image is an object.", 'start': 32062.308, 'duration': 5.741}], 'summary': 'Identified one missing product with image and price, default price is visible.', 'duration': 28.928, 'max_score': 32039.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW432039121.jpg'}, {'end': 32382, 'src': 'embed', 'start': 32351.945, 'weight': 4, 'content': [{'end': 32361.829, 'text': "that's why I will avoid using a bunch of these properties, because, in my opinion, they just make our files bigger and harder to read.", 'start': 32351.945, 'duration': 9.884}, {'end': 32371.793, 'text': 'Now one last thing before I let you go is the fact that of course, you can set it up the prop types using the snippets as well.', 'start': 32362.349, 'duration': 9.444}, {'end': 32377.017, 'text': "So I'll just create some testing file here, testing j s.", 'start': 32372.513, 'duration': 4.504}, {'end': 32382, 'text': "And if you'd want to add prop types, you just go here with this P.", 'start': 32377.017, 'duration': 4.983}], 'summary': 'Avoid using unnecessary properties to reduce file size and complexity. prop types can be set using snippets.', 'duration': 30.055, 'max_score': 32351.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW432351945.jpg'}, {'end': 32892.178, 'src': 'embed', 'start': 32865.957, 'weight': 1, 'content': [{'end': 32871.121, 'text': "For example, there's going to be a homepage, as well as a single person page.", 'start': 32865.957, 'duration': 5.164}, {'end': 32881.65, 'text': "Now, in order to get up and running with the react router, we'll need to import from the package from the reactor or down the browser router.", 'start': 32871.742, 'duration': 9.908}, {'end': 32885.212, 'text': 'A common practice is giving it an LS.', 'start': 32882.47, 'duration': 2.742}, {'end': 32888.515, 'text': "In this case, we're giving it an alias of router.", 'start': 32885.713, 'duration': 2.802}, {'end': 32892.178, 'text': 'route, as well as the switch.', 'start': 32889.996, 'duration': 2.182}], 'summary': 'Setting up react router with homepage and single person page.', 'duration': 26.221, 'max_score': 32865.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW432865957.jpg'}], 'start': 30832.04, 'title': 'React custom hooks and data handling in react', 'summary': "Covers creating custom usefetch hook for api requests, implementing 'use fetch' hook for data fetching, handling missing data in react components, setting up prop types and default props, and covering basics of using react router for client-side navigation.", 'chapters': [{'end': 30886.802, 'start': 30832.04, 'title': 'React custom hook tutorial', 'summary': 'Covers creating a custom usefetch hook for making api requests in a react application, emphasizing on the need for one url argument and the use effect to be called when the url changes.', 'duration': 54.762, 'highlights': ['The chapter covers creating a custom useFetch hook for making API requests in a React application, emphasizing on the need for one URL argument and the use effect to be called when the URL changes.', 'The function should be invoked when the URL changes, and also when the argument for the useFetch custom hook changes.', 'Importing and using the custom useFetch hook from the file useFetch is demonstrated, highlighting the importance of correct naming conventions.']}, {'end': 31234.27, 'start': 30887.282, 'title': 'Custom hook for fetching data', 'summary': "Demonstrates the implementation of a custom hook named 'use fetch' for fetching data, avoiding the use of usestate and useeffect, allowing reusability, and emphasizing the importance of using 'use' in custom hooks.", 'duration': 346.988, 'highlights': ["Implementation of custom hook 'use fetch' for fetching data", "Emphasis on using 'use' in custom hooks", 'Avoiding use of useState and useEffect']}, {'end': 32092.604, 'start': 31234.75, 'title': 'Handling missing data in react components', 'summary': 'Covers iterating over products, accessing properties, dealing with missing properties like price and image, setting up prop types and default props, and using short circuit operators to handle missing data in react components.', 'duration': 857.854, 'highlights': ['Setting up prop types to validate props and yell for missing values', 'Setting up default props to handle missing values', 'Using short circuit operators to handle missing properties']}, {'end': 32527.705, 'start': 32093.164, 'title': 'Setting up prop types and default props in react', 'summary': 'Covers setting up prop types and default props in react, showcasing how to import images, setting default values for props, using or operator, avoiding prop types for simplicity, and using prop types shortcuts, and the concept of single page applications.', 'duration': 434.541, 'highlights': ['The chapter covers setting up prop types and default props in React', 'Showcasing how to import images', 'Setting default values for props', 'Using or operator to handle default values', 'Avoiding prop types for simplicity', 'Using prop types shortcuts', 'Introduction to single page applications']}, {'end': 33586.901, 'start': 32528.206, 'title': 'React router basics', 'summary': 'Covers the basics of using react router, emphasizing on client-side navigation, the need for an external package like react router, installation process, setting up routes, handling error pages, and creating a navbar for better user experience.', 'duration': 1058.695, 'highlights': ['React does not have built-in routing and requires an external package like React Router for client-side navigation.', 'The popular routing library in React land is React Router, which needs to be installed using npm install react-router-dom.', 'Setting up routes using React Router involves defining the path and the component to be displayed based on the URL.', "The 'exact' prop needs to be added to the routes to ensure only exact matches are displayed, resolving the issue of multiple components being rendered.", "The 'switch' component in React Router ensures that only the first matching route is displayed, providing a solution for rendering multiple components.", 'Creating a navbar component in React Router enhances user experience by providing navigational links for easy access to different pages.']}], 'duration': 2754.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW430832040.jpg', 'highlights': ['The chapter covers creating a custom useFetch hook for making API requests in a React application, emphasizing on the need for one URL argument and the use effect to be called when the URL changes.', 'Setting up prop types to validate props and yell for missing values', 'React does not have built-in routing and requires an external package like React Router for client-side navigation.', 'Importing and using the custom useFetch hook from the file useFetch is demonstrated, highlighting the importance of correct naming conventions.', 'Setting up default props to handle missing values', 'The popular routing library in React land is React Router, which needs to be installed using npm install react-router-dom.']}, {'end': 34917.536, 'segs': [{'end': 33768.737, 'src': 'embed', 'start': 33733.712, 'weight': 0, 'content': [{'end': 33734.852, 'text': "I'm going to go with class name.", 'start': 33733.712, 'duration': 1.14}, {'end': 33736.794, 'text': "And we're going to go with BTN.", 'start': 33735.533, 'duration': 1.261}, {'end': 33742.658, 'text': "And let's just say back home, back and home.", 'start': 33736.814, 'duration': 5.844}, {'end': 33750.844, 'text': "And now let's try it out where not only of course, I can navigate around with my navbar.", 'start': 33743.519, 'duration': 7.325}, {'end': 33753.266, 'text': 'But I can also do it here.', 'start': 33751.344, 'duration': 1.922}, {'end': 33757.729, 'text': 'where I say forward slash and then shake and bake.', 'start': 33753.766, 'duration': 3.963}, {'end': 33759.75, 'text': 'Now I have the error page.', 'start': 33758.61, 'duration': 1.14}, {'end': 33768.737, 'text': 'Now in this case, if I would want to navigate back to the homepage, either I can use the number which is still there.', 'start': 33760.351, 'duration': 8.386}], 'summary': 'Demonstrating navigation using class name and btn, including error page handling.', 'duration': 35.025, 'max_score': 33733.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW433733712.jpg'}, {'end': 33843.944, 'src': 'embed', 'start': 33814.15, 'weight': 3, 'content': [{'end': 33821.373, 'text': 'But before we move on to a different topic, I also want to cover how we can deal with alerts.', 'start': 33814.15, 'duration': 7.223}, {'end': 33829.857, 'text': 'So in this case, notice, I have the list of people, which is of course coming from my data, correct.', 'start': 33822.014, 'duration': 7.843}, {'end': 33840.162, 'text': 'If we navigate to a people component, like I said, I import data, the file, the data that we have been using all throughout tutorial.', 'start': 33830.418, 'duration': 9.744}, {'end': 33843.944, 'text': 'I set up this use straight hook where I have people and set people.', 'start': 33840.162, 'duration': 3.782}], 'summary': 'The speaker discusses dealing with alerts and importing data for a people component.', 'duration': 29.794, 'max_score': 33814.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW433814150.jpg'}, {'end': 34779.91, 'src': 'embed', 'start': 34753.345, 'weight': 2, 'content': [{'end': 34762.212, 'text': 'But trust me when I say this, just because Twitter guru says that you need to apply these optimizations, you have to do it.', 'start': 34753.345, 'duration': 8.867}, {'end': 34764.935, 'text': 'No, React is fast by default.', 'start': 34762.712, 'duration': 2.223}, {'end': 34769.099, 'text': 'And when it comes to optimizations, they do add their own costs.', 'start': 34765.375, 'duration': 3.724}, {'end': 34776.046, 'text': "So it's not like it's a free ride, where we just add these magic functions and everything works like peaches.", 'start': 34769.92, 'duration': 6.126}, {'end': 34779.91, 'text': 'They do use the memory, they do use the computation power.', 'start': 34776.667, 'duration': 3.243}], 'summary': "React isn't automatically fast and optimizations add costs in memory and computation power.", 'duration': 26.565, 'max_score': 34753.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW434753345.jpg'}], 'start': 33587.622, 'title': 'Setting up navigation and url parameters with react router', 'summary': 'Demonstrates setting up navigation using react router dom, emphasizing navigation to the homepage using the forward slash, and covers configuring url parameters for dynamic content, including creating placeholder pages and navigating to specific content using url parameters. additionally, it delves into react component setup for displaying dynamic content, utilizing state values and hooks, and provides insights on performance optimization, cautioning against overusing optimization tools.', 'chapters': [{'end': 33642.92, 'start': 33587.622, 'title': 'Setting up navigation with react router', 'summary': 'Demonstrates how to set up a navigation using react router dom, including importing the link component and specifying the navigation destination, with emphasis on navigating to the homepage using the forward slash.', 'duration': 55.298, 'highlights': ['The chapter demonstrates how to set up a navigation using react router DOM, including importing the link component and specifying the navigation destination, with emphasis on navigating to the homepage using the forward slash.', "The process involves setting up an ordered list, using the 'on order list' and 'list item' components to create the navigation structure.", 'Importing a link from react router DOM and using specific props to define the navigation destination is essential for setting up the navigation.', 'Emphasize the usage of the forward slash as the navigation destination for the homepage, aligning with the setup in the index.']}, {'end': 34010.539, 'start': 33643.54, 'title': 'React router setup and url parameters', 'summary': 'Covers setting up react router for navigation, displaying components using url links, and configuring url parameters for dynamic content, emphasizing the ability to navigate between pages and create a placeholder page for dynamic content.', 'duration': 366.999, 'highlights': ['Setting up React Router for navigation', 'Displaying components using URL links', 'Configuring URL parameters for dynamic content']}, {'end': 34415.195, 'start': 34011.079, 'title': 'React router: url parameters and placeholder pages', 'summary': 'Discusses how to use url parameters in react router to create placeholder pages and navigate to specific content, showcasing the use of template strings and the use params hook, while highlighting the importance of data type consistency and providing a simplified example of fetching data from an api.', 'duration': 404.116, 'highlights': ['The chapter explains how to use URL parameters in React Router to create dynamic placeholder pages by showcasing the use of template strings to navigate to specific content, emphasizing the flexibility of naming URL parameters and the need for consistency in data types (e.g., string vs. number).', 'It demonstrates the use of the use params hook from react router DOM to access URL parameters, showcasing how to retrieve and utilize the parameter values within the placeholder pages, highlighting the importance of data type consistency and potential issues with data type conversion (e.g., string to number).', 'It provides a simplified example of fetching data from a local data array to showcase the concept of placeholder pages and navigating to specific content based on URL parameters, emphasizing the use of template strings for dynamic navigation and the need for consistent URL parameter naming for matching purposes.']}, {'end': 34917.536, 'start': 34415.555, 'title': 'React component setup and performance optimization', 'summary': 'Covers setting up components to display dynamic content based on user input, using state values and hooks, and then delves into performance optimization, emphasizing that react is fast by default and cautioning against overusing optimization tools as they add memory and computation costs.', 'duration': 501.981, 'highlights': ['The chapter covers setting up components to display dynamic content based on user input, using state values and hooks.', 'Emphasizes that React is fast by default and cautions against overusing optimization tools as they add memory and computation costs.', 'Provides insights into using react memo function, use callback hook, and use memo hook.']}], 'duration': 1329.914, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW433587622.jpg', 'highlights': ['The chapter demonstrates how to set up a navigation using react router DOM, including importing the link component and specifying the navigation destination, with emphasis on navigating to the homepage using the forward slash.', 'The chapter explains how to use URL parameters in React Router to create dynamic placeholder pages by showcasing the use of template strings to navigate to specific content, emphasizing the flexibility of naming URL parameters and the need for consistency in data types (e.g., string vs. number).', 'The chapter covers setting up components to display dynamic content based on user input, using state values and hooks.', 'Emphasizes that React is fast by default and cautions against overusing optimization tools as they add memory and computation costs.']}, {'end': 36471.504, 'segs': [{'end': 35300.071, 'src': 'embed', 'start': 35270.391, 'weight': 0, 'content': [{'end': 35275.695, 'text': 'If you want to be really specific, then of course, it is a method because it is on react.', 'start': 35270.391, 'duration': 5.304}, {'end': 35280.778, 'text': 'And what we would need to do here is just go with react.', 'start': 35276.475, 'duration': 4.303}, {'end': 35287.663, 'text': "And then that memo, or you can import it, you can also do that up here where we're importing everything.", 'start': 35281.559, 'duration': 6.104}, {'end': 35295.228, 'text': 'And what you would want is to wrap your essentially whole component in that memo.', 'start': 35288.483, 'duration': 6.745}, {'end': 35297.029, 'text': 'So memoir is a function.', 'start': 35295.708, 'duration': 1.321}, {'end': 35300.071, 'text': 'And you just pass in your component.', 'start': 35297.93, 'duration': 2.141}], 'summary': "Using the 'memo' method in react to optimize component performance.", 'duration': 29.68, 'max_score': 35270.391, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW435270391.jpg'}, {'end': 35420.374, 'src': 'embed', 'start': 35385.736, 'weight': 2, 'content': [{'end': 35394.479, 'text': "So if we don't rerender the big list, of course, as a result, we also don't rerender the single product.", 'start': 35385.736, 'duration': 8.743}, {'end': 35398.081, 'text': 'So that is the memo function in react.', 'start': 35394.88, 'duration': 3.201}, {'end': 35399.321, 'text': 'Not bad, not bad.', 'start': 35398.381, 'duration': 0.94}, {'end': 35403.203, 'text': "We've got react memo method out of the way.", 'start': 35399.541, 'duration': 3.662}, {'end': 35405.704, 'text': 'Now let me throw you a mine.', 'start': 35403.783, 'duration': 1.921}, {'end': 35420.374, 'text': "What if I were to create a state value and I'll call this card will not add the actual item in a card but will somewhat simulate that action where we go with carton and set cart?", 'start': 35406.684, 'duration': 13.69}], 'summary': 'Explains react memo function and simulates adding items to a cart.', 'duration': 34.638, 'max_score': 35385.736, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW435385736.jpg'}, {'end': 35497.89, 'src': 'embed', 'start': 35469.713, 'weight': 3, 'content': [{'end': 35471.834, 'text': "And I'll add a little bit of inline styling here.", 'start': 35469.713, 'duration': 2.121}, {'end': 35477.436, 'text': "I'll say margin top is equal to three REMs.", 'start': 35471.854, 'duration': 5.582}, {'end': 35479.757, 'text': 'I think that is a good value.', 'start': 35478.096, 'duration': 1.661}, {'end': 35489.264, 'text': "And then in here, let's say cart is equal to my cart value, but save it, it should be zero, or that is my default one.", 'start': 35480.297, 'duration': 8.967}, {'end': 35494.908, 'text': 'But then like I said, I would want to pass this sucker down to a single product.', 'start': 35489.584, 'duration': 5.324}, {'end': 35497.89, 'text': "Yes, granted, we'll do some prop drilling.", 'start': 35495.168, 'duration': 2.722}], 'summary': 'Styling with margin top set at 3 rems. default cart value is zero. prop drilling will be used.', 'duration': 28.177, 'max_score': 35469.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW435469713.jpg'}, {'end': 36430.641, 'src': 'embed', 'start': 36377.721, 'weight': 1, 'content': [{'end': 36388.51, 'text': 'So if this gets added to dependency array, technically each and every time when it gets created from scratch, well, you will rerender the component.', 'start': 36377.721, 'duration': 10.789}, {'end': 36392.753, 'text': "Now in a function though, you'll also change the state value.", 'start': 36388.95, 'duration': 3.803}, {'end': 36395.195, 'text': "So you'll have that infinite loop.", 'start': 36393.193, 'duration': 2.002}, {'end': 36403.301, 'text': 'And what is the solution? Well, remember, we have our use callback, right? So we can go here with use callback.', 'start': 36395.755, 'duration': 7.546}, {'end': 36410.827, 'text': 'And then I can set it equal, I can say use callback over here, like so.', 'start': 36403.942, 'duration': 6.885}, {'end': 36412.969, 'text': 'So let me wrap everything.', 'start': 36411.267, 'duration': 1.702}, {'end': 36418.313, 'text': 'And now I just need to say well, when I would want to create that function?', 'start': 36413.829, 'duration': 4.484}, {'end': 36423.397, 'text': 'of course the answer is when I have a URL change.', 'start': 36418.313, 'duration': 5.084}, {'end': 36430.641, 'text': 'So once the URL changes, yeah, please recreate that function from the scratch.', 'start': 36423.877, 'duration': 6.764}], 'summary': 'Use usecallback to recreate function on url change, avoiding infinite loop.', 'duration': 52.92, 'max_score': 36377.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW436377721.jpg'}], 'start': 34918.137, 'title': 'Javascript e-commerce and react optimization', 'summary': 'Provides an overview of a javascript e-commerce store api, demonstrating the use of state variables, components, and the spread operator, emphasizing the use of custom hooks and memoization for performance optimization. it also explains the re-rendering issue in react components due to state changes and the use of react.memo to optimize performance, with examples showing the impact on re-renders. additionally, it demonstrates the usage of use callback and use memo hooks in react, explaining their importance and how they prevent unnecessary re-rendering by optimizing function creation and value calculation.', 'chapters': [{'end': 35076.408, 'start': 34918.137, 'title': 'E-commerce javascript course overview', 'summary': 'Provides an overview of a javascript e-commerce store api, demonstrating the use of state variables, components, and the spread operator, and emphasizes the use of custom hooks and memoization for performance optimization.', 'duration': 158.271, 'highlights': ['The API for an e-commerce JavaScript course is demonstrated, showing the use of state variables, components, and the spread operator.', 'The importance of custom hooks and memoization for performance optimization is emphasized.', 'Demonstrates the iteration over product data and the use of the spread operator to access all properties of the product.']}, {'end': 35469.113, 'start': 35076.948, 'title': 'React memo function tutorial', 'summary': 'Explains the re-rendering issue in react components due to state changes and the use of react.memo to optimize performance, with examples showing the impact on re-renders and the role of react.memo in preventing unnecessary re-renders.', 'duration': 392.165, 'highlights': ['The explanation of re-rendering issue in React components due to state changes and the use of React.memo to optimize performance.', 'Examples showing the impact on re-renders and the role of React.memo in preventing unnecessary re-renders.']}, {'end': 36471.504, 'start': 35469.713, 'title': 'React hooks: use callback and use memo', 'summary': 'Demonstrates the usage of use callback and use memo hooks in react, explaining their importance and how they prevent unnecessary re-rendering by optimizing function creation and value calculation.', 'duration': 1001.791, 'highlights': ['The chapter demonstrates the usage of use Callback and use Memo hooks in React', 'explaining their importance and how they prevent unnecessary re-rendering by optimizing function creation and value calculation', 'use Memo deals with a value', 'The use Callback hook is used to optimize function creation', 'The use Callback hook is employed to prevent infinite loops when fetching data']}], 'duration': 1553.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/4UZrsTqkcW4/pics/4UZrsTqkcW434918137.jpg', 'highlights': ['The API for an e-commerce JavaScript course is demonstrated, showing the use of state variables, components, and the spread operator.', 'The importance of custom hooks and memoization for performance optimization is emphasized.', 'The explanation of re-rendering issue in React components due to state changes and the use of React.memo to optimize performance.', 'Demonstrates the iteration over product data and the use of the spread operator to access all properties of the product.', 'Examples showing the impact on re-renders and the role of React.memo in preventing unnecessary re-renders.', 'The chapter demonstrates the usage of use Callback and use Memo hooks in React.', 'Explaining their importance and how they prevent unnecessary re-rendering by optimizing function creation and value calculation.', 'The use Callback hook is used to optimize function creation.', 'The use Callback hook is employed to prevent infinite loops when fetching data.', 'Use Memo deals with a value.']}], 'highlights': ['React is the most popular JavaScript library for building user interfaces, developed at Facebook in 2011.', 'Components in React allow for building independent, isolated, and reusable user interfaces.', 'The benefits of using React include building independent pieces of user interfaces, reusing components throughout the app, and centralized component code for easy maintenance.', 'React components improve app performance using virtual DOM and selective rendering', 'Course goal: make students comfortable with React, apply theory to practice', 'Course structure: setting up dev environment, extensive React tutorial, building projects', 'The Prettier code format extension improves code readability and consistency', 'The ES7 React Redux GraphQL React Native Snippets extension enhances productivity', 'The Emmett extension speeds up workflow by supporting JSX in Visual Studio Code', "The biggest rule in JSX is always returning something, even if it's an empty HTML element, to avoid errors.", 'The ability to control multiple component instances from one place is demonstrated, emphasizing the convenience and efficiency of managing changes across all instances.', 'The process of rendering components, including creating separate components for image, title, and author, is outlined, highlighting the nesting of components within a book list.', 'Refactoring to use an array for objects and iterating over it to display books instead of repeating the same component for each book, improving practicality and avoiding repetition.', 'Using the map method to iterate over an array and wrap each item in HTML, such as heading one, to display values in a meaningful format.', 'Deploying a project using Netlify involves drag-and-drop deployment, setting up production build using npm run build, and customizing the site name.', 'The importance of use state hook is highlighted, emphasizing its necessity for building complex applications, with a detailed explanation provided through a basic example located in the tutorial folder.', 'The functionality to remove items in a React application involves setting up an arrow function that is invoked with a specific ID, running only when a button is clicked.', 'The useReducer hook adds more structure to the state, ensuring that state changes go through certain steps, making it useful for complex app setups and team collaboration.', "The useRef hook is used to preserve the value between renders without triggering a rerender, and it's mostly used to target DOM nodes.", 'The chapter covers creating a custom useFetch hook for making API requests in a React application, emphasizing on the need for one URL argument and the use effect to be called when the URL changes.', 'The chapter demonstrates how to set up a navigation using react router DOM, including importing the link component and specifying the navigation destination, with emphasis on navigating to the homepage using the forward slash.', 'The API for an e-commerce JavaScript course is demonstrated, showing the use of state variables, components, and the spread operator.', 'The importance of custom hooks and memoization for performance optimization is emphasized.']}