title
React JS - React Tutorial for Beginners

description
React JS Tutorial - Get up & running with React JS: the most popular JavaScript library in the world! - Want to master React? Get my React mastery course: http://bit.ly/2KVl2A3 - Subscribe for more videos like this: https://goo.gl/6PYaGF Want to learn more from me? Check out my blog and courses: Courses: https://codewithmosh.com Blog: https://programmingwithmosh.com Facebook: https://www.facebook.com/programmingwithmosh/ Twitter: https://twitter.com/moshhamedani TABLE OF CONTENT 00:00 Introduction 01:14 What is React 05:48 Setting Up the Development Environment 09:27 Your First React App 16:03 Hello World 22:26 Components 24:06 Setting Up the Project 26:15 Your First React Component 31:38 Specifying Children 35:56 Embedding Expressions 40:49 Setting Attributes 46:36 Rendering Classes Dynamically 50:57 Rendering Lists 54:58 Conditional Rendering 1:01:04 Handling Events 1:03:56 Binding Event Handlers 1:08:34 Updating the State 1:10:51 What Happens When State Changes 1:12:58 Passing Event Arguments 1:17:31 Composing Components 1:21:18 Passing Data to Components 1:24:31 Passing Children 1:27:44 Debugging React Apps 1:31:55 Props vs State 1:34:22 Raising and Handling Events 1:39:16 Updating the State 1:43:57 Single Source of Truth 1:47:55 Removing the Local State 1:54:44 Multiple Components in Sync 2:00:39 Lifting the State Up 2:06:18 Stateless Functional Components 2:08:49 Destructuring Arguments 2:10:52 Lifecycle Hooks 2:12:32 Mounting Phase 2:18:09 Updating Phase 2:22:31 Unmounting Phase #react #webdevelopment #programming

detail
{'title': 'React JS - React Tutorial for Beginners', 'heatmap': [{'end': 6110.365, 'start': 6019.367, 'weight': 1}, {'end': 8117.501, 'start': 8027.165, 'weight': 0.924}], 'summary': 'This tutorial covers react fundamentals, setting up a react app, using react.fragment, refactoring code, handling events, component basics, dev tools, state, props, navigation bar, and component lifecycle, with a focus on popular topics such as virtual dom, jsx, event handling, and state management.', 'chapters': [{'end': 541.94, 'segs': [{'end': 43.419, 'src': 'embed', 'start': 2.301, 'weight': 1, 'content': [{'end': 6.824, 'text': "Hi, my name is Mash Hamadani, and I'm going to be your instructor in this React crash course.", 'start': 2.301, 'duration': 4.523}, {'end': 13.168, 'text': "First I'm gonna give you a quick three-minute introduction to what React is and why you should learn it,", 'start': 7.484, 'duration': 5.684}, {'end': 16.81, 'text': "and then we're going to jump in and build a React application together.", 'start': 13.168, 'duration': 3.642}, {'end': 21.352, 'text': "This application we're going to build throughout this course may appear simple,", 'start': 17.69, 'duration': 3.662}, {'end': 25.575, 'text': 'but actually it exhibits patterns that you see on a shopping cart page.', 'start': 21.352, 'duration': 4.223}, {'end': 28.677, 'text': 'So imagine these are the items on a shopping cart.', 'start': 26.155, 'duration': 2.522}, {'end': 36.598, 'text': 'We can change their quantity, delete them, reset the quantity of all items to zero,', 'start': 29.017, 'duration': 7.581}, {'end': 43.419, 'text': 'and we also have this number on the navigation bar showing the number of unique items in our imaginary shopping cart.', 'start': 36.598, 'duration': 6.821}], 'summary': 'Mash hamadani will teach react with a simple shopping cart application, emphasizing its patterns and features.', 'duration': 41.118, 'max_score': 2.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02301.jpg'}, {'end': 107.646, 'src': 'embed', 'start': 78.126, 'weight': 0, 'content': [{'end': 82.929, 'text': 'React is a JavaScript library for building fast and interactive user interfaces.', 'start': 78.126, 'duration': 4.803}, {'end': 91.275, 'text': "It was developed at Facebook in 2011, and currently it's the most popular JavaScript library for building user interfaces.", 'start': 83.31, 'duration': 7.965}, {'end': 98.279, 'text': 'As you can see on Google Trends, React is dominating the space of libraries and frameworks for building user interfaces.', 'start': 91.875, 'duration': 6.404}, {'end': 101.422, 'text': 'The other two players here are Angular and Vue.', 'start': 98.72, 'duration': 2.702}, {'end': 107.646, 'text': 'So if you want to expand your job opportunities as a front-end developer, you should have React on your resume.', 'start': 101.962, 'duration': 5.684}], 'summary': 'React is the most popular javascript library for building user interfaces, dominating the space of libraries and frameworks according to google trends.', 'duration': 29.52, 'max_score': 78.126, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS078126.jpg'}, {'end': 156.856, 'src': 'embed', 'start': 125.499, 'weight': 2, 'content': [{'end': 130.662, 'text': 'Every React application has at least one component, which we refer to as the root component.', 'start': 125.499, 'duration': 5.163}, {'end': 135.605, 'text': 'This component represents the entire application and contains other child components.', 'start': 131.082, 'duration': 4.523}, {'end': 139.707, 'text': 'So every React application is essentially a tree of components.', 'start': 136.005, 'duration': 3.702}, {'end': 143.489, 'text': 'If you have worked with Angular 2 or higher, this should sound familiar.', 'start': 140.167, 'duration': 3.322}, {'end': 144.91, 'text': "Here's an example.", 'start': 144.13, 'duration': 0.78}, {'end': 147.792, 'text': "Let's imagine we want to build an application like Twitter.", 'start': 145.41, 'duration': 2.382}, {'end': 156.856, 'text': 'We can split this page into components like navbar, profile trends and feed.', 'start': 148.252, 'duration': 8.604}], 'summary': 'React applications are structured as a tree of components, including a root component, resembling a tree. example: twitter page split into navbar, profile, trends, and feed components.', 'duration': 31.357, 'max_score': 125.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0125499.jpg'}, {'end': 251.124, 'src': 'embed', 'start': 221.965, 'weight': 3, 'content': [{'end': 228.972, 'text': 'So React keeps a lightweight representation of the DOM in memory, which we refer to as the virtual DOM.', 'start': 221.965, 'duration': 7.007}, {'end': 234.395, 'text': 'Unlike the browser or the real DOM, this virtual DOM is cheap to create.', 'start': 229.793, 'duration': 4.602}, {'end': 238.758, 'text': 'When we change the state of a component, we get a new React element.', 'start': 234.896, 'duration': 3.862}, {'end': 243.74, 'text': 'React will then compare this element and its children with the previous one.', 'start': 239.278, 'duration': 4.462}, {'end': 251.124, 'text': 'it figures out what is changed and then it will update a part of the real DOM to keep it in sync with the virtual DOM.', 'start': 243.74, 'duration': 7.384}], 'summary': 'React uses virtual dom for efficient updates, reducing cost and improving performance.', 'duration': 29.159, 'max_score': 221.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0221965.jpg'}, {'end': 310.419, 'src': 'embed', 'start': 286.482, 'weight': 6, 'content': [{'end': 295.726, 'text': 'One of the questions that I often get is React or Angular? Well, both React and Angular are similar in terms of their component-based architecture.', 'start': 286.482, 'duration': 9.244}, {'end': 301.631, 'text': 'However, Angular is a framework or a complete solution while React is a library.', 'start': 296.266, 'duration': 5.365}, {'end': 307.316, 'text': 'It only takes care of rendering the view and making sure that the view is in sync with the state.', 'start': 302.031, 'duration': 5.285}, {'end': 310.419, 'text': "That's all React does, nothing less, nothing more.", 'start': 307.716, 'duration': 2.703}], 'summary': 'React and angular are similar in their component-based architecture, but angular is a complete framework while react is a library focused on rendering and state synchronization.', 'duration': 23.937, 'max_score': 286.482, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0286482.jpg'}, {'end': 368.01, 'src': 'embed', 'start': 334.354, 'weight': 5, 'content': [{'end': 335.634, 'text': "So that's all about React.", 'start': 334.354, 'duration': 1.28}, {'end': 338.415, 'text': "Next, we're going to set up our development environment.", 'start': 336.054, 'duration': 2.361}, {'end': 355.223, 'text': 'All right, this is where the fun begins.', 'start': 352.942, 'duration': 2.281}, {'end': 358.365, 'text': 'The first thing I want you to install is Node.js.', 'start': 355.764, 'duration': 2.601}, {'end': 360.506, 'text': "Now, in this course, we're not going to use Node.", 'start': 358.885, 'duration': 1.621}, {'end': 368.01, 'text': "We're only going to use one of its built-in tools, Node Package Manager, or NPM, to install third-party libraries.", 'start': 360.866, 'duration': 7.144}], 'summary': 'Introduction to react and setting up development environment using node.js and npm.', 'duration': 33.656, 'max_score': 334.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0334354.jpg'}], 'start': 2.301, 'title': 'React fundamentals and building shopping cart application', 'summary': 'Introduces react and its importance, covers fundamentals, and demonstrates building a shopping cart application with various functionalities. it also discusses popularity, component-based architecture, virtual dom, differences with angular, and setting up the development environment.', 'chapters': [{'end': 43.419, 'start': 2.301, 'title': 'React crash course', 'summary': 'Introduces react and its importance, followed by building a shopping cart application that demonstrates various functionalities such as changing quantity, deleting items, and displaying the number of unique items in the cart.', 'duration': 41.118, 'highlights': ["The application we're going to build exhibits patterns seen on a shopping cart page, allowing us to change quantity, delete items, reset quantity, and display the number of unique items in the cart.", 'The instructor, Mash Hamadani, provides a quick three-minute introduction to React and emphasizes the importance of learning it.']}, {'end': 541.94, 'start': 44.239, 'title': 'React fundamentals crash course', 'summary': 'Covers the fundamentals of react, including its popularity, component-based architecture, virtual dom, differences between react and angular, and setting up the development environment with node.js and visual studio code.', 'duration': 497.701, 'highlights': ['React is dominating the space of libraries and frameworks for building user interfaces.', 'Every React application is essentially a tree of components, with at least one root component.', 'React keeps a lightweight representation of the DOM in memory, known as the virtual DOM, and automatically updates the real DOM to match the state changes.', "React is a library that takes care of rendering the view and ensuring it's in sync with the state, unlike Angular, which is a complete framework.", 'Setting up the development environment involves installing Node.js for NPM and using Visual Studio Code with specific extensions for React development.']}], 'duration': 539.639, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02301.jpg', 'highlights': ['React is dominating the space of libraries and frameworks for building user interfaces.', "The application we're going to build exhibits patterns seen on a shopping cart page, allowing us to change quantity, delete items, reset quantity, and display the number of unique items in the cart.", 'Every React application is essentially a tree of components, with at least one root component.', 'React keeps a lightweight representation of the DOM in memory, known as the virtual DOM, and automatically updates the real DOM to match the state changes.', 'The instructor, Mash Hamadani, provides a quick three-minute introduction to React and emphasizes the importance of learning it.', 'Setting up the development environment involves installing Node.js for NPM and using Visual Studio Code with specific extensions for React development.', "React is a library that takes care of rendering the view and ensuring it's in sync with the state, unlike Angular, which is a complete framework."]}, {'end': 1439.214, 'segs': [{'end': 602.928, 'src': 'embed', 'start': 572.272, 'weight': 0, 'content': [{'end': 576.614, 'text': "Now let's use the create React app package to create a new React application.", 'start': 572.272, 'duration': 4.342}, {'end': 583.737, 'text': "So here in the terminal, let's run create React app and give our new application a name.", 'start': 577.234, 'duration': 6.503}, {'end': 585.918, 'text': "Let's call it React app.", 'start': 584.157, 'duration': 1.761}, {'end': 592.335, 'text': 'Now, this is going to install React as well as all the third-party libraries we need.', 'start': 587.148, 'duration': 5.187}, {'end': 602.928, 'text': "So it's going to install a lightweight development server Webpack for bundling our files, Babel or Babel for compiling our JavaScript code,", 'start': 592.735, 'duration': 10.193}], 'summary': 'Using create react app to install react and necessary libraries for new application.', 'duration': 30.656, 'max_score': 572.272, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0572272.jpg'}, {'end': 728.283, 'src': 'embed', 'start': 704.57, 'weight': 3, 'content': [{'end': 711.677, 'text': "now back to our files panel, we've got the source folder where we have a basic component, that is, app component,", 'start': 704.57, 'duration': 7.107}, {'end': 717.741, 'text': 'And that component is responsible for rendering this black banner on the top.', 'start': 712.574, 'duration': 5.167}, {'end': 720.605, 'text': 'So the output of that component is what you see here.', 'start': 718.202, 'duration': 2.403}, {'end': 724.821, 'text': "Let's have a quick look at app.js.", 'start': 722.039, 'duration': 2.782}, {'end': 728.283, 'text': 'So you can see here we are using ES6 classes.', 'start': 725.722, 'duration': 2.561}], 'summary': 'The source folder contains an app component rendering a black banner on the top, using es6 classes.', 'duration': 23.713, 'max_score': 704.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0704570.jpg'}, {'end': 781.248, 'src': 'embed', 'start': 751.519, 'weight': 6, 'content': [{'end': 753.242, 'text': 'But to help you get started quickly,', 'start': 751.519, 'duration': 1.723}, {'end': 761.874, 'text': "in the next section I'm going to give you a quick overview of all the modern JavaScript features that you're going to use frequently in React applications.", 'start': 753.242, 'duration': 8.632}, {'end': 767.221, 'text': "So if you're not familiar with classes or modules, don't worry for now, we're going to get to them shortly.", 'start': 762.314, 'duration': 4.907}, {'end': 768.821, 'text': 'Now look at this class.', 'start': 768.021, 'duration': 0.8}, {'end': 775.725, 'text': 'Here we have a render method or a render function where we return a markup like this.', 'start': 768.901, 'duration': 6.824}, {'end': 781.248, 'text': "Now this is something you probably haven't seen before because we cannot have markup like this in JavaScript.", 'start': 776.085, 'duration': 5.163}], 'summary': 'Quick overview of modern javascript features for react applications.', 'duration': 29.729, 'max_score': 751.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0751519.jpg'}, {'end': 842.072, 'src': 'embed', 'start': 813.524, 'weight': 1, 'content': [{'end': 820.468, 'text': 'So Babel will take this JSX syntax and convert it to plain JavaScript code that browsers can understand.', 'start': 813.524, 'duration': 6.944}, {'end': 822.569, 'text': 'Let me give you a quick demo.', 'start': 821.228, 'duration': 1.341}, {'end': 828.776, 'text': 'head over to babeljs.io slash repl or repo.', 'start': 823.749, 'duration': 5.027}, {'end': 836.106, 'text': 'Here we can type modern JavaScript code and Babel will convert that code into code that browsers can understand.', 'start': 829.457, 'duration': 6.649}, {'end': 842.072, 'text': "So here I'm going to define constant, which is a new es6 feature.", 'start': 836.766, 'duration': 5.306}], 'summary': 'Babel converts jsx syntax to javascript for browser compatibility.', 'duration': 28.548, 'max_score': 813.524, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0813524.jpg'}, {'end': 977.517, 'src': 'embed', 'start': 945.839, 'weight': 4, 'content': [{'end': 953.163, 'text': 'But at the time of recording this, basically what this file does is it serves assets from a local cache in a production environment.', 'start': 945.839, 'duration': 7.324}, {'end': 955.565, 'text': "So for now, we don't have to worry about this.", 'start': 953.784, 'duration': 1.781}, {'end': 968.051, 'text': "Next, I'm going to show you how to write some react code from scratch.", 'start': 956.465, 'duration': 11.586}, {'end': 973.614, 'text': 'All right now I want you to delete all the files inside of the source folder.', 'start': 968.051, 'duration': 5.563}, {'end': 977.517, 'text': "you're gonna write everything from scratch.", 'start': 973.614, 'duration': 3.903}], 'summary': 'The file serves assets from a local cache in a production environment, and the next step is to write react code from scratch.', 'duration': 31.678, 'max_score': 945.839, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0945839.jpg'}, {'end': 1091.585, 'src': 'embed', 'start': 1064.584, 'weight': 2, 'content': [{'end': 1070.046, 'text': "But when our code is compiled, because there is a reference to react, that's why we have to import it on the top.", 'start': 1064.584, 'duration': 5.462}, {'end': 1073.928, 'text': "Now let's log this element on the console.", 'start': 1070.827, 'duration': 3.101}, {'end': 1080.832, 'text': "So here's one thing you need to know about projects that are created with create react app.", 'start': 1075.686, 'duration': 5.146}, {'end': 1085.678, 'text': 'Whenever you save the changes, this application is automatically restarted.', 'start': 1081.593, 'duration': 4.085}, {'end': 1088.641, 'text': "So you don't have to go back in the browser and refresh it.", 'start': 1086.359, 'duration': 2.282}, {'end': 1091.585, 'text': 'This is what we call hot module reloading.', 'start': 1088.882, 'duration': 2.703}], 'summary': 'Code compiled with reference to react requires automatic restart for changes. hot module reloading is applied.', 'duration': 27.001, 'max_score': 1064.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS01064584.jpg'}, {'end': 1196.425, 'src': 'embed', 'start': 1167.614, 'weight': 5, 'content': [{'end': 1171.518, 'text': 'okay. so here we have a JSX expression.', 'start': 1167.614, 'duration': 3.904}, {'end': 1176.102, 'text': 'the result of that is a react element which is part of the virtual Dom.', 'start': 1171.518, 'duration': 4.584}, {'end': 1183.77, 'text': "now we want to render this inside of the real Dom, and that's why we have to import react Dom on the top.", 'start': 1176.102, 'duration': 7.668}, {'end': 1189.115, 'text': 'so here we call react Dom dot render.', 'start': 1183.77, 'duration': 5.345}, {'end': 1193.78, 'text': 'As the first argument we pass the element we want to render.', 'start': 1190.754, 'duration': 3.026}, {'end': 1196.425, 'text': "So here's our element object.", 'start': 1194.361, 'duration': 2.064}], 'summary': 'Jsx expression results in a react element, rendered using reactdom.', 'duration': 28.811, 'max_score': 1167.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS01167614.jpg'}], 'start': 542.461, 'title': 'Setting up react app and virtual dom rendering', 'summary': 'Covers setting up a react app with create react app, including installation process, file structure, jsx syntax explanation, and modern javascript features. it also discusses virtual dom, rendering jsx, and using react dom, with details of a complete 10-hour react course.', 'chapters': [{'end': 1116.307, 'start': 542.461, 'title': 'Setting up react app', 'summary': 'Covers setting up a react app using the create react app package, including the installation process, file structure, jsx syntax explanation, and creating a new file from scratch, with an emphasis on the modern javascript features and the automatic restarting feature of projects created with create react app.', 'duration': 573.846, 'highlights': ['Using create React app package to install React and third-party libraries', 'Explanation of JSX syntax and its compilation by Babel', 'Automatic restarting feature of projects created with create React app', 'File structure and components in a React app', 'Creating a new file from scratch and using modern JavaScript features']}, {'end': 1439.214, 'start': 1117.639, 'title': 'React virtual dom and rendering', 'summary': 'Discusses the concept of virtual dom, rendering jsx expression to react element, and the process of rendering react element in the real dom using react dom. it also introduces the upcoming sections on react components and modern javascript features, along with the details of a complete 10-hour react course.', 'duration': 321.575, 'highlights': ['The chapter discusses the concept of virtual DOM, rendering JSX expression to React element, and the process of rendering React element in the real DOM using React Dom.', 'Introduces the upcoming sections on React components and modern JavaScript features, along with the details of a complete 10-hour React course.']}], 'duration': 896.753, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS0542461.jpg', 'highlights': ['Using create React app package to install React and third-party libraries', 'Explanation of JSX syntax and its compilation by Babel', 'Automatic restarting feature of projects created with create React app', 'File structure and components in a React app', 'Creating a new file from scratch and using modern JavaScript features', 'The chapter discusses the concept of virtual DOM, rendering JSX expression to React element, and the process of rendering React element in the real DOM using React Dom.', 'Introduces the upcoming sections on React components and modern JavaScript features, along with the details of a complete 10-hour React course.']}, {'end': 2137.737, 'segs': [{'end': 1488.082, 'src': 'embed', 'start': 1451.658, 'weight': 1, 'content': [{'end': 1454.079, 'text': "All right, let's start by creating a new project.", 'start': 1451.658, 'duration': 2.421}, {'end': 1464.603, 'text': "So here in the terminal or command prompt, let's run create react app and give our application a name counter dash app.", 'start': 1454.559, 'duration': 10.044}, {'end': 1472.366, 'text': 'Okay Beautiful.', 'start': 1471.706, 'duration': 0.66}, {'end': 1473.547, 'text': 'Our new project is ready.', 'start': 1472.446, 'duration': 1.101}, {'end': 1479.209, 'text': "So let's go to this folder counter app and start the application.", 'start': 1474.187, 'duration': 5.022}, {'end': 1482.434, 'text': 'Okay, beautiful.', 'start': 1481.693, 'duration': 0.741}, {'end': 1488.082, 'text': 'Now here in VS Code, the first thing we need to do is install Bootstrap.', 'start': 1483.476, 'duration': 4.606}], 'summary': 'Created a new react project named counter dash app and installed bootstrap.', 'duration': 36.424, 'max_score': 1451.658, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS01451658.jpg'}, {'end': 1546.749, 'src': 'embed', 'start': 1513.64, 'weight': 0, 'content': [{'end': 1517.281, 'text': 'We can run npm, install, bootstrap.', 'start': 1513.64, 'duration': 3.641}, {'end': 1521.822, 'text': "Make sure to install the same version I'm going to install in this video.", 'start': 1518.021, 'duration': 3.801}, {'end': 1525.575, 'text': 'So version 4.1.', 'start': 1522.342, 'duration': 3.233}, {'end': 1528.788, 'text': '1 Okay, beautiful.', 'start': 1525.575, 'duration': 3.213}, {'end': 1532.613, 'text': 'Finally we need to import this in index.js.', 'start': 1529.449, 'duration': 3.164}, {'end': 1536.138, 'text': "So let's open up index.js.", 'start': 1533.234, 'duration': 2.904}, {'end': 1540.223, 'text': 'Here on top we need to add another import statement.', 'start': 1537.279, 'duration': 2.944}, {'end': 1542.827, 'text': 'So import index.js.', 'start': 1540.944, 'duration': 1.883}, {'end': 1544.368, 'text': 'quotes here.', 'start': 1543.027, 'duration': 1.341}, {'end': 1546.749, 'text': 'in the intellisense you can see bootstrap.', 'start': 1544.368, 'duration': 2.381}], 'summary': 'Installing npm version 4.1 and importing into index.js.', 'duration': 33.109, 'max_score': 1513.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS01513640.jpg'}, {'end': 1638.696, 'src': 'embed', 'start': 1611.038, 'weight': 6, 'content': [{'end': 1615.46, 'text': 'So if you wanted to call this file counter component, it would name it like this.', 'start': 1611.038, 'duration': 4.422}, {'end': 1619.701, 'text': 'Counter component with a capital C.', 'start': 1616.22, 'duration': 3.481}, {'end': 1628.785, 'text': 'Okay Also, I highly encourage you to use the JSX extension instead of just JS because with this you will get better code completion.', 'start': 1619.701, 'duration': 9.084}, {'end': 1632.155, 'text': "So here's our counter module.", 'start': 1630.054, 'duration': 2.101}, {'end': 1638.696, 'text': 'In this module on the top, we need to import React and the component class from the React module.', 'start': 1632.855, 'duration': 5.841}], 'summary': 'Encourage using jsx extension for better code completion in react module', 'duration': 27.658, 'max_score': 1611.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS01611038.jpg'}, {'end': 1804.387, 'src': 'embed', 'start': 1777.029, 'weight': 5, 'content': [{'end': 1785.194, 'text': "Now note that in this generated code we're defining the class here and then exporting it separately on line nine.", 'start': 1777.029, 'duration': 8.165}, {'end': 1793.759, 'text': 'This is different from what I showed you in the last section where I talked about modules there, we define a class and exported it on the same line.', 'start': 1785.794, 'duration': 7.965}, {'end': 1796.421, 'text': 'So here we can do something like this export.', 'start': 1794.32, 'duration': 2.101}, {'end': 1804.387, 'text': 'Default class counter and then we can delete what we have on line nine.', 'start': 1798.001, 'duration': 6.386}], 'summary': 'Code defines and exports class separately, unlike previous module example.', 'duration': 27.358, 'max_score': 1777.029, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS01777029.jpg'}, {'end': 1887.222, 'src': 'embed', 'start': 1858.994, 'weight': 4, 'content': [{'end': 1870.824, 'text': "Okay, Now, finally, on line 9, Where you're rendering a react component? Instead of the app component, we're going to render our counter Component.", 'start': 1858.994, 'duration': 11.83}, {'end': 1872.605, 'text': 'so you can see with these components.', 'start': 1870.824, 'duration': 1.781}, {'end': 1876.108, 'text': "You're extending the HTML vocabulary.", 'start': 1872.846, 'duration': 3.262}, {'end': 1881.453, 'text': 'So wherever we have a counter element, will get the output of the counter component,', 'start': 1876.108, 'duration': 5.345}, {'end': 1887.222, 'text': 'which is determined by our what is returned from the render method.', 'start': 1881.453, 'duration': 5.769}], 'summary': 'Rendering a react counter component instead of the app component to extend html vocabulary.', 'duration': 28.228, 'max_score': 1858.994, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS01858994.jpg'}, {'end': 2004.553, 'src': 'embed', 'start': 1976.804, 'weight': 3, 'content': [{'end': 1985.588, 'text': "So we'll have a React element with the type div and inside of that element, we'll have two other elements, an H1 and a button.", 'start': 1976.804, 'duration': 8.784}, {'end': 1988.429, 'text': 'Okay So delete.', 'start': 1986.469, 'duration': 1.96}, {'end': 1991.791, 'text': 'Now see what happens when I save the changes.', 'start': 1989.27, 'duration': 2.521}, {'end': 1999.43, 'text': 'The prettier extension that I told you to install at the beginning of the course automatically reformatted this expression.', 'start': 1993.786, 'duration': 5.644}, {'end': 2000.811, 'text': "Now it's more readable.", 'start': 1999.77, 'duration': 1.041}, {'end': 2004.553, 'text': 'And it also put parentheses around that.', 'start': 2001.391, 'duration': 3.162}], 'summary': 'Demo: using react to create a div with an h1 and a button. prettier extension automatically reformats for readability.', 'duration': 27.749, 'max_score': 1976.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS01976804.jpg'}, {'end': 2117.49, 'src': 'embed', 'start': 2085.989, 'weight': 2, 'content': [{'end': 2089.971, 'text': "Okay? Now sometimes you don't want an extra div that is not doing anything here.", 'start': 2085.989, 'duration': 3.982}, {'end': 2093.333, 'text': 'In that case you can use react.fragment.', 'start': 2090.532, 'duration': 2.801}, {'end': 2094.353, 'text': 'Let me show you.', 'start': 2093.813, 'duration': 0.54}, {'end': 2098.417, 'text': 'So, back in the code we imported this react object.', 'start': 2094.634, 'duration': 3.783}, {'end': 2109.704, 'text': 'on the top, this react has a child called fragment, so we can replace these two divs with react dot fragment.', 'start': 2098.417, 'duration': 11.287}, {'end': 2117.49, 'text': 'now, if you are curious how i edited both these instances at the same time, this is called multi-cursor editing,', 'start': 2109.704, 'duration': 7.786}], 'summary': 'Use react.fragment for replacing unnecessary divs, enabling multi-cursor editing.', 'duration': 31.501, 'max_score': 2085.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02085989.jpg'}], 'start': 1451.658, 'title': 'React app, bootstrap, components, and jsx', 'summary': 'Covers creating a new react project, installing bootstrap 4.1.1, creating a component, defining/exporting classes, rendering components, addressing jsx compilation errors, and using react.fragment to avoid unnecessary extra divs.', 'chapters': [{'end': 1776.569, 'start': 1451.658, 'title': 'Creating react app and adding bootstrap', 'summary': 'Covers creating a new react project named counter-app, installing bootstrap version 4.1.1 to give the application a modern look, and creating a component named counter.jsx using react and simple react snippets.', 'duration': 324.911, 'highlights': ['The chapter covers creating a new React project named counter-app', 'Installing Bootstrap version 4.1.1 to give the application a modern look', 'Creating a component named counter.jsx using React and Simple React Snippets']}, {'end': 2137.737, 'start': 1777.029, 'title': 'React components and jsx', 'summary': 'Discusses defining and exporting classes in generated code, importing and rendering a counter component in index.js, addressing jsx compilation errors, and using react.fragment to avoid unnecessary extra divs.', 'duration': 360.708, 'highlights': ['Defining and exporting classes in generated code with the preference of sticking to the template generated by the extension for avoiding manual modifications.', 'Importing and rendering a counter component in index.js to extend the HTML vocabulary and get the output of the counter component, which is determined by the render method.', 'Addressing JSX compilation errors by wrapping JSX expressions with a div to enable proper compilation by Babel and automatic reformatting by the Prettier extension.', 'Using react.fragment to replace unnecessary extra divs and leveraging multi-cursor editing to make simultaneous changes in the code.']}], 'duration': 686.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS01451658.jpg', 'highlights': ['Installing Bootstrap version 4.1.1 to give the application a modern look', 'Creating a new React project named counter-app', 'Using react.fragment to replace unnecessary extra divs and leveraging multi-cursor editing to make simultaneous changes in the code', 'Addressing JSX compilation errors by wrapping JSX expressions with a div to enable proper compilation by Babel and automatic reformatting by the Prettier extension', 'Importing and rendering a counter component in index.js to extend the HTML vocabulary and get the output of the counter component, which is determined by the render method', 'Defining and exporting classes in generated code with the preference of sticking to the template generated by the extension for avoiding manual modifications', 'Creating a component named counter.jsx using React and Simple React Snippets']}, {'end': 2989.123, 'segs': [{'end': 2177.769, 'src': 'embed', 'start': 2138.137, 'weight': 0, 'content': [{'end': 2140.298, 'text': 'So React.Fragment.', 'start': 2138.137, 'duration': 2.161}, {'end': 2144.469, 'text': 'Now save the changes back in the browser.', 'start': 2141.943, 'duration': 2.526}, {'end': 2149.801, 'text': 'This time inside of our root div, we only have the H1 and the button.', 'start': 2144.489, 'duration': 5.312}, {'end': 2152.167, 'text': 'They are not contained by another div.', 'start': 2150.242, 'duration': 1.925}, {'end': 2166.517, 'text': "Now let's take this to the next level instead of hard coding this hello world here.", 'start': 2161.631, 'duration': 4.886}, {'end': 2169.92, 'text': 'I want to display a value dynamically.', 'start': 2166.537, 'duration': 3.383}, {'end': 2177.769, 'text': 'So here in the counter class we need to add a property, call it state and Set it to an object.', 'start': 2169.92, 'duration': 7.849}], 'summary': 'Using react.fragment, dynamically displaying a value in counter class.', 'duration': 39.632, 'max_score': 2138.137, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02138137.jpg'}, {'end': 2572.143, 'src': 'embed', 'start': 2542.957, 'weight': 3, 'content': [{'end': 2554.425, 'text': "it's class name because, as i told you before, these jsx expressions get compiled to react elements which are essentially plain javascript objects.", 'start': 2542.957, 'duration': 11.468}, {'end': 2559.79, 'text': "we cannot use a class property on an object because that's a reserved keyword in javascript.", 'start': 2554.425, 'duration': 5.365}, {'end': 2564.194, 'text': 'So the name of the attribute in JSX is class name.', 'start': 2560.51, 'duration': 3.684}, {'end': 2567.137, 'text': "Here I'm going to use a couple of bootstrap classes.", 'start': 2564.875, 'duration': 2.262}, {'end': 2572.143, 'text': 'One is badge and the other is badge dash primary.', 'start': 2568.239, 'duration': 3.904}], 'summary': "Jsx expressions compile to react elements, using 'class' in jsx as 'class name' due to reserved keyword in javascript.", 'duration': 29.186, 'max_score': 2542.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02542957.jpg'}, {'end': 2675.732, 'src': 'embed', 'start': 2628.024, 'weight': 1, 'content': [{'end': 2631.728, 'text': 'So save the changes and now our button looks different.', 'start': 2628.024, 'duration': 3.704}, {'end': 2632.749, 'text': "That's much better.", 'start': 2631.988, 'duration': 0.761}, {'end': 2635.972, 'text': "Now finally, let's look at applying styles.", 'start': 2632.769, 'duration': 3.203}, {'end': 2640.817, 'text': "So for the most part, it's best to use classes.", 'start': 2636.793, 'duration': 4.024}, {'end': 2643.74, 'text': 'This is for performance and maintainability.', 'start': 2641.418, 'duration': 2.322}, {'end': 2651.984, 'text': "But there are times that you may want to break the rules if you know what you're doing, and you may want to apply your style to a specific element.", 'start': 2644.341, 'duration': 7.643}, {'end': 2660.186, 'text': 'Now, in JSX, we have this style attribute that we need to set to a plain JavaScript object.', 'start': 2652.744, 'duration': 7.442}, {'end': 2662.907, 'text': 'So first we need to add curly braces here.', 'start': 2660.667, 'duration': 2.24}, {'end': 2667.849, 'text': 'Now, in between these curly braces, we need to pass a plain JavaScript object.', 'start': 2663.407, 'duration': 4.442}, {'end': 2669.469, 'text': "Here's one way to do this.", 'start': 2668.429, 'duration': 1.04}, {'end': 2675.732, 'text': 'We can define a property, call it styles, set it to an object.', 'start': 2669.93, 'duration': 5.802}], 'summary': 'Using classes for most styles, but exceptions for specific elements. style attribute in jsx requires plain javascript object.', 'duration': 47.708, 'max_score': 2628.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02628024.jpg'}, {'end': 2752.847, 'src': 'embed', 'start': 2727.547, 'weight': 5, 'content': [{'end': 2734.354, 'text': "Let me change this to, let's say, 50 Save the changes, and now we have a big badge here.", 'start': 2727.547, 'duration': 6.807}, {'end': 2738.197, 'text': 'So, this is one way to apply styles.', 'start': 2735.875, 'duration': 2.322}, {'end': 2742.66, 'text': 'We define a property here and then reference it in our JSX expression.', 'start': 2738.597, 'duration': 4.063}, {'end': 2750.125, 'text': "But maybe you wanna apply styles to a couple of different elements, so you don't wanna define multiple properties in this class.", 'start': 2743.32, 'duration': 6.805}, {'end': 2752.847, 'text': "If that's the case, you can use inline styles.", 'start': 2750.505, 'duration': 2.342}], 'summary': 'Using inline styles to apply consistent styling to multiple elements.', 'duration': 25.3, 'max_score': 2727.547, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02727547.jpg'}, {'end': 2813.579, 'src': 'embed', 'start': 2778.4, 'weight': 2, 'content': [{'end': 2786.741, 'text': "its font size is now 30 and In this section we're only gonna use the classes, so I'm gonna delete the style attribute.", 'start': 2778.4, 'duration': 8.341}, {'end': 2792.189, 'text': "Done Next, we're gonna look at rendering classes dynamically.", 'start': 2788.223, 'duration': 3.966}, {'end': 2809.474, 'text': "badge is currently blue, but let's change this application such that if the value of the count property is 0,", 'start': 2801.964, 'duration': 7.51}, {'end': 2813.579, 'text': 'we want to render this as yellow to indicate some kind of warning.', 'start': 2809.474, 'duration': 4.105}], 'summary': 'Using classes to render dynamically; changing badge color based on count value.', 'duration': 35.179, 'max_score': 2778.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02778400.jpg'}, {'end': 2972.533, 'src': 'embed', 'start': 2938.629, 'weight': 6, 'content': [{'end': 2939.79, 'text': 'Look at our render method.', 'start': 2938.629, 'duration': 1.161}, {'end': 2944.834, 'text': 'These two first lines are purely about determining the class for this label.', 'start': 2940.23, 'duration': 4.604}, {'end': 2947.996, 'text': 'They are polluting our render method.', 'start': 2945.354, 'duration': 2.642}, {'end': 2953.72, 'text': 'It would be nicer if we encapsulated these two lines in a separate method,', 'start': 2948.796, 'duration': 4.924}, {'end': 2959.705, 'text': 'so the details of calculation of the classes is not causing this method to get bloated.', 'start': 2953.72, 'duration': 5.985}, {'end': 2963.747, 'text': "So let's extract these two lines in a separate method.", 'start': 2960.565, 'duration': 3.182}, {'end': 2965.789, 'text': 'Now, let me show you a quick tip.', 'start': 2964.568, 'duration': 1.221}, {'end': 2972.533, 'text': "I'm going to select these two lines, right-click, look at this refactor menu.", 'start': 2966.549, 'duration': 5.984}], 'summary': 'Refactor the render method to encapsulate class determination code, improving code readability and maintainability.', 'duration': 33.904, 'max_score': 2938.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02938629.jpg'}], 'start': 2138.137, 'title': 'Using react.fragment, setting attributes, styling, and rendering classes', 'summary': 'Demonstrates using react.fragment, setting attributes like source, class name, and style, and discusses styling in jsx using inline styles, rendering classes dynamically, with examples of font size and badge color changes.', 'chapters': [{'end': 2651.984, 'start': 2138.137, 'title': 'Using react.fragment and setting attributes', 'summary': 'Demonstrates using react.fragment to render dynamic values and jsx expressions, setting attributes like source, class name, and style, and using object destructuring.', 'duration': 513.847, 'highlights': ['Using React.Fragment and rendering dynamic values with state property', 'Setting attributes dynamically with JSX expressions', 'Setting class name and using object destructuring', 'Applying styles using classes and using inline styles when necessary']}, {'end': 2989.123, 'start': 2652.744, 'title': 'Styling in jsx and rendering classes', 'summary': 'Discusses applying styles in jsx using inline styles and rendering classes dynamically based on the count property, with examples of setting font size and dynamically changing badge color based on the count value.', 'duration': 336.379, 'highlights': ['Applying styles in JSX using inline styles', 'Rendering classes dynamically based on the count property', 'Refactoring the render method to encapsulate class calculation']}], 'duration': 850.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02138137.jpg', 'highlights': ['Using React.Fragment and rendering dynamic values with state property', 'Setting attributes dynamically with JSX expressions', 'Rendering classes dynamically based on the count property', 'Setting class name and using object destructuring', 'Applying styles using classes and using inline styles when necessary', 'Applying styles in JSX using inline styles', 'Refactoring the render method to encapsulate class calculation']}, {'end': 4560.912, 'segs': [{'end': 3047.924, 'src': 'embed', 'start': 2990.063, 'weight': 0, 'content': [{'end': 2995.585, 'text': 'Now you can see VS Code automatically extracted these two lines into a separate method.', 'start': 2990.063, 'duration': 5.522}, {'end': 2997.586, 'text': 'Now we need to give this method a name.', 'start': 2996.085, 'duration': 1.501}, {'end': 3002.288, 'text': "Let's call that get badge classes.", 'start': 2998.126, 'duration': 4.162}, {'end': 3007.329, 'text': 'Always use descriptive names that determine the intention of your code.', 'start': 3002.768, 'duration': 4.561}, {'end': 3011.331, 'text': 'This makes it easier for other developers to read and understand your code.', 'start': 3007.81, 'duration': 3.521}, {'end': 3015.089, 'text': "Okay, so here's our new method.", 'start': 3012.048, 'duration': 3.041}, {'end': 3016.95, 'text': 'Now we can simplify this code.', 'start': 3015.65, 'duration': 1.3}, {'end': 3018.951, 'text': "We don't need this separate variable here.", 'start': 3016.99, 'duration': 1.961}, {'end': 3022.793, 'text': 'We can call this method directly right here.', 'start': 3019.411, 'duration': 3.382}, {'end': 3031.437, 'text': 'So this, that get batch classes, and then we delete this variable.', 'start': 3023.613, 'duration': 7.824}, {'end': 3034.418, 'text': 'Now we can see our render method is cleaner.', 'start': 3032.457, 'duration': 1.961}, {'end': 3037.439, 'text': "It's not bloated with various responsibilities.", 'start': 3035.038, 'duration': 2.401}, {'end': 3040.781, 'text': 'Save the changes to make sure everything is working.', 'start': 3038.26, 'duration': 2.521}, {'end': 3043.862, 'text': 'our badge is blue beautiful.', 'start': 3041.701, 'duration': 2.161}, {'end': 3047.924, 'text': "finally, let's change this to zero.", 'start': 3043.862, 'duration': 4.062}], 'summary': 'Vs code automated method extraction improves code readability, simplifies and cleans up the render method, resulting in a cleaner and more efficient codebase.', 'duration': 57.861, 'max_score': 2990.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02990063.jpg'}, {'end': 3134.774, 'src': 'embed', 'start': 3106.017, 'weight': 2, 'content': [{'end': 3110.881, 'text': "It's just a simple syntax that will eventually get compiled to React elements.", 'start': 3106.017, 'duration': 4.864}, {'end': 3115.403, 'text': 'so how can we render a bunch of list items here?', 'start': 3111.661, 'duration': 3.742}, {'end': 3120.366, 'text': 'well, in the last section i talked about the map method of arrays.', 'start': 3115.403, 'duration': 4.963}, {'end': 3130.911, 'text': 'we can use the map method to map each element in this array into a react element, and with this we can render a list of items.', 'start': 3120.366, 'duration': 10.545}, {'end': 3134.774, 'text': 'let me show you so here want to render something dynamically.', 'start': 3130.911, 'duration': 3.863}], 'summary': 'Using the map method, we can render a dynamic list of items in react.', 'duration': 28.757, 'max_score': 3106.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS03106017.jpg'}, {'end': 3257.057, 'src': 'embed', 'start': 3224.675, 'weight': 3, 'content': [{'end': 3234.305, 'text': 'React needs to quickly figure out what element is changed and where in the DOM it should make changes to keep the DOM in sync with the virtual DOM.', 'start': 3224.675, 'duration': 9.63}, {'end': 3246.531, 'text': "So back in the code, whenever you're using the map method to render a list of items, Here, for each item, you need to set the key attribute.", 'start': 3235.105, 'duration': 11.426}, {'end': 3251.814, 'text': 'So key, we set this to a dynamic value.', 'start': 3247.171, 'duration': 4.643}, {'end': 3257.057, 'text': 'Here, each tag is a string and that string is unique.', 'start': 3252.534, 'duration': 4.523}], 'summary': 'React uses key attribute to efficiently update dom with virtual dom.', 'duration': 32.382, 'max_score': 3224.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS03224675.jpg'}, {'end': 3485.566, 'src': 'embed', 'start': 3457.271, 'weight': 4, 'content': [{'end': 3460.996, 'text': 'There is also another technique for conditionally rendering content.', 'start': 3457.271, 'duration': 3.725}, {'end': 3462.117, 'text': 'Let me show you.', 'start': 3461.597, 'duration': 0.52}, {'end': 3470.507, 'text': 'So back in the code here in our render method just before rendering the tags.', 'start': 3462.317, 'duration': 8.19}, {'end': 3476.075, 'text': "let's imagine you want to render a separate message based on a given condition.", 'start': 3470.507, 'duration': 5.568}, {'end': 3481.341, 'text': 'So we have only a single if statement without an else part.', 'start': 3476.636, 'duration': 4.705}, {'end': 3485.566, 'text': 'okay?. So we can add our curly braces here.', 'start': 3481.341, 'duration': 4.225}], 'summary': 'Demonstrating conditional content rendering using a single if statement.', 'duration': 28.295, 'max_score': 3457.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS03457271.jpg'}, {'end': 3686.455, 'src': 'embed', 'start': 3651.009, 'weight': 6, 'content': [{'end': 3656.456, 'text': 'First we add our condition, then and, and then whatever we want to render after comes here.', 'start': 3651.009, 'duration': 5.447}, {'end': 3660.261, 'text': 'It can be plain text or another JSX expression.', 'start': 3657.017, 'duration': 3.244}, {'end': 3671.604, 'text': "Now let's see how you can handle events.", 'start': 3669.622, 'duration': 1.982}, {'end': 3677.829, 'text': 'So all these React elements have properties that are based on standard DOM events.', 'start': 3672.184, 'duration': 5.645}, {'end': 3683.833, 'text': 'For example, here in our button, we have a property, onClick.', 'start': 3678.389, 'duration': 5.444}, {'end': 3686.455, 'text': 'You also have onDoubleClick.', 'start': 3684.854, 'duration': 1.601}], 'summary': 'React elements have properties like onclick and ondoubleclick for handling events.', 'duration': 35.446, 'max_score': 3651.009, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS03651009.jpg'}, {'end': 4127.144, 'src': 'embed', 'start': 4090.174, 'weight': 8, 'content': [{'end': 4099.337, 'text': 'So you can see using an arrow function is cleaner and simpler than adding a custom constructor and rebinding every event handler manually.', 'start': 4090.174, 'duration': 9.163}, {'end': 4107.658, 'text': "So, going forward, I'm going to use this syntax, but if this feature is not available at the time of you watching this video,", 'start': 4100.096, 'duration': 7.562}, {'end': 4110.38, 'text': 'use the former approach to bind event handlers.', 'start': 4107.658, 'duration': 2.722}, {'end': 4127.144, 'text': "Now that we have access to the current object in our event handler, it's time to update the value of the count property.", 'start': 4119.877, 'duration': 7.267}], 'summary': 'Using arrow functions simplifies event handling. use former approach if feature not available.', 'duration': 36.97, 'max_score': 4090.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS04090174.jpg'}, {'end': 4273.548, 'src': 'embed', 'start': 4242.132, 'weight': 9, 'content': [{'end': 4259.916, 'text': 'You can see our count is incremented because react is aware of the state changes and Now that you have seen a complete example of a component,', 'start': 4242.132, 'duration': 17.784}, {'end': 4265.201, 'text': "let's see what exactly happens under the hood when we click the increment button.", 'start': 4259.916, 'duration': 5.285}, {'end': 4268.704, 'text': "At this point, we're calling this.setState.", 'start': 4265.962, 'duration': 2.742}, {'end': 4273.548, 'text': 'This method is telling React that the state of this component is going to change.', 'start': 4269.445, 'duration': 4.103}], 'summary': 'React increments count as state changes via this.setstate method', 'duration': 31.416, 'max_score': 4242.132, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS04242132.jpg'}, {'end': 4560.912, 'src': 'embed', 'start': 4534.576, 'weight': 10, 'content': [{'end': 4542.142, 'text': "So instead of hard coding this object here, it will pass a reference to the product that we're currently rendering.", 'start': 4534.576, 'duration': 7.566}, {'end': 4547.446, 'text': 'Okay With this, we no longer need this helper method.', 'start': 4542.943, 'duration': 4.503}, {'end': 4552.157, 'text': 'So, to recap, whenever you need to pass an argument,', 'start': 4548.891, 'duration': 3.266}, {'end': 4560.912, 'text': 'your event handlers simply pass an arrow function here in the body of that function called the event handler and pass an argument.', 'start': 4552.157, 'duration': 8.755}], 'summary': 'Use reference to product, eliminate helper method, pass arrow function for event handlers.', 'duration': 26.336, 'max_score': 4534.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS04534576.jpg'}], 'start': 2990.063, 'title': 'Refactoring code, rendering lists, and handling events in react', 'summary': 'Discusses refactoring code for improved readability, rendering lists and implementing conditional rendering in react, and handling events in react components, showcasing a method simplification, ensuring unique key attributes for list items, and updating state with the setstate method.', 'chapters': [{'end': 3047.924, 'start': 2990.063, 'title': 'Refactoring code for clarity', 'summary': 'Discusses refactoring code to simplify and improve readability, emphasizing the importance of descriptive method names and showcasing a method simplification that resulted in cleaner, more efficient code.', 'duration': 57.861, 'highlights': ['The importance of using descriptive names for methods to improve code readability and understanding by other developers.', 'The demonstration of method simplification resulting in cleaner and more efficient code, exemplified by the removal of a separate variable and direct method call.']}, {'end': 3650.428, 'start': 3047.924, 'title': 'Rendering lists and conditional rendering', 'summary': 'Covers rendering a list of tags using the map method in react, ensuring unique key attribute for each list item to avoid warnings, and implementing conditional rendering using if statements and logical and operator, providing a dynamic understanding of conditional rendering.', 'duration': 602.504, 'highlights': ['The chapter covers rendering a list of tags using the map method in React, ensuring unique key attribute for each list item to avoid warnings, and implementing conditional rendering using if statements and logical and operator, providing a dynamic understanding of conditional rendering.', 'In React, the map method of arrays is used to map each element in an array into a react element, allowing the rendering of a list of items, providing a dynamic way to render content.', 'When using the map method to render a list of items in React, it is essential to set a unique key attribute for each item to allow React to quickly identify changes in the virtual DOM and keep it in sync with the actual DOM.', 'Conditional rendering in React can be achieved by using separate helper methods with if and else statements to handle different scenarios based on the state, allowing the rendering of different content based on conditions.', 'Another technique for conditional rendering in React involves using the logical and operator to render content based on a given condition, providing a flexible way to conditionally display different messages or elements.']}, {'end': 4560.912, 'start': 3651.009, 'title': 'Handling events in react components', 'summary': "Covers handling events in react components, including using standard dom events, handling 'this' context, solving 'this' context issues using bind method and arrow functions, updating state using setstate method, and passing arguments with event handlers.", 'duration': 909.903, 'highlights': ["The chapter covers handling events in React components, including using standard DOM events, handling 'this' context, solving 'this' context issues using bind method and arrow functions, updating state using setState method, and passing arguments with event handlers.", 'The properties of React elements are based on standard DOM events, such as onClick, onDoubleClick, onKeyDown, onKeyPress, and onKeyUp.', "The 'this' context in event handlers in React behaves differently compared to vanilla JavaScript, requiring the use of the bind method or arrow functions to solve the context issues.", 'The setState method in React is used to update the state of the component, and it informs React that the state is going to change, triggering a call to the render method and updating the virtual DOM.', 'When passing arguments with event handlers, an alternative to defining a separate method is to use an inline arrow function, allowing the direct passing of arguments to the event handler.']}], 'duration': 1570.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS02990063.jpg', 'highlights': ['The importance of using descriptive names for methods to improve code readability and understanding by other developers.', 'The demonstration of method simplification resulting in cleaner and more efficient code, exemplified by the removal of a separate variable and direct method call.', 'In React, the map method of arrays is used to map each element in an array into a react element, allowing the rendering of a list of items, providing a dynamic way to render content.', 'When using the map method to render a list of items in React, it is essential to set a unique key attribute for each item to allow React to quickly identify changes in the virtual DOM and keep it in sync with the actual DOM.', 'Conditional rendering in React can be achieved by using separate helper methods with if and else statements to handle different scenarios based on the state, allowing the rendering of different content based on conditions.', 'Another technique for conditional rendering in React involves using the logical and operator to render content based on a given condition, providing a flexible way to conditionally display different messages or elements.', "The chapter covers handling events in React components, including using standard DOM events, handling 'this' context, solving 'this' context issues using bind method and arrow functions, updating state using setState method, and passing arguments with event handlers.", 'The properties of React elements are based on standard DOM events, such as onClick, onDoubleClick, onKeyDown, onKeyPress, and onKeyUp.', "The 'this' context in event handlers in React behaves differently compared to vanilla JavaScript, requiring the use of the bind method or arrow functions to solve the context issues.", 'The setState method in React is used to update the state of the component, and it informs React that the state is going to change, triggering a call to the render method and updating the virtual DOM.', 'When passing arguments with event handlers, an alternative to defining a separate method is to use an inline arrow function, allowing the direct passing of arguments to the event handler.']}, {'end': 5294.391, 'segs': [{'end': 4642.3, 'src': 'embed', 'start': 4567.702, 'weight': 0, 'content': [{'end': 4571.025, 'text': 'In this section, you learned the essence of React components.', 'start': 4567.702, 'duration': 3.323}, {'end': 4578.251, 'text': 'More specifically, you learned about JSX or JavaScript XML syntax for describing the UI.', 'start': 4571.485, 'duration': 6.766}, {'end': 4586.077, 'text': 'You learned about rendering lists, conditional rendering, as well as handling events and updating the state of components.', 'start': 4578.671, 'duration': 7.406}, {'end': 4591.802, 'text': "In the next section, we're going to look at composing components to build complex user interfaces.", 'start': 4586.758, 'duration': 5.044}, {'end': 4593.844, 'text': 'So I will see you in the next section.', 'start': 4592.303, 'duration': 1.541}, {'end': 4612.25, 'text': 'In the last section, we worked with single components, but a real world application consists of a tree of components.', 'start': 4605.444, 'duration': 6.806}, {'end': 4616.094, 'text': "So in this section, we're going to look at composing components in React.", 'start': 4612.851, 'duration': 3.243}, {'end': 4620.698, 'text': "More specifically, you're going to learn how to pass data between your components.", 'start': 4616.694, 'duration': 4.004}, {'end': 4627.304, 'text': "You're going to learn how to raise and handle events, how to have multiple components that are in sync,", 'start': 4621.218, 'duration': 6.086}, {'end': 4630.326, 'text': 'as well as functional components and lifecycle hooks.', 'start': 4627.304, 'duration': 3.022}, {'end': 4635.552, 'text': 'These are all very important topics that you will use quite a lot in real world applications.', 'start': 4631.027, 'duration': 4.525}, {'end': 4639.997, 'text': 'By the end of this section, you will have a very deep understanding of React components.', 'start': 4636.093, 'duration': 3.904}, {'end': 4642.3, 'text': "Are you ready? Now, let's get started.", 'start': 4640.498, 'duration': 1.802}], 'summary': 'Learned about react components, jsx syntax, rendering lists, conditional rendering, event handling, updating state, composing components, passing data, raising and handling events, syncing components, functional components, and lifecycle hooks.', 'duration': 74.598, 'max_score': 4567.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS04567702.jpg'}, {'end': 4790.639, 'src': 'embed', 'start': 4763.679, 'weight': 3, 'content': [{'end': 4769.591, 'text': 'save the changes back in the browser You can see we have multiple counter components.', 'start': 4763.679, 'duration': 5.912}, {'end': 4776.203, 'text': 'Each component has its own state that is completely isolated from the other components.', 'start': 4770.573, 'duration': 5.63}, {'end': 4779.274, 'text': "Beautiful Now let's take this to the next level.", 'start': 4776.404, 'duration': 2.87}, {'end': 4784.036, 'text': 'Instead of hard coding these counter components here,', 'start': 4779.994, 'duration': 4.042}, {'end': 4790.639, 'text': "let's add an array of counter objects to our state property and render them using the map method.", 'start': 4784.036, 'duration': 6.603}], 'summary': 'Multiple isolated counter components rendered using map method.', 'duration': 26.96, 'max_score': 4763.679, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS04763679.jpg'}, {'end': 4888.514, 'src': 'embed', 'start': 4855.027, 'weight': 6, 'content': [{'end': 4864.993, 'text': 'Beautiful However, all our counters are initialized to zero and the value that we set here is not applied to this counter components.', 'start': 4855.027, 'duration': 9.966}, {'end': 4872.459, 'text': 'So if I change the value of the first counter to four, we still get a counter initialized to zero.', 'start': 4865.633, 'duration': 6.826}, {'end': 4874.421, 'text': "We'll fix that in the next lecture.", 'start': 4872.96, 'duration': 1.461}, {'end': 4888.514, 'text': 'In the last lecture, we set the key attribute to counter.id.', 'start': 4883.95, 'duration': 4.564}], 'summary': 'Counters initialized to zero, fix in next lecture.', 'duration': 33.487, 'max_score': 4855.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS04855027.jpg'}, {'end': 5025.607, 'src': 'embed', 'start': 4976.459, 'weight': 7, 'content': [{'end': 4983.301, 'text': 'Our props is an object with two properties, value which we set to four and selected which we set to true.', 'start': 4976.459, 'duration': 6.842}, {'end': 4989.024, 'text': 'So now we can read this value and use that to initialize each counter component.', 'start': 4984.242, 'duration': 4.782}, {'end': 5001.321, 'text': "So back in our counter component, instead of initializing the count property to zero, I'm gonna set it to this.props.value.", 'start': 4990.27, 'duration': 11.051}, {'end': 5008.148, 'text': 'Save the changes, back in Chrome, you can see our first counter is initialized to four, beautiful.', 'start': 5002.462, 'duration': 5.686}, {'end': 5013.176, 'text': 'So here in the render method, we no longer need this line.', 'start': 5009.693, 'duration': 3.483}, {'end': 5014.077, 'text': "Let's delete that.", 'start': 5013.376, 'duration': 0.701}, {'end': 5022.504, 'text': 'Also, I would like to rename this count property to value to be consistent with the property that we are setting from the outside.', 'start': 5014.838, 'duration': 7.666}, {'end': 5025.607, 'text': 'This makes our code cleaner and more maintainable.', 'start': 5023.085, 'duration': 2.522}], 'summary': 'Props object set to value: 4, selected: true. count property initialized to 4 for first counter, improved code maintainability.', 'duration': 49.148, 'max_score': 4976.459, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS04976459.jpg'}, {'end': 5117.66, 'src': 'embed', 'start': 5087.612, 'weight': 4, 'content': [{'end': 5097.081, 'text': 'Now we have a special prop called children and we use that when we want to pass something between the opening and closing tag of an element.', 'start': 5087.612, 'duration': 9.469}, {'end': 5107.27, 'text': 'So here, counter is self-closed, but sometimes we want to pass content in between the opening and closing tags.', 'start': 5097.722, 'duration': 9.548}, {'end': 5112.975, 'text': 'Maybe we want to pass an H4 here with some kind of title like this.', 'start': 5107.731, 'duration': 5.244}, {'end': 5117.66, 'text': 'A real world example of this is when using dialog boxes.', 'start': 5114.396, 'duration': 3.264}], 'summary': "Using the 'children' prop to pass content between opening and closing tags for elements, such as in dialog boxes.", 'duration': 30.048, 'max_score': 5087.612, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS05087612.jpg'}, {'end': 5294.391, 'src': 'embed', 'start': 5269.73, 'weight': 5, 'content': [{'end': 5275.595, 'text': "in this lecture i'm going to introduce you to a very useful tool for debugging react applications.", 'start': 5269.73, 'duration': 5.865}, {'end': 5284.322, 'text': 'this tool is currently available as an extension for chrome and firefox and as a standalone app for safari and internet explorer.', 'start': 5275.595, 'duration': 8.727}, {'end': 5290.247, 'text': "so if you're using chrome or firefox, simply search for react developer tools.", 'start': 5284.322, 'duration': 5.925}, {'end': 5294.391, 'text': 'when you install this, you will see a new tab in chrome developer tools.', 'start': 5290.247, 'duration': 4.144}], 'summary': 'Introducing a useful tool for debugging react applications, available as an extension for chrome and firefox, and a standalone app for safari and internet explorer.', 'duration': 24.661, 'max_score': 5269.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS05269730.jpg'}], 'start': 4567.702, 'title': 'React component basics', 'summary': 'Covers react component essentials, such as composing components, handling data, creating component trees, and initialization. it includes topics like jsx, conditional rendering, event handling, component composition, state management, and rendering dynamic content. additionally, it discusses the creation of component trees and the use of react developer tools for debugging.', 'chapters': [{'end': 4642.3, 'start': 4567.702, 'title': 'React components: composing and handling data', 'summary': 'Covers the essence of react components, including jsx for describing ui, rendering lists, conditional rendering, handling events, and updating component state. it also discusses composing components, passing data between components, raising and handling events, syncing multiple components, and using functional components and lifecycle hooks.', 'duration': 74.598, 'highlights': ['You will learn how to pass data between your components, raise and handle events, have multiple components that are in sync, as well as functional components and lifecycle hooks.', 'The chapter covers the essence of React components, including JSX for describing UI, rendering lists, conditional rendering, handling events, and updating component state.']}, {'end': 4854.847, 'start': 4656.115, 'title': 'React component tree and composition', 'summary': 'Discusses the creation of a component tree in a react application, demonstrating the composition of multiple counter components and rendering them dynamically using an array of counter objects in the state.', 'duration': 198.732, 'highlights': ['The chapter discusses the creation of a component tree in a React application', 'Demonstrates the composition of multiple counter components and rendering them dynamically']}, {'end': 5294.391, 'start': 4855.027, 'title': 'React component initialization', 'summary': 'Introduces initializing react component attributes, rendering dynamic content, and using the react developer tools for debugging.', 'duration': 439.364, 'highlights': ['The value of the first counter is initialized to zero, but setting the key attribute to counter.id and using the same syntax to set additional attributes allows for the initialization of counter components.', 'Setting the value and selected attributes for each counter component allows for dynamic initialization, while accessing and using the props object to initialize each counter component with specific values.', 'Renaming the count property to value for consistency and better code maintenance, and deleting unnecessary attributes for cleaner code.', 'Introduction to using the children prop to pass content between the opening and closing tags of an element, and rendering dynamic content within the counter component.', 'Introduction to the React developer tools for debugging React applications, available as an extension for Chrome and Firefox, and as a standalone app for Safari and Internet Explorer.']}], 'duration': 726.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS04567702.jpg', 'highlights': ['You will learn how to pass data between your components, raise and handle events, have multiple components that are in sync, as well as functional components and lifecycle hooks.', 'The chapter covers the essence of React components, including JSX for describing UI, rendering lists, conditional rendering, handling events, and updating component state.', 'The chapter discusses the creation of a component tree in a React application', 'Demonstrates the composition of multiple counter components and rendering them dynamically', 'Introduction to using the children prop to pass content between the opening and closing tags of an element, and rendering dynamic content within the counter component.', 'Introduction to the React developer tools for debugging React applications, available as an extension for Chrome and Firefox, and as a standalone app for Safari and Internet Explorer.', 'The value of the first counter is initialized to zero, but setting the key attribute to counter.id and using the same syntax to set additional attributes allows for the initialization of counter components.', 'Setting the value and selected attributes for each counter component allows for dynamic initialization, while accessing and using the props object to initialize each counter component with specific values.', 'Renaming the count property to value for consistency and better code maintenance, and deleting unnecessary attributes for cleaner code.']}, {'end': 6128.08, 'segs': [{'end': 5324.594, 'src': 'embed', 'start': 5295.683, 'weight': 0, 'content': [{'end': 5299.695, 'text': "So here in our React application, let's open up Chrome Developer Tools.", 'start': 5295.683, 'duration': 4.012}, {'end': 5303.565, 'text': 'Here you can see we have a new tab, React.', 'start': 5301.379, 'duration': 2.186}, {'end': 5308.583, 'text': 'this panel you can see the tree of our components.', 'start': 5305.2, 'duration': 3.383}, {'end': 5312.245, 'text': 'so on the top we have the counters component.', 'start': 5308.583, 'duration': 3.662}, {'end': 5319.371, 'text': "when you expand that, you'll see a div and below that you will see all our counter components.", 'start': 5312.245, 'duration': 7.126}, {'end': 5324.594, 'text': 'similarly, you can expand each counter component to see its content.', 'start': 5319.371, 'duration': 5.223}], 'summary': 'In the react application, chrome devtools show the component tree with counters.', 'duration': 28.911, 'max_score': 5295.683, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS05295683.jpg'}, {'end': 5381.987, 'src': 'embed', 'start': 5349.616, 'weight': 2, 'content': [{'end': 5351.718, 'text': "Let's take a look at the first counter.", 'start': 5349.616, 'duration': 2.102}, {'end': 5354.421, 'text': 'You can see the key is set to one.', 'start': 5352.359, 'duration': 2.062}, {'end': 5358.444, 'text': 'Our props object has two properties, ID and value.', 'start': 5355.001, 'duration': 3.443}, {'end': 5365.17, 'text': 'And our state object has a value property, which is initialized based on props.value.', 'start': 5358.885, 'duration': 6.285}, {'end': 5373.038, 'text': "So this panel makes it really easy to visualize what's going on on the page what are various components, what is the state of each component,", 'start': 5365.911, 'duration': 7.127}, {'end': 5373.519, 'text': 'and so on.', 'start': 5373.038, 'duration': 0.481}, {'end': 5376.021, 'text': 'We also have this search bar here.', 'start': 5374.259, 'duration': 1.762}, {'end': 5381.987, 'text': "So if you're working on a complex page with several components, you don't have to expand them all here.", 'start': 5376.602, 'duration': 5.385}], 'summary': 'Visualization panel displays component state and props.', 'duration': 32.371, 'max_score': 5349.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS05349616.jpg'}, {'end': 5429.329, 'src': 'embed', 'start': 5400.769, 'weight': 1, 'content': [{'end': 5411.302, 'text': 'you know that in the first component our value prop is 4, and Now, if we go to the console tab and type $r, look,', 'start': 5400.769, 'duration': 10.533}, {'end': 5415.067, 'text': 'we get the instance of our first counter component.', 'start': 5411.302, 'duration': 3.765}, {'end': 5417.85, 'text': "So let's expand this, look at the props.", 'start': 5415.748, 'duration': 2.102}, {'end': 5423.806, 'text': 'Here we have an object with two properties, value, which is 4, and id, which is 1.', 'start': 5418.331, 'duration': 5.475}, {'end': 5429.329, 'text': 'So with this $r, we can work with the instance of any components on our page.', 'start': 5423.806, 'duration': 5.523}], 'summary': 'The value prop of the first component is 4, with an instance accessible through $r.', 'duration': 28.56, 'max_score': 5400.769, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS05400769.jpg'}, {'end': 5546.098, 'src': 'embed', 'start': 5484.417, 'weight': 4, 'content': [{'end': 5491.909, 'text': 'similarly, we can go to the console tab and Type $0, and this returns that button element in the DOM.', 'start': 5484.417, 'duration': 7.492}, {'end': 5495.75, 'text': 'We can do something like this, $0.click.', 'start': 5492.769, 'duration': 2.981}, {'end': 5500.131, 'text': 'We can click the button, and now we can see the count is five.', 'start': 5496.73, 'duration': 3.401}, {'end': 5502.392, 'text': "Let's execute this one more time.", 'start': 5500.931, 'duration': 1.461}, {'end': 5504.112, 'text': 'Now the count is six.', 'start': 5502.812, 'duration': 1.3}, {'end': 5507.193, 'text': 'So have React dev tools in your toolbox.', 'start': 5505.032, 'duration': 2.161}, {'end': 5511.254, 'text': 'It makes it really easy to build and debug React applications.', 'start': 5507.513, 'duration': 3.741}, {'end': 5525.76, 'text': "So here in the counter component, we're using props to initialize the state.", 'start': 5520.856, 'duration': 4.904}, {'end': 5534.168, 'text': "One of the things that confuses beginners to react is what is the difference between props and state? So in this lecture, I'm going to clarify this.", 'start': 5526.521, 'duration': 7.647}, {'end': 5542.836, 'text': 'Props includes data that we give to a component, whereas state includes data that is local or private to that component.', 'start': 5534.929, 'duration': 7.907}, {'end': 5546.098, 'text': 'So other components cannot access that state.', 'start': 5543.436, 'duration': 2.662}], 'summary': 'Using react dev tools simplifies building and debugging; clarifies difference between props and state.', 'duration': 61.681, 'max_score': 5484.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS05484417.jpg'}, {'end': 5657.88, 'src': 'embed', 'start': 5612.653, 'weight': 6, 'content': [{'end': 5615.475, 'text': "Let's see what happens when we click the increment button.", 'start': 5612.653, 'duration': 2.822}, {'end': 5624.418, 'text': "So here I'm gonna click this button, we get this error, cannot assign to read only property value of object.", 'start': 5617.031, 'duration': 7.387}, {'end': 5629.943, 'text': 'So React does not allow you to change any properties of the props object.', 'start': 5625.118, 'duration': 4.825}, {'end': 5633.786, 'text': "It's purely input to a component and we should not modify the input.", 'start': 5630.283, 'duration': 3.503}, {'end': 5641.972, 'text': 'If we need to modify that input during the life cycle of a component, We need to get that input and put it in the state.', 'start': 5634.667, 'duration': 7.305}, {'end': 5652.738, 'text': 'in this case, our counter component has its own local state, So we can modify this value in our handle increment button, as we have done here.', 'start': 5641.972, 'duration': 10.766}, {'end': 5654.718, 'text': "So let's delete this line.", 'start': 5652.738, 'duration': 1.98}, {'end': 5657.88, 'text': "Next, we're going to talk about raising and handling events.", 'start': 5654.718, 'duration': 3.162}], 'summary': 'React prohibits modifying props; use state for component modifications.', 'duration': 45.227, 'max_score': 5612.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS05612653.jpg'}, {'end': 6110.365, 'src': 'heatmap', 'start': 6019.367, 'weight': 1, 'content': [{'end': 6025.49, 'text': 'Here in the counters component, as I told you before, in React, we do not update the state directly.', 'start': 6019.367, 'duration': 6.123}, {'end': 6029.832, 'text': "In other words, we're not going to remove a counter from this array.", 'start': 6025.93, 'duration': 3.902}, {'end': 6040.498, 'text': "Instead, we're gonna create a new array without a given counter and then call the setState method of our component and let React update the state.", 'start': 6030.453, 'duration': 10.045}, {'end': 6046.242, 'text': "So here I'm gonna define a new constant, call it counters.", 'start': 6041.298, 'duration': 4.944}, {'end': 6057.791, 'text': "We're gonna set this to this that state that counters use the filter method To get all the counters except the one with the given ID.", 'start': 6046.242, 'duration': 11.549}, {'end': 6060.694, 'text': 'so C goes to C.', 'start': 6057.791, 'duration': 2.903}, {'end': 6066.198, 'text': 'dot ID does not equal counter ID.', 'start': 6060.694, 'duration': 5.504}, {'end': 6067.639, 'text': 'Now we have a new array.', 'start': 6066.198, 'duration': 1.441}, {'end': 6072.339, 'text': "so let's call this that set state and Pass an object.", 'start': 6067.639, 'duration': 4.7}, {'end': 6082.025, 'text': 'you want to overwrite the counters property with this counters Constant also, as I told you before here, because the key and value are the same,', 'start': 6072.339, 'duration': 9.686}, {'end': 6085.708, 'text': 'we can simplify this code like this.', 'start': 6082.025, 'duration': 3.683}, {'end': 6087.449, 'text': "Now let's test this.", 'start': 6085.708, 'duration': 1.741}, {'end': 6092.893, 'text': "so back in the browser, I'm gonna delete the first counter gone, another one.", 'start': 6087.449, 'duration': 5.444}, {'end': 6099.11, 'text': 'beautiful. So our implementation is working, but there is a tiny issue here that I would like to improve.', 'start': 6092.893, 'duration': 6.217}, {'end': 6110.365, 'text': "If you look at the render method of this component, here we're passing three props to our child component onDelete, which is a function,", 'start': 6099.971, 'duration': 10.394}], 'summary': 'In react, updating state involves creating a new array and using setstate method for react to update the state. this approach was demonstrated in the counters component, where a new array was defined using the filter method and then set as the state. the implementation was tested and shown to be successful, although there was a minor issue identified for improvement.', 'duration': 90.998, 'max_score': 6019.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS06019367.jpg'}], 'start': 5295.683, 'title': 'React dev tools and props/state', 'summary': 'Discusses using react dev tools for debugging, providing insights into the component tree, props, state, and the $r feature. it also explains the difference between props and state, emphasizing their usage and event handling in react applications.', 'chapters': [{'end': 5511.254, 'start': 5295.683, 'title': 'Using react dev tools for debugging', 'summary': 'Discusses the usage of react dev tools in our application, providing insights into the component tree, props, state, and the $r feature, making it easy to visualize and debug react applications. it also highlights the usage of $0 to manipulate dom elements, demonstrating how react dev tools can aid in building and debugging react applications.', 'duration': 215.571, 'highlights': ['The panel in Chrome Developer Tools provides a tree view of the components, their props, and state, making it easy to visualize the component structure and state.', 'The state of the counters component contains an array of four objects, providing insights into the state data of the component.', 'The $r feature allows for easy access to the instance of any component on the page, enabling efficient debugging and manipulation of component instances.', 'The usage of $0 in the console tab enables manipulation of DOM elements, such as clicking buttons and observing changes in the application state.', 'React Dev Tools provide a convenient way to build and debug React applications, enhancing the development and debugging process.']}, {'end': 6128.08, 'start': 5520.856, 'title': 'React props and state', 'summary': 'Explains the difference between props and state, emphasizing that props are read-only and used to pass data to a component, while state is internal and can be modified. it also covers raising and handling events, with an example of passing event handler via props, and modifying the state based on the event.', 'duration': 607.224, 'highlights': ['The difference between props and state', 'Raising and handling events', 'Props are read-only']}], 'duration': 832.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS05295683.jpg', 'highlights': ['The panel in Chrome Developer Tools provides a tree view of the components, their props, and state, making it easy to visualize the component structure and state.', 'The $r feature allows for easy access to the instance of any component on the page, enabling efficient debugging and manipulation of component instances.', 'The state of the counters component contains an array of four objects, providing insights into the state data of the component.', 'React Dev Tools provide a convenient way to build and debug React applications, enhancing the development and debugging process.', 'The usage of $0 in the console tab enables manipulation of DOM elements, such as clicking buttons and observing changes in the application state.', 'The difference between props and state', 'Raising and handling events', 'Props are read-only']}, {'end': 6997.803, 'segs': [{'end': 6186.821, 'src': 'embed', 'start': 6157.58, 'weight': 4, 'content': [{'end': 6159.841, 'text': 'we set it to counter that selected.', 'start': 6157.58, 'duration': 2.261}, {'end': 6164.084, 'text': 'And over time, this is going to get messy and ugly.', 'start': 6160.341, 'duration': 3.743}, {'end': 6168.966, 'text': 'The whole point of using objects is to encapsulate related values.', 'start': 6164.664, 'duration': 4.302}, {'end': 6175.512, 'text': 'So instead of these three properties, We could simply pass the counter object itself.', 'start': 6169.647, 'duration': 5.865}, {'end': 6179.535, 'text': 'This object includes everything we need to know about a counter.', 'start': 6176.333, 'duration': 3.202}, {'end': 6186.821, 'text': "And also if in the future we add a new property to this counter object, we don't have to come back here and modify this code.", 'start': 6179.996, 'duration': 6.825}], 'summary': 'Use object encapsulation for reusable, maintainable code.', 'duration': 29.241, 'max_score': 6157.58, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS06157580.jpg'}, {'end': 6261.99, 'src': 'embed', 'start': 6232.819, 'weight': 0, 'content': [{'end': 6248.944, 'text': "Perfect We have an issue in our current implementation and that is that we don't have a single source of truth.", 'start': 6232.819, 'duration': 16.125}, {'end': 6251.225, 'text': 'Let me show you this using an example.', 'start': 6249.604, 'duration': 1.621}, {'end': 6256.687, 'text': 'So here on the top, I want to add a button for resetting all the counters.', 'start': 6251.965, 'duration': 4.722}, {'end': 6261.99, 'text': "So let's go back to our counters component here in the render method.", 'start': 6257.588, 'duration': 4.402}], 'summary': 'Current implementation lacks single source of truth.', 'duration': 29.171, 'max_score': 6232.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS06232819.jpg'}, {'end': 6427.226, 'src': 'embed', 'start': 6397.94, 'weight': 3, 'content': [{'end': 6398.78, 'text': 'Instead we see four.', 'start': 6397.94, 'duration': 0.84}, {'end': 6405.405, 'text': "So the issue we are facing here is that we don't have a single source of truth.", 'start': 6401.021, 'duration': 4.384}, {'end': 6409.249, 'text': 'Each of our components have their own local state.', 'start': 6406.206, 'duration': 3.043}, {'end': 6415.815, 'text': 'Our counters component has an array of counters and each counter component has a value.', 'start': 6409.87, 'duration': 5.945}, {'end': 6423.543, 'text': 'This value is currently disconnected from the value property of each counter object that we have in this array.', 'start': 6416.336, 'duration': 7.207}, {'end': 6427.226, 'text': "Here's the implementation of our counter component.", 'start': 6424.943, 'duration': 2.283}], 'summary': 'Multiple components have disconnected local states.', 'duration': 29.286, 'max_score': 6397.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS06397940.jpg'}, {'end': 6505.735, 'src': 'embed', 'start': 6469.062, 'weight': 1, 'content': [{'end': 6471.023, 'text': "And that's the topic for the next lecture.", 'start': 6469.062, 'duration': 1.961}, {'end': 6490.406, 'text': 'So here in the counter component, we want to remove the local state and only rely on the props to receive the data that this component needs.', 'start': 6480.56, 'duration': 9.846}, {'end': 6494.708, 'text': 'We refer to this kind of component as a controlled component.', 'start': 6491.166, 'duration': 3.542}, {'end': 6498.811, 'text': "A controlled component doesn't have its own local state.", 'start': 6495.248, 'duration': 3.563}, {'end': 6505.735, 'text': 'It receives all the data via props and raises events whenever data needs to be changed.', 'start': 6499.491, 'duration': 6.244}], 'summary': 'Next lecture: transform counter component to controlled, removing local state and relying on props for data.', 'duration': 36.673, 'max_score': 6469.062, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS06469062.jpg'}, {'end': 6665.488, 'src': 'embed', 'start': 6637.711, 'weight': 2, 'content': [{'end': 6641.993, 'text': 'So we are done with the removing of the local state of the counter component.', 'start': 6637.711, 'duration': 4.282}, {'end': 6651.117, 'text': 'Here we no longer have a state property and we are relying entirely on the props object to display data and notify changes.', 'start': 6642.653, 'duration': 8.464}, {'end': 6654.558, 'text': "Now let's go back to our counters component.", 'start': 6652.017, 'duration': 2.541}, {'end': 6660.201, 'text': 'We need to add a new event handler, handle increment.', 'start': 6655.639, 'duration': 4.562}, {'end': 6665.488, 'text': 'We set this to a function that takes a counter parameter.', 'start': 6661.567, 'duration': 3.921}], 'summary': 'Removed local state from counter component, relying entirely on props for displaying data and handling changes.', 'duration': 27.777, 'max_score': 6637.711, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS06637711.jpg'}], 'start': 6128.5, 'title': 'React component state and props', 'summary': 'Discusses the importance of a single source of truth in react components, transitioning a component to a controlled component, event handling, and state management. it also highlights refactoring a counter component and restructuring the component tree with a navigation bar.', 'chapters': [{'end': 6305.292, 'start': 6128.5, 'title': 'Improving state management in react components', 'summary': 'Discusses the issue of passing separate props for object properties, the solution of passing the object itself, and the implications of this change on accessing properties in the component, highlighting the benefits of encapsulating related values in an object and the importance of having a single source of truth for state management.', 'duration': 176.792, 'highlights': ['The chapter discusses the importance of encapsulating related values in an object, highlighting the issue of passing separate props for object properties and the solution of passing the object itself, thus eliminating the need to modify code when adding new properties to the object.', 'It addresses the implications of passing the object itself, explaining the changes required in the component to access properties, emphasizing the avoidance of code modification when adding new properties to the object.', 'It emphasizes the importance of having a single source of truth for state management, illustrated by the issue of lacking a single source of truth in the current implementation and the example of adding a reset button for all counters in the application.']}, {'end': 6997.803, 'start': 6305.732, 'title': 'React component state and props', 'summary': 'Discusses the need for a single source of truth in react components, the transition of a component to a controlled component, and the implementation of event handling and state management, exemplified by refactoring a counter component and restructuring the component tree to include a navigation bar.', 'duration': 692.071, 'highlights': ['The need for a single source of truth is emphasized as the reason behind the failure to reflect state changes in the DOM, with each component having its own local state and disconnected values.', "The concept of a controlled component is introduced, with an emphasis on receiving all data via props and raising events for data modification, shifting the component's reliance entirely to its parent.", 'The process of refactoring a counter component to remove local state and rely solely on props, along with the associated modifications to event handling and state management, is detailed.', 'The restructuring of the component tree to include a navigation bar and the implementation of a pattern for displaying the total number of counters are discussed.']}], 'duration': 869.303, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS06128500.jpg', 'highlights': ['The importance of having a single source of truth for state management is emphasized, illustrated by the issue of lacking a single source of truth in the current implementation and the example of adding a reset button for all counters in the application.', "The concept of a controlled component is introduced, with an emphasis on receiving all data via props and raising events for data modification, shifting the component's reliance entirely to its parent.", 'The process of refactoring a counter component to remove local state and rely solely on props, along with the associated modifications to event handling and state management, is detailed.', 'The need for a single source of truth is emphasized as the reason behind the failure to reflect state changes in the DOM, with each component having its own local state and disconnected values.', 'The chapter discusses the importance of encapsulating related values in an object, highlighting the issue of passing separate props for object properties and the solution of passing the object itself, thus eliminating the need to modify code when adding new properties to the object.']}, {'end': 7693.615, 'segs': [{'end': 7047.653, 'src': 'embed', 'start': 7024.179, 'weight': 2, 'content': [{'end': 7031.926, 'text': 'if you scroll down, you can see a very simple navigation bar under brand.', 'start': 7024.179, 'duration': 7.747}, {'end': 7034.768, 'text': "so this is the layout that I'm looking for.", 'start': 7031.926, 'duration': 2.842}, {'end': 7039.592, 'text': "I don't want any links or drop-down lists here, just a simple navigation bar.", 'start': 7034.768, 'duration': 4.824}, {'end': 7041.094, 'text': "so here's the markup.", 'start': 7039.592, 'duration': 1.502}, {'end': 7047.653, 'text': "I'm gonna copy this and Now back in VS Code, we should create a new component for our navigation bar.", 'start': 7041.094, 'duration': 6.559}], 'summary': 'Desired layout: simple navigation bar without links or drop-down lists.', 'duration': 23.474, 'max_score': 7024.179, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS07024179.jpg'}, {'end': 7118.176, 'src': 'embed', 'start': 7085.1, 'weight': 4, 'content': [{'end': 7087.481, 'text': "Now, let's go back to app.js.", 'start': 7085.1, 'duration': 2.381}, {'end': 7090.272, 'text': "We don't need this markup anymore.", 'start': 7088.971, 'duration': 1.301}, {'end': 7092.973, 'text': 'Instead, we want to render our navigation bar.', 'start': 7090.872, 'duration': 2.101}, {'end': 7096.114, 'text': "So on the top, we also don't need the logo.", 'start': 7093.413, 'duration': 2.701}, {'end': 7102.837, 'text': "Let's import navbar from the components folder slash navbar.", 'start': 7096.554, 'duration': 6.283}, {'end': 7107.659, 'text': 'And then here we add our navbar component.', 'start': 7103.998, 'duration': 3.661}, {'end': 7113.242, 'text': 'Now below that, we should add our main element with the class container.', 'start': 7108.3, 'duration': 4.942}, {'end': 7116.355, 'text': 'Inside this element.', 'start': 7115.434, 'duration': 0.921}, {'end': 7118.176, 'text': "We're going to add our counters.", 'start': 7116.375, 'duration': 1.801}], 'summary': 'In app.js, markup is replaced with a navigation bar component and a main element with the class container for adding counters.', 'duration': 33.076, 'max_score': 7085.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS07085100.jpg'}, {'end': 7227.412, 'src': 'embed', 'start': 7198.36, 'weight': 0, 'content': [{'end': 7202.785, 'text': 'So how can we display the total number of counters on our navigation bar?', 'start': 7198.36, 'duration': 4.425}, {'end': 7211.503, 'text': 'Well, in situations like that, when there is no parent-child relationship between two components and you want to keep them in sync,', 'start': 7203.618, 'duration': 7.885}, {'end': 7215.245, 'text': 'you want to share data between them, you need to lift the state up.', 'start': 7211.503, 'duration': 3.742}, {'end': 7222.509, 'text': 'So in this case, we want to lift the state of the counters component to its parent, that is our app component.', 'start': 7216.085, 'duration': 6.424}, {'end': 7227.412, 'text': 'Now, both the counters and navbar components have the same parent.', 'start': 7223.149, 'duration': 4.263}], 'summary': 'Lift the state of counters component to the app component to display total counters on navbar.', 'duration': 29.052, 'max_score': 7198.36, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS07198360.jpg'}, {'end': 7693.615, 'src': 'embed', 'start': 7641.59, 'weight': 1, 'content': [{'end': 7652.997, 'text': 'so instead of having a class that extends the component class with the render method, we simply define a function that returns a react element.', 'start': 7641.59, 'duration': 11.407}, {'end': 7661.029, 'text': "that's why we call this a stateless functional component, that there is nothing wrong with using classes to define components,", 'start': 7652.997, 'duration': 8.032}, {'end': 7667.443, 'text': "but some developers prefer to use functions when they're dealing with simple stateless components.", 'start': 7661.029, 'duration': 6.414}, {'end': 7675.228, 'text': 'Approach to choose is purely your personal preference, but you see a lot of examples of stateless functional components on the internet.', 'start': 7668.126, 'duration': 7.102}, {'end': 7678.31, 'text': "That's why I decided to include this in the course.", 'start': 7675.228, 'duration': 3.082}, {'end': 7682.711, 'text': 'Now we also have a shortcut for creating these stateless functional components.', 'start': 7678.31, 'duration': 4.401}, {'end': 7693.615, 'text': 'Just like we have CC for creating a class component, we have SFC for creating a stateless functional component.', 'start': 7683.251, 'duration': 10.364}], 'summary': "Stateless functional components are preferred for simple components, with a shortcut 'sfc' for creation.", 'duration': 52.025, 'max_score': 7641.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS07641590.jpg'}], 'start': 6997.803, 'title': 'Building simple navigation bar and lifting state in react components', 'summary': 'Discusses creating a simple navigation bar using bootstrap and lifting state up in react components, covering the process of creating a new component, integrating it into the application, resolving compilation errors, and sharing data between components without a parent-child relationship.', 'chapters': [{'end': 7145.621, 'start': 6997.803, 'title': 'Building simple navigation bar', 'summary': 'Discusses creating a simple navigation bar using bootstrap, including the process of creating a new component, integrating it into the application, and resolving compilation errors.', 'duration': 147.818, 'highlights': ['Creating a new component for the simple navigation bar', 'Integrating the navigation bar component into the application', 'Utilizing Bootstrap for a simple navigation bar layout']}, {'end': 7693.615, 'start': 7145.621, 'title': 'Lifting state in react components', 'summary': 'Explains the process of lifting state up in react components to share data between components without a parent-child relationship, resulting in multiple components being in sync and the conversion of a stateless functional component.', 'duration': 547.994, 'highlights': ['The process of lifting state up in React components involves sharing data between components without a parent-child relationship and passing the state and methods that modify the state from the child component to its parent component.', 'Components can be converted into stateless functional components, where the component is defined as a function that returns a React element, and all data is received via props, without the need for event handlers or helper methods.', 'The stateless functional components provide a shortcut for creating them, known as SFC, which is used for creating simple stateless components.']}], 'duration': 695.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS06997803.jpg', 'highlights': ['The process of lifting state up in React components involves sharing data between components without a parent-child relationship and passing the state and methods that modify the state from the child component to its parent component.', 'Components can be converted into stateless functional components, where the component is defined as a function that returns a React element, and all data is received via props, without the need for event handlers or helper methods.', 'Utilizing Bootstrap for a simple navigation bar layout', 'Creating a new component for the simple navigation bar', 'Integrating the navigation bar component into the application', 'The stateless functional components provide a shortcut for creating them, known as SFC, which is used for creating simple stateless components.']}, {'end': 8717.711, 'segs': [{'end': 7763.675, 'src': 'embed', 'start': 7735.171, 'weight': 0, 'content': [{'end': 7739.995, 'text': 'Here in our navbar component, we have a single reference to the props object.', 'start': 7735.171, 'duration': 4.824}, {'end': 7746.06, 'text': 'Sometimes when working with a more complex markup, we might have multiple references to the props.', 'start': 7740.756, 'duration': 5.304}, {'end': 7750.764, 'text': "We don't want to repeat props dot props dot props dot several times.", 'start': 7746.661, 'duration': 4.103}, {'end': 7756.849, 'text': 'So we can use object destructuring to destructure this props argument.', 'start': 7751.444, 'duration': 5.405}, {'end': 7763.675, 'text': 'In this particular example, we are interested in the total counters property of this object.', 'start': 7757.63, 'duration': 6.045}], 'summary': 'Using object destructuring to access props, avoiding repetition and improving code readability.', 'duration': 28.504, 'max_score': 7735.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS07735171.jpg'}, {'end': 7908.726, 'src': 'embed', 'start': 7884.105, 'weight': 1, 'content': [{'end': 7891.331, 'text': 'In the mounting phase, we have three lifecycle hooks, constructor, render, and componentDidMount.', 'start': 7884.105, 'duration': 7.226}, {'end': 7894.234, 'text': 'React will call these methods in order.', 'start': 7892.032, 'duration': 2.202}, {'end': 7902.22, 'text': 'The second lifecycle phase is the update phase, and this happens when the state or the props of a component get changed.', 'start': 7895.114, 'duration': 7.106}, {'end': 7908.726, 'text': 'In this phase, we have two lifecycle hooks, render and componentDidUpdate.', 'start': 7902.961, 'duration': 5.765}], 'summary': 'React lifecycle has 3 hooks in mounting phase and 2 in update phase.', 'duration': 24.621, 'max_score': 7884.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS07884105.jpg'}, {'end': 7961.083, 'src': 'embed', 'start': 7928.181, 'weight': 4, 'content': [{'end': 7934.425, 'text': 'If you look at the React documentation, you will see a few more lifecycle hooks, but they are rarely used,', 'start': 7928.181, 'duration': 6.244}, {'end': 7939.329, 'text': "and that's why I didn't want to confuse you with too much details that you're not going to use that often.", 'start': 7934.425, 'duration': 4.904}, {'end': 7944.292, 'text': "90% of the time, you're going to use only the lifecycle hooks that I've listed here.", 'start': 7939.349, 'duration': 4.943}, {'end': 7947.755, 'text': "Now, let's see these lifecycle hooks in action.", 'start': 7945.053, 'duration': 2.702}, {'end': 7961.083, 'text': "So here in the app class first, let's look at the mounting phase.", 'start': 7957.341, 'duration': 3.742}], 'summary': 'React documentation has additional lifecycle hooks rarely used. focus on the listed hooks for 90% usage.', 'duration': 32.902, 'max_score': 7928.181, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS07928181.jpg'}, {'end': 8117.501, 'src': 'heatmap', 'start': 8027.165, 'weight': 0.924, 'content': [{'end': 8040.349, 'text': "also note that here we won't have access to this dot props unless we pass props as a parameter to this constructor and also pass it to the constructor of the base class.", 'start': 8027.165, 'duration': 13.184}, {'end': 8044.312, 'text': 'Otherwise this dot props will return undefined.', 'start': 8041.09, 'duration': 3.222}, {'end': 8045.293, 'text': 'Let me show you.', 'start': 8044.752, 'duration': 0.541}, {'end': 8051.137, 'text': "So temporarily, I'm going to comment out this line and log this dot props here.", 'start': 8045.593, 'duration': 5.544}, {'end': 8058.882, 'text': 'Here in the console, you can see our constructor is called and our props object is an empty object.', 'start': 8052.758, 'duration': 6.124}, {'end': 8066.011, 'text': "But if you forget to add the props to this constructor, we won't be able to access it.", 'start': 8060.606, 'duration': 5.405}, {'end': 8074.338, 'text': "So to recap, the constructor is called once, and it's the right place to initialize the properties in this class.", 'start': 8067.472, 'duration': 6.866}, {'end': 8077.841, 'text': "Now let's remove this.props from here.", 'start': 8075.279, 'duration': 2.562}, {'end': 8083.486, 'text': "The second lifecycle hooks we're going to look at is componentDidMount.", 'start': 8079.282, 'duration': 4.204}, {'end': 8092.901, 'text': 'ComponentDidMount This method is called after our component is rendered into the DOM.', 'start': 8084.407, 'duration': 8.494}, {'end': 8097.985, 'text': "And it's the perfect place to make Ajax calls to get data from the server.", 'start': 8093.342, 'duration': 4.643}, {'end': 8106.518, 'text': 'So we can do an AJAX call and then call the set state with new data.', 'start': 8098.996, 'duration': 7.522}, {'end': 8109.939, 'text': 'For example, in our vidna application later in the future,', 'start': 8106.898, 'duration': 3.041}, {'end': 8117.501, 'text': "we're going to get the list of movies from the server and then pass that list to our set state method, something like this", 'start': 8109.939, 'duration': 7.562}], 'summary': 'Constructor initializes props; componentdidmount for ajax calls.', 'duration': 90.336, 'max_score': 8027.165, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS08027165.jpg'}, {'end': 8442.528, 'src': 'embed', 'start': 8414.96, 'weight': 3, 'content': [{'end': 8419.621, 'text': "Now, back in our counter component, I'm going to add another lifecycle hook here.", 'start': 8414.96, 'duration': 4.661}, {'end': 8423.422, 'text': 'Component did update.', 'start': 8420.322, 'duration': 3.1}, {'end': 8431.165, 'text': 'This method is called after a component is updated, which means we have new state or new props.', 'start': 8425.563, 'duration': 5.602}, {'end': 8437.006, 'text': 'So we can compare this new state with the old state or the new props with the old props.', 'start': 8431.685, 'duration': 5.321}, {'end': 8442.528, 'text': 'And if there is a change, we can make an AJAX request to get new data from the server.', 'start': 8437.626, 'duration': 4.902}], 'summary': 'Add componentdidupdate lifecycle hook to compare and make ajax request for new data.', 'duration': 27.568, 'max_score': 8414.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS08414960.jpg'}], 'start': 7694.728, 'title': 'React component lifecycle', 'summary': 'Explains the use of object destructuring for code simplification, covers the mounting and updating phases of react components, emphasizes the usage of lifecycle hooks, and discusses methods for comparing new and old props and state, with 90% usage of the listed hooks and an example of incremental update and its impact on the virtual dom.', 'chapters': [{'end': 7947.755, 'start': 7694.728, 'title': 'React component lifecycle', 'summary': 'Explains the use of object destructuring to simplify code, reducing repetition and improving code readability, as well as the key phases and lifecycle hooks in react components, with 90% usage of the listed hooks.', 'duration': 253.027, 'highlights': ['The chapter explains the use of object destructuring to simplify code, reducing repetition and improving code readability, with examples in the navbar and counters components.', 'It details the three main phases of React component lifecycle: mounting, updating, and unmounting, along with the frequently used lifecycle hooks in these phases.', 'It emphasizes that 90% of the time, only the listed lifecycle hooks are used, avoiding confusion with rarely used hooks mentioned in the React documentation.']}, {'end': 8413.187, 'start': 7957.341, 'title': 'React component lifecycle', 'summary': 'Explains the mounting and updating phases of react components, emphasizing the usage of lifecycle hooks such as constructor, componentdidmount, and render, and the impact of state and props changes on rendering, with an example of incremental update and its impact on the virtual dom.', 'duration': 455.846, 'highlights': ['The mounting phase includes the constructor, componentDidMount, and render methods, with the constructor being the right place to initialize properties, and componentDidMount being suitable for making AJAX calls.', 'The render method triggers recursive rendering of all child components, and stateless functional components do not support lifecycle hooks.', 'Changes in state or props trigger the update phase, leading to the re-rendering of the component and its child components, without necessarily updating the entire DOM.']}, {'end': 8717.711, 'start': 8414.96, 'title': 'React component lifecycle', 'summary': 'Discusses the componentdidupdate lifecycle method to compare new and old props and state, and make ajax requests accordingly. it also covers the componentwillunmount lifecycle method for cleanup operations, and provides an overview of composing components, using props, lifting state, functional components, and upcoming topics on extending the vidly application.', 'duration': 302.751, 'highlights': ['The ComponentDidUpdate lifecycle method allows for comparing new and old props and state, and making AJAX requests accordingly, to optimize component performance.', 'The ComponentWillUnmount lifecycle method enables cleanup operations before removing a component from the DOM, preventing memory leaks and providing an opportunity to clean up timers or listeners.', 'The chapter provides an overview of composing components, using props to pass data, raising and handling events, lifting state, functional components, and upcoming topics on extending the Vidly application with pagination, sorting, and searching.']}], 'duration': 1022.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Ke90Tje7VS0/pics/Ke90Tje7VS07694728.jpg', 'highlights': ['The chapter explains the use of object destructuring to simplify code, reducing repetition and improving code readability, with examples in the navbar and counters components.', 'It details the three main phases of React component lifecycle: mounting, updating, and unmounting, along with the frequently used lifecycle hooks in these phases.', 'The mounting phase includes the constructor, componentDidMount, and render methods, with the constructor being the right place to initialize properties, and componentDidMount being suitable for making AJAX calls.', 'The ComponentDidUpdate lifecycle method allows for comparing new and old props and state, and making AJAX requests accordingly, to optimize component performance.', 'It emphasizes that 90% of the time, only the listed lifecycle hooks are used, avoiding confusion with rarely used hooks mentioned in the React documentation.']}], 'highlights': ['React is dominating the space of libraries and frameworks for building user interfaces.', 'Every React application is essentially a tree of components, with at least one root component.', 'React keeps a lightweight representation of the DOM in memory, known as the virtual DOM, and automatically updates the real DOM to match the state changes.', "The application we're going to build exhibits patterns seen on a shopping cart page, allowing us to change quantity, delete items, reset quantity, and display the number of unique items in the cart.", 'The instructor, Mash Hamadani, provides a quick three-minute introduction to React and emphasizes the importance of learning it.', 'Setting up the development environment involves installing Node.js for NPM and using Visual Studio Code with specific extensions for React development.', 'Using create React app package to install React and third-party libraries', 'The chapter covers the essence of React components, including JSX for describing UI, rendering lists, conditional rendering, handling events, and updating component state.', 'The importance of using descriptive names for methods to improve code readability and understanding by other developers.', 'The process of lifting state up in React components involves sharing data between components without a parent-child relationship and passing the state and methods that modify the state from the child component to its parent component.', "The concept of a controlled component is introduced, with an emphasis on receiving all data via props and raising events for data modification, shifting the component's reliance entirely to its parent.", 'The mounting phase includes the constructor, componentDidMount, and render methods, with the constructor being the right place to initialize properties, and componentDidMount being suitable for making AJAX calls.', 'The ComponentDidUpdate lifecycle method allows for comparing new and old props and state, and making AJAX requests accordingly, to optimize component performance.', 'Installing Bootstrap version 4.1.1 to give the application a modern look', 'The chapter discusses the creation of a component tree in a React application', 'The properties of React elements are based on standard DOM events, such as onClick, onDoubleClick, onKeyDown, onKeyPress, and onKeyUp.', 'The stateless functional components provide a shortcut for creating them, known as SFC, which is used for creating simple stateless components.']}