title
React.js Full Course for Beginners | Learn React.js in 4 Hours | React.js Tutorial | Edureka

description
🔥 Edureka ReactJS Training (Use Code "𝐘𝐎𝐔𝐓𝐔𝐁𝐄𝟐𝟎") - https://www.edureka.co/reactjs-redux-certification-training This Edureka video on React.js Full Course will help you understand the fundamentals of React.js and build a strong foundation in React framework. In this React.js tutorial you will learn React.js from scratch with examples. It will also talk about various React.js libraries such as Flux, Redux, and Router. Below are the topics covered in this React.js Tutorial Video: 00:00 Introduction 2:09 ES5 vs ES6 3:59 ES5 vs ES6: Syntax Differences 4:30 propTypes & getDefaultProps 5:10 Binding the context (Inline) 5:43 Binding the context (Inside the constructor) 5:59 ES6 Advantages 6:27 What is React.js? 7:47 Aspects Of React.Js 9:22 Virtual DOM 13:55 Data Binding 15:55 Server-side Rendering 17:45 Working of Virtual DOM 19:39 Advantages Of React.Js 22:00 Applications Of React.Js 22:40 React.Js Installation 31:44 React.Js Fundamentals 32:05 JSX 33:17 Regular JSX 34:22 JSX Nested Elements 36:21 Embedding JavaScript 37:01 React Components 42:25 Props 47:15 States 1:23:45 Stateless vs Stateful 1:49:13 Lifecycle 1:51:05 Initial Phase 1:51:50 Updating Phase 1:53:20 Props Change Phase 1:54:45 Unmounting Phase 1:57:09 Lifecycle Methods 2:03:13 Events 2:22:00 Refs 2:55:56 Keys 3:07:54 Introduction Flux 3:17:25 Redux Overview 3:17:40 Why use Redux with React.js? 3:23:49 What is Redux? 3:24:34 Redux Principles 3:30:10 Redux Components 3:30:19 Action 3:30:33 Reducer 3:31:19 Store 3:32:30 View 3:32:59 Data Flow in Redux Components 3:33:55 React.Js Router Overview 3:34:09 Router Library 3:35:14 Router Advantages 3:36:38 End To End Project ------------------------------------ Do subscribe to our channel and hit the bell icon to never miss an update from us in the future: https://goo.gl/6ohpTV SlideShare: https://www.slideshare.net/EdurekaIN Instagram: https://www.instagram.com/edureka_learning/ Facebook: https://www.facebook.com/edurekaIN/ Twitter: https://twitter.com/edurekain LinkedIn: https://www.linkedin.com/company/edureka #Edureka #ReactJsEdureka #ReactjsFullCourse #ReactJsTutorial #reactjstutorialforbeginners #ReactJsTraining #ReactJsCrashCourse #ReactFullCourse ----------------------------------------------------------------- How it Works? 1. This is a 4 Week Instructor-led Online Course, 30 hours of assignment and 20 hours of project work. 2. We have a 24x7 One-on-One LIVE Technical Support to help you with any problems you might face or any clarifications you may require during the course. 3. At the end of the training, you will be working on a real-time project for which we will provide you a Grade and a Verifiable Certificate! -------------------------------------------------------------------- About The Course ReactJS with Redux course at Edureka is designed to skill you into a successful Client-Side Application Developer. You'll master the concepts of ReactJS including its Architecture and components. The course also focuses on Testing Redux, React Router, React Redux, JSX, Data Flow & Usage with React, Async Actions & Flow and React Middleware thereby making you completely ready to build ReactJS applications effectively. ---------------------------------------------------------------------- Who should go for this course? The following professionals can go for this ReactJS with Redux course: UI Developers and Technical Leads Developers upgrading from AngularJS, EmberJS or other similar UI Javascript frameworks Freshers and aspiring UI (JavaScript) developers Full Stack Developers QAs, Architects, and Technical Project Managers ----------------------------------- Why learn ReactJS? The ReactJS with Redux certification training course is designed to provide knowledge and skills to become a successful Client-Side Application Developer. It starts with the fundamental concepts of ReactJS and its ecosystem. The training then focuses on Redux and its features and then, later on, demonstrates how React and Redux can be used together to build extensive applications. ReactJS latest version is 15.x. The few key features include no active support for IE8, better support for SVG, faster processing in browsers and cleaner output for DOM. This is in comparison to its earlier version 14.x. Redux framework has been continuously evolving and providing more stronger support with React. ------------------------------- Please write back to us at sales@edureka.in or call us at IND: 9606058406 / US: 18338555775 (toll-free) for more information.

detail
{'title': 'React.js Full Course for Beginners | Learn React.js in 4 Hours | React.js Tutorial | Edureka', 'heatmap': [{'end': 716.676, 'start': 570.677, 'weight': 1}], 'summary': 'This 4-hour react.js course provides an overview, covering es5 vs es6, virtual dom, data binding, jsx attributes, state management, event handling, component hierarchy, modularization, redux fundamentals, and advanced functionality. it emphasizes performance benefits, lifecycle events, and practical examples, showcasing the advantages of using react.js and redux for small and large applications.', 'chapters': [{'end': 110.995, 'segs': [{'end': 46.537, 'src': 'embed', 'start': 6.974, 'weight': 2, 'content': [{'end': 10.937, 'text': "Hey everyone, this is Swati and I welcome you all to Edureka's YouTube channel.", 'start': 6.974, 'duration': 3.963}, {'end': 18.003, 'text': "At Edureka, we provide online training on the most trending technologies with world's best instructors and 24x7 support.", 'start': 11.377, 'duration': 6.626}, {'end': 22.046, 'text': 'Today, I am here to give you a complete overview on ReactJS course.', 'start': 18.523, 'duration': 3.523}, {'end': 26.349, 'text': 'React, as you might know, is a front-end library developed by Facebook.', 'start': 22.746, 'duration': 3.603}, {'end': 32.554, 'text': 'It was released in the year of 2013 and since then, it has continued to dominate the world of front-end development.', 'start': 26.689, 'duration': 5.865}, {'end': 40.012, 'text': 'Thus, we have curated this course in such a way that everything that you need to know about ReactJS has been categorized into several modules.', 'start': 33.126, 'duration': 6.886}, {'end': 43.554, 'text': 'Module 1 talks about what exactly is ReactJS.', 'start': 40.612, 'duration': 2.942}, {'end': 46.537, 'text': 'In module 2, you will see the various aspects of React.', 'start': 43.915, 'duration': 2.622}], 'summary': "Edureka offers reactjs course with world's best instructors and 24x7 support, covering all aspects of reactjs in categorized modules.", 'duration': 39.563, 'max_score': 6.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M6974.jpg'}, {'end': 110.995, 'src': 'embed', 'start': 71.996, 'weight': 0, 'content': [{'end': 78.563, 'text': 'In Module 8, you will see how to integrate a state management library called Redux with ReactJS application.', 'start': 71.996, 'duration': 6.567}, {'end': 82.787, 'text': 'In Module 9, you will be given a brief overview of React Router.', 'start': 79.043, 'duration': 3.744}, {'end': 86.871, 'text': 'Finally, in the 10th module, you will be working on an end-to-end project.', 'start': 83.588, 'duration': 3.283}, {'end': 89.473, 'text': "So that was all about today's offering.", 'start': 87.711, 'duration': 1.762}, {'end': 92.916, 'text': 'This session will be further continued by Mr. Vipul Jain.', 'start': 90.154, 'duration': 2.762}, {'end': 98.382, 'text': 'A quick suggestion would be to do subscribe to our channel and hit the bell icon to stay updated.', 'start': 93.477, 'duration': 4.905}, {'end': 99.924, 'text': 'Over to you, Vipul.', 'start': 99.023, 'duration': 0.901}, {'end': 101.225, 'text': 'Hello, everyone.', 'start': 100.624, 'duration': 0.601}, {'end': 102.967, 'text': 'My name is Vipul Jain.', 'start': 101.966, 'duration': 1.001}, {'end': 110.995, 'text': 'I have 10 years of experience in web development, which includes experience on ReactJS, AngularJS and many other web technologies.', 'start': 103.147, 'duration': 7.848}], 'summary': 'Learn redux and react router, then work on an end-to-end project. vipul jain has 10 years of web development experience.', 'duration': 38.999, 'max_score': 71.996, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M71996.jpg'}], 'start': 6.974, 'title': 'Reactjs course overview', 'summary': "Provides a complete overview of the reactjs course, including its release year, modules covered, and the instructor's experience, with a suggestion to subscribe to the channel for updates.", 'chapters': [{'end': 110.995, 'start': 6.974, 'title': 'Reactjs course overview', 'summary': "Provides a complete overview of the reactjs course, including its release year, modules covered, and the instructor's experience, with a suggestion to subscribe to the channel for updates.", 'duration': 104.021, 'highlights': ['The course covers 10 modules, including a brief overview of React Router and an end-to-end project in the final module, ensuring comprehensive learning. (Module 10)', 'React was released in 2013 and has since dominated the world of front-end development, showcasing its significance in the industry. (Introduction)', "The instructor, Mr. Vipul Jain, has 10 years of experience in web development, including expertise in ReactJS and other web technologies, establishing his credibility. (Instructor's Experience)", "Edureka provides online training on trending technologies with world's best instructors and 24x7 support, emphasizing the quality and accessibility of the courses. (Introduction)", 'A suggestion is given to subscribe to the channel and hit the bell icon for updates, encouraging engagement and staying updated. (Closing Remarks)']}], 'duration': 104.021, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M6974.jpg', 'highlights': ['The course covers 10 modules, including a brief overview of React Router and an end-to-end project in the final module, ensuring comprehensive learning. (Module 10)', "The instructor, Mr. Vipul Jain, has 10 years of experience in web development, including expertise in ReactJS and other web technologies, establishing his credibility. (Instructor's Experience)", 'React was released in 2013 and has since dominated the world of front-end development, showcasing its significance in the industry. (Introduction)', "Edureka provides online training on trending technologies with world's best instructors and 24x7 support, emphasizing the quality and accessibility of the courses. (Introduction)", 'A suggestion is given to subscribe to the channel and hit the bell icon for updates, encouraging engagement and staying updated. (Closing Remarks)']}, {'end': 1115.457, 'segs': [{'end': 160.605, 'src': 'embed', 'start': 136.636, 'weight': 0, 'content': [{'end': 144.839, 'text': 'So what are these es5 and es6? These are the basically the JavaScript standards and since world is moving towards modern web development.', 'start': 136.636, 'duration': 8.203}, {'end': 149.161, 'text': 'We will be talking about more about es6 as compared to es5.', 'start': 145.119, 'duration': 4.042}, {'end': 151.042, 'text': "So let's talk about the differences.", 'start': 149.621, 'duration': 1.421}, {'end': 160.605, 'text': 'So the first difference es5 calls react dot, create class with an object and es6 it uses class which extends from react or component,', 'start': 151.482, 'duration': 9.123}], 'summary': 'Comparing es5 and es6 javascript standards in modern web development.', 'duration': 23.969, 'max_score': 136.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M136636.jpg'}, {'end': 413.947, 'src': 'embed', 'start': 386.597, 'weight': 1, 'content': [{'end': 390.278, 'text': "What is react.js? So we'll talk about what is react.js now.", 'start': 386.597, 'duration': 3.681}, {'end': 396.62, 'text': 'So react if I talk about is an open source JavaScript library as you can see on the screen.', 'start': 390.858, 'duration': 5.762}, {'end': 397.901, 'text': "It's a JavaScript library.", 'start': 396.66, 'duration': 1.241}, {'end': 406.524, 'text': "So I say it's an open source JavaScript library for you can say creating rich user interfaces that run in user web browser.", 'start': 397.961, 'duration': 8.563}, {'end': 408.805, 'text': 'It is developed by Facebook.', 'start': 406.944, 'duration': 1.861}, {'end': 413.947, 'text': 'It is open source and it is used to develop interactive user interfaces.', 'start': 409.045, 'duration': 4.902}], 'summary': 'React.js is an open source javascript library developed by facebook for creating rich user interfaces that run in the web browser.', 'duration': 27.35, 'max_score': 386.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M386597.jpg'}, {'end': 716.676, 'src': 'heatmap', 'start': 570.677, 'weight': 1, 'content': [{'end': 579.241, 'text': 'So damn manipulation is the heart of modern interactive web, but unfortunately it is also a lot slower than most JavaScript operation.', 'start': 570.677, 'duration': 8.564}, {'end': 587.324, 'text': 'So when you write in JavaScript document or get element by ID, this is the idea of the element dot inner HTML equal to some value.', 'start': 579.341, 'duration': 7.983}, {'end': 589.945, 'text': 'Now what happens actually behind the scenes.', 'start': 587.924, 'duration': 2.021}, {'end': 598.071, 'text': 'What happens is that browser need to pass this HTML it removes the child element updates the Dom value with the new value.', 'start': 590.626, 'duration': 7.445}, {'end': 605.617, 'text': 'Then there is a complete recalculation of the CSS for the parent and child for the complete tree and then the layout gets updated.', 'start': 598.452, 'duration': 7.165}, {'end': 609.4, 'text': 'So that is each element exact coordinates on the screen.', 'start': 606.317, 'duration': 3.083}, {'end': 616.945, 'text': 'And then finally there is a complete traversal of the tree or the render tree and then it gets displayed on the browser.', 'start': 610.18, 'duration': 6.765}, {'end': 618.618, 'text': 'Now what happens?', 'start': 617.557, 'duration': 1.061}, {'end': 622.561, 'text': 'as you can see on the point number four, this is very much heavy, that is,', 'start': 618.618, 'duration': 3.943}, {'end': 630.027, 'text': 'recalculating of the CSS and change layouts because they uses a complex algorithm the effect and, finally,', 'start': 622.561, 'duration': 7.466}, {'end': 635.111, 'text': 'they affect the performance of the application and, as well as updating the Dom properties.', 'start': 630.027, 'duration': 5.084}, {'end': 635.992, 'text': "It's very complex.", 'start': 635.191, 'duration': 0.801}, {'end': 639.034, 'text': 'Now here we are talking about only one change.', 'start': 636.592, 'duration': 2.442}, {'end': 648.904, 'text': "Now let's say, suppose, if you want to update the Dom document object model 10 times directly, Then all the above six steps which I have talked about,", 'start': 639.534, 'duration': 9.37}, {'end': 656.472, 'text': 'they will run one by one and they will update the Dom algorithms, which will take whole lot of time to update all the Dom values.', 'start': 648.904, 'duration': 7.568}, {'end': 661.277, 'text': 'That is why we say that real Dom is always lower than the virtual Dom.', 'start': 657.033, 'duration': 4.244}, {'end': 666.904, 'text': 'Please remember virtual Dom is a aspect or you can say concept which is introduced by react.js.', 'start': 661.758, 'duration': 5.146}, {'end': 676.82, 'text': 'Now. this slowness of the application can be made worse by the fact that most JavaScript frameworks update the dorm much more than they have to.', 'start': 667.813, 'duration': 9.007}, {'end': 683.766, 'text': "for example, let's say that you have a list that contains 10 items, for example, so you check out the first item.", 'start': 676.82, 'duration': 6.946}, {'end': 687.148, 'text': 'now, most of the JavaScript framework would rebuild the entire list.', 'start': 683.766, 'duration': 3.382}, {'end': 689.39, 'text': 'that is the complete 10 list.', 'start': 687.148, 'duration': 2.242}, {'end': 692.252, 'text': "that's 10 times more work than necessary.", 'start': 689.39, 'duration': 2.862}, {'end': 699.271, 'text': 'So Only one item is changed, but the remaining nine gets rebuilt again and again exactly how they were before.', 'start': 692.873, 'duration': 6.398}, {'end': 703.992, 'text': 'So rebuilding a list is no big deal to a web browser.', 'start': 699.771, 'duration': 4.221}, {'end': 708.453, 'text': 'but modern websites can use huge amount of Dom manipulation.', 'start': 703.992, 'duration': 4.461}, {'end': 711.354, 'text': 'inefficient updating has become now a serious problem.', 'start': 708.453, 'duration': 2.901}, {'end': 716.676, 'text': 'So what happens when you try to update the dominant react, the reconciliation process?', 'start': 711.915, 'duration': 4.761}], 'summary': 'Heavy dom manipulation slows down web applications, causing inefficiency and poor performance, with javascript frameworks updating the dom excessively.', 'duration': 145.999, 'max_score': 570.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M570677.jpg'}, {'end': 866.585, 'src': 'embed', 'start': 841.972, 'weight': 3, 'content': [{'end': 849.555, 'text': 'very important to learn that react.js follows unidirectional flow of data or one-way data binding as compared to other frameworks,', 'start': 841.972, 'duration': 7.583}, {'end': 851.175, 'text': 'which supports two-way data binding.', 'start': 849.555, 'duration': 1.62}, {'end': 860.158, 'text': 'So in react.js throughout the application the data flows in a single direction, which gives us a better control over the application.', 'start': 851.775, 'duration': 8.383}, {'end': 866.585, 'text': 'So as you can see here that Data flows from view to action from action.', 'start': 860.818, 'duration': 5.767}], 'summary': 'React.js uses unidirectional data flow for better control.', 'duration': 24.613, 'max_score': 841.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M841972.jpg'}, {'end': 1031.935, 'src': 'embed', 'start': 1005.133, 'weight': 2, 'content': [{'end': 1011.577, 'text': 'because it allows your site to have a faster page load time, which is the key to a good user experience.', 'start': 1005.133, 'duration': 6.444}, {'end': 1018.22, 'text': 'it helps in the SEO, that is, search engine optimization, because what will happen that without server site rendering,', 'start': 1011.577, 'duration': 6.643}, {'end': 1021.782, 'text': 'all your server ships is an HTML page with no body?', 'start': 1018.22, 'duration': 3.562}, {'end': 1026.244, 'text': 'So just some script tags that are then used by the browser to render the application.', 'start': 1022.423, 'duration': 3.821}, {'end': 1031.935, 'text': 'So, in a nutshell, what is the difference between client-side rendering and server-side rendering?', 'start': 1026.932, 'duration': 5.003}], 'summary': 'Server-side rendering improves page load time and seo by providing html content for faster user experience and better search engine optimization.', 'duration': 26.802, 'max_score': 1005.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M1005133.jpg'}], 'start': 111.687, 'title': 'React.js fundamentals', 'summary': 'Covers react.js fundamentals, including es5 vs es6 differences, introduction to react.js, its key features and prerequisites, virtual dom and data binding, emphasizing the shift towards es6 standards and the benefits of using virtual dom and unidirectional data binding.', 'chapters': [{'end': 386.517, 'start': 111.687, 'title': 'React.js es5 vs es6', 'summary': 'Covers the differences between es5 and es6 in react.js, including syntax, state initialization, function binding, context binding, and advantages of es6, emphasizing the shift towards es6 standards and its key features.', 'duration': 274.83, 'highlights': ["ES6 introduces class and constructor for state initialization, in contrast to ES5's createClass method, which sets state directly after calling the super keyword.", 'In ES6, function binding is manual and is typically done inside the constructor, unlike ES5 where functions are automatically bound by React.', 'ES6 utilizes prop types and default props as properties of the class itself, deviating from ES5 where these were defined as part of the createClass definition.', 'Context binding in ES6 involves binding the context inside the constructor, while in ES5, context binding is done in line.', 'Advantages of ES6 over ES5 include the ability to create promises, classes, arrow functions, and the introduction of block scoping and modules.']}, {'end': 570.057, 'start': 386.597, 'title': 'Introduction to react.js', 'summary': 'Introduces react.js as an open source javascript library developed by facebook, focusing on creating rich user interfaces, using jsx for code writing, and employing virtual dom for calculating ui changes. it also emphasizes the importance of prerequisites for working with react.js.', 'duration': 183.46, 'highlights': ['React.js is an open source JavaScript library developed by Facebook for creating rich user interfaces that run in the web browser. Provides background information about React.js and its purpose.', 'React.js uses JSX for writing code and employs a concept of virtual Dom, a JavaScript object model used to calculate UI changes. Explains the key features of React.js, highlighting the use of JSX and virtual Dom.', 'Prerequisites for working with React.js include familiarity with HTML, CSS, JavaScript, ES6 standards, and Node.js/NPM installation. Lists the essential prerequisites for working with React.js, emphasizing the knowledge required in various areas.']}, {'end': 1115.457, 'start': 570.677, 'title': 'React.js: virtual dom and data binding', 'summary': 'Explains the inefficiency of manipulating the real dom in javascript, the advantages of using virtual dom in react.js, the concept of unidirectional data binding in react.js, and the benefits of server-side rendering.', 'duration': 544.78, 'highlights': ['Advantages of Server-Side Rendering Server-side rendering provides faster page load time, improves SEO, and renders the react components on the server to output HTML content, contrasting with client-side rendering.', 'Inefficiency of Manipulating Real Dom Manipulating the real Dom in JavaScript is slow, involving multiple steps, recalculating CSS, and affecting application performance, especially when updating the Dom multiple times, highlighting the superiority of virtual Dom in React.js.', 'Concept of Virtual Dom in React.js React.js uses virtual Dom, a node tree representing elements and their attributes, to efficiently update the real Dom by comparing the changes and reflecting only the updated objects, demonstrating the power of virtual Dom over real Dom manipulation.', 'Unidirectional Data Binding in React.js React.js follows a unidirectional flow of data, where data flows from view to action, to dispatcher, to store, providing better control over the application than frameworks supporting two-way data binding.']}], 'duration': 1003.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M111687.jpg', 'highlights': ["ES6 introduces class and constructor for state initialization, in contrast to ES5's createClass method.", 'React.js is an open source JavaScript library developed by Facebook for creating rich user interfaces.', 'Advantages of Server-Side Rendering: faster page load time, improves SEO, and renders the react components on the server.', 'Unidirectional Data Binding in React.js: data flows from view to action, to dispatcher, to store.']}, {'end': 2748.567, 'segs': [{'end': 1209.323, 'src': 'embed', 'start': 1181.326, 'weight': 0, 'content': [{'end': 1187.232, 'text': 'Now, what are the various advantages of react.js the first one application performance is increased.', 'start': 1181.326, 'duration': 5.906}, {'end': 1192.997, 'text': 'So which means that the creating the dynamic web applications now it has become very easier.', 'start': 1187.912, 'duration': 5.085}, {'end': 1198.696, 'text': 'and react.js is very much easier to learn now how the application performance is increased.', 'start': 1193.553, 'duration': 5.143}, {'end': 1200.197, 'text': 'We have already talked about that.', 'start': 1198.776, 'duration': 1.421}, {'end': 1201.978, 'text': 'It uses a concept called virtual Dom.', 'start': 1200.297, 'duration': 1.681}, {'end': 1209.323, 'text': 'So enhancement of performance has been done or you can say application performance is increased because of the concept of virtual Dom.', 'start': 1202.519, 'duration': 6.804}], 'summary': 'React.js offers increased application performance through virtual dom.', 'duration': 27.997, 'max_score': 1181.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M1181326.jpg'}, {'end': 1247.187, 'src': 'embed', 'start': 1223.41, 'weight': 2, 'content': [{'end': 1229.995, 'text': 'This is one of the greatest advantage of react.js at the readability of the code or the readability of the application has been improved a lot.', 'start': 1223.41, 'duration': 6.585}, {'end': 1241.443, 'text': 'Another is that it can be easily integrated or used with other frameworks like angular.js or meteor or view.js even with knockout.js or amber.js.', 'start': 1230.775, 'duration': 10.668}, {'end': 1247.187, 'text': 'Another advantages of react.js I want to talk about here is that the reusable components.', 'start': 1242.123, 'duration': 5.064}], 'summary': 'React.js improves code readability, integrates with various frameworks, and offers reusable components.', 'duration': 23.777, 'max_score': 1223.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M1223410.jpg'}, {'end': 1347.552, 'src': 'embed', 'start': 1320.986, 'weight': 1, 'content': [{'end': 1329.592, 'text': 'So there are these famous applications which are using react.js in their applications, or maybe browser application,', 'start': 1320.986, 'duration': 8.606}, {'end': 1331.954, 'text': 'and some are using in their mobile apps.', 'start': 1329.592, 'duration': 2.362}, {'end': 1337.918, 'text': 'So some are also using react native instead of react, along with the react.js, in fact.', 'start': 1332.474, 'duration': 5.444}, {'end': 1340.01, 'text': 'So some of the famous applications.', 'start': 1338.51, 'duration': 1.5}, {'end': 1347.552, 'text': 'one of them is obviously Facebook, Yahoo, Uber, Netflix, Twitter, Instagram, Dropbox and New York Times.', 'start': 1340.01, 'duration': 7.542}], 'summary': 'Famous applications like facebook, uber, and netflix use react.js and react native for web and mobile applications.', 'duration': 26.566, 'max_score': 1320.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M1320986.jpg'}, {'end': 1455.592, 'src': 'embed', 'start': 1423.885, 'weight': 3, 'content': [{'end': 1430.009, 'text': 'But to configure this environment what you have to do that you have to click on this gear sign in JS besides the JS.', 'start': 1423.885, 'duration': 6.124}, {'end': 1434.872, 'text': 'Once you click over it, you have to select the react libraries,', 'start': 1430.99, 'duration': 3.882}, {'end': 1441.237, 'text': 'which is first is react.js and second is react Dom development.js these two libraries.', 'start': 1434.872, 'duration': 6.365}, {'end': 1446.701, 'text': 'You have to search from here and then edit and another is JavaScript preprocessor, which you have to add.', 'start': 1441.277, 'duration': 5.424}, {'end': 1455.592, 'text': 'So, once this is done, so that you are ready to play around the react.js code in these You can say online editors,', 'start': 1447.241, 'duration': 8.351}], 'summary': 'To configure the environment, select react.js and react dom development.js, and javascript preprocessor.', 'duration': 31.707, 'max_score': 1423.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M1423885.jpg'}, {'end': 1646.792, 'src': 'embed', 'start': 1618.276, 'weight': 4, 'content': [{'end': 1621.638, 'text': 'So first of all, you have to add a Dom container to the HTML.', 'start': 1618.276, 'duration': 3.362}, {'end': 1625.4, 'text': "So what I have done is that I'm the plain HTML file.", 'start': 1622.318, 'duration': 3.082}, {'end': 1632.06, 'text': 'I did two script tags, so you can, just like this, add the script tags in your HTML file.', 'start': 1625.894, 'duration': 6.166}, {'end': 1636.904, 'text': 'one script tag is for react.js library and another is for react on.', 'start': 1632.06, 'duration': 4.844}, {'end': 1640.707, 'text': 'so first of all, you have to add a DOM container to the HTML and add the script tags.', 'start': 1636.904, 'duration': 3.803}, {'end': 1646.792, 'text': 'Okay, So what I have done is that I have open HTML page where I want to add it, added a.', 'start': 1641.548, 'duration': 5.244}], 'summary': 'To integrate react, add dom container and script tags to html.', 'duration': 28.516, 'max_score': 1618.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M1618276.jpg'}, {'end': 1912.109, 'src': 'embed', 'start': 1883.257, 'weight': 5, 'content': [{'end': 1885.337, 'text': "So I'm setting the state from false to true.", 'start': 1883.257, 'duration': 2.08}, {'end': 1893.099, 'text': 'So if you see in this example, if I click on this button like this state has been telling me that you like this.', 'start': 1885.857, 'duration': 7.242}, {'end': 1899.42, 'text': 'So that is how we can create components or you can say class-based components in react.js.', 'start': 1893.759, 'duration': 5.661}, {'end': 1901.04, 'text': "So let's move forward.", 'start': 1900.16, 'duration': 0.88}, {'end': 1904.725, 'text': 'Now we will talk about some react.js fundamentals.', 'start': 1901.863, 'duration': 2.862}, {'end': 1910.047, 'text': 'What are the various react.js fundamentals available in react.js.', 'start': 1905.005, 'duration': 5.042}, {'end': 1912.109, 'text': 'So first of them is JSX.', 'start': 1910.127, 'duration': 1.982}], 'summary': 'Demonstrating state change and creating class-based components in react.js, followed by a discussion on jsx.', 'duration': 28.852, 'max_score': 1883.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M1883257.jpg'}, {'end': 2294.957, 'src': 'embed', 'start': 2271.502, 'weight': 7, 'content': [{'end': 2279.709, 'text': 'and that is where the concept of reusability comes into picture that each component can be reusable at a later point of time.', 'start': 2271.502, 'duration': 8.207}, {'end': 2283.051, 'text': 'but conceptually, components are like JavaScript functions.', 'start': 2279.709, 'duration': 3.342}, {'end': 2286.614, 'text': 'You can say like that they accept some arbitrary inputs.', 'start': 2283.131, 'duration': 3.483}, {'end': 2294.957, 'text': 'So the inputs to a react component is called props and the return react elements describing what should appear on the screen.', 'start': 2287.233, 'duration': 7.724}], 'summary': 'React components are like javascript functions, allowing reusability and accepting arbitrary inputs.', 'duration': 23.455, 'max_score': 2271.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M2271502.jpg'}, {'end': 2491.964, 'src': 'embed', 'start': 2462.93, 'weight': 6, 'content': [{'end': 2469.253, 'text': 'But before that, what are just a summary of the components that everything in react is a component.', 'start': 2462.93, 'duration': 6.323}, {'end': 2472.174, 'text': 'each component returns a dom object.', 'start': 2469.253, 'duration': 2.921}, {'end': 2479.778, 'text': 'as I mentioned, that component divides your UI or splits your UI into independent reusable pieces,', 'start': 2472.174, 'duration': 7.604}, {'end': 2483.24, 'text': 'and then each independent piece is processed separately.', 'start': 2479.778, 'duration': 3.462}, {'end': 2491.964, 'text': 'a component can be divided into a root component and into the child components, and then we can further split into smaller components.', 'start': 2483.24, 'duration': 8.724}], 'summary': 'In react, everything is a component, which returns a dom object. components divide ui into independent reusable pieces, processed separately, and can be divided into root and child components.', 'duration': 29.034, 'max_score': 2462.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M2462930.jpg'}, {'end': 2664.212, 'src': 'embed', 'start': 2640.413, 'weight': 8, 'content': [{'end': 2647.658, 'text': 'the props are accessed using this dot props dot name, or you can say this dot props dot the attribute name or attribute value.', 'start': 2640.413, 'duration': 7.245}, {'end': 2655.106, 'text': 'So if I talk about props, They work similar to HTML attributes data flows from downward from the parent component.', 'start': 2648.238, 'duration': 6.868}, {'end': 2658.888, 'text': 'So as we are talking about a UI tree a parent-child relationship.', 'start': 2655.606, 'duration': 3.282}, {'end': 2664.212, 'text': "So in terms of props, it's a unidirectional flow of data props are immutable.", 'start': 2659.229, 'duration': 4.983}], 'summary': 'Props in react flow data unidirectionally from parent to child.', 'duration': 23.799, 'max_score': 2640.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M2640413.jpg'}], 'start': 1115.457, 'title': 'React.js fundamentals and applications', 'summary': 'Covers the advantages of react.js, including performance increase through virtual dom, ease of integration with other frameworks, and usage by famous applications. it also explains using react.js in html, fundamentals overview, jsx attributes, components, and props.', 'chapters': [{'end': 1377.719, 'start': 1115.457, 'title': 'React.js advantages and applications', 'summary': 'Discusses the advantages of react.js, including the performance increase through virtual dom, ease of integration with other frameworks, and its usage by famous applications such as facebook, uber, and netflix.', 'duration': 262.262, 'highlights': ['React.js enhances application performance through virtual DOM, making dynamic web applications creation easier and improving readability. The application performance is increased due to the concept of virtual DOM, making dynamic web applications easier to create. React.js also improves the readability of the code or application.', 'React.js can be easily integrated with other frameworks like Angular.js, Meteor, Vue.js, Knockout.js, and Ember.js, promoting reusability of components. React.js can be integrated with various frameworks, promoting reusability of components. It can be used with Angular.js, Meteor, Vue.js, Knockout.js, and Ember.js.', 'Famous applications such as Facebook, Yahoo, Uber, Netflix, Twitter, Instagram, Dropbox, and New York Times utilize React.js and React Native in their websites and mobile apps. Big applications like Facebook, Uber, Netflix, and others are using React.js and React Native in their websites and mobile apps, showcasing its widespread usage in the industry.']}, {'end': 1713.101, 'start': 1377.719, 'title': 'Using react.js in html', 'summary': 'Explains how to use online code playgrounds like glitch, codepen, and codesandbox to write react.js code, as well as how to add react to an existing html page, and the necessary dependencies for react.js installation.', 'duration': 335.382, 'highlights': ['To use React.js in online code playgrounds, such as CodePen, you need to configure the environment by selecting the React libraries (react.js and react Dom development.js) and adding a JavaScript preprocessor. Configuring the environment for React.js in online code playgrounds like CodePen involves selecting React libraries and adding a JavaScript preprocessor.', 'Adding React to an existing HTML page involves adding a DOM container and the necessary script tags for react.js, react Dom.js, and Babel.min.js. The process of adding React to an existing HTML page includes adding a DOM container and the required script tags for react.js, react Dom.js, and Babel.min.js.', 'The necessary dependencies for React.js installation include downloading and installing NPM, installing webpack, react, and Babel for JSX. The dependencies for React.js installation involve downloading and installing NPM, webpack, react, and Babel for JSX.']}, {'end': 2126.98, 'start': 1713.601, 'title': 'React.js fundamentals overview', 'summary': 'Covers creating a simple react.js file with script tags for react.js and react dom, creating a class-based component in a custom.js file, and discussing jsx fundamentals including its uses, syntax, and features like nested elements and attribute specification.', 'duration': 413.379, 'highlights': ['Creating a class-based component in a custom.js file The speaker explains creating a class-based component in a custom.js file, defining its initial state, render method, and the use of setState, demonstrating the transition of state from false to true on button click.', 'Discussing JSX fundamentals including its uses, syntax, and features like nested elements and attribute specification The chapter includes a comprehensive explanation of JSX fundamentals, covering its uses, syntax, and features such as nested elements and attribute specification within JSX, emphasizing the combination of JavaScript and XML for a readable representation of React components.', "Creating a simple React.js file with script tags for React.js and React Dom The speaker demonstrates creating a simple React.js file with script tags for React.js and React Dom, showcasing the rendering of 'Hello world' on the browser as a result of the written code."]}, {'end': 2314.866, 'start': 2127.38, 'title': 'Jsx attributes and react components', 'summary': 'Covers the usage of jsx attributes, specifying expressions and string literals, and the concept of components in react, emphasizing the reusability and independence of components while discussing their inputs and outputs.', 'duration': 187.486, 'highlights': ['JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects, allowing their usage inside if statements, for loops, while loops, and as arguments and return values from functions.', 'In React, everything is considered as a component, allowing for the splitting of UI into independent, reusable pieces of code In React, everything is considered as a component, allowing for the splitting of UI into independent, reusable pieces of code, with the flexibility to update or change components without affecting the rest of the application.', 'Components accept arbitrary inputs called props and return React elements describing what should appear on the screen Components accept arbitrary inputs called props and return React elements describing what should appear on the screen, enabling easy updates or changes to components without disturbing other parts of the application.']}, {'end': 2748.567, 'start': 2315.871, 'title': 'React.js components and props', 'summary': 'Explains how react.js components are divided into logical pieces, with each component returning a dom element, and how props facilitate communication between components, emphasizing the unidirectional flow of data and the immutability of props.', 'duration': 432.696, 'highlights': ['React.js components are divided into logical pieces, with each component returning a DOM element. The concept in React.js emphasizes having a parent component and child components, forming a tree structure, to divide the UI into independent reusable pieces.', 'Props facilitate communication between components, with a unidirectional flow of data and props being immutable. Props help components converse with each other, functioning similarly to function arguments or parameters. They support a unidirectional flow of data from parent to child components and are immutable, resembling pure functions.']}], 'duration': 1633.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M1115457.jpg', 'highlights': ['React.js enhances application performance through virtual DOM, making dynamic web applications creation easier and improving readability.', 'Famous applications such as Facebook, Yahoo, Uber, Netflix, Twitter, Instagram, Dropbox, and New York Times utilize React.js and React Native in their websites and mobile apps.', 'React.js can be easily integrated with other frameworks like Angular.js, Meteor, Vue.js, Knockout.js, and Ember.js, promoting reusability of components.', 'To use React.js in online code playgrounds, such as CodePen, you need to configure the environment by selecting the React libraries and adding a JavaScript preprocessor.', 'Adding React to an existing HTML page involves adding a DOM container and the necessary script tags for react.js, react Dom.js, and Babel.min.js.', 'Creating a class-based component in a custom.js file, defining its initial state, render method, and the use of setState, demonstrating the transition of state from false to true on button click.', 'In React, everything is considered as a component, allowing for the splitting of UI into independent, reusable pieces of code.', 'Components accept arbitrary inputs called props and return React elements describing what should appear on the screen, enabling easy updates or changes to components without disturbing other parts of the application.', 'Props facilitate communication between components, with a unidirectional flow of data and props being immutable.']}, {'end': 4730.6, 'segs': [{'end': 2772.554, 'src': 'embed', 'start': 2748.947, 'weight': 3, 'content': [{'end': 2755.531, 'text': 'So for this particular function the input was account and amount and you can see there that I am changing the value of account.', 'start': 2748.947, 'duration': 6.584}, {'end': 2761.094, 'text': 'So it becomes a impure function and that is not allowed when it comes to components and props.', 'start': 2756.091, 'duration': 5.003}, {'end': 2765.069, 'text': 'because all react component must act like pure function.', 'start': 2761.667, 'duration': 3.402}, {'end': 2772.554, 'text': 'So props are read only or you can say props are immutable in nature now components and props we talked about that.', 'start': 2765.409, 'duration': 7.145}], 'summary': 'In react, components must act like pure functions, with immutable props.', 'duration': 23.607, 'max_score': 2748.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M2748947.jpg'}, {'end': 2936.483, 'src': 'embed', 'start': 2911.559, 'weight': 1, 'content': [{'end': 2920.205, 'text': 'Okay, and please remember that you have to use a script type equal to text Babel to indicate the JSX code in JavaScript of jQuery.', 'start': 2911.559, 'duration': 8.646}, {'end': 2925.841, 'text': 'We refer a script type equal to text slash JavaScript, Then we are working with JSX.', 'start': 2920.245, 'duration': 5.596}, {'end': 2933.423, 'text': "You have to use a script type equal to text slash Babel to indicate the JSX code and include Babel dot pin dot J's.", 'start': 2926.181, 'duration': 7.242}, {'end': 2936.483, 'text': "This is very important and this Babel dot Min dot J's.", 'start': 2933.603, 'duration': 2.88}], 'summary': "Use script type='text/babel' for jsx code in javascript or jquery.", 'duration': 24.924, 'max_score': 2911.559, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M2911559.jpg'}, {'end': 3055.744, 'src': 'embed', 'start': 3032.729, 'weight': 2, 'content': [{'end': 3041.155, 'text': 'Hello Kate the reason being why this output because I have written here is hello and passing the parameter as a JSX.', 'start': 3032.729, 'duration': 8.426}, {'end': 3049.46, 'text': "So I'm using the JavaScript at the JSX and looping around the values in an array using the map function or map method,", 'start': 3041.595, 'duration': 7.865}, {'end': 3052.202, 'text': 'which is inbuilt method of the array collection.', 'start': 3049.46, 'duration': 2.742}, {'end': 3054.723, 'text': 'So that is why this particular output is shown.', 'start': 3052.562, 'duration': 2.161}, {'end': 3055.744, 'text': 'Hello Alice.', 'start': 3055.123, 'duration': 0.621}], 'summary': 'Using javascript and jsx to loop through array values using map function.', 'duration': 23.015, 'max_score': 3032.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M3032729.jpg'}, {'end': 3127.682, 'src': 'embed', 'start': 3080.799, 'weight': 0, 'content': [{'end': 3084.922, 'text': 'Now in the next in this example, what I am doing is I am defining a component.', 'start': 3080.799, 'duration': 4.123}, {'end': 3087.704, 'text': 'So we talked about props.', 'start': 3085.703, 'duration': 2.001}, {'end': 3089.025, 'text': 'We talked about jsx.', 'start': 3087.804, 'duration': 1.221}, {'end': 3093.879, 'text': 'We talked about components, right? So in this particular example, I am defining a component.', 'start': 3089.105, 'duration': 4.774}, {'end': 3101.721, 'text': 'So what is the syntax for defining the component class than the component name, which extends from react component?', 'start': 3094.299, 'duration': 7.422}, {'end': 3106.083, 'text': 'then it creates a component class and it implements a render method.', 'start': 3101.721, 'duration': 4.362}, {'end': 3113.025, 'text': 'Please remember that the class components or the function components always should have a render method.', 'start': 3106.523, 'duration': 6.502}, {'end': 3119.126, 'text': 'class components always implements a render method to return a component instance of the class.', 'start': 3113.025, 'duration': 6.101}, {'end': 3123.699, 'text': 'So if I talk about before version 16 of react chairs.', 'start': 3119.647, 'duration': 4.052}, {'end': 3127.682, 'text': 'It uses react dot create class to create a component class.', 'start': 3124.199, 'duration': 3.483}], 'summary': 'Defining a component class with render method is essential for react components.', 'duration': 46.883, 'max_score': 3080.799, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M3080799.jpg'}, {'end': 3203.196, 'src': 'embed', 'start': 3174.755, 'weight': 5, 'content': [{'end': 3179.397, 'text': 'So how you can access the prop you can access the prop is this dot props dot attribute name.', 'start': 3174.755, 'duration': 4.642}, {'end': 3185.112, 'text': 'Please remember how you can access it this dot props dot attribute name.', 'start': 3180.031, 'duration': 5.081}, {'end': 3189.454, 'text': "This is very important to understand and now let's see the output of this.", 'start': 3185.993, 'duration': 3.461}, {'end': 3195.355, 'text': "I'm opening it in the browser.", 'start': 3193.995, 'duration': 1.36}, {'end': 3197.476, 'text': 'It is showing me the output.', 'start': 3196.376, 'duration': 1.1}, {'end': 3198.096, 'text': 'Hello, John.', 'start': 3197.536, 'duration': 0.56}, {'end': 3203.196, 'text': "Okay Now, let's talk about This dot props dot children.", 'start': 3198.836, 'duration': 4.36}], 'summary': "Access props with this.props.attribute. output shows 'hello, john'.", 'duration': 28.441, 'max_score': 3174.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M3174755.jpg'}, {'end': 3365.477, 'src': 'embed', 'start': 3336.498, 'weight': 6, 'content': [{'end': 3341.222, 'text': 'So what happens is that sometimes you need a way to validate the props.', 'start': 3336.498, 'duration': 4.724}, {'end': 3346.278, 'text': "So you don't want users to have the freedom to input anything into your component.", 'start': 3341.874, 'duration': 4.404}, {'end': 3350.042, 'text': 'So react has a solution for it and it is called prop type.', 'start': 3346.799, 'duration': 3.243}, {'end': 3355.447, 'text': 'So what we are doing is that we are saying that prop types is of type string and it is required.', 'start': 3350.703, 'duration': 4.744}, {'end': 3357.529, 'text': 'This is kind of a validation we are doing.', 'start': 3355.487, 'duration': 2.042}, {'end': 3365.477, 'text': 'So what is done in this particular example is that the my title my title, is a component has a props of title.', 'start': 3358.03, 'duration': 7.447}], 'summary': 'React provides prop type for validating and specifying required props in components.', 'duration': 28.979, 'max_score': 3336.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M3336498.jpg'}, {'end': 3519.085, 'src': 'embed', 'start': 3483.774, 'weight': 7, 'content': [{'end': 3486.696, 'text': 'index.css, app.js and app.css.', 'start': 3483.774, 'duration': 2.922}, {'end': 3491.127, 'text': 'So you will have an SRC folder and a public folder.', 'start': 3487.543, 'duration': 3.584}, {'end': 3495.271, 'text': 'So these two folders are very important and we will talk about this in detail.', 'start': 3491.667, 'duration': 3.604}, {'end': 3496.612, 'text': 'So what happens?', 'start': 3495.791, 'duration': 0.821}, {'end': 3504.06, 'text': 'once you create a project based on create, react app application, a solution, a built-in solution is given to you,', 'start': 3496.612, 'duration': 7.448}, {'end': 3508.204, 'text': 'which allows you to write the code or to test your different functionalities.', 'start': 3504.06, 'duration': 4.144}, {'end': 3510.021, 'text': 'So it has two folders.', 'start': 3508.86, 'duration': 1.161}, {'end': 3519.085, 'text': 'one is the public folder, where we have a one HTML file called index.html, where we have defined a root element in a div with the ID as root.', 'start': 3510.021, 'duration': 9.064}], 'summary': 'React app comes with src and public folders, containing index.html and root div.', 'duration': 35.311, 'max_score': 3483.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M3483774.jpg'}, {'end': 3818.422, 'src': 'embed', 'start': 3792.501, 'weight': 9, 'content': [{'end': 3800.085, 'text': 'Now, the beauty of this particular application is that whenever you will change the code, whenever you make some changes,', 'start': 3792.501, 'duration': 7.584}, {'end': 3803.207, 'text': "you don't have to run the npm start again and again.", 'start': 3800.085, 'duration': 3.122}, {'end': 3807.15, 'text': 'the changes will be reflected on the browser instantaneously.', 'start': 3803.666, 'duration': 3.484}, {'end': 3811.795, 'text': 'So you can say that this particular application is very much reactive in nature.', 'start': 3807.61, 'duration': 4.185}, {'end': 3818.422, 'text': 'So whenever you change the code or update any code it will directly get reflected on the browser.', 'start': 3812.215, 'duration': 6.207}], 'summary': 'Application reflects code changes instantly without repeatedly running npm start.', 'duration': 25.921, 'max_score': 3792.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M3792501.jpg'}, {'end': 3970.339, 'src': 'embed', 'start': 3944.689, 'weight': 10, 'content': [{'end': 3951.251, 'text': 'if it is a single line, JSX expression or JSX statement, you can very well write it in react, Dom dot render.', 'start': 3944.689, 'duration': 6.562}, {'end': 3956.092, 'text': 'But if it is very big or going to become very, very big,', 'start': 3951.771, 'duration': 4.321}, {'end': 3965.177, 'text': 'then you can put it outside react Dom dot render in a constant element and then you can pass the react Dom dot render that element just like shown on the screen.', 'start': 3956.092, 'duration': 9.085}, {'end': 3970.339, 'text': 'Now, we will see the example how you can render the elements using JSX.', 'start': 3966.157, 'duration': 4.182}], 'summary': 'In react, for smaller jsx elements, use dom.render, for larger ones, put them in a constant element and pass it to dom.render.', 'duration': 25.65, 'max_score': 3944.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M3944689.jpg'}, {'end': 4138.734, 'src': 'embed', 'start': 4109.033, 'weight': 11, 'content': [{'end': 4114.335, 'text': 'Please remember that we set the props using this dot props dot attribute, attribute, name and this.', 'start': 4109.033, 'duration': 5.302}, {'end': 4117.756, 'text': 'likewise we set the state, this dot state dot attribute.', 'start': 4114.335, 'duration': 3.421}, {'end': 4124.719, 'text': "So here what I'm doing this dot set state dot date dot to local string which will show me the current date or time.", 'start': 4117.957, 'duration': 6.762}, {'end': 4125.939, 'text': 'So hello Whipple.', 'start': 4125.158, 'duration': 0.781}, {'end': 4131.921, 'text': 'It is 1036 p.m. That is how we can set the initial state and final state in react.js.', 'start': 4126.06, 'duration': 5.861}, {'end': 4138.734, 'text': "Now components and props now, let's talk about what are the components and props.", 'start': 4134.502, 'duration': 4.232}], 'summary': 'Setting initial and final state using props and components in react.js', 'duration': 29.701, 'max_score': 4109.033, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M4109033.jpg'}, {'end': 4267.18, 'src': 'embed', 'start': 4219.381, 'weight': 12, 'content': [{'end': 4223.55, 'text': 'So you can also conditionally render a react component.', 'start': 4219.381, 'duration': 4.169}, {'end': 4228.874, 'text': "So let's move to another example that how you can style the react component.", 'start': 4224.591, 'duration': 4.283}, {'end': 4235.499, 'text': 'very, very important to understand that, how you can do the styling in the react component, because, please remember,', 'start': 4228.874, 'duration': 6.625}, {'end': 4237.681, 'text': 'just like a native JavaScript and jQuery.', 'start': 4235.499, 'duration': 2.182}, {'end': 4249.13, 'text': "We use class class equal to some name to let's say style any tag or component in JavaScript of jQuery, but in react we use the class name.", 'start': 4237.761, 'duration': 11.369}, {'end': 4250.591, 'text': 'This is a keyword.', 'start': 4249.83, 'duration': 0.761}, {'end': 4253.652, 'text': 'So instead of class We use class name.', 'start': 4251.171, 'duration': 2.481}, {'end': 4256.734, 'text': 'So this class name I have defined in index dot CSS.', 'start': 4254.012, 'duration': 2.722}, {'end': 4260.876, 'text': 'So if I save this and see.', 'start': 4257.834, 'duration': 3.042}, {'end': 4267.18, 'text': 'so you see here this is the CSS which is defined and the text rendered is a pull box, because the text is given over.', 'start': 4260.876, 'duration': 6.304}], 'summary': 'Styling a react component using class name instead of class, as demonstrated in the example.', 'duration': 47.799, 'max_score': 4219.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M4219381.jpg'}, {'end': 4577.052, 'src': 'embed', 'start': 4530.697, 'weight': 8, 'content': [{'end': 4542.442, 'text': 'So I just want to show you in this particular example that how you can decompose your UI or decompose your react application into sub components,', 'start': 4530.697, 'duration': 11.745}, {'end': 4545.804, 'text': 'or you can say you can create a parent-child kind of hierarchy.', 'start': 4542.442, 'duration': 3.362}, {'end': 4554.048, 'text': "Although some advanced concepts are used to build this particular application, which I'm not going to tell you as of now,", 'start': 4546.384, 'duration': 7.664}, {'end': 4561.972, 'text': 'but I just want to show you that how you can decompose an application if it is given as a requirement or problem to you,', 'start': 4554.048, 'duration': 7.924}, {'end': 4564.474, 'text': 'then how you can decompose it into different components.', 'start': 4561.972, 'duration': 2.502}, {'end': 4568.796, 'text': "So let's go back to the code and let's directly go to react Dom dot render.", 'start': 4564.514, 'duration': 4.282}, {'end': 4577.052, 'text': 'Now in this react Dom dot render the first component or you can say the root or the parent component which is called is the quiz component.', 'start': 4569.264, 'duration': 7.788}], 'summary': 'Demonstrating decomposition of a react application into sub components and creating a parent-child hierarchy.', 'duration': 46.355, 'max_score': 4530.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M4530697.jpg'}, {'end': 4740.772, 'src': 'embed', 'start': 4707.38, 'weight': 15, 'content': [{'end': 4710.202, 'text': 'That is the question and the score area again.', 'start': 4707.38, 'duration': 2.822}, {'end': 4714.726, 'text': 'The score area is divided into the correct answer and the incorrect answer.', 'start': 4710.242, 'duration': 4.484}, {'end': 4723.773, 'text': 'those can be considered as two sub components of the score area component, and then this quiz area is divided into the question and the answer list.', 'start': 4714.726, 'duration': 9.047}, {'end': 4730.6, 'text': 'So you can see over here that this quiz area is divided into questions of component and the answer answer list subcomponent.', 'start': 4724.233, 'duration': 6.367}, {'end': 4740.772, 'text': "So these are the three important aspects and then we'll move forward to the other react.js fundamental which starts with States.", 'start': 4730.961, 'duration': 9.811}], 'summary': 'The score area has correct and incorrect answers, quiz area has question and answer list, and will move to other react.js fundamental.', 'duration': 33.392, 'max_score': 4707.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M4707380.jpg'}], 'start': 2748.947, 'title': 'React.js fundamentals', 'summary': 'Covers the basics of react.js, including types of components, rendering jsx, using javascript within jsx, pure functions, and props immutability. it also discusses defining component classes, accessing props and children, implementing prop type validation, creating a react app using create-react-app, composing subcomponents, setting initial and final state, conditionally rendering a react component, and styling react components using class name keyword.', 'chapters': [{'end': 3079.739, 'start': 2748.947, 'title': 'React.js fundamentals', 'summary': 'Covers the basics of react.js, including the types of components, rendering jsx, and using javascript within jsx. it also emphasizes the importance of pure functions and props immutability.', 'duration': 330.792, 'highlights': ['Components and props in React.js The chapter explains that React.js allows the creation of two types of components, functional and class components, and the importance of creating class components over functional components.', "Rendering JSX in React.js The transcript provides a detailed example of rendering JSX in React.js, including the use of script type 'text/Babel' to indicate JSX code and the execution of the render method with JSX elements and a placeholder.", 'Using JavaScript within JSX The chapter demonstrates the usage of JavaScript within JSX, specifically using the map method to loop through an array and display the output in a JSX format, emphasizing the use of curly braces to denote JavaScript syntax within JSX.', 'Importance of pure functions and props immutability The chapter highlights the importance of pure functions and props immutability in React.js, as components must act like pure functions and props are read-only, ensuring a better understanding of these fundamental concepts in React.js.']}, {'end': 3772.023, 'start': 3080.799, 'title': 'React components and props', 'summary': 'Discusses defining component classes, accessing props and children, and implementing prop type validation in react. it also covers creating a react app using create-react-app and composing subcomponents in a parent component.', 'duration': 691.224, 'highlights': ["Defining Component Classes The chapter discusses defining a component class, implementing a render method, and accessing props using 'this.props.attribute' in the ES6 standard of React, which has replaced the deprecated 'react.createClass' method.", "Accessing Props and Children The discussion includes accessing props using 'this.props.attribute', passing props to components in 'ReactDOM.render', and using 'this.props.children' to access component children, which can have three possibilities: undefined, single child node, or multiple child nodes represented as an array.", "Implementing Prop Type Validation The chapter explains the use of 'prop-types' to validate props by defining their types and required status, preventing users from inputting incompatible data into components and resulting in error messages if the validation fails.", "Creating a React App with create-react-app The transcript briefly mentions creating a React app using 'create-react-app', which provides a predefined project structure with important folders like 'public' and 'src', and scripts like 'npm start' to run the project.", 'Composing Subcomponents in a Parent Component The discussion illustrates composing a React application into multiple subcomponents within a parent component, passing props to subcomponents, and utilizing JSX and custom CSS within subcomponent render methods.']}, {'end': 4291.71, 'start': 3772.083, 'title': 'React.js basics and best practices', 'summary': 'Covers react.js basics, including reactive nature, jsx elements, rendering elements using jsx, setting initial and final state, components and props, conditionally rendering a react component, and styling react components using class name keyword.', 'duration': 519.627, 'highlights': ['The beauty of this particular application is that changes are reflected on the browser instantaneously, making it very much reactive in nature. The application reflects changes on the browser instantaneously, showcasing its reactive nature.', "The best practice for writing JSX expressions or elements is to create a constant element outside react Dom dot render for larger JSX elements and then pass that element in the react Dom dot render method. It's recommended to create a constant element outside react Dom dot render for larger JSX elements and then pass it to the render method for better organization and readability.", 'The chapter also covers setting initial and final state in react.js, showcasing the usage of this dot state for initializing state and this dot set state for updating it. The chapter covers setting initial and final state in react.js, using this dot state for initializing state and this dot set state for updating it.', "The section discusses conditionally rendering a react component, demonstrating the ability to conditionally render a component based on its attribute's value. The chapter explains how to conditionally render a react component based on the value of its attribute.", 'The chapter also emphasizes the use of class name keyword for styling react components, mentioning the need to use class name instead of class for defining styles in CSS. The chapter emphasizes the use of class name keyword for styling react components and highlights the importance of using it instead of class for defining styles in CSS.']}, {'end': 4730.6, 'start': 4291.99, 'title': 'Implementing multiple choice quiz in react.js', 'summary': 'Demonstrates how to decompose a react application into components, showcasing a multiple choice quiz functionality, with a focus on sub-component hierarchy and parent-child relationships.', 'duration': 438.61, 'highlights': ['The chapter demonstrates how to decompose a React application into sub-components, particularly focusing on a multiple choice quiz functionality.', 'The main components of the quiz are the question and the score area, which further consists of sub-components such as correct answers, incorrect answers, question, and answer list.', 'The chapter also emphasizes on implementing parent-child hierarchy and decomposing an application based on a given requirement or problem.']}], 'duration': 1981.653, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M2748947.jpg', 'highlights': ['The chapter explains the importance of creating class components over functional components in React.js.', "The chapter provides a detailed example of rendering JSX in React.js, including the use of script type 'text/Babel' and the execution of the render method with JSX elements.", 'The chapter demonstrates the usage of JavaScript within JSX, specifically using the map method to loop through an array and display the output in a JSX format.', 'The chapter highlights the importance of pure functions and props immutability in React.js, ensuring a better understanding of these fundamental concepts.', "The chapter discusses defining a component class, implementing a render method, and accessing props using 'this.props.attribute' in the ES6 standard of React.", "The discussion includes accessing props using 'this.props.attribute', passing props to components in 'ReactDOM.render', and using 'this.props.children' to access component children.", "The chapter explains the use of 'prop-types' to validate props by defining their types and required status, preventing users from inputting incompatible data into components.", "The transcript briefly mentions creating a React app using 'create-react-app', which provides a predefined project structure with important folders like 'public' and 'src'.", 'The discussion illustrates composing a React application into multiple subcomponents within a parent component, passing props to subcomponents, and utilizing JSX and custom CSS within subcomponent render methods.', 'The application reflects changes on the browser instantaneously, showcasing its reactive nature.', "It's recommended to create a constant element outside react Dom dot render for larger JSX elements and then pass it to the render method for better organization and readability.", 'The chapter covers setting initial and final state in react.js, using this dot state for initializing state and this dot set state for updating it.', 'The chapter explains how to conditionally render a react component based on the value of its attribute.', 'The chapter emphasizes the use of class name keyword for styling react components and highlights the importance of using it instead of class for defining styles in CSS.', 'The chapter demonstrates how to decompose a React application into sub-components, particularly focusing on a multiple choice quiz functionality.', 'The main components of the quiz are the question and the score area, which further consists of sub-components such as correct answers, incorrect answers, question, and answer list.', 'The chapter emphasizes on implementing parent-child hierarchy and decomposing an application based on a given requirement or problem.']}, {'end': 6523.288, 'segs': [{'end': 4799.994, 'src': 'embed', 'start': 4774.423, 'weight': 0, 'content': [{'end': 4784.187, 'text': 'So what are the states in react.js? So just like we have props we talked about props in react.js, which is used for data management in react.js.', 'start': 4774.423, 'duration': 9.764}, {'end': 4790.85, 'text': 'So in addition to props react component have another way of holding the data and which is called a state.', 'start': 4784.647, 'duration': 6.203}, {'end': 4799.994, 'text': 'So what is a state? So components can change so to keep track of the various changes or the updates happening in the component over the time.', 'start': 4791.671, 'duration': 8.323}], 'summary': 'React.js has states for managing component data and changes.', 'duration': 25.571, 'max_score': 4774.423, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M4774423.jpg'}, {'end': 5024.012, 'src': 'embed', 'start': 4892.763, 'weight': 1, 'content': [{'end': 4899.424, 'text': 'How can you compare the props in state? So props are the values which is passed in by a component parent.', 'start': 4892.763, 'duration': 6.661}, {'end': 4905.085, 'text': 'So you can see here that the props these are the value passed in by a component parent.', 'start': 4900.004, 'duration': 5.081}, {'end': 4911.907, 'text': 'So this value is passed to another component as a prop and the value is again passed to another component as a prop.', 'start': 4905.865, 'duration': 6.042}, {'end': 4917.609, 'text': "It's a state is local mutable data that can be created and modified within the component.", 'start': 4912.607, 'duration': 5.002}, {'end': 4922.29, 'text': 'This is the definition of state you can say so state is local.', 'start': 4918.029, 'duration': 4.261}, {'end': 4928.312, 'text': 'It should be very simple in nature and mutable data which can be created and modified within the component.', 'start': 4922.47, 'duration': 5.842}, {'end': 4932.093, 'text': 'Now, what is the use of having the local data or you can say local state.', 'start': 4928.932, 'duration': 3.161}, {'end': 4939.247, 'text': 'Having local data that can change within a component increases complexity and limits the composability of the component.', 'start': 4932.762, 'duration': 6.485}, {'end': 4945.331, 'text': 'So, when we talk about props, we have local data which flows from one component to another component,', 'start': 4939.967, 'duration': 5.364}, {'end': 4954.158, 'text': 'but the problem with this is that it can change within the component and can increase the complexity and also limits the composability of any component.', 'start': 4945.331, 'duration': 8.827}, {'end': 4960.222, 'text': 'So when we talk about state in react.js, please remember that to use the state in react.js.', 'start': 4954.718, 'duration': 5.504}, {'end': 4966.099, 'text': 'You have to use a class component There will be no more function components in our projects.', 'start': 4960.283, 'duration': 5.816}, {'end': 4972.32, 'text': 'If you want to use a state and in the class constructor since we are talking about class components.', 'start': 4966.239, 'duration': 6.081}, {'end': 4974.561, 'text': 'So there will be a default constructor over there.', 'start': 4972.34, 'duration': 2.221}, {'end': 4978.482, 'text': 'We will initialize the component state to a sensible default value.', 'start': 4975.161, 'duration': 3.321}, {'end': 4985.704, 'text': 'So just to repeat once again, what is a state state is just another way of holding the data in react.js.', 'start': 4979.222, 'duration': 6.482}, {'end': 4991.457, 'text': 'Now, this is something very important that components in react.js can be in two forms.', 'start': 4986.596, 'duration': 4.861}, {'end': 4998.219, 'text': 'You can create again two types of component one is stateless component and another is a stateful component.', 'start': 4991.897, 'duration': 6.322}, {'end': 5006.94, 'text': 'Now, what is the difference between these two stateless and stateful because we talked about components components can be created by two ways.', 'start': 4998.739, 'duration': 8.201}, {'end': 5011.421, 'text': 'Now when I say stateless stateless means it does not remember anything.', 'start': 5007.42, 'duration': 4.001}, {'end': 5014.482, 'text': 'It does it does not keep track of any state.', 'start': 5011.501, 'duration': 2.981}, {'end': 5024.012, 'text': 'and what is a stateful it remembers everything it does it keeps track of every change on an event or any update in the event.', 'start': 5015.123, 'duration': 8.889}], 'summary': 'State in react.js holds local mutable data, while props flow between components, but state can increase complexity and limit composability.', 'duration': 131.249, 'max_score': 4892.763, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M4892763.jpg'}, {'end': 5238.983, 'src': 'embed', 'start': 5206.292, 'weight': 6, 'content': [{'end': 5207.592, 'text': 'before going to the demo.', 'start': 5206.292, 'duration': 1.3}, {'end': 5209.793, 'text': 'I will talk about something called set state.', 'start': 5207.933, 'duration': 1.86}, {'end': 5213.614, 'text': 'So as we are saying that there are stateful react.js components.', 'start': 5210.233, 'duration': 3.381}, {'end': 5219.675, 'text': 'What does it mean? So you have to set your initial state and then you will set the final state.', 'start': 5214.214, 'duration': 5.461}, {'end': 5222.796, 'text': 'So that is the you can say current state and the future state.', 'start': 5220.035, 'duration': 2.761}, {'end': 5225.377, 'text': 'So there is a method called set state.', 'start': 5223.396, 'duration': 1.981}, {'end': 5229.954, 'text': 'Now, what does it do? So you can set the initial state by using this dot state.', 'start': 5225.897, 'duration': 4.057}, {'end': 5238.983, 'text': 'But if you want to set the future state or you want to update the state you have to use a method called this dot set state now set state method.', 'start': 5230.455, 'duration': 8.528}], 'summary': 'Demonstration on setting state in stateful react.js components.', 'duration': 32.691, 'max_score': 5206.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M5206292.jpg'}, {'end': 5346.317, 'src': 'embed', 'start': 5310.27, 'weight': 5, 'content': [{'end': 5316.353, 'text': 'you can say set state calls a batch method and there is no guarantee that the state can change immediately.', 'start': 5310.27, 'duration': 6.083}, {'end': 5324.917, 'text': 'So by this we mean that there is a method called set state by which we can set the final state of any react JS component a class component.', 'start': 5317.073, 'duration': 7.844}, {'end': 5329.366, 'text': "Now, let's move to some demo that how we can implement this kind of functionality.", 'start': 5325.743, 'duration': 3.623}, {'end': 5331.427, 'text': "So let's see this.", 'start': 5329.786, 'duration': 1.641}, {'end': 5334.089, 'text': 'So this is your index.html,', 'start': 5332.348, 'duration': 1.741}, {'end': 5346.317, 'text': 'a simple HTML file where I am calling a script called like button.js by using the script tag and in this like button.js script and using the class component and the concept of state.', 'start': 5334.089, 'duration': 12.228}], 'summary': 'In react js, the setstate method may not guarantee immediate state changes. a demo illustrates its implementation using a class component.', 'duration': 36.047, 'max_score': 5310.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M5310270.jpg'}, {'end': 5825.297, 'src': 'embed', 'start': 5779.147, 'weight': 8, 'content': [{'end': 5785.031, 'text': 'and we should always try to make our state as simple as possible and minimize the number of stateful components.', 'start': 5779.147, 'duration': 5.884}, {'end': 5790.915, 'text': "So for example, if we have let's say 10 components that need data from the state.", 'start': 5785.712, 'duration': 5.203}, {'end': 5795.538, 'text': 'So we should create one container component that will keep the state for all of them.', 'start': 5791.395, 'duration': 4.143}, {'end': 5798.08, 'text': 'We should not create 10 components.', 'start': 5796.039, 'duration': 2.041}, {'end': 5802.843, 'text': 'We should create one component as a parent component and then the other could be the child components.', 'start': 5798.46, 'duration': 4.383}, {'end': 5807.306, 'text': "Okay Now, let's see more examples based on the state.", 'start': 5803.804, 'duration': 3.502}, {'end': 5816.955, 'text': "So What I'm going to do is I will create more state examples or estate demos to show you the concept of state in detail.", 'start': 5808.087, 'duration': 8.868}, {'end': 5819.515, 'text': "I'm going to create a class component.", 'start': 5817.555, 'duration': 1.96}, {'end': 5825.297, 'text': 'So class app which extends from react dot component.', 'start': 5820.176, 'duration': 5.121}], 'summary': 'Minimize stateful components, use container component to manage state efficiently.', 'duration': 46.15, 'max_score': 5779.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M5779147.jpg'}, {'end': 5992.794, 'src': 'embed', 'start': 5965.214, 'weight': 12, 'content': [{'end': 5971.52, 'text': "So let's save this file now how you set the state now even you can set the state in JSX.", 'start': 5965.214, 'duration': 6.306}, {'end': 5979.831, 'text': 'So, just like this if you want to set the state in jsx, you have to place this curly braces and what will be the state you want to become.', 'start': 5972.21, 'duration': 7.621}, {'end': 5982.292, 'text': 'so it should become this dot state.', 'start': 5979.831, 'duration': 2.461}, {'end': 5992.794, 'text': 'dot value is header, because header is a property which we have already defined, and here I want to say this dot state dot, for example, content.', 'start': 5982.292, 'duration': 10.502}], 'summary': 'Setting state in jsx using curly braces to define the state value.', 'duration': 27.58, 'max_score': 5965.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M5965214.jpg'}, {'end': 6502.136, 'src': 'embed', 'start': 6435.637, 'weight': 11, 'content': [{'end': 6441.281, 'text': 'which means that you can use it without props and you can use it with props also.', 'start': 6435.637, 'duration': 5.644}, {'end': 6445.545, 'text': 'So there are you can say two ways of using state in react.js.', 'start': 6441.662, 'duration': 3.883}, {'end': 6455.905, 'text': 'but I will prefer I will recommend that you can use state with props and if whenever required or whenever you can see apply the props just go with it.', 'start': 6446.138, 'duration': 9.767}, {'end': 6460.408, 'text': "It's not always necessary that you have to implement every time, only with the state.", 'start': 6456.485, 'duration': 3.923}, {'end': 6464.371, 'text': 'you can very well use props and stay together in the same application.', 'start': 6460.408, 'duration': 3.963}, {'end': 6474.058, 'text': 'Now just a few tips of using state and react.js just a couple of tips from my side that do not modify the state directly.', 'start': 6465.032, 'duration': 9.026}, {'end': 6477.329, 'text': "Don't even try to modify the state directly.", 'start': 6474.568, 'duration': 2.761}, {'end': 6483.511, 'text': 'You always use the set state method and the only place where you can assign this dot state is the constructor.', 'start': 6477.409, 'duration': 6.102}, {'end': 6485.271, 'text': 'These are the two main things.', 'start': 6483.931, 'duration': 1.34}, {'end': 6490.773, 'text': "So what I'm saying over here is that if you have to specify this dot state where you can specify this dot state,", 'start': 6485.291, 'duration': 5.482}, {'end': 6493.634, 'text': 'you can specify this dot state in the constructor only.', 'start': 6490.773, 'duration': 2.861}, {'end': 6498.095, 'text': 'This is the first you can say right way to use the state.', 'start': 6494.254, 'duration': 3.841}, {'end': 6502.136, 'text': 'Now, what is the other thing that state updates may be asynchronous in nature.', 'start': 6498.575, 'duration': 3.561}], 'summary': "In react.js, it's recommended to use state with props, not modify state directly, and specify state in the constructor only.", 'duration': 66.499, 'max_score': 6435.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M6435637.jpg'}], 'start': 4730.961, 'title': 'React.js fundamentals and state management', 'summary': "Covers react.js fundamentals, including es5 and es6 refactoring, jsx components, and props. it explains state in react.js, the difference between stateless and stateful components, the usage of set state method, and the importance of using 'this.state' and 'this.setstate' methods. it also showcases using state and props together and provides tips for state management in react.js.", 'chapters': [{'end': 4954.158, 'start': 4730.961, 'title': 'React.js fundamentals: understanding states', 'summary': 'Covers the fundamentals of react.js, including es5 and es6 refactoring, advantages of react.js, jsx components, and props, with a detailed explanation of states in react.js, highlighting the differences between props and states, the definition of state, and the use of local state in components.', 'duration': 223.197, 'highlights': ["States in React.js are used to keep track of changes or updates happening in a component over time, unlike props which are immutable, and are essential in controlling a component's rendering and behavior. States are used to keep track of changes or updates in a component over time, and they are essential in controlling a component's rendering and behavior. Unlike props, states are mutable, allowing for the modification of data within the component.", 'Props are values passed in by a component parent, while state is local mutable data that can be created and modified within the component, which can increase complexity and limit composability. Props are values passed in by a component parent, while state is local mutable data that can be created and modified within the component. However, having local data that can change within a component can increase complexity and limit the composability of the component.', 'The use of local state in a component can increase complexity and limit composability, as it can change within the component, unlike props which flow from one component to another. Local state in a component can increase complexity and limit composability, as it can change within the component, unlike props which flow from one component to another.']}, {'end': 5404.569, 'start': 4954.718, 'title': 'State in react.js components', 'summary': 'Discusses the concept of state in react.js, explaining the difference between stateless and stateful components and the usage of set state method, emphasizing the shift towards using class components for state management.', 'duration': 449.851, 'highlights': ['State in React.js can be managed using class components, with the need to use a class constructor to initialize the component state to a sensible default value. The usage of class components for managing state is emphasized, highlighting the requirement to use a class constructor to initialize the component state.', 'Stateless components in React.js do not keep track of any state, while stateful components remember and keep track of every change or update in the event. The distinction between stateless and stateful components is explained, with stateless components not retaining any state and stateful components keeping track of all state changes.', 'The set state method in React.js merges the new state with the old state, causing the component to eventually be rendered and potentially leading to performance considerations due to batched state changes. The functionality of the set state method is described, highlighting its role in merging new and old states, triggering component rendering, and potential performance implications due to batched state changes.']}, {'end': 5964.653, 'start': 5406.53, 'title': 'React component state and event handling', 'summary': "Explains the process of setting the initial state and handling events in a react component, highlighting the importance of using 'this.state' and 'this.setstate' methods, with an emphasis on creating class components and demonstrating the concept of state in detail.", 'duration': 558.123, 'highlights': ['The chapter explains the process of setting the initial state and handling events in a React component The chapter provides a detailed explanation of setting the initial state and handling events in a React component, emphasizing the importance of these processes in building React applications.', "The importance of using 'this.state' and 'this.setState' methods The use of 'this.state' and 'this.setState' methods is emphasized throughout the chapter, showcasing their significance in managing state and triggering re-renders in React components.", 'Emphasis on creating class components and demonstrating the concept of state in detail The chapter emphasizes the creation of class components and provides a detailed demonstration of the concept of state, including the process of setting the initial state within the constructor of a class component.', 'The concept of state as a mutable and component-controlled data storage The concept of state is described as a mutable and component-controlled data storage, distinguishing it from props and highlighting its role in managing and modifying data within a component.', 'Best practices in managing stateful components and minimizing the number of stateful components Best practices for managing stateful components are outlined, emphasizing the importance of minimizing the number of stateful components and creating a parent container component to manage state for multiple child components.']}, {'end': 6523.288, 'start': 5965.214, 'title': 'Using state and props in react.js', 'summary': 'Discusses using state and props in react.js, showcasing how to set state in jsx, create class components, use state and props together, and provides tips for using state in react.js.', 'duration': 558.074, 'highlights': ['Two ways of using state in React.js: with and without props The chapter demonstrates two methods of using state in React.js, with and without props, providing flexibility in application development.', 'Demonstrating the process of setting the state in JSX using curly braces The chapter illustrates the process of setting the state in JSX using curly braces, providing a practical example for implementation.', 'Recommendation to use state with props and set state method instead of modifying state directly The chapter recommends using state with props and the set state method instead of modifying state directly, emphasizing best practices for state management.', 'Indicating that state updates may be asynchronous and should not be relied upon for calculating the next state The chapter cautions that state updates may be asynchronous and should not be relied upon for calculating the next state, highlighting potential issues with state and prop updates.', 'Demonstrating the creation of class components for parent and child components The chapter demonstrates the creation of class components for parent and child components, providing a structured approach for component development.']}], 'duration': 1792.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M4730961.jpg', 'highlights': ['States in React.js are used to keep track of changes or updates happening in a component over time, unlike props which are immutable.', 'Props are values passed in by a component parent, while state is local mutable data that can be created and modified within the component.', 'The use of local state in a component can increase complexity and limit composability, as it can change within the component, unlike props which flow from one component to another.', 'State in React.js can be managed using class components, with the need to use a class constructor to initialize the component state to a sensible default value.', 'Stateless components in React.js do not keep track of any state, while stateful components remember and keep track of every change or update in the event.', 'The set state method in React.js merges the new state with the old state, causing the component to eventually be rendered and potentially leading to performance considerations due to batched state changes.', 'The chapter explains the process of setting the initial state and handling events in a React component.', "The importance of using 'this.state' and 'this.setState' methods.", 'Emphasis on creating class components and demonstrating the concept of state in detail.', 'The concept of state as a mutable and component-controlled data storage.', 'Best practices in managing stateful components and minimizing the number of stateful components.', 'Two ways of using state in React.js: with and without props.', 'Demonstrating the process of setting the state in JSX using curly braces.', 'Recommendation to use state with props and set state method instead of modifying state directly.', 'Indicating that state updates may be asynchronous and should not be relied upon for calculating the next state.', 'Demonstrating the creation of class components for parent and child components.']}, {'end': 7481.681, 'segs': [{'end': 6553.105, 'src': 'embed', 'start': 6523.768, 'weight': 0, 'content': [{'end': 6528.43, 'text': "So if you want to set the value of the next day don't rely on the value of this dot props or this dot state.", 'start': 6523.768, 'duration': 4.662}, {'end': 6535.633, 'text': 'And the third thing which I want to tell you about state is that state updates are merged when you call set state.', 'start': 6528.888, 'duration': 6.745}, {'end': 6540.576, 'text': 'So what happens is that react merges the object you provide into the current state.', 'start': 6535.993, 'duration': 4.583}, {'end': 6546.54, 'text': 'So these are some of the tips you can say from my side for using state and react.js.', 'start': 6541.217, 'duration': 5.323}, {'end': 6553.105, 'text': "So let's come back to this PPT and let's talk about another aspect of react.js, which is life cycle.", 'start': 6547.381, 'duration': 5.724}], 'summary': 'State updates are merged when calling set state in react.js', 'duration': 29.337, 'max_score': 6523.768, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M6523768.jpg'}, {'end': 6615.543, 'src': 'embed', 'start': 6570.606, 'weight': 1, 'content': [{'end': 6577.271, 'text': 'So there are many methods in react.js which notifies when any stage of a life cycle occurs.', 'start': 6570.606, 'duration': 6.665}, {'end': 6580.673, 'text': 'Now, what are the different phases of that life cycle?', 'start': 6577.991, 'duration': 2.682}, {'end': 6588.779, 'text': 'So it start with initial phase, Then it comes to updating phase and then props change phase and finally the unmounting phase,', 'start': 6581.254, 'duration': 7.525}, {'end': 6591.48, 'text': 'where you can free out some of the resources.', 'start': 6588.779, 'duration': 2.701}, {'end': 6599.522, 'text': 'So what we are saying is that there are four phases in which you can Define the life cycle of a particular react.js application.', 'start': 6592.16, 'duration': 7.362}, {'end': 6605.933, 'text': "So what happens is that it's very important in the application with many components.", 'start': 6600.427, 'duration': 5.506}, {'end': 6608.976, 'text': "Let's say there are 10 components in a react.js application.", 'start': 6605.973, 'duration': 3.003}, {'end': 6615.543, 'text': 'It becomes very important to free up the resources taken by the components when they are destroyed.', 'start': 6609.417, 'duration': 6.126}], 'summary': 'In react.js, there are four life cycle phases: initial, updating, props change, and unmounting, crucial for managing resources in applications with multiple components.', 'duration': 44.937, 'max_score': 6570.606, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M6570606.jpg'}, {'end': 6677.197, 'src': 'embed', 'start': 6634.355, 'weight': 3, 'content': [{'end': 6643.143, 'text': 'or you can say we can declare some special methods on the component class to run some code when a component mounts or when a component dismount.', 'start': 6634.355, 'duration': 8.788}, {'end': 6647.166, 'text': 'So these methods are basically called the life cycle methods.', 'start': 6643.803, 'duration': 3.363}, {'end': 6649.994, 'text': 'Let me give an example component did Mount.', 'start': 6648.072, 'duration': 1.922}, {'end': 6651.815, 'text': 'This is a lifecycle method example.', 'start': 6650.234, 'duration': 1.581}, {'end': 6655.899, 'text': 'It runs after the component output has been rendered to the Dom.', 'start': 6652.396, 'duration': 3.503}, {'end': 6660.823, 'text': "So let's talk about these different different lifecycle methods in detail now.", 'start': 6656.74, 'duration': 4.083}, {'end': 6666.408, 'text': 'So the first phase in the life cycle of any react.js application is the initial phase.', 'start': 6661.604, 'duration': 4.804}, {'end': 6674.655, 'text': 'Now, what are the different methods available out here because in this phase component is about to make its way towards the Dom.', 'start': 6667.028, 'duration': 7.627}, {'end': 6677.197, 'text': 'It has not yet reached the dorm.', 'start': 6675.396, 'duration': 1.801}], 'summary': 'Lifecycle methods in react.js control component behavior during mounting and dismounting, with componentdidmount being an example, running after component output has been rendered to the dom.', 'duration': 42.842, 'max_score': 6634.355, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M6634355.jpg'}, {'end': 6849.483, 'src': 'embed', 'start': 6823.968, 'weight': 4, 'content': [{'end': 6829.57, 'text': 'Now the third phase is props change phase after the component has been rendered into the dome.', 'start': 6823.968, 'duration': 5.602}, {'end': 6835.292, 'text': 'The only other time the component will update apart from the state change is its props value changes.', 'start': 6829.99, 'duration': 5.302}, {'end': 6841.622, 'text': 'So please remember that through a state we can change the value or through props.', 'start': 6836.041, 'duration': 5.581}, {'end': 6846.543, 'text': 'Also, we can change the value just like we saw that this dot props dot attribute name.', 'start': 6841.702, 'duration': 4.841}, {'end': 6849.483, 'text': 'For example, this dot props dot name just like that.', 'start': 6846.603, 'duration': 2.88}], 'summary': 'Components update when state or props change, enabling dynamic value modification.', 'duration': 25.515, 'max_score': 6823.968, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M6823968.jpg'}, {'end': 7093.749, 'src': 'embed', 'start': 7065.454, 'weight': 7, 'content': [{'end': 7069.115, 'text': 'and component did amount is fired after the initial rendering offers.', 'start': 7065.454, 'duration': 3.661}, {'end': 7077.658, 'text': 'So there is you can see very as my new difference between component will Mount and component did amount will means uncertainty.', 'start': 7069.875, 'duration': 7.783}, {'end': 7085.44, 'text': 'So it is going to render or the initial rendering has started but it has not been yet rendered on the Tom.', 'start': 7077.978, 'duration': 7.462}, {'end': 7090.245, 'text': 'and component did amount means it has rendered on the browser or on the Dom.', 'start': 7086.26, 'duration': 3.985}, {'end': 7093.749, 'text': 'It will be fired once the initial rendering on the Dom pockets.', 'start': 7090.765, 'duration': 2.984}], 'summary': 'Componentdidmount is fired after initial rendering, indicating it has rendered on the dom.', 'duration': 28.295, 'max_score': 7065.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M7065454.jpg'}, {'end': 7144.969, 'src': 'embed', 'start': 7113.77, 'weight': 8, 'content': [{'end': 7118.495, 'text': 'So any change any update is there in the component it gets flushed to the Dom.', 'start': 7113.77, 'duration': 4.725}, {'end': 7123.539, 'text': 'Then you can call component date update and this method is not called for the initial rendering.', 'start': 7118.595, 'duration': 4.944}, {'end': 7130.986, 'text': 'Please remember this is very important that for initial rendering of the react.js component component date update method is not used.', 'start': 7123.559, 'duration': 7.427}, {'end': 7136.281, 'text': 'You can use this as an opportunity to operate on the Dom when the component has been updated.', 'start': 7131.457, 'duration': 4.824}, {'end': 7144.969, 'text': 'So for example, it has been updated using the props or using the state then only you can use component did update component will unmount.', 'start': 7136.862, 'duration': 8.107}], 'summary': 'In react.js, the component did update method is not used for initial rendering, but for operating on the dom after the component has been updated using props or state.', 'duration': 31.199, 'max_score': 7113.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M7113770.jpg'}, {'end': 7180.207, 'src': 'embed', 'start': 7152.665, 'weight': 9, 'content': [{'end': 7160.171, 'text': "It is fired immediately before a component is unmounted from the Dom and it's a very good place to remove message listeners or, you can say,", 'start': 7152.665, 'duration': 7.506}, {'end': 7163.434, 'text': 'general cleanup or garbage collection kind of activities.', 'start': 7160.171, 'duration': 3.263}, {'end': 7165.635, 'text': 'You can do in component unmount method.', 'start': 7163.494, 'duration': 2.141}, {'end': 7168.378, 'text': 'Another is component will receive props.', 'start': 7166.356, 'duration': 2.022}, {'end': 7172.081, 'text': 'It is fired when a component is receiving the new props.', 'start': 7169.318, 'duration': 2.763}, {'end': 7180.207, 'text': 'You might want to use this dot set state depending on the props just like we saw that we can use both props and state in a single application.', 'start': 7172.701, 'duration': 7.506}], 'summary': 'Componentwillunmount is ideal for cleanup activities, componentwillreceiveprops handles new props and state updates.', 'duration': 27.542, 'max_score': 7152.665, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M7152665.jpg'}, {'end': 7380.169, 'src': 'embed', 'start': 7350.49, 'weight': 10, 'content': [{'end': 7355.212, 'text': 'what are the different methods we generally use while mounting, updating and unmounting?', 'start': 7350.49, 'duration': 4.722}, {'end': 7362.515, 'text': 'So in the mounting we place the constructor, we can call the method called component did Mount, and then, when it comes to updating phase,', 'start': 7355.873, 'duration': 6.642}, {'end': 7364.456, 'text': 'we can use three different types of methods.', 'start': 7362.515, 'duration': 1.941}, {'end': 7369.522, 'text': 'new props for get derived state from props or should component update.', 'start': 7364.938, 'duration': 4.584}, {'end': 7380.169, 'text': 'we can use this dot set state and we can use this dot force update and the different methods which we can use in the updating phases component did update and finally in the unmounting phase.', 'start': 7369.522, 'duration': 10.647}], 'summary': 'Different methods for mounting, updating, and unmounting include constructor, componentdidmount, setstate, and componentdidupdate.', 'duration': 29.679, 'max_score': 7350.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M7350490.jpg'}, {'end': 7444.076, 'src': 'embed', 'start': 7414.607, 'weight': 11, 'content': [{'end': 7420.892, 'text': 'We can have mouse click we can have mouse over key press all these are called events and react.js.', 'start': 7414.607, 'duration': 6.285}, {'end': 7423.088, 'text': 'So for example, there is an action.', 'start': 7421.547, 'duration': 1.541}, {'end': 7430.29, 'text': 'So some action happened on the react component and then we have a react application which is called event.', 'start': 7423.788, 'duration': 6.502}, {'end': 7434.152, 'text': 'now some event has happened on the react component and it becomes a reaction.', 'start': 7430.29, 'duration': 3.862}, {'end': 7435.713, 'text': 'So that is a definition of events.', 'start': 7434.192, 'duration': 1.521}, {'end': 7444.076, 'text': 'Now, first we talk about that how the concept of even work in other UIs as compared to react.js,', 'start': 7436.473, 'duration': 7.603}], 'summary': 'Events in react.js involve mouse click, mouse over, and key press, leading to reactions in the react component.', 'duration': 29.469, 'max_score': 7414.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M7414607.jpg'}], 'start': 6523.768, 'title': 'React.js component lifecycle and event handling', 'summary': 'Covers the management of state and lifecycle methods in react.js, including tips for using state, the phases of lifecycle methods, and the importance of resource management. it also explains the various phases of the react.js component lifecycle, such as mounting, updating, and unmounting, and delves into event handling in react.js, comparing it with event handling in other uis.', 'chapters': [{'end': 6865.526, 'start': 6523.768, 'title': 'React.js state and lifecycle overview', 'summary': 'Provides an overview of managing state and lifecycle methods in react.js, discussing tips for using state, the purpose and phases of lifecycle methods, and the importance of managing resources in a react.js application with multiple components.', 'duration': 341.758, 'highlights': ['React merges the object you provide into the current state when you call set state. State updates are merged when set state is called, ensuring the object provided is combined with the current state.', "The four phases of a React.js application's lifecycle are the initial phase, updating phase, props change phase, and unmounting phase. The lifecycle of a React.js application consists of four phases: initial, updating, props change, and unmounting, each with specific methods and purposes.", 'It becomes crucial to free up resources taken by components when they are destroyed, especially in applications with many components. Managing resources in a React.js application with multiple components is crucial to ensure resources are freed up when components are destroyed, particularly in applications with numerous components.', "The lifecycle methods such as componentDidMount run specific code when a component mounts or dismounts. Lifecycle methods like componentDidMount execute code after a component's output has been rendered to the DOM, providing a way to run specific actions when a component mounts or dismounts.", 'The only other time a component updates, apart from a state change, is when its props value changes. Apart from state changes, a component updates when its props value changes, highlighting the significance of managing both state and props in React.js components.']}, {'end': 7172.081, 'start': 6866.058, 'title': 'React.js component life cycle', 'summary': 'Explains the various phases of the react.js component life cycle, including mounting, updating, and unmounting, with detailed explanations of methods such as component will mount, component did amount, component will update, component date update, and component will unmount.', 'duration': 306.023, 'highlights': ['Component Life Cycle Phases The chapter explains the different phases of the React.js component life cycle, including mounting, updating, and unmounting, along with the methods associated with each phase such as component will Mount, component did amount, component will update, component date update, and component will unmount.', 'Method Invocation Order The methods in the React.js component life cycle are invoked in a predefined order, such as get default props being called before component will Mount, emphasizing the importance of understanding the sequence of method invocation.', 'Component Will Mount and Component Did Mount Component will Mount is fired before the initial rendering occurs, while component did amount is fired after the initial rendering, highlighting the distinction between the two methods in the React.js component life cycle.', 'Component Will Update and Component Did Update Component will update is fired after component updates are made to the DOM, whereas component date update is invoked immediately after the updates are flushed to the DOM, with the latter not being called for the initial rendering of the React.js component.', 'Component Will Unmount and Component Will Receive Props Component will unmount is a single method called in the unmounting phase, fired immediately before a component is unmounted from the DOM, while component will receive props is invoked when a component is receiving new props.']}, {'end': 7481.681, 'start': 7172.701, 'title': 'React.js component lifecycle & event handling', 'summary': 'Discusses the react.js component lifecycle, including the use of constructor, shouldcomponentupdate, and mounting, updating, and unmounting phases. it also covers the fundamental of events in react.js, highlighting the triggered reactions to specific actions and the comparison with event handling in other uis.', 'duration': 308.98, 'highlights': ['The chapter discusses the React.js component lifecycle It covers the mounting, updating, and unmounting phases, and explains the use of shouldComponentUpdate and the constructor, emphasizing the importance of calling the super keyword before any other statement in the constructor.', 'It covers the fundamental of events in React.js The section explains the concept of events as triggered reactions to specific actions, such as on click, mouse click, mouse over, and key press, and compares event handling in React.js with other UIs, highlighting the potential performance impact of implementing event listeners on every control in other UIs.']}], 'duration': 957.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M6523768.jpg', 'highlights': ['State updates are merged when set state is called, ensuring the object provided is combined with the current state.', 'The lifecycle of a React.js application consists of four phases: initial, updating, props change, and unmounting, each with specific methods and purposes.', 'Managing resources in a React.js application with multiple components is crucial to ensure resources are freed up when components are destroyed, particularly in applications with numerous components.', "Lifecycle methods like componentDidMount execute code after a component's output has been rendered to the DOM, providing a way to run specific actions when a component mounts or dismounts.", 'Apart from state changes, a component updates when its props value changes, highlighting the significance of managing both state and props in React.js components.', 'The chapter explains the different phases of the React.js component life cycle, including mounting, updating, and unmounting, along with the methods associated with each phase.', 'The methods in the React.js component life cycle are invoked in a predefined order, emphasizing the importance of understanding the sequence of method invocation.', 'Component will Mount is fired before the initial rendering occurs, while component did amount is fired after the initial rendering, highlighting the distinction between the two methods in the React.js component life cycle.', 'Component will update is fired after component updates are made to the DOM, whereas component date update is invoked immediately after the updates are flushed to the DOM, with the latter not being called for the initial rendering of the React.js component.', 'Component will unmount is a single method called in the unmounting phase, fired immediately before a component is unmounted from the DOM, while component will receive props is invoked when a component is receiving new props.', 'It covers the mounting, updating, and unmounting phases, and explains the use of shouldComponentUpdate and the constructor, emphasizing the importance of calling the super keyword before any other statement in the constructor.', 'The section explains the concept of events as triggered reactions to specific actions, such as on click, mouse click, mouse over, and key press, and compares event handling in React.js with other UIs, highlighting the potential performance impact of implementing event listeners on every control in other UIs.']}, {'end': 8963.905, 'segs': [{'end': 7533.412, 'src': 'embed', 'start': 7502.069, 'weight': 0, 'content': [{'end': 7505.811, 'text': 'So which increases ultimately the performance of react.js application.', 'start': 7502.069, 'duration': 3.742}, {'end': 7512.725, 'text': 'Please remember that react events are named using camel casing rather than lowercase.', 'start': 7506.343, 'duration': 6.382}, {'end': 7523.309, 'text': 'So you have to define events or you can handle the events with camel case only and with JSX you can pass a function as the event handler rather than a string.', 'start': 7513.145, 'duration': 10.164}, {'end': 7525.229, 'text': 'So we will see that in the demo.', 'start': 7523.949, 'duration': 1.28}, {'end': 7533.412, 'text': "So before moving to reps now the other fundamental of react is let's see some of the demo of handling events in react.js.", 'start': 7526.03, 'duration': 7.382}], 'summary': 'React.js performance can increase with camel case events and jsx event handling.', 'duration': 31.343, 'max_score': 7502.069, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M7502069.jpg'}, {'end': 7902.969, 'src': 'embed', 'start': 7878.394, 'weight': 2, 'content': [{'end': 7887.639, 'text': "So what I'm saying is that you can apply JSX components, props, state and then life cycle methods and some kind of events, for example,", 'start': 7878.394, 'duration': 9.245}, {'end': 7888.76, 'text': 'on click events.', 'start': 7887.639, 'duration': 1.121}, {'end': 7890.241, 'text': 'just be saw.', 'start': 7888.76, 'duration': 1.481}, {'end': 7893.863, 'text': 'all these things you can combine in one react application.', 'start': 7890.241, 'duration': 3.622}, {'end': 7897.606, 'text': "So let's see more examples of events.", 'start': 7894.664, 'duration': 2.942}, {'end': 7902.969, 'text': "So what I'm doing here is let me remove everything from here.", 'start': 7898.486, 'duration': 4.483}], 'summary': 'React application can combine jsx, props, state, lifecycle methods, and events like onclick in one application.', 'duration': 24.575, 'max_score': 7878.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M7878394.jpg'}, {'end': 8044.4, 'src': 'embed', 'start': 8016.052, 'weight': 3, 'content': [{'end': 8020.796, 'text': 'So when we need to update the state of the parent component from its child?', 'start': 8016.052, 'duration': 4.744}, {'end': 8026.648, 'text': 'So generally what we have learned till here is that you can update the child even from the parent,', 'start': 8021.425, 'duration': 5.223}, {'end': 8034.073, 'text': 'but there could be some situations when you need to update the state of the parent component from below, that is, from the child,', 'start': 8026.648, 'duration': 7.425}, {'end': 8035.774, 'text': 'so we can create an event handler.', 'start': 8034.073, 'duration': 1.701}, {'end': 8044.4, 'text': "For example, let's say update state in the parent component and you can pass it as a prop to the child component where we can just call it.", 'start': 8036.114, 'duration': 8.286}], 'summary': 'Parent component state can be updated from child using event handlers and props.', 'duration': 28.348, 'max_score': 8016.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M8016052.jpg'}, {'end': 8171.451, 'src': 'embed', 'start': 8147.151, 'weight': 4, 'content': [{'end': 8155.496, 'text': 'you bind it using the keyword bind, and this so by this statement what you say, because you have to define this inside the constructor.', 'start': 8147.151, 'duration': 8.345}, {'end': 8162.401, 'text': 'by this you are binding a method which is called update state, and we are defining now the update state.', 'start': 8155.496, 'duration': 6.905}, {'end': 8171.451, 'text': 'This is a method we are defining And in this update state what we can do we can set the state now what state you have to set.', 'start': 8163.261, 'duration': 8.19}], 'summary': "Using the 'bind' keyword inside the constructor to bind the 'update state' method.", 'duration': 24.3, 'max_score': 8147.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M8147151.jpg'}, {'end': 8423.928, 'src': 'embed', 'start': 8397.503, 'weight': 5, 'content': [{'end': 8403.204, 'text': "that a parent component updates the state of a child component, but in this particular example, what I'm going to show you?", 'start': 8397.503, 'duration': 5.701}, {'end': 8406.505, 'text': 'that how you can update the state of a parent component from a child company.', 'start': 8403.204, 'duration': 3.301}, {'end': 8413.166, 'text': 'So what I have done is that I have created event handler update state in the parent component.', 'start': 8407.165, 'duration': 6.001}, {'end': 8416.847, 'text': 'You can see that this particular event handler.', 'start': 8414.026, 'duration': 2.821}, {'end': 8423.928, 'text': 'This is created in the parent component, but it is passed as a prop to the child component.', 'start': 8417.187, 'duration': 6.741}], 'summary': 'Demonstrating updating parent component state from child component using event handler.', 'duration': 26.425, 'max_score': 8397.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M8397503.jpg'}, {'end': 8552.29, 'src': 'embed', 'start': 8521.1, 'weight': 7, 'content': [{'end': 8523.182, 'text': 'What is a ref in react.js?', 'start': 8521.1, 'duration': 2.082}, {'end': 8526.024, 'text': 'So reference for references.', 'start': 8523.903, 'duration': 2.121}, {'end': 8533.951, 'text': 'you can say ref provide a way to access Dom nodes or react elements created in the render method.', 'start': 8526.024, 'duration': 7.927}, {'end': 8536.413, 'text': 'This is the definition of refs.', 'start': 8534.591, 'duration': 1.822}, {'end': 8543.245, 'text': "So what I'm saying is that ref stands for references and they are used to return the references to a particular element,", 'start': 8537.062, 'duration': 6.183}, {'end': 8545.306, 'text': 'or you can say component returned by the render.', 'start': 8543.245, 'duration': 2.061}, {'end': 8552.29, 'text': 'So if I have a react element having a render method, I have to place some reference in my component.', 'start': 8545.967, 'duration': 6.323}], 'summary': 'Refs in react.js provide a way to access dom nodes or elements created in the render method.', 'duration': 31.19, 'max_score': 8521.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M8521100.jpg'}, {'end': 8638.192, 'src': 'embed', 'start': 8612.76, 'weight': 8, 'content': [{'end': 8620.403, 'text': 'Those are you can manage the focus you can manage the text selection or you want to apply a media playback there.', 'start': 8612.76, 'duration': 7.643}, {'end': 8622.044, 'text': 'You can apply the reps.', 'start': 8620.423, 'duration': 1.621}, {'end': 8629.869, 'text': 'you can apply the reps in application where you triggering imperative animations or you are integrating with third-party Dom libraries.', 'start': 8622.044, 'duration': 7.825}, {'end': 8632.25, 'text': 'probably there you can use very well reps.', 'start': 8629.869, 'duration': 2.381}, {'end': 8638.192, 'text': 'So important thing is that avoid using reps for anything that can be done declaratively.', 'start': 8633.05, 'duration': 5.142}], 'summary': 'Reps can be used for imperative animations or third-party dom libraries, but avoid using it for declarative tasks.', 'duration': 25.432, 'max_score': 8612.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M8612760.jpg'}], 'start': 7481.681, 'title': 'React.js event handling', 'summary': 'Discusses react.js event handling, emphasizing performance benefits, naming conventions, and passing functions as event handlers. it also covers conditional rendering, event handler usage, and state binding, with a focus on login and toggle functionalities. additionally, it covers jsx components, props, state, lifecycle methods, and events, highlighting their flexibility in combination for comprehensive learning. furthermore, it demonstrates updating the parent state from a child component using event handlers and refs, along with best practices and use cases for using refs.', 'chapters': [{'end': 7548.964, 'start': 7481.681, 'title': 'React event handling', 'summary': 'Discusses how react manages events, emphasizing the performance benefit of having only one event listener and handler for different controls, naming conventions for events, and passing functions as event handlers in jsx. it also mentions using codepen.io as a playground for react.', 'duration': 67.283, 'highlights': ['React events use camel casing for naming, and only one event listener and handler are attached to different controls, ultimately increasing the performance of react.js application.', 'In JSX, functions can be passed as event handlers rather than strings, contributing to the efficient management of events.', 'The transcript mentions using codepen.io as a playground for working with React, providing an external resource for practicing and experimenting with React code.']}, {'end': 7858.507, 'start': 7549.364, 'title': 'React.js event handling', 'summary': 'Explains the implementation of event handling in react.js, including examples of conditional rendering based on events, the usage of event handlers, and the binding of events to components, with a focus on login and toggle functionalities.', 'duration': 309.143, 'highlights': ['The implementation of event handling in React.js, including examples of conditional rendering based on events, the usage of event handlers, and the binding of events to components. The chapter covers the fundamental concept of event handling in React.js, demonstrating the use of conditional rendering and event handlers.', 'The usage of conditional rendering based on click events to change the displayed components and messages, along with the binding of event handlers to events. The chapter provides a detailed explanation of how conditional rendering is used to switch between login and logout components based on click events, demonstrating the practical application of event handling.', 'The demonstration of handling toggle functionality by changing the state and updating the text displayed based on the state change. The chapter illustrates how the toggle functionality is implemented by changing the state and updating the displayed text accordingly, providing a clear example of event-driven UI updates.']}, {'end': 8225.695, 'start': 7858.547, 'title': 'React.js events and state', 'summary': 'Covers the application of jsx components, props, state, lifecycle methods, and events in a react.js application, emphasizing the flexibility to combine these fundamentals for comprehensive learning.', 'duration': 367.148, 'highlights': ['You can apply JSX components, props, state, life cycle methods, and events in one React application, offering a comprehensive approach for learning React.js. The flexibility to combine JSX components, props, state, life cycle methods, and events in a single React application allows for comprehensive learning and application of React.js fundamentals.', 'Child events in React.js involve updating the state of the parent component from its child, achieved through the creation of an event handler and passing it as a prop to the child component. Child events in React.js entail updating the state of the parent component from its child through the creation of an event handler and passing it as a prop to the child component.', "The process of defining a constructor, setting initial state, and utilizing the 'update state' method in a React.js application enables efficient state management. Defining a constructor, setting initial state, and utilizing the 'update state' method in a React.js application facilitates efficient state management."]}, {'end': 8963.905, 'start': 8226.075, 'title': 'Updating parent state from child', 'summary': 'Demonstrates how to update the state of the parent component from a child component in react.js, utilizing event handlers and refs. it also covers the use of refs and their creation, along with the best practices and use cases for using refs.', 'duration': 737.83, 'highlights': ['The chapter demonstrates how to update the state of the parent component from a child component in React.js The chapter explains the process of updating the state of the parent component from a child component in React.js, showcasing the use of event handlers and props to achieve this functionality.', 'The use of event handlers and passing them as props to child components is illustrated The demonstration includes creating event handlers and passing them as props to child components, emphasizing the ability to update the parent state from the child component using these event handlers.', 'The concept of refs in React.js is introduced, highlighting their purpose and usage The concept of refs in React.js is introduced, emphasizing their purpose to provide a way to access DOM nodes or React elements created in the render method, and their usage to reference components and elements.', 'Best practices and use cases for using refs are discussed The best practices and use cases for using refs are discussed, including managing focus, text selection, applying media playback, triggering imperative animations, and integrating with third-party DOM libraries, as well as the recommendation to avoid using refs for anything that can be done declaratively.']}], 'duration': 1482.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M7481681.jpg', 'highlights': ['React events use camel casing for naming, and only one event listener and handler are attached to different controls, ultimately increasing the performance of react.js application.', 'In JSX, functions can be passed as event handlers rather than strings, contributing to the efficient management of events.', 'The flexibility to combine JSX components, props, state, life cycle methods, and events in a single React application allows for comprehensive learning and application of React.js fundamentals.', 'Child events in React.js entail updating the state of the parent component from its child through the creation of an event handler and passing it as a prop to the child component.', "Defining a constructor, setting initial state, and utilizing the 'update state' method in a React.js application facilitates efficient state management.", 'The chapter explains the process of updating the state of the parent component from a child component in React.js, showcasing the use of event handlers and props to achieve this functionality.', 'The demonstration includes creating event handlers and passing them as props to child components, emphasizing the ability to update the parent state from the child component using these event handlers.', 'The concept of refs in React.js is introduced, emphasizing their purpose to provide a way to access DOM nodes or React elements created in the render method, and their usage to reference components and elements.', 'Best practices and use cases for using refs are discussed, including managing focus, text selection, applying media playback, triggering imperative animations, and integrating with third-party DOM libraries, as well as the recommendation to avoid using refs for anything that can be done declaratively.']}, {'end': 10518.017, 'segs': [{'end': 9014.846, 'src': 'embed', 'start': 8986.462, 'weight': 1, 'content': [{'end': 8992.404, 'text': "So if I write let's say the pull and I click on clear you can see it has been completely cleared from here.", 'start': 8986.462, 'duration': 5.942}, {'end': 8997.065, 'text': 'So that is how you can use ref in react.js.', 'start': 8993.164, 'duration': 3.901}, {'end': 9008.323, 'text': "Okay Now we'll talk about Example or you can say a demo a project where the concept which we have studied till now are let me repeat one thing JSX.", 'start': 8997.905, 'duration': 10.418}, {'end': 9014.846, 'text': 'We talked about components props state lifecycle events and reps.', 'start': 9008.703, 'duration': 6.143}], 'summary': 'Learned about using ref in react.js and discussed concepts such as jsx, components, props, state, lifecycle events, and reps.', 'duration': 28.384, 'max_score': 8986.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M8986462.jpg'}, {'end': 9151.933, 'src': 'embed', 'start': 9109.194, 'weight': 0, 'content': [{'end': 9114.208, 'text': 'also, The problem is that how do you know what should be its own component?', 'start': 9109.194, 'duration': 5.014}, {'end': 9122.014, 'text': 'Okay so, by coloring this particular example, we can see that there are five components in this very simple application.', 'start': 9114.768, 'duration': 7.246}, {'end': 9126.297, 'text': "It's a very simple application where there could be five components.", 'start': 9122.674, 'duration': 3.623}, {'end': 9130.64, 'text': 'So one component you can see this outer boundary of orange color.', 'start': 9126.917, 'duration': 3.723}, {'end': 9137.906, 'text': "So let's say I call this as filter able product table, which contains the entirety of the example.", 'start': 9131.601, 'duration': 6.305}, {'end': 9139.808, 'text': 'Now there is a search bar.', 'start': 9138.587, 'duration': 1.221}, {'end': 9146.691, 'text': 'This could be my second component in the blue color the blue boundary you can see it receives the user input.', 'start': 9140.028, 'duration': 6.663}, {'end': 9148.371, 'text': 'Now, there is a product table.', 'start': 9147.151, 'duration': 1.22}, {'end': 9150.052, 'text': 'You can see the green boundary.', 'start': 9148.692, 'duration': 1.36}, {'end': 9151.933, 'text': 'This is my third component.', 'start': 9150.672, 'duration': 1.261}], 'summary': 'A simple application has five components: filterable product table, search bar, and product table.', 'duration': 42.739, 'max_score': 9109.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M9109194.jpg'}, {'end': 9193.191, 'src': 'embed', 'start': 9170.087, 'weight': 8, 'content': [{'end': 9177.988, 'text': 'This is my fourth component and the final component is the product row which is in the red color which displays a row for each product.', 'start': 9170.087, 'duration': 7.901}, {'end': 9182.549, 'text': 'So now we have identified the components in this particular example.', 'start': 9178.748, 'duration': 3.801}, {'end': 9186.109, 'text': 'Now if I want to arrange them into hierarchy,', 'start': 9182.989, 'duration': 3.12}, {'end': 9193.191, 'text': 'because components that appear within the another component should appear as a child in this particular hierarchy.', 'start': 9186.109, 'duration': 7.082}], 'summary': 'Identified 4 components, arranging into hierarchy for child components.', 'duration': 23.104, 'max_score': 9170.087, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M9170087.jpg'}, {'end': 9248.227, 'src': 'embed', 'start': 9219.82, 'weight': 5, 'content': [{'end': 9223.682, 'text': 'Okay by creating you can say different different components.', 'start': 9219.82, 'duration': 3.862}, {'end': 9229.204, 'text': 'So just want to add one thing that if you want to make your UI very much interactive,', 'start': 9224.423, 'duration': 4.781}, {'end': 9233.305, 'text': 'you need to able to trigger changes to your underlying data model,', 'start': 9229.204, 'duration': 4.101}, {'end': 9239.106, 'text': 'and we are going to use it because this particular application can be made easy with the help of state.', 'start': 9233.305, 'duration': 5.801}, {'end': 9242.946, 'text': 'What is our state the search text the user has entered.', 'start': 9239.706, 'duration': 3.24}, {'end': 9248.227, 'text': 'This is the state and the value of this checkbox because I have added a checkbox also over here.', 'start': 9243.046, 'duration': 5.181}], 'summary': 'Creating components for interactive ui with state and data model changes.', 'duration': 28.407, 'max_score': 9219.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M9219820.jpg'}, {'end': 9336.442, 'src': 'embed', 'start': 9307.285, 'weight': 4, 'content': [{'end': 9315.104, 'text': 'So in this particular example, we talked about that we will divide the complete UI or complete example into five different components.', 'start': 9307.285, 'duration': 7.819}, {'end': 9319.408, 'text': "So let's write those components in the create react app application.", 'start': 9315.885, 'duration': 3.523}, {'end': 9322.79, 'text': 'So for that I have a dummy data in this dummy data.', 'start': 9319.428, 'duration': 3.362}, {'end': 9327.955, 'text': "What I'm going to do is first I have to create a class component the outermost that is the orange one.", 'start': 9322.85, 'duration': 5.105}, {'end': 9336.442, 'text': "For example, let's say filter able product with the name filter able product and I'm writing extends react dot component.", 'start': 9327.995, 'duration': 8.447}], 'summary': "In this example, the ui is divided into five components using create react app, and a class component 'filterable product' is created.", 'duration': 29.157, 'max_score': 9307.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M9307285.jpg'}, {'end': 10150.088, 'src': 'embed', 'start': 10123.738, 'weight': 6, 'content': [{'end': 10134.308, 'text': 'give some space and I want to write some text that only show products in stock just after the checkbox, just like in this example.', 'start': 10123.738, 'duration': 10.57}, {'end': 10142.145, 'text': 'In this particular example, you can see in the requirement that I want to show some static text that only show products in the stock.', 'start': 10135.382, 'duration': 6.763}, {'end': 10146.186, 'text': 'So I have written only show products in the stock.', 'start': 10142.705, 'duration': 3.481}, {'end': 10150.088, 'text': 'So that is how it completes the search bar component.', 'start': 10147.207, 'duration': 2.881}], 'summary': 'The search bar component displays only products in stock as per the given requirement.', 'duration': 26.35, 'max_score': 10123.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M10123738.jpg'}, {'end': 10530.906, 'src': 'embed', 'start': 10504.494, 'weight': 7, 'content': [{'end': 10510.035, 'text': 'If I check this checkbox, which is only show products in stock and the products which are in trade are not in stock.', 'start': 10504.494, 'duration': 5.541}, {'end': 10513.196, 'text': 'So it will hide those products which are not in stock for me.', 'start': 10510.556, 'duration': 2.64}, {'end': 10518.017, 'text': 'And if I uncheck this checkbox, it is showing me all the products whether they are in stock or not.', 'start': 10513.696, 'duration': 4.321}, {'end': 10527.724, 'text': 'So this is you can say a demo which I have shown you of the complete react.js fundamentals where you have used state where we have used props.', 'start': 10518.418, 'duration': 9.306}, {'end': 10530.906, 'text': 'We have created the components five components we have created.', 'start': 10528.045, 'duration': 2.861}], 'summary': 'Checkbox filters products in stock, demo of react.js fundamentals with 5 components used.', 'duration': 26.412, 'max_score': 10504.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M10504494.jpg'}], 'start': 8964.686, 'title': 'React.js component hierarchy, modularization, and search example', 'summary': 'Covers the usage of ref in react.js, component hierarchy, and modularization, emphasizing jsx, components, props, state, and lifecycle events. it discusses breaking the ui into different components, creating a static version in react.js, and implementing a search example with five components, highlighting the use of state for an interactive ui.', 'chapters': [{'end': 9064.094, 'start': 8964.686, 'title': 'Using ref in react.js and implementing search functionality', 'summary': 'Covers the usage of ref in react.js for focusing on input controls and discusses the implementation of a search functionality in a small project, highlighting the key concepts of jsx, components, props, state, lifecycle events, and refs.', 'duration': 99.408, 'highlights': ['The chapter discusses the usage of ref in React.js for focusing on input controls, demonstrated through clearing the input value upon clicking a button.', 'It also introduces the implementation of a search functionality in a small project, emphasizing the approach to building a React.js application with a search feature.', 'The chapter highlights the key concepts of JSX, components, props, state, lifecycle events, and refs in the context of the discussed examples.']}, {'end': 9545.331, 'start': 9064.734, 'title': 'React.js component hierarchy', 'summary': 'Discusses breaking the ui into different components, identifying five components in a simple application, arranging them into a hierarchy, and creating a static version in react.js, emphasizing the use of state for an interactive ui.', 'duration': 480.597, 'highlights': ['The chapter emphasizes breaking the UI into different components and identifying five components in a simple application. The speaker recommends breaking the UI into different components and explains the identification of five components in a simple application, emphasizing the importance of component hierarchy.', "The chapter discusses arranging the identified components into a hierarchy in the context of a react.js application. The speaker explains the arrangement of components into a hierarchy for a react.js application, emphasizing the parent and child components' relationship.", 'The chapter highlights the use of state for creating an interactive UI and triggering changes to the underlying data model. The speaker stresses the importance of using state for creating an interactive UI and triggering changes to the underlying data model, particularly in the context of a react.js application.']}, {'end': 10123.738, 'start': 9545.331, 'title': 'Modularization of components in react', 'summary': 'Discusses the modularization of a react application into five components, including the definition of a container, the creation of sub-components such as the search bar and product table, and the implementation of event handlers for user input.', 'duration': 578.407, 'highlights': ['The chapter discusses the modularization of a React application into five components The speaker outlines the process of breaking down the React application into five components, demonstrating the modular approach to application design.', 'Creation of sub-components such as the search bar and product table The speaker explains the creation and definition of sub-components like the search bar and product table, highlighting the modular structure of the application.', 'Implementation of event handlers for user input The chapter details the implementation of event handlers, such as handleFilterTextChange and handleInStockChange, to manage user input and checkbox changes within the components.']}, {'end': 10518.017, 'start': 10123.738, 'title': 'React.js search example', 'summary': 'Covers the implementation of a react.js search example with five components, including a search bar, product table, product category row, and product row, showcasing the filtering of products based on stock and search text.', 'duration': 394.279, 'highlights': ['The chapter covers the implementation of a React.js search example with five components The transcript discusses the implementation of a React.js search example with five components, including a search bar, product table, product category row, and product row.', 'showcasing the filtering of products based on stock and search text The example demonstrates the functionality of filtering products based on stock availability and search text, enabling users to view only products in stock and filter products based on search queries.', "If I check this checkbox, which is only show products in stock and the products which are in trade are not in stock. So it will hide those products which are not in stock for me The checkbox 'only show products in stock' allows users to filter out products not in stock, providing a feature for efficient stock management and visibility of available inventory.", 'implementation of a React.js search example with five components The implementation of a React.js search example with five components, showcasing the structure and functionality of the search example for efficient data filtering and display.']}], 'duration': 1553.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M8964686.jpg', 'highlights': ['The chapter covers the implementation of a React.js search example with five components, including a search bar, product table, product category row, and product row.', 'The chapter discusses the usage of ref in React.js for focusing on input controls, demonstrated through clearing the input value upon clicking a button.', 'The chapter highlights the key concepts of JSX, components, props, state, lifecycle events, and refs in the context of the discussed examples.', 'The chapter emphasizes breaking the UI into different components and identifying five components in a simple application.', 'The chapter discusses the modularization of a React application into five components, outlining the process of breaking down the React application into five components, demonstrating the modular approach to application design.', 'The chapter highlights the use of state for creating an interactive UI and triggering changes to the underlying data model, particularly in the context of a react.js application.', 'The example demonstrates the functionality of filtering products based on stock availability and search text, enabling users to view only products in stock and filter products based on search queries.', "The checkbox 'only show products in stock' allows users to filter out products not in stock, providing a feature for efficient stock management and visibility of available inventory.", "The chapter discusses arranging the identified components into a hierarchy in the context of a react.js application, emphasizing the parent and child components' relationship."]}, {'end': 12960.643, 'segs': [{'end': 10540.99, 'src': 'embed', 'start': 10518.418, 'weight': 2, 'content': [{'end': 10527.724, 'text': 'So this is you can say a demo which I have shown you of the complete react.js fundamentals where you have used state where we have used props.', 'start': 10518.418, 'duration': 9.306}, {'end': 10530.906, 'text': 'We have created the components five components we have created.', 'start': 10528.045, 'duration': 2.861}, {'end': 10535.068, 'text': "So for example, let's search Nexus 7 which is in another category.", 'start': 10531.266, 'duration': 3.802}, {'end': 10540.99, 'text': 'It is giving me the result of Nexus 7 along with the product name and the product price.', 'start': 10535.528, 'duration': 5.462}], 'summary': 'Demo of complete react.js fundamentals with 5 components, showcasing search for nexus 7 product.', 'duration': 22.572, 'max_score': 10518.418, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M10518418.jpg'}, {'end': 11336.251, 'src': 'embed', 'start': 11305.238, 'weight': 1, 'content': [{'end': 11310.201, 'text': 'So, flux is a pattern for managing the data flow in your application, as simple as that.', 'start': 11305.238, 'duration': 4.963}, {'end': 11318.524, 'text': 'So what I can say is that there are data patterns through which you can manage the data flow in your application flux is one of them.', 'start': 11310.781, 'duration': 7.743}, {'end': 11327.988, 'text': 'So the most important concept of react.js or you can say in data flow that in react.js the data flow is unidirectional.', 'start': 11319.144, 'duration': 8.844}, {'end': 11336.251, 'text': 'By that what I mean is that data flow only in one direction that is the use of flux before deep dive into this flux.', 'start': 11328.618, 'duration': 7.633}], 'summary': 'Flux is a data flow pattern in react.js, ensuring unidirectional data flow.', 'duration': 31.013, 'max_score': 11305.238, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M11305238.jpg'}, {'end': 12019.849, 'src': 'embed', 'start': 11991.403, 'weight': 0, 'content': [{'end': 11997.525, 'text': 'now, components then dispatch the state changes to the store, not directly to the components.', 'start': 11991.403, 'duration': 6.122}, {'end': 12006.369, 'text': 'This is very important because, as I mentioned, that Redux holds up the state within a single location, which is called store,', 'start': 11998.105, 'duration': 8.264}, {'end': 12013.472, 'text': 'and then components then dispatch the state changes to the store, not directly to the components also.', 'start': 12006.369, 'duration': 7.103}, {'end': 12019.849, 'text': 'with the Redux the logic for fetching and managing the state it lives outside the react.', 'start': 12014.147, 'duration': 5.702}], 'summary': 'Redux stores state in one location, separate from components, and manages state logic outside react.', 'duration': 28.446, 'max_score': 11991.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M11991403.jpg'}, {'end': 12226.669, 'src': 'embed', 'start': 12198.946, 'weight': 3, 'content': [{'end': 12202.949, 'text': 'the reason being flux supports multiple stores.', 'start': 12198.946, 'duration': 4.003}, {'end': 12205.151, 'text': 'Redux limits the application to one store,', 'start': 12202.949, 'duration': 2.202}, {'end': 12212.016, 'text': 'which means there is only a single source of truth and which means the store and dispatcher can be combined into one dispatcher store.', 'start': 12205.151, 'duration': 6.865}, {'end': 12216.362, 'text': 'and this dispatcher store is created by Redux create store function.', 'start': 12212.58, 'duration': 3.782}, {'end': 12226.669, 'text': 'So there is a predefined function in Redux, which is create store function and it creates this dispatcher store kind of functionality in Redux.', 'start': 12216.663, 'duration': 10.006}], 'summary': 'Flux supports multiple stores, while redux limits to one store, handled by create store function.', 'duration': 27.723, 'max_score': 12198.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M12198946.jpg'}, {'end': 12374.688, 'src': 'embed', 'start': 12346.915, 'weight': 4, 'content': [{'end': 12354.937, 'text': 'The store is single entity over here all the components state is stored in the store and they receive the updates from the store itself.', 'start': 12346.915, 'duration': 8.022}, {'end': 12360.202, 'text': 'Now, the second principle of Redux is state is read only.', 'start': 12355.6, 'duration': 4.602}, {'end': 12363.804, 'text': 'so we talked about what is the first principle of Redux.', 'start': 12360.202, 'duration': 3.602}, {'end': 12367.285, 'text': 'first principle of Redux is that it has a single source of truth.', 'start': 12363.804, 'duration': 3.481}, {'end': 12374.688, 'text': 'It always follows the pattern of flux only, but all the data flows through a Redux system is in unidirectional manner.', 'start': 12367.745, 'duration': 6.943}], 'summary': 'Redux has a single source of truth and state is read-only, following a unidirectional data flow pattern.', 'duration': 27.773, 'max_score': 12346.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M12346915.jpg'}], 'start': 10518.418, 'title': 'React.js and redux fundamentals', 'summary': 'Covers react.js fundamentals including state, props, creating components, keys, jsx, state lifecycle events, flux, redux, and principles. it also discusses redux usage and development details.', 'chapters': [{'end': 10861.837, 'start': 10518.418, 'title': 'React.js fundamentals and keys', 'summary': 'Covers the fundamentals of react.js including state, props, and creating components, along with a detailed explanation of keys and their significance in uniquely identifying components, demonstrated through a practical example using array values and function-based components.', 'duration': 343.419, 'highlights': ['The chapter covers the fundamentals of React.js including state, props, and creating components The demo showcases the usage of state, props, and the creation of five components in React.js.', 'Detailed explanation of keys and their significance in uniquely identifying components Keys in React help to uniquely identify components, such as ordered or unordered list elements, and are essential for component identification.', 'Practical example using array values and function-based components A practical example demonstrates the usage of keys in React applications, showcasing array values and function-based components to uniquely identify and render list items.']}, {'end': 11259.892, 'start': 10861.837, 'title': 'React.js fundamentals and lifecycle methods', 'summary': 'Covers the basic fundamentals of react.js including jsx components, props, state lifecycle events, and keys, followed by a detailed demonstration of using lifecycle methods for a clock example which updates every second.', 'duration': 398.055, 'highlights': ['The chapter covers the basic fundamentals of react.js including JSX components, props, state lifecycle events, and keys. The chapter discusses the fundamental concepts of react.js such as JSX components, props, state lifecycle events, and keys.', 'A detailed demonstration of using lifecycle methods for a clock example updating every second is provided. The transcript provides a detailed demonstration of using lifecycle methods to create a clock example which updates every second.']}, {'end': 11943.357, 'start': 11260.552, 'title': 'React.js flux and redux fundamentals', 'summary': 'Covers the fundamentals of react.js, flux, and redux, including the unidirectional data flow in react.js, the components of flux, and the role of redux in controlling data flow in react.js applications.', 'duration': 682.805, 'highlights': ['Flux is a pattern for managing the data flow in your application, with four main components: dispatcher, store, action, and view, and has unidirectional data flow in React.js. Flux is a pattern for managing the data flow in applications, with four main components: dispatcher, store, action, and view. It ensures unidirectional data flow in React.js, promoting efficient management of data.', 'The dispatcher receives actions from the view and dispatches them to stores, ensuring only one singleton dispatcher in each application. The dispatcher receives actions from the view and dispatches them to stores, with only one singleton dispatcher in each application, ensuring efficient data flow management.', 'Stores hold the data of an application, register with the application dispatcher, and should only mutate data by responding to an action, emitting a change event every time the data changes. Stores hold the data of an application, register with the application dispatcher, and only mutate data by responding to an action, emitting a change event every time the data changes, ensuring data integrity and consistency.', 'Actions define the internal API of an application, capturing the way in which anything might interact with the application, and are simple objects with a type field and some data. Actions define the internal API of an application, capturing the interaction with the application, and are simple objects with a type field and some data, ensuring structured and semantic actions.', 'Views display the data from the store, must subscribe to change events from the store, and rerender when the store emits a change, following unidirectional data flow in React.js. Views display the data from the store, subscribe to change events from the store, and rerender when the store emits a change, ensuring updated data representation in line with the unidirectional data flow in React.js.']}, {'end': 12281.798, 'start': 11944.077, 'title': 'Redux: state management solution', 'summary': 'Discusses the basics of redux, emphasizing its role in centralizing application state, its differences from flux, and its principles, while highlighting its usage and development details.', 'duration': 337.721, 'highlights': ['Redux centralizes application state in a single location called a store, allowing components to dispatch state changes to the store instead of directly to other components. Redux centralizes application state in a single location called a store, allowing components to dispatch state changes to the store instead of directly to other components.', 'Redux is a predictable state container for JavaScript apps, designed to apply action to pure reducer functions to return a new state, and it is mostly used for applications where state management is required. Redux is a predictable state container for JavaScript apps, designed to apply action to pure reducer functions to return a new state, and it is mostly used for applications where state management is required.', 'Redux differs from Flux in that it limits the application to one store, creating a single source of truth, and it combines the store and dispatcher into one dispatcher store using the create store function. Redux differs from Flux in that it limits the application to one store, creating a single source of truth, and it combines the store and dispatcher into one dispatcher store using the create store function.']}, {'end': 12960.643, 'start': 12281.798, 'title': 'Redux principles and components', 'summary': 'Discusses the key principles of redux, including the use of a single store, read-only state, and pure functions for state changes, as well as the components of redux such as actions, reducers, store, and view. it also delves into the concept of unidirectional data flow and introduces the benefits of using react router for single-page applications.', 'duration': 678.845, 'highlights': ['Redux Principles The first principle of Redux is the use of a single store for unidirectional data flow, with components subscribing to the store for state management. The second principle emphasizes that the state is read-only and can only be changed by triggering an action, ensuring that changes are made using pure functions only.', 'Pure Functions and Reducers Redux employs pure functions known as reducers to specify how the state tree is transformed by actions, ensuring that new state objects are produced without mutation. Reducers can be composed together to process different parts of the state tree, promoting a predictable and understandable app logic.', 'Redux Components The components of Redux include actions, which are payloads of information for the store, reducers, which specify state changes in response to actions, store, responsible for holding the application state and facilitating state updates, and view, which displays the data provided by the store and communicates with the dispatcher.', 'React Router and its Advantages React Router, a powerful routing library built on top of React, enables the addition of new screens and flows to applications, keeping the URL in sync with the displayed data. Its advantages include understanding application views, creating friendly and nested URLs, and restoring the state by moving backward and forward.']}], 'duration': 2442.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M10518418.jpg', 'highlights': ['Redux centralizes application state in a single location called a store, allowing components to dispatch state changes to the store instead of directly to other components.', 'Flux is a pattern for managing the data flow in applications, with four main components: dispatcher, store, action, and view. It ensures unidirectional data flow in React.js, promoting efficient management of data.', 'The chapter covers the fundamentals of React.js including state, props, and creating components. The demo showcases the usage of state, props, and the creation of five components in React.js.', 'Redux differs from Flux in that it limits the application to one store, creating a single source of truth, and it combines the store and dispatcher into one dispatcher store using the create store function.', 'The first principle of Redux is the use of a single store for unidirectional data flow, with components subscribing to the store for state management. The second principle emphasizes that the state is read-only and can only be changed by triggering an action, ensuring that changes are made using pure functions only.']}, {'end': 14251.237, 'segs': [{'end': 12986.208, 'src': 'embed', 'start': 12960.643, 'weight': 0, 'content': [{'end': 12968.567, 'text': 'then it maintains a standardized structure and behavior because, as I mentioned, that here using routing library.', 'start': 12960.643, 'duration': 7.924}, {'end': 12970.848, 'text': 'We are talking about through routing library.', 'start': 12968.607, 'duration': 2.241}, {'end': 12973.329, 'text': 'We are talking about creating single-page applications.', 'start': 12970.888, 'duration': 2.441}, {'end': 12976.05, 'text': 'And finally, what is the advantage of a router?', 'start': 12973.869, 'duration': 2.181}, {'end': 12986.208, 'text': 'that while navigating it, it can do implicit CSS transitions, which means that the CSS remains seamless on your complete application,', 'start': 12976.05, 'duration': 10.158}], 'summary': 'Using a routing library for creating single-page applications offers seamless css transitions.', 'duration': 25.565, 'max_score': 12960.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M12960643.jpg'}, {'end': 13060.805, 'src': 'embed', 'start': 13031.534, 'weight': 1, 'content': [{'end': 13036.537, 'text': 'this approach of dividing or separating the presentation components with the container components?', 'start': 13031.534, 'duration': 5.003}, {'end': 13042.95, 'text': 'It will make your app easier to understand and allow you to more easily reuse the components.', 'start': 13036.977, 'duration': 5.973}, {'end': 13050.997, 'text': 'So what is the difference basically between the presentational components and the container components we will see in this particular example.', 'start': 13043.811, 'duration': 7.186}, {'end': 13060.805, 'text': 'So in this particular example I am using, you can say, the Redux library, because you can see here the create a store method, which is calling the,', 'start': 13051.037, 'duration': 9.768}], 'summary': 'Separating presentation and container components in redux for easier reusability and understanding.', 'duration': 29.271, 'max_score': 13031.534, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M13031534.jpg'}, {'end': 13171.428, 'src': 'embed', 'start': 13146.868, 'weight': 4, 'content': [{'end': 13156.996, 'text': 'If I say Whipple react.js Classes and I press enter then again, This to-do has been added to this to-do list.', 'start': 13146.868, 'duration': 10.128}, {'end': 13163.741, 'text': 'So to-do list here basically is working as a presentational component or you can say presentational layer.', 'start': 13157.236, 'duration': 6.505}, {'end': 13168.766, 'text': 'Then I have another you can say reducers defined over here.', 'start': 13164.102, 'duration': 4.664}, {'end': 13171.428, 'text': 'For example, to do to lose.js.', 'start': 13168.826, 'duration': 2.602}], 'summary': 'Using react.js to manage a to-do list with presentational components and reducers.', 'duration': 24.56, 'max_score': 13146.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M13146868.jpg'}, {'end': 13271.021, 'src': 'embed', 'start': 13242.248, 'weight': 2, 'content': [{'end': 13243.93, 'text': 'They basically presentation components.', 'start': 13242.248, 'duration': 1.682}, {'end': 13246.252, 'text': 'They basically render what is given to them.', 'start': 13243.97, 'duration': 2.282}, {'end': 13252.197, 'text': 'So if you migrate from Redux to something else then you will be able to keep all these components exactly the same.', 'start': 13246.932, 'duration': 5.265}, {'end': 13254.299, 'text': 'They have no dependency on the Redux.', 'start': 13252.577, 'duration': 1.722}, {'end': 13258.162, 'text': "Now, let's talk about designing the container components.", 'start': 13255.02, 'duration': 3.142}, {'end': 13260.464, 'text': 'So why we need the container components.', 'start': 13258.683, 'duration': 1.781}, {'end': 13265.329, 'text': 'So we need container components to connect the presentational components to Redux.', 'start': 13260.504, 'duration': 4.825}, {'end': 13269.38, 'text': 'So for example, there is a presentational to-do list component.', 'start': 13266.018, 'duration': 3.362}, {'end': 13271.021, 'text': 'I showed you this this to-do list.', 'start': 13269.46, 'duration': 1.561}], 'summary': 'Container components connect presentational components to redux for seamless migration and no dependency on redux.', 'duration': 28.773, 'max_score': 13242.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M13242248.jpg'}, {'end': 13328.371, 'src': 'embed', 'start': 13303.353, 'weight': 3, 'content': [{'end': 13310.836, 'text': 'you can say redux store and knows how to apply the current visibility filter to change the visibility filter.', 'start': 13303.353, 'duration': 7.483}, {'end': 13321.366, 'text': 'We can have a filter link component or you can say filter link container component that renders the link that dispatches and appropriate.', 'start': 13311.356, 'duration': 10.01}, {'end': 13325.008, 'text': 'you can say action, have implemented a on-click action over here.', 'start': 13321.366, 'duration': 3.642}, {'end': 13328.371, 'text': 'So it dispatches an appropriate action on click.', 'start': 13325.369, 'duration': 3.002}], 'summary': 'Redux store applies visibility filter, dispatches appropriate action on click.', 'duration': 25.018, 'max_score': 13303.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M13303353.jpg'}, {'end': 13469.993, 'src': 'embed', 'start': 13441.345, 'weight': 5, 'content': [{'end': 13451.011, 'text': "So let's say if I write react routers and click on add to do, now I have three to do's in my list, which is showing me the all of all list.", 'start': 13441.345, 'duration': 9.666}, {'end': 13455.491, 'text': 'If I show want to see the active, I can see the active ones.', 'start': 13451.55, 'duration': 3.941}, {'end': 13459.551, 'text': 'If I want to see my complete to those I can click on the completed one.', 'start': 13455.991, 'duration': 3.56}, {'end': 13469.993, 'text': "Now, let's talk about one more example that how we can use the Redux concept of actions reducers and store with react.js.", 'start': 13460.192, 'duration': 9.801}], 'summary': "Using react routers, 3 to do's are shown, demonstrating active and completed options. also, discusses using redux with react.js.", 'duration': 28.648, 'max_score': 13441.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M13441345.jpg'}, {'end': 13605.458, 'src': 'embed', 'start': 13580.392, 'weight': 13, 'content': [{'end': 13587.168, 'text': "You can see that I have made the simple code very, very simple, the reason being that it's a very good practice,", 'start': 13580.392, 'duration': 6.776}, {'end': 13592.191, 'text': 'while working with react.js or any application, to divide your code into multiple components.', 'start': 13587.168, 'duration': 5.023}, {'end': 13596.173, 'text': 'I could have written it on a single file on a single component.', 'start': 13592.371, 'duration': 3.802}, {'end': 13597.514, 'text': "That's not a problem at all.", 'start': 13596.413, 'duration': 1.101}, {'end': 13605.458, 'text': "But for code modularity, it's always recommended and I also recommend that divide your code into multiple components.", 'start': 13597.954, 'duration': 7.504}], 'summary': 'Dividing code into multiple components is recommended for better modularity in react.js.', 'duration': 25.066, 'max_score': 13580.392, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M13580392.jpg'}, {'end': 13912.992, 'src': 'embed', 'start': 13885.083, 'weight': 7, 'content': [{'end': 13892.309, 'text': 'Now if I talk about this particular component in react.js, this has been particularly developed using calculator.js component.', 'start': 13885.083, 'duration': 7.226}, {'end': 13900.099, 'text': 'Why I am saying you this, the reason being that please remember that always you have to divide your UI into different,', 'start': 13892.833, 'duration': 7.266}, {'end': 13902.181, 'text': 'different components in react.js.', 'start': 13900.099, 'duration': 2.082}, {'end': 13906.687, 'text': 'This is the basic, fundamental of any react.js application,', 'start': 13902.864, 'duration': 3.823}, {'end': 13912.992, 'text': 'and the same has been applied over here that the upper one was a static text or maybe any other functionality.', 'start': 13906.687, 'duration': 6.305}], 'summary': 'React.js component development emphasizes ui division into multiple components for scalability and flexibility.', 'duration': 27.909, 'max_score': 13885.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M13885083.jpg'}, {'end': 13953.304, 'src': 'embed', 'start': 13924.935, 'weight': 9, 'content': [{'end': 13930.577, 'text': 'Now if I do some basic operations in this calculator, you can see that it is giving me the correct output.', 'start': 13924.935, 'duration': 5.642}, {'end': 13933.558, 'text': 'So these are basically some of the on click events.', 'start': 13931.037, 'duration': 2.521}, {'end': 13940.961, 'text': 'So if I go to the code and go to calculator.js in the render method, you can see that in the render method.', 'start': 13934.038, 'duration': 6.923}, {'end': 13942.537, 'text': 'There are some button value 1 2 3 4 5 6 7 8 9.', 'start': 13941.001, 'duration': 1.536}, {'end': 13943.982, 'text': 'So 1 2 3 4 5 6 7 8 9 these values are defined over here.', 'start': 13942.542, 'duration': 1.44}, {'end': 13953.304, 'text': 'which are you can say the digit keys then you have the operator keys.', 'start': 13949.702, 'duration': 3.602}], 'summary': "The calculator's render method defines digit and operator keys 1-9 for on-click events.", 'duration': 28.369, 'max_score': 13924.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M13924935.jpg'}, {'end': 14020.516, 'src': 'embed', 'start': 13971.193, 'weight': 8, 'content': [{'end': 13980.986, 'text': 'This is very very important and every time whenever this control or keys will be clicked on the calculator the handle click handle click function.', 'start': 13971.193, 'duration': 9.793}, {'end': 13983.847, 'text': 'This is the handle click event, which is binded to the constructor.', 'start': 13981.266, 'duration': 2.581}, {'end': 13986.068, 'text': 'Initially This will be called every time.', 'start': 13983.887, 'duration': 2.181}, {'end': 13994.27, 'text': "So if I go to the screen if I want to let's say perform more operations, maybe 7 minus 4 and equals it's 3 great.", 'start': 13986.088, 'duration': 8.182}, {'end': 13999.052, 'text': 'So that is how you can implement small, small applications in react.js.', 'start': 13994.69, 'duration': 4.362}, {'end': 14007.514, 'text': 'even you can implement very big applications in react.js using the advanced concepts of react, that is, flux, Redux, routing and so on.', 'start': 13999.052, 'duration': 8.462}, {'end': 14009.149, 'text': 'So very quickly.', 'start': 14008.368, 'duration': 0.781}, {'end': 14013.051, 'text': 'Let me show you one more example the same calculator example.', 'start': 14009.209, 'duration': 3.842}, {'end': 14020.516, 'text': 'I want to show you but the UI is totally different and based on different component methodology.', 'start': 14013.071, 'duration': 7.445}], 'summary': 'Demonstrating event handling and implementation of small to large applications in react.js', 'duration': 49.323, 'max_score': 13971.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M13971193.jpg'}, {'end': 14118.063, 'src': 'embed', 'start': 14089.637, 'weight': 6, 'content': [{'end': 14094.505, 'text': 'So you see this This is again a calculator which is built on top of react.js.', 'start': 14089.637, 'duration': 4.868}, {'end': 14098.628, 'text': 'libraries and other libraries have been used over here and the same functionality.', 'start': 14094.505, 'duration': 4.123}, {'end': 14100.65, 'text': "Let's say for example, I want to do five into five.", 'start': 14098.648, 'duration': 2.002}, {'end': 14103.952, 'text': 'It is giving me the output same operational output.', 'start': 14100.73, 'duration': 3.222}, {'end': 14111.638, 'text': "Now if I go to the code and we'll start with index.js the root component is obviously its app.", 'start': 14104.352, 'duration': 7.286}, {'end': 14118.063, 'text': 'Now if I go to the component and go to app.js now, this is very important to understand what we are doing.', 'start': 14112.599, 'duration': 5.464}], 'summary': 'A calculator built on react.js with a 5x5 output.', 'duration': 28.426, 'max_score': 14089.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M14089637.jpg'}, {'end': 14203.995, 'src': 'embed', 'start': 14177.729, 'weight': 12, 'content': [{'end': 14183.753, 'text': 'multiplication and division and percentage and all other operations related to a calculator kind of functionality.', 'start': 14177.729, 'duration': 6.024}, {'end': 14191.918, 'text': "So that's why this has been divided into different different components is number.js operator.js and calculator.js.", 'start': 14184.253, 'duration': 7.665}, {'end': 14200.132, 'text': 'So, in the previous example, what we did was that we wrote the complete code, complete operational code of a calculator in one file.', 'start': 14193.106, 'duration': 7.026}, {'end': 14201.493, 'text': 'that was calculator.js.', 'start': 14200.132, 'duration': 1.361}, {'end': 14203.995, 'text': 'That was the one way of writing the code.', 'start': 14202.013, 'duration': 1.982}], 'summary': 'The code for calculator functionality is divided into number.js, operator.js, and calculator.js components.', 'duration': 26.266, 'max_score': 14177.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M14177729.jpg'}], 'start': 12960.643, 'title': 'React.js and redux functionality', 'summary': 'Covers the advantages of using routing library for spas, separating presentation and container components in react redux, implementing redux concepts like actions, reducers, and store, and creating a calculator application, showcasing the division of ui into components and demonstrating advanced concepts like flux, redux, and routing in react.js for implementing small and big applications.', 'chapters': [{'end': 13074.242, 'start': 12960.643, 'title': 'React routing and redux demo', 'summary': 'Discusses the advantages of using routing library for creating single-page applications and the benefits of separating presentation components from container components in react redux, emphasizing the importance of maintaining a standardized structure and behavior and the implicit css transitions while navigating, along with the usage of redux library to separate presentation and container components, making the app easier to understand and allowing for easier component reuse.', 'duration': 113.599, 'highlights': ['The advantages of using a routing library for creating single-page applications, including the implicit CSS transitions while navigating, maintaining a standardized structure and behavior, and the importance of understanding the differences between presentational and container components in React Redux.', 'The usage of Redux library to separate presentation components from container components, emphasizing the benefits of making the app easier to understand and allowing for easier component reuse, with the root reducer playing a crucial role in any Redux application.']}, {'end': 13426.277, 'start': 13074.723, 'title': 'Presentational vs container components', 'summary': 'Explains the purpose of presentational and container components, with presentational components focusing on the look and feel of the application, while container components connect to redux for managing data and state. it also demonstrates the design and functionality of various components within a react application.', 'duration': 351.554, 'highlights': ['Presentational components do not depend on Redux and are responsible for rendering the look and feel of the application. Presentational components, such as the to-do list, reducers, footer, and app components, focus on rendering the visual elements without dependency on Redux, ensuring they can remain unchanged even if the application migrates to a different state management system.', "Container components connect presentational components to Redux for managing data and state. Container components, like the visible to-do list and filter link, subscribe to the Redux store and handle the application's state and data management, providing a connection between presentational components and the Redux state.", 'The add to do component serves as an example of a component that may combine presentation and logic. The add to do component, although small, may merge presentation and logic, demonstrating that in certain cases, components may effectively blend these aspects without distinct separation.']}, {'end': 13729.114, 'start': 13426.637, 'title': 'React.js functionality and redux concept', 'summary': 'Demonstrates the functionality of a to-do list in react.js, the implementation of redux concepts such as actions, reducers, and store, and the creation of a calculator application in react.js.', 'duration': 302.477, 'highlights': ['The chapter covers the functionality of a to-do list in React.js, with the ability to add, view, and filter to-dos, demonstrating the management of state and components in the application.', 'It also delves into the implementation of Redux concepts like actions, reducers, and store, showcasing the usage of asynchronous functionalities, such as async callbacks, and the management of state in Redux with React.js.', "Furthermore, the creation of a calculator application in React.js is illustrated, emphasizing the importance of code modularity and the utilization of components to organize the application's structure."]}, {'end': 13994.27, 'start': 13729.134, 'title': 'React.js calculator application', 'summary': 'Discusses the implementation of a demo calculator application using react.js, showcasing the division of the ui into different components, the binding of handle click events in the constructor, and the rendering of digit and operator keys with on click events, resulting in the correct output.', 'duration': 265.136, 'highlights': ["The UI is divided into different components in React.js, with the calculator functionality implemented using the calculator.js component. The transcript emphasizes the importance of dividing the UI into components in React.js, showcasing the fundamental approach of the application's structure.", "The handle click event is binded in the constructor, allowing it to be called every time a control or key is clicked on the calculator. The binding of the handle click event in the constructor is highlighted as a crucial aspect, ensuring its invocation upon every click on the calculator's controls.", 'The rendering of digit and operator keys with on click events results in the correct output, demonstrating the functional implementation of the calculator application. The transcript illustrates the successful rendering of digit and operator keys with on click events, leading to the accurate functioning of the calculator application.']}, {'end': 14251.237, 'start': 13994.69, 'title': 'Implementing applications in react.js', 'summary': 'Explains how to implement small and big applications using advanced concepts like flux, redux, and routing in react.js, showcasing a calculator example with a different ui and component methodology.', 'duration': 256.547, 'highlights': ['The chapter explains how to implement small and big applications using advanced concepts like flux, Redux, and routing in react.js. The transcript highlights that small and big applications can be implemented in react.js using advanced concepts like flux, Redux, and routing.', 'Showcases a calculator example with a different UI and component methodology. The transcript showcases a different UI and component methodology for a calculator example in react.js.', 'The logic for the calculator functionality is divided into different components. The transcript details the division of logic for calculator functionality into different components such as number.js, operator.js, and calculator.js.', 'Emphasizes the importance of maintaining code modularity in react.js. The transcript emphasizes the importance of maintaining code modularity in react.js by creating separate files for code pieces to ensure modularity.']}], 'duration': 1290.594, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/fSp2C7QPH8M/pics/fSp2C7QPH8M12960643.jpg', 'highlights': ['The advantages of using a routing library for creating single-page applications, including implicit CSS transitions, maintaining standardized structure and behavior.', 'Separating presentation components from container components using Redux, making the app easier to understand and allowing for easier component reuse.', 'Presentational components, such as to-do list, reducers, footer, and app components, focus on rendering visual elements without dependency on Redux.', "Container components, like visible to-do list and filter link, subscribe to the Redux store and handle the application's state and data management.", 'The chapter covers the functionality of a to-do list in React.js, with the ability to add, view, and filter to-dos, demonstrating the management of state and components.', 'Illustration of Redux concepts like actions, reducers, and store, showcasing the usage of asynchronous functionalities and the management of state in Redux with React.js.', "Creation of a calculator application in React.js, emphasizing the importance of code modularity and the utilization of components to organize the application's structure.", 'The UI is divided into different components in React.js, with the calculator functionality implemented using the calculator.js component.', 'The handle click event is binded in the constructor, allowing it to be called every time a control or key is clicked on the calculator.', 'Rendering of digit and operator keys with on click events results in the correct output, demonstrating the functional implementation of the calculator application.', 'Explanation of implementing small and big applications using advanced concepts like flux, Redux, and routing in react.js.', 'Showcasing a different UI and component methodology for a calculator example in react.js.', 'Division of logic for calculator functionality into different components such as number.js, operator.js, and calculator.js.', 'Emphasizing the importance of maintaining code modularity in react.js by creating separate files for code pieces to ensure modularity.']}], 'highlights': ['The course covers 10 modules, including a brief overview of React Router and an end-to-end project in the final module, ensuring comprehensive learning. (Module 10)', 'React.js enhances application performance through virtual DOM, making dynamic web applications creation easier and improving readability.', 'Redux centralizes application state in a single location called a store, allowing components to dispatch state changes to the store instead of directly to other components.', 'The advantages of using a routing library for creating single-page applications, including implicit CSS transitions, maintaining standardized structure and behavior.', 'The instructor, Mr. Vipul Jain, has 10 years of experience in web development, including expertise in ReactJS and other web technologies, establishing his credibility.']}