title
Build a Chat App - React Tutorial Course

description
Chat is eating the world and React is eating front-end development, so why not learn React through building a chat app? That's exactly what this course will enable you to do: at the end of it you'll both have a solid understanding of React.js and your very own personalized chat application. The chat will be built using the Chatkit API, meaning you don't have worry about doing any back-end coding. 🔗Check the interactive version of this course on Scrimba: https://scrimba.com/g/greactchatkit ⭐️ Course Contents ⭐️ ⌨️ 0:00 —1. Course Introduction ⌨️ 2:42 —2. Component Architecture ⌨️ 5:05 —3. Codebase Architecture ⌨️ 10:30 —4. MessageList Component ⌨️ 15:13 —5. Intro to Chatkit ⌨️ 16:34 —6. Connecting to Chatkit ⌨️ 24:54 —7. State and Props ⌨️ 32:22 —8. Message Component ⌨️ 37:02 —9. SendMessageForm Component ⌨️ 44:19 —10. Broadcasting Messages ⌨️ 49:36 —11. RoomList Component ⌨️ 53:50 —12. Subscribe to Rooms ⌨️ 1:01:41 —13. Order and Highlight Rooms ⌨️ 1:05:44 —14. Adding Autoscroll ⌨️ 1:11:39 —15. NewRoomForm Component ⌨️ 1:20:39 —16. Creating your own Chat App ⌨️ 1:23:37 —17. CSS Grid ⌨️ 1:29:05 —18. CSS Variables ⌨️ 1:32:02 —19. Outro 🐦You can follow the course creator Per Harald Borgen on Twitter here: https://twitter.com/perborgen -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'Build a Chat App - React Tutorial Course', 'heatmap': [{'end': 798.871, 'start': 625.262, 'weight': 1}, {'end': 1142.805, 'start': 909.879, 'weight': 0.952}], 'summary': 'Learn to build a chat app with reactjs & chatkit api in 17 screencasts, integrating css variables and grid for personalization, react component architecture, state management, real-time chat room management, and customizing layout with css grid and colors with css variables.', 'chapters': [{'end': 157.39, 'segs': [{'end': 45.729, 'src': 'embed', 'start': 5.097, 'weight': 0, 'content': [{'end': 11.459, 'text': "Hey, and welcome to this course where I'm going to teach you how to build a chat application using ReactJS and the chatkit API.", 'start': 5.097, 'duration': 6.362}, {'end': 15.441, 'text': "I'll teach you this through 17 interactive screencasts.", 'start': 12.34, 'duration': 3.101}, {'end': 24.084, 'text': 'And by interactive, I mean that you as the viewer at any given time can pause the screencast, jump into the code and change it.', 'start': 16.041, 'duration': 8.043}, {'end': 27.85, 'text': 'you can then see how your changes affects the output.', 'start': 24.964, 'duration': 2.886}, {'end': 31.337, 'text': "So I'll encourage you to do that whenever you're confused,", 'start': 28.471, 'duration': 2.866}, {'end': 36.266, 'text': "so that you make sure that you understand the relation between the code and what's being displayed on the page.", 'start': 31.337, 'duration': 4.929}, {'end': 42.146, 'text': "And I'm also going to give you five challenges throughout the course, where you'll, for example,", 'start': 37.862, 'duration': 4.284}, {'end': 45.729, 'text': 'be asked to finish up my code in order to reach a certain goal.', 'start': 42.146, 'duration': 3.583}], 'summary': 'Learn to build a chat app using reactjs and chatkit api through 17 interactive screencasts, with 5 challenges included.', 'duration': 40.632, 'max_score': 5.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw5097.jpg'}, {'end': 149.322, 'src': 'embed', 'start': 121.923, 'weight': 2, 'content': [{'end': 125.085, 'text': 'and also to shuffle around on the different components.', 'start': 121.923, 'duration': 3.162}, {'end': 130.428, 'text': 'And both of these things are super simple to do using CSS variables and CSS grid.', 'start': 125.465, 'duration': 4.963}, {'end': 138.812, 'text': 'And there are also two hot new technologies of modern browsers that needs to be in the tool belt of a front end developer in 2018.', 'start': 130.848, 'duration': 7.964}, {'end': 140.654, 'text': "And once you've personalized your chat app,", 'start': 138.812, 'duration': 1.842}, {'end': 146.379, 'text': "I'm also going to point you to further resources where you can expand upon and build more complex features into the app.", 'start': 140.654, 'duration': 5.725}, {'end': 148.301, 'text': 'Finally, who am I?', 'start': 147.2, 'duration': 1.101}, {'end': 149.322, 'text': 'My name is Per.', 'start': 148.582, 'duration': 0.74}], 'summary': 'Css variables and grid make frontend development easy. 2 new technologies for 2018. personalize chat app, expand features.', 'duration': 27.399, 'max_score': 121.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw121923.jpg'}], 'start': 5.097, 'title': 'Building a chat app with reactjs & chatkit api', 'summary': 'Focuses on developing a chat application via 17 interactive screencasts and hands-on challenges, integrating css variables and grid for personalization, resulting in a fully personalized chat application.', 'chapters': [{'end': 157.39, 'start': 5.097, 'title': 'Build chat app with reactjs & chatkit api', 'summary': 'Covers building a chat application using reactjs and the chatkit api through 17 interactive screencasts, challenges for hands-on practice, and personalization using css variables and css grid, culminating in the creation of a personalized chat application.', 'duration': 152.293, 'highlights': ['The course includes 17 interactive screencasts for learning how to build a chat application using ReactJS and the chatkit API. The course offers 17 interactive screencasts for learning to build a chat application using ReactJS and the chatkit API, providing hands-on learning experience.', 'Challenges are provided throughout the course to ensure understanding, with solutions offered if needed. The course includes five challenges to test understanding, with solutions provided if needed, ensuring practical application of knowledge.', 'Personalization of the chat application is facilitated through the use of CSS variables and CSS grid. The course covers personalization of the chat application using CSS variables and CSS grid, allowing for easy theme changes and component rearrangement.']}], 'duration': 152.293, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw5097.jpg', 'highlights': ['The course includes 17 interactive screencasts for learning how to build a chat application using ReactJS and the chatkit API.', 'Challenges are provided throughout the course to ensure understanding, with solutions offered if needed.', 'Personalization of the chat application is facilitated through the use of CSS variables and CSS grid.']}, {'end': 843.557, 'segs': [{'end': 186.137, 'src': 'embed', 'start': 158.371, 'weight': 0, 'content': [{'end': 162.255, 'text': "But without further ado, let's get started on the first lecture of the course.", 'start': 158.371, 'duration': 3.884}, {'end': 172.083, 'text': "Hey, in this lecture, we're going to have a look at the component architecture of our app.", 'start': 167.779, 'duration': 4.304}, {'end': 175.727, 'text': 'Because in React, everything is based around components.', 'start': 172.284, 'duration': 3.443}, {'end': 179.991, 'text': 'And before you start coding your app, you should break the UI into components.', 'start': 176.127, 'duration': 3.864}, {'end': 186.137, 'text': "And it's a good idea to actually do it visually, like I've done here, using paint or preview or something like that,", 'start': 180.372, 'duration': 5.765}], 'summary': 'Introduction to react component architecture and ui breakdown.', 'duration': 27.766, 'max_score': 158.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw158371.jpg'}, {'end': 318.027, 'src': 'embed', 'start': 287.356, 'weight': 1, 'content': [{'end': 289.978, 'text': 'You want your components to do one thing and one thing only.', 'start': 287.356, 'duration': 2.622}, {'end': 295.923, 'text': 'So if you have huge components, which does a lot of things, you should consider breaking them up into multiple components.', 'start': 290.218, 'duration': 5.705}, {'end': 303.429, 'text': "So in the next lecture, we'll look at how these components turn into actual code as we'll walk through the repository.", 'start': 297.004, 'duration': 6.425}, {'end': 304.57, 'text': "So I'll see you there.", 'start': 304.029, 'duration': 0.541}, {'end': 318.027, 'text': "Hey, in this lecture we're going to have a look at the code base architecture so that you can build a mental model of how this repository works before we start coding.", 'start': 310.543, 'duration': 7.484}], 'summary': 'Components should focus on one task. consider breaking huge components into smaller ones. exploring code base architecture before coding.', 'duration': 30.671, 'max_score': 287.356, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw287356.jpg'}, {'end': 525.253, 'src': 'embed', 'start': 502.516, 'weight': 2, 'content': [{'end': 510.141, 'text': 'as you want as many of your components to be as stupid as possible while gathering the brains at one place higher up in the hierarchy,', 'start': 502.516, 'duration': 7.625}, {'end': 514.585, 'text': "as it's much harder to maintain an app if the logic is spread across tons of components.", 'start': 510.141, 'duration': 4.444}, {'end': 521.929, 'text': 'So as much as you can try to have one or few smart components, and the rest of the components as stupid as possible.', 'start': 515.225, 'duration': 6.704}, {'end': 525.253, 'text': "So let's have a look at the other files.", 'start': 523.27, 'duration': 1.983}], 'summary': 'Maximize simplicity by having few smart components and many simple ones for easier maintenance.', 'duration': 22.737, 'max_score': 502.516, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw502516.jpg'}, {'end': 577.193, 'src': 'embed', 'start': 549.531, 'weight': 4, 'content': [{'end': 555.372, 'text': 'So it needs to refer to index dot pack dot JS instead of index dot JS, which is the one you can see here.', 'start': 549.531, 'duration': 5.841}, {'end': 561.874, 'text': "And this is where we're connecting our react app with the index dot HTML file.", 'start': 556.093, 'duration': 5.781}, {'end': 569.796, 'text': "Cause as you can see, we're importing the app app dot JS, just the root component.", 'start': 562.794, 'duration': 7.002}, {'end': 577.193, 'text': "we're saying react Dom dot render this app in the element with the ID of root.", 'start': 570.967, 'duration': 6.226}], 'summary': 'Referring to index.pack.js instead of index.js to connect react app with index.html.', 'duration': 27.662, 'max_score': 549.531, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw549531.jpg'}, {'end': 714.397, 'src': 'embed', 'start': 650.44, 'weight': 5, 'content': [{'end': 656.702, 'text': "So all that we're left with is the render method, which here returns the four children of the app component.", 'start': 650.44, 'duration': 6.262}, {'end': 659.903, 'text': 'That results in a significantly simpler UI.', 'start': 657.363, 'duration': 2.54}, {'end': 663.905, 'text': 'Each of the components are simply rendering out its respective name.', 'start': 660.564, 'duration': 3.341}, {'end': 670.396, 'text': "Now we're going to start by building out this message list component here, and it can be found down here.", 'start': 664.85, 'duration': 5.546}, {'end': 674.981, 'text': 'So what we want to do, of course, is render out a list of messages down here.', 'start': 670.677, 'duration': 4.304}, {'end': 679.386, 'text': 'So we need to remove this help text and write some JSX.', 'start': 675.702, 'duration': 3.684}, {'end': 681.228, 'text': 'But first, we need data.', 'start': 679.947, 'duration': 1.281}, {'end': 684.595, 'text': "And we're not going to hook up with the chatkit API just yet.", 'start': 682.313, 'duration': 2.282}, {'end': 690.579, 'text': "So I'm going to paste in some dummy data, basically an array contains three objects.", 'start': 684.615, 'duration': 5.964}, {'end': 695.103, 'text': 'And each of the objects contains a sender ID property and a text property.', 'start': 691.4, 'duration': 3.703}, {'end': 699.006, 'text': "And this is a simplified version of the data we'll get from chatkit later on.", 'start': 695.123, 'duration': 3.883}, {'end': 705.351, 'text': 'Now in order to render this stuff out on the page, you have to first escape out of the JSX syntax.', 'start': 699.326, 'duration': 6.025}, {'end': 714.397, 'text': "we can't just write JavaScript inside of JSX, we have to use curly brackets in order to embed JavaScript expressions inside of JSX.", 'start': 705.791, 'duration': 8.606}], 'summary': 'Rendering 4 children in a simpler ui, preparing to display a list of messages with dummy data.', 'duration': 63.957, 'max_score': 650.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw650440.jpg'}, {'end': 815.336, 'src': 'heatmap', 'start': 625.262, 'weight': 8, 'content': [{'end': 627.985, 'text': "And in the next screencast, we'll actually start doing that.", 'start': 625.262, 'duration': 2.723}, {'end': 630.087, 'text': "So stay tuned, and I'll see you there.", 'start': 628.585, 'duration': 1.502}, {'end': 639.856, 'text': "Hey, and welcome to the first lecture where we'll actually jump into the code and start building.", 'start': 635.615, 'duration': 4.241}, {'end': 642.377, 'text': "So now I'm in the app.js file.", 'start': 640.217, 'duration': 2.16}, {'end': 647.559, 'text': 'And as you can see, the app component is significantly simpler than it used to be.', 'start': 642.938, 'duration': 4.621}, {'end': 649.84, 'text': "I've removed all the logic.", 'start': 648.399, 'duration': 1.441}, {'end': 656.702, 'text': "So all that we're left with is the render method, which here returns the four children of the app component.", 'start': 650.44, 'duration': 6.262}, {'end': 659.903, 'text': 'That results in a significantly simpler UI.', 'start': 657.363, 'duration': 2.54}, {'end': 663.905, 'text': 'Each of the components are simply rendering out its respective name.', 'start': 660.564, 'duration': 3.341}, {'end': 670.396, 'text': "Now we're going to start by building out this message list component here, and it can be found down here.", 'start': 664.85, 'duration': 5.546}, {'end': 674.981, 'text': 'So what we want to do, of course, is render out a list of messages down here.', 'start': 670.677, 'duration': 4.304}, {'end': 679.386, 'text': 'So we need to remove this help text and write some JSX.', 'start': 675.702, 'duration': 3.684}, {'end': 681.228, 'text': 'But first, we need data.', 'start': 679.947, 'duration': 1.281}, {'end': 684.595, 'text': "And we're not going to hook up with the chatkit API just yet.", 'start': 682.313, 'duration': 2.282}, {'end': 690.579, 'text': "So I'm going to paste in some dummy data, basically an array contains three objects.", 'start': 684.615, 'duration': 5.964}, {'end': 695.103, 'text': 'And each of the objects contains a sender ID property and a text property.', 'start': 691.4, 'duration': 3.703}, {'end': 699.006, 'text': "And this is a simplified version of the data we'll get from chatkit later on.", 'start': 695.123, 'duration': 3.883}, {'end': 705.351, 'text': 'Now in order to render this stuff out on the page, you have to first escape out of the JSX syntax.', 'start': 699.326, 'duration': 6.025}, {'end': 714.397, 'text': "we can't just write JavaScript inside of JSX, we have to use curly brackets in order to embed JavaScript expressions inside of JSX.", 'start': 705.791, 'duration': 8.606}, {'end': 722.382, 'text': "So inside of here, we can do dummy data dot map, and fetch out the object itself, which we're calling message.", 'start': 714.877, 'duration': 7.505}, {'end': 726.084, 'text': 'And we also need the index using a fat arrow function.', 'start': 722.822, 'duration': 3.262}, {'end': 734.653, 'text': "And for each of the items, we're going to return a div tag Now we're in JSX land again.", 'start': 726.745, 'duration': 7.908}, {'end': 737.095, 'text': 'So we need to move over to JavaScript land.', 'start': 734.673, 'duration': 2.422}, {'end': 738.936, 'text': "So we'll do curly brackets again.", 'start': 737.115, 'duration': 1.821}, {'end': 744.679, 'text': "And let's just start by rendering out message dot text, we run this.", 'start': 738.956, 'duration': 5.723}, {'end': 748.221, 'text': "As you can see, we're rendering out the messages.", 'start': 746.06, 'duration': 2.161}, {'end': 758.139, 'text': 'Brilliant So now I want to give you your very first challenge, I want you to render out the sender ID and addition to the text.', 'start': 749.312, 'duration': 8.827}, {'end': 765.325, 'text': 'So pause the screencast right now, jump into the code and change it so that renders out the sender ID as well.', 'start': 758.58, 'duration': 6.745}, {'end': 769.168, 'text': "And if you don't manage to do it, then just resume back to the screencast.", 'start': 766.026, 'duration': 3.142}, {'end': 770.169, 'text': "And I'll show you how to do it.", 'start': 769.208, 'duration': 0.961}, {'end': 771.991, 'text': 'Okay, so go ahead and do that right now.', 'start': 770.61, 'duration': 1.381}, {'end': 776.655, 'text': 'Okay, so I hope you managed to solve this task.', 'start': 774.112, 'duration': 2.543}, {'end': 777.856, 'text': "Let's see how it's done.", 'start': 777.015, 'duration': 0.841}, {'end': 788.061, 'text': "So I'm suspecting that some of you might have been tempted to simply add other div tag here, do message dot sender ID.", 'start': 778.595, 'duration': 9.466}, {'end': 792.504, 'text': "And if you try to do that, you see now run the code, we're getting an error.", 'start': 788.661, 'duration': 3.843}, {'end': 798.871, 'text': 'React is basically saying that adjacent JSX elements must be wrapped in an enclosing tag,', 'start': 793.51, 'duration': 5.361}, {'end': 805.153, 'text': "which means you can't simply render out two JSX elements besides each other like this.", 'start': 798.871, 'duration': 6.282}, {'end': 807.074, 'text': 'you have to wrap them in an enclosing tag.', 'start': 805.153, 'duration': 1.921}, {'end': 810.355, 'text': 'And you can actually do it if you use an array.', 'start': 807.434, 'duration': 2.921}, {'end': 813.896, 'text': "So that's a feature react added in version 16.", 'start': 810.615, 'duration': 3.281}, {'end': 815.336, 'text': "But we're going to use the enclosing tag.", 'start': 813.896, 'duration': 1.44}], 'summary': 'Lecture covers simplification of app component, rendering messages from dummy data, and handling jsx elements in react.', 'duration': 190.074, 'max_score': 625.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw625262.jpg'}], 'start': 158.371, 'title': 'React app development', 'summary': 'Discusses react component architecture, emphasizing breaking the ui into components, defining hierarchy, and the principle of single responsibility. it also covers setting up index.html, connecting react app with html, simplifying the app component, rendering messages, and handling jsx elements.', 'chapters': [{'end': 525.253, 'start': 158.371, 'title': 'React component architecture', 'summary': "Discusses the component architecture of a react app, emphasizing the importance of breaking the ui into components, defining the hierarchy, and the principle of single responsibility. it also highlights the role of smart and dumb components and the best practices for maintaining the app's logic.", 'duration': 366.882, 'highlights': ['The chapter discusses the component architecture of a React app The lecture emphasizes the importance of breaking the UI into components and visualizing the hierarchy, starting from the parent component.', "Emphasizing the importance of breaking the UI into components It's recommended to visually break the UI into components and start from the parent component, identifying direct children and further breaking them down if necessary.", 'The principle of single responsibility The principle of single responsibility is highlighted, advocating for components to do one thing and one thing only, and considering breaking up huge components into multiple ones for better organization and maintainability.', "Role of smart and dumb components The distinction between smart and dumb components is explained, with the app component serving as a smart component handling logic and data, while the child components are described as 'stupid' and focused on rendering data.", "Best practices for maintaining app logic The lecture advises gathering the app's logic in one or a few smart components, while keeping the rest of the components as 'stupid' as possible, to ensure easier maintenance and organization."]}, {'end': 843.557, 'start': 526.24, 'title': 'Building a react app', 'summary': 'Covers setting up the index.html, connecting react app with the html file, simplifying the app component, rendering messages and handling jsx elements in a react app.', 'duration': 317.317, 'highlights': ['The chapter covers setting up the index.html, connecting React app with the HTML file, simplifying the app component, rendering messages and handling JSX elements in a React app. The chapter provides an overview of setting up the index.html, connecting the React app with the HTML file, simplifying the app component, rendering messages, and handling JSX elements in a React app.', 'The app component is significantly simpler, with the logic removed and the render method returning the four children of the app component. The app component has been simplified, with the logic removed and the render method returning the four children of the app component.', 'Dummy data, an array containing three objects, each with a sender ID property and a text property, will be used to render a list of messages on the page. The chapter introduces using dummy data, an array containing three objects, each with a sender ID property and a text property, to render a list of messages on the page.', 'In order to render the data on the page, JavaScript expressions are embedded inside the JSX using curly brackets, and each message is rendered as a div tag. To render the data on the page, JavaScript expressions are embedded inside the JSX using curly brackets, and each message is rendered as a div tag.', 'React now supports wrapping adjacent JSX elements in an enclosing tag, allowing for the rendering of multiple elements using an array or an enclosing tag. React now supports wrapping adjacent JSX elements in an enclosing tag, allowing for the rendering of multiple elements using an array or an enclosing tag.']}], 'duration': 685.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw158371.jpg', 'highlights': ['The chapter discusses the component architecture of a React app, emphasizing breaking the UI into components and visualizing the hierarchy.', 'The principle of single responsibility is highlighted, advocating for components to do one thing only, and considering breaking up huge components into multiple ones for better organization and maintainability.', "The distinction between smart and dumb components is explained, with the app component serving as a smart component handling logic and data, while the child components are described as 'stupid' and focused on rendering data.", "The lecture advises gathering the app's logic in one or a few smart components, while keeping the rest of the components as 'stupid' as possible, to ensure easier maintenance and organization.", 'The chapter provides an overview of setting up the index.html, connecting the React app with the HTML file, simplifying the app component, rendering messages, and handling JSX elements in a React app.', 'The app component has been simplified, with the logic removed and the render method returning the four children of the app component.', 'The chapter introduces using dummy data, an array containing three objects, each with a sender ID property and a text property, to render a list of messages on the page.', 'To render the data on the page, JavaScript expressions are embedded inside the JSX using curly brackets, and each message is rendered as a div tag.', 'React now supports wrapping adjacent JSX elements in an enclosing tag, allowing for the rendering of multiple elements using an array or an enclosing tag.']}, {'end': 1492.09, 'segs': [{'end': 870.6, 'src': 'embed', 'start': 844.118, 'weight': 0, 'content': [{'end': 848.903, 'text': "It's saying that each child in an array or iterator should have a unique key prop.", 'start': 844.118, 'duration': 4.785}, {'end': 854.29, 'text': 'So what we need to do is give this item here key prop like this.', 'start': 849.404, 'duration': 4.886}, {'end': 860.413, 'text': 'And this is why I wanted to fetch out the index as well, because we can use the index as the key.', 'start': 855.609, 'duration': 4.804}, {'end': 863.775, 'text': "if you run this again, it works and we're not getting the warning.", 'start': 860.413, 'duration': 3.362}, {'end': 870.6, 'text': "Now, it's actually not recommended to use the index as the key, it's rather recommended to use a unique ID.", 'start': 864.075, 'duration': 6.525}], 'summary': "Each child in an array should have a unique key prop. using index as key resolved the warning, but it's recommended to use a unique id.", 'duration': 26.482, 'max_score': 844.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw844118.jpg'}, {'end': 938.979, 'src': 'embed', 'start': 909.879, 'weight': 2, 'content': [{'end': 913.344, 'text': "So stay tuned for the next lecture as it'll be packed with interesting learnings.", 'start': 909.879, 'duration': 3.465}, {'end': 921.75, 'text': "Hey, let's have a look at how we can get started with the chatkit API.", 'start': 918.769, 'duration': 2.981}, {'end': 925.893, 'text': 'So chatkit is built by pusher, which you can find on pusher.com.', 'start': 922.391, 'duration': 3.502}, {'end': 932.836, 'text': 'They have a really nice collection of several APIs, which help you create collaboration and communication features in your apps.', 'start': 926.293, 'duration': 6.543}, {'end': 935.097, 'text': "And what we're going to use is called chatkit.", 'start': 933.276, 'duration': 1.821}, {'end': 938.979, 'text': "And it's probably the easiest way to implement chat in your app.", 'start': 935.757, 'duration': 3.222}], 'summary': 'Chatkit api by pusher offers easy chat implementation in apps.', 'duration': 29.1, 'max_score': 909.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw909879.jpg'}, {'end': 1057.359, 'src': 'embed', 'start': 1029.551, 'weight': 1, 'content': [{'end': 1036.694, 'text': 'And the way we get a hold of the SDK is by doing import chatkit from virtual chatkit.', 'start': 1029.551, 'duration': 7.143}, {'end': 1041.494, 'text': "Then there's a question, how do we hook up a React component with an API.", 'start': 1037.534, 'duration': 3.96}, {'end': 1049.257, 'text': 'And the way you want to do that is through using a lifecycle method called component did mount.', 'start': 1042.494, 'duration': 6.763}, {'end': 1054.778, 'text': "And it's triggered directly after the render method has been invoked.", 'start': 1050.377, 'duration': 4.401}, {'end': 1057.359, 'text': "So here, we'll create a chat manager.", 'start': 1055.598, 'duration': 1.761}], 'summary': 'Connecting react component with an api using lifecycle method component did mount after render method invocation.', 'duration': 27.808, 'max_score': 1029.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw1029550.jpg'}, {'end': 1155.669, 'src': 'heatmap', 'start': 909.879, 'weight': 6, 'content': [{'end': 913.344, 'text': "So stay tuned for the next lecture as it'll be packed with interesting learnings.", 'start': 909.879, 'duration': 3.465}, {'end': 921.75, 'text': "Hey, let's have a look at how we can get started with the chatkit API.", 'start': 918.769, 'duration': 2.981}, {'end': 925.893, 'text': 'So chatkit is built by pusher, which you can find on pusher.com.', 'start': 922.391, 'duration': 3.502}, {'end': 932.836, 'text': 'They have a really nice collection of several APIs, which help you create collaboration and communication features in your apps.', 'start': 926.293, 'duration': 6.543}, {'end': 935.097, 'text': "And what we're going to use is called chatkit.", 'start': 933.276, 'duration': 1.821}, {'end': 938.979, 'text': "And it's probably the easiest way to implement chat in your app.", 'start': 935.757, 'duration': 3.222}, {'end': 941.74, 'text': "It's in public beta, and it's free while it's in public beta.", 'start': 939.339, 'duration': 2.401}, {'end': 944.141, 'text': "And they'll always have a generous free plan.", 'start': 942.24, 'duration': 1.901}, {'end': 946.523, 'text': "So you don't have to worry about suddenly having to pay.", 'start': 944.462, 'duration': 2.061}, {'end': 950.925, 'text': 'Now in order to get started, you need to sign in or create an account.', 'start': 947.563, 'duration': 3.362}, {'end': 957.389, 'text': "And then you'll take into the dashboard, where you can see an overview over the instances you have for their various API's.", 'start': 951.205, 'duration': 6.184}, {'end': 961.612, 'text': "And if you click this instances here under chat kit, you'll see your instances.", 'start': 957.809, 'duration': 3.803}, {'end': 965.054, 'text': "The one we're going to use for this course is called scrimbot chat kit course.", 'start': 961.892, 'duration': 3.162}, {'end': 970.057, 'text': "When you head into that one, you'll get to an overview page where you have all the keys,", 'start': 965.554, 'duration': 4.503}, {'end': 973.659, 'text': 'tokens and stuff like that which you need in order to connect with chat kit.', 'start': 970.057, 'duration': 3.602}, {'end': 980.085, 'text': "And you can also create users and rooms here manually for when you're playing around with it and experimenting.", 'start': 974.219, 'duration': 5.866}, {'end': 984.67, 'text': "In the next screencast, we're going to connect our app with my chat kit instance.", 'start': 980.626, 'duration': 4.044}, {'end': 992.198, 'text': "And I'm also going to challenge you to connect our app to your chat kit instance, as you should have your own instance, and I should have mine.", 'start': 985.07, 'duration': 7.128}, {'end': 994.14, 'text': "So I'm looking forward to see you there.", 'start': 992.598, 'duration': 1.542}, {'end': 1006.506, 'text': "Hey, in this lecture, we're finally going to connect with the chatkit API so that we can fetch out the messages from a given room.", 'start': 1000, 'duration': 6.506}, {'end': 1010.749, 'text': 'Now, the first thing we need in order to do that is the chatkit SDK.', 'start': 1007.146, 'duration': 3.603}, {'end': 1014.832, 'text': "As you can see, under dependencies here, I've installed the SDK.", 'start': 1011.39, 'duration': 3.442}, {'end': 1020.617, 'text': "I've done that using NPM, but I could easily also have simply linked to the source from the HTML,", 'start': 1015.333, 'duration': 5.284}, {'end': 1026.702, 'text': 'because they have CDNs in which you can just point a script tag to and then easily fetch out the SDK that way as well.', 'start': 1020.617, 'duration': 6.085}, {'end': 1028.852, 'text': "However, we're going to use NPM.", 'start': 1027.432, 'duration': 1.42}, {'end': 1036.694, 'text': 'And the way we get a hold of the SDK is by doing import chatkit from virtual chatkit.', 'start': 1029.551, 'duration': 7.143}, {'end': 1041.494, 'text': "Then there's a question, how do we hook up a React component with an API.", 'start': 1037.534, 'duration': 3.96}, {'end': 1049.257, 'text': 'And the way you want to do that is through using a lifecycle method called component did mount.', 'start': 1042.494, 'duration': 6.763}, {'end': 1054.778, 'text': "And it's triggered directly after the render method has been invoked.", 'start': 1050.377, 'duration': 4.401}, {'end': 1057.359, 'text': "So here, we'll create a chat manager.", 'start': 1055.598, 'duration': 1.761}, {'end': 1063.561, 'text': "And we'll use the chat kit dot chat manager to create that.", 'start': 1059.319, 'duration': 4.242}, {'end': 1066.422, 'text': 'And inside of here, we need to specify a few parameters.', 'start': 1063.981, 'duration': 2.441}, {'end': 1071.704, 'text': 'First, we need our instance locator to tell chat kit which instance we want to connect with.', 'start': 1067.062, 'duration': 4.642}, {'end': 1074.345, 'text': 'And that is the one we created here.', 'start': 1071.724, 'duration': 2.621}, {'end': 1076.166, 'text': "It's called scrim bar chat kit course.", 'start': 1074.585, 'duration': 1.581}, {'end': 1079.507, 'text': "And here you can see that we're getting an instance locator.", 'start': 1076.806, 'duration': 2.701}, {'end': 1083.209, 'text': "Now I've copied this one to the config dot j s file.", 'start': 1079.527, 'duration': 3.682}, {'end': 1088.511, 'text': "here is and I'm exporting this one along with another one, which we'll look at in a minute.", 'start': 1084.107, 'duration': 4.404}, {'end': 1091.713, 'text': "So I'll simply do import.", 'start': 1089.231, 'duration': 2.482}, {'end': 1098.919, 'text': "I'll just copy these two from config like that.", 'start': 1092.654, 'duration': 6.265}, {'end': 1104.884, 'text': 'Now I can do instance locator instance locator like that.', 'start': 1099.82, 'duration': 5.064}, {'end': 1112.269, 'text': 'And actually as the key and the variable which is holding the value, meaning the instance locator string is called the same.', 'start': 1105.544, 'duration': 6.725}, {'end': 1115.531, 'text': 'I can actually omit this one here and use do like this', 'start': 1112.269, 'duration': 3.262}, {'end': 1122.175, 'text': "And we also need to specify a user ID, because chat kit needs to know which user we're connecting with this instance.", 'start': 1116.211, 'duration': 5.964}, {'end': 1128.299, 'text': "And as you can see, down here in the dashboard, I've created a user manually here.", 'start': 1123.196, 'duration': 5.103}, {'end': 1131.882, 'text': "So we're going to use that one user ID or bargain.", 'start': 1128.56, 'duration': 3.322}, {'end': 1142.805, 'text': "And finally, there's the token provider, which will create using new chat kit, token provider, like that.", 'start': 1133.402, 'duration': 9.403}, {'end': 1145.526, 'text': 'And here, we need to pass in a URL.', 'start': 1142.985, 'duration': 2.541}, {'end': 1153.548, 'text': "And that URL is the one we're getting if we scroll down to test token provider here, you can see your test token provider endpoint.", 'start': 1145.546, 'duration': 8.002}, {'end': 1155.669, 'text': 'And this is only for testing purposes.', 'start': 1154.048, 'duration': 1.621}], 'summary': "Using chatkit api by pusher, we can connect to instances, fetch messages, and create users and rooms. it's in public beta and offers a generous free plan.", 'duration': 27.109, 'max_score': 909.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw909879.jpg'}, {'end': 1233.732, 'src': 'embed', 'start': 1196.365, 'weight': 3, 'content': [{'end': 1200.628, 'text': 'And when that promise is resolved, we get access to the current user.', 'start': 1196.365, 'duration': 4.263}, {'end': 1206.47, 'text': 'And the current user object contains a bunch of methods for interacting with the API.', 'start': 1201.588, 'duration': 4.882}, {'end': 1217.593, 'text': 'So the current user is our interface for talking with the chatkit API, we can start off by doing current user dot subscribe to room like that.', 'start': 1206.95, 'duration': 10.643}, {'end': 1223.755, 'text': 'In this object, we need to specify of course, which room we want to subscribe to using the room ID.', 'start': 1218.373, 'duration': 5.382}, {'end': 1230.17, 'text': "And as you can see in the interface here, if you scroll a bit up, I've created a room called random here.", 'start': 1224.175, 'duration': 5.995}, {'end': 1233.732, 'text': 'And I can interact with this room programmatically using this identifier here.', 'start': 1230.53, 'duration': 3.202}], 'summary': 'Access current user with methods for api interaction, including subscribing to specific rooms.', 'duration': 37.367, 'max_score': 1196.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw1196365.jpg'}, {'end': 1303.144, 'src': 'embed', 'start': 1280.532, 'weight': 4, 'content': [{'end': 1288.856, 'text': 'Now, if this room contained tons of messages, we could have considered adding a message limit, for example 10 messages.', 'start': 1280.532, 'duration': 8.324}, {'end': 1291.838, 'text': 'that means the chat kit would only fetch out the 10 latest messages.', 'start': 1288.856, 'duration': 2.982}, {'end': 1293.699, 'text': 'And you could set that to up to 100.', 'start': 1292.198, 'duration': 1.501}, {'end': 1296.22, 'text': "However, by default, it's 20.", 'start': 1293.699, 'duration': 2.521}, {'end': 1299.202, 'text': "And I think that's a suitable number, which means we can actually omit this.", 'start': 1296.22, 'duration': 2.982}, {'end': 1300.422, 'text': "So I'm going to remove it.", 'start': 1299.642, 'duration': 0.78}, {'end': 1303.144, 'text': 'But I want you to be aware that you can control that.', 'start': 1300.823, 'duration': 2.321}], 'summary': 'The chat kit fetches 20 latest messages by default, with a limit of 100; configurable by the user.', 'duration': 22.612, 'max_score': 1280.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw1280532.jpg'}, {'end': 1457.578, 'src': 'embed', 'start': 1429.027, 'weight': 7, 'content': [{'end': 1431.549, 'text': "Once you've created a user, you'll be able to create a room.", 'start': 1429.027, 'duration': 2.522}, {'end': 1434.052, 'text': 'give it a name, and hit Create.', 'start': 1432.352, 'duration': 1.7}, {'end': 1440.894, 'text': "And then this little alert box will pop up with the room identifier, which you'll copy and paste in right here.", 'start': 1434.473, 'duration': 6.421}, {'end': 1449.316, 'text': "And then finally, I want you to enter a message into this field here and hit send, because that'll send the message manually to your chat room.", 'start': 1441.394, 'duration': 7.922}, {'end': 1457.578, 'text': "And it's important to understand that you won't be able to do this on my instance, because only I have access to my instance dashboard.", 'start': 1449.656, 'duration': 7.922}], 'summary': 'Create user, room, send message, and copy identifier.', 'duration': 28.551, 'max_score': 1429.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw1429027.jpg'}], 'start': 844.118, 'title': 'React key prop, chatkit api, and chat manager setup', 'summary': 'Discusses the significance of unique key props in react, the integration of chatkit api in a react component, setting up the chat manager, creating a user, specifying a user id, setting up a token provider, subscribing to a room, adding message limit, and fetching messages from the chat room.', 'chapters': [{'end': 1104.884, 'start': 844.118, 'title': 'React key prop and chatkit api', 'summary': 'Discusses the importance of unique key props in react, using the index as a last resort, and the integration of the chatkit api in a react component with an instance locator.', 'duration': 260.766, 'highlights': ["The importance of unique key props in React It's essential for each child in an array or iterator to have a unique key prop, and using the index as a last resort solution is not recommended.", 'Integration of Chatkit API in a React component The process involves installing the Chatkit SDK using NPM, creating a chat manager with the instance locator, and utilizing the component did mount lifecycle method.', 'Availability and features of Chatkit API Chatkit, built by Pusher, offers collaboration and communication features, is in public beta with a generous free plan, and allows users to create instances for experimentation and connections.']}, {'end': 1492.09, 'start': 1105.544, 'title': 'Setting up chat manager', 'summary': 'Discusses setting up the chat manager, including creating a user, specifying a user id, setting up a token provider, and connecting to the chat manager to interact with the api. it also covers subscribing to a room, adding message limit, and fetching messages from the chat room.', 'duration': 386.546, 'highlights': ['Creating a user manually in the dashboard The speaker creates a user manually in the dashboard for usage within the chat manager.', 'Setting up a token provider with a specified URL The process of creating a token provider with a specific URL is detailed, essential for authentication purposes.', 'Connecting to the chat manager and accessing the current user The code demonstrates the process of connecting to the chat manager and accessing the current user, which provides methods for interacting with the chatkit API.', 'Subscribing to a room and specifying event listeners for new messages The speaker subscribes to a room and specifies event listeners for new messages, demonstrating how to interact with the chat room programmatically.', 'Fetching messages from the chat room and the ability to set a message limit The process of fetching messages from the chat room is explained, including the ability to set a message limit, offering control over the number of messages fetched.']}], 'duration': 647.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw844118.jpg', 'highlights': ["The importance of unique key props in React It's essential for each child in an array or iterator to have a unique key prop, and using the index as a last resort solution is not recommended.", 'Integration of Chatkit API in a React component The process involves installing the Chatkit SDK using NPM, creating a chat manager with the instance locator, and utilizing the component did mount lifecycle method.', 'Availability and features of Chatkit API Chatkit, built by Pusher, offers collaboration and communication features, is in public beta with a generous free plan, and allows users to create instances for experimentation and connections.', 'Subscribing to a room and specifying event listeners for new messages The speaker subscribes to a room and specifies event listeners for new messages, demonstrating how to interact with the chat room programmatically.', 'Fetching messages from the chat room and the ability to set a message limit The process of fetching messages from the chat room is explained, including the ability to set a message limit, offering control over the number of messages fetched.', 'Connecting to the chat manager and accessing the current user The code demonstrates the process of connecting to the chat manager and accessing the current user, which provides methods for interacting with the chatkit API.', 'Setting up a token provider with a specified URL The process of creating a token provider with a specific URL is detailed, essential for authentication purposes.', 'Creating a user manually in the dashboard The speaker creates a user manually in the dashboard for usage within the chat manager.']}, {'end': 2648.072, 'segs': [{'end': 1588.026, 'src': 'embed', 'start': 1562.927, 'weight': 3, 'content': [{'end': 1569.192, 'text': "So our state, which we're going to create now, will only be state for the app component here.", 'start': 1562.927, 'duration': 6.265}, {'end': 1572.935, 'text': "And it's also possible to change the state from the component itself.", 'start': 1569.552, 'duration': 3.383}, {'end': 1575.337, 'text': 'However, props is not private.', 'start': 1573.135, 'duration': 2.202}, {'end': 1577.338, 'text': "it's shared between components,", 'start': 1575.337, 'duration': 2.001}, {'end': 1585.084, 'text': "and the components who have props can't change them directly themselves has to go through some kind of state change higher up in the hierarchy.", 'start': 1577.338, 'duration': 7.746}, {'end': 1588.026, 'text': 'Now, this probably sounds very theoretical.', 'start': 1585.464, 'duration': 2.562}], 'summary': "State can be changed within component; props are shared and can't be changed directly.", 'duration': 25.099, 'max_score': 1562.927, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw1562927.jpg'}, {'end': 1676.315, 'src': 'embed', 'start': 1652.495, 'weight': 0, 'content': [{'end': 1660.182, 'text': "What we now can do is for every new message we get from chat kit, we'll do this dot set state.", 'start': 1652.495, 'duration': 7.687}, {'end': 1665.386, 'text': "And inside of this object, we're describing how we want our new state to look like.", 'start': 1660.822, 'duration': 4.564}, {'end': 1668.048, 'text': 'So we want the messages to change.', 'start': 1665.646, 'duration': 2.402}, {'end': 1676.315, 'text': 'And what we want to do is actually add this latest message to the end of the this dot state dot messages array.', 'start': 1668.649, 'duration': 7.666}], 'summary': 'Update state in chat app to add latest message.', 'duration': 23.82, 'max_score': 1652.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw1652495.jpg'}, {'end': 1920.043, 'src': 'embed', 'start': 1896.017, 'weight': 4, 'content': [{'end': 1905.92, 'text': "And the way react works is that every time this data here changes, it'll trigger a rerender and the data will be passed down to the message list.", 'start': 1896.017, 'duration': 9.903}, {'end': 1908.32, 'text': "that'll trigger a rerender of message list.", 'start': 1905.92, 'duration': 2.4}, {'end': 1913.581, 'text': "And here, we're simply mapping through that data, this dot props dot messages.", 'start': 1908.54, 'duration': 5.041}, {'end': 1920.043, 'text': "Remember, now it's props, it's not state, because the state is private and can only live up in the app component.", 'start': 1913.841, 'duration': 6.202}], 'summary': 'React re-renders on data change, passing it to message list.', 'duration': 24.026, 'max_score': 1896.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw1896017.jpg'}, {'end': 2316.749, 'src': 'embed', 'start': 2290.109, 'weight': 2, 'content': [{'end': 2296.654, 'text': "So let's take whatever the user inputs into this input field and shove it into the state of the send message form component.", 'start': 2290.109, 'duration': 6.545}, {'end': 2301.92, 'text': "what we'll then do is that we'll use the on change event handler.", 'start': 2297.557, 'duration': 4.363}, {'end': 2309.504, 'text': 'This one basically says that whenever this input field changes, whenever the value of a changes fire off,', 'start': 2302.82, 'duration': 6.684}, {'end': 2316.749, 'text': "whatever function we specify inside of these curly brackets, let's do this dot handle change in here.", 'start': 2309.504, 'duration': 7.245}], 'summary': 'Shove user input into state using on change event handler.', 'duration': 26.64, 'max_score': 2290.109, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw2290109.jpg'}, {'end': 2599.43, 'src': 'embed', 'start': 2568.863, 'weight': 1, 'content': [{'end': 2579.79, 'text': "like that, so that we in this handle submit event handler, get access to this dot state dot message, as that's the message we're going to send off.", 'start': 2568.863, 'duration': 10.927}, {'end': 2588.401, 'text': "So let's remove this one, run the Hello, submit.", 'start': 2580.531, 'duration': 7.87}, {'end': 2591.643, 'text': 'And there we logged out from this place right here.', 'start': 2588.801, 'duration': 2.842}, {'end': 2599.43, 'text': 'Now, finally, I want to point out that the on submit and on change are event listeners provided by react.', 'start': 2592.024, 'duration': 7.406}], 'summary': 'Using event handlers to access and send message in react, with mention of event listeners.', 'duration': 30.567, 'max_score': 2568.863, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw2568863.jpg'}], 'start': 1492.73, 'title': 'React component state and form handling', 'summary': 'Covers adding state to components, updating state, converting class components to functional components, and handling form input. it also emphasizes the importance of functional components and introduces event handlers, with practical examples and methods for state management.', 'chapters': [{'end': 1877.931, 'start': 1492.73, 'title': 'Handling data in react components', 'summary': 'Discusses adding state to the app component, the difference between state and props, using the constructor method to interact with state, and updating state using setstate to store and render messages from the chatkit api.', 'duration': 385.201, 'highlights': ["The difference between state and props, with state being private for a component and props being shared between components, is explained, providing clarity on when to use each. It's important to understand these concepts for efficient data handling in React components.", "The constructor method is introduced as the very first method called in the lifecycle of React components, allowing interaction with the 'this' keyword and setting up the state. This method is crucial for initializing and managing the state of a component.", 'The process of updating the state using setState to store and render messages from the chatkit API is detailed, including the use of the spread operator to create a new array and avoid modifying the original array. This ensures proper data management and rendering of real-time data in the app.', 'The method of passing data down to the message list component through props is demonstrated, showcasing the use of JavaScript arrays and JSX to efficiently display real data fetched from the chatkit API. This enables the rendering of real-time data in the app and emphasizes the practical use of props for data management.']}, {'end': 2289.669, 'start': 1877.931, 'title': 'Reactjs components and state', 'summary': 'Covers updating state in react components, moving content into separate components, and converting a class component to a functional component. it also emphasizes the importance of functional components and introduces the next topic of event handlers.', 'duration': 411.738, 'highlights': ['Updating state in React components triggers a rerender, passing data down to child components. React works by triggering a rerender every time the data changes, passing it down to child components. This ensures that changes in state trigger a rerender and the data is passed down to the message list.', 'Moving content into separate components and passing data as props. The process involves breaking down UI into components and passing data down as props, such as moving the key and data like sender ID and text into separate components.', "Converting a class component to a functional component for simplicity and less bug-prone code. The transition to functional components is preferred when a component doesn't have state or lifecycle methods, as it simplifies the code and reduces the likelihood of bugs.", 'Introduction to the next topic of event handlers. The chapter introduces the next topic of event handlers, setting the stage for learning about handling user interactions in the upcoming lecture.']}, {'end': 2648.072, 'start': 2290.109, 'title': 'React form handling', 'summary': 'Discusses handling form input and state management in react, including binding events, controlling input field values programmatically, and setting up event listeners for form submission.', 'duration': 357.963, 'highlights': ['The chapter discusses how to bind the on change event handler to update the component state when the input field value changes. It explains how to use the on change event handler to update the component state when the input field value changes, allowing for dynamic form interaction.', 'The chapter explains the process of initializing the component state and setting up the handle change method to update the state with the input field value. It covers initializing the component state using the constructor method and setting up the handle change method to update the state with the input field value, ensuring proper state management.', 'The chapter details the implementation of controlled components to manage form input and state, ensuring consistency between the input field and component state values. It discusses the concept of controlled components, ensuring consistency between the input field and component state values, thus avoiding duplicate state and ensuring synchronization.', 'The chapter covers setting up an on submit event listener for form submission, along with preventing the default behavior and preparing to send off the message. It explains setting up an on submit event listener for form submission, preventing the default behavior, and preparing to send off the message, providing insights into handling form submissions in React.', 'The chapter emphasizes the relationship between React event listeners (on change, on submit) and their native counterparts, highlighting the importance of naming conventions for event handlers. It emphasizes the relationship between React event listeners and their native counterparts, underlining the significance of naming conventions for event handlers and the interchangeability of event listener names.']}], 'duration': 1155.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw1492730.jpg', 'highlights': ['The process of updating the state using setState to store and render messages from the chatkit API is detailed, including the use of the spread operator to create a new array and avoid modifying the original array. This ensures proper data management and rendering of real-time data in the app.', 'The chapter covers setting up an on submit event listener for form submission, preventing the default behavior, and preparing to send off the message, providing insights into handling form submissions in React.', 'The chapter discusses how to bind the on change event handler to update the component state when the input field value changes. It explains how to use the on change event handler to update the component state when the input field value changes, allowing for dynamic form interaction.', "The difference between state and props, with state being private for a component and props being shared between components, is explained, providing clarity on when to use each. It's important to understand these concepts for efficient data handling in React components.", 'Updating state in React components triggers a rerender, passing data down to child components. React works by triggering a rerender every time the data changes, passing it down to child components. This ensures that changes in state trigger a rerender and the data is passed down to the message list.']}, {'end': 3398.379, 'segs': [{'end': 2843.794, 'src': 'embed', 'start': 2815.476, 'weight': 1, 'content': [{'end': 2818.039, 'text': "that being the data we're storing in the state here.", 'start': 2815.476, 'duration': 2.563}, {'end': 2826.386, 'text': "And we need to send that up to the app.js component, because that's the one that will send this data off to chat kit.", 'start': 2818.339, 'duration': 8.047}, {'end': 2829.609, 'text': 'So this is called the inverse data flow in React.', 'start': 2826.646, 'duration': 2.963}, {'end': 2840.273, 'text': "And there's a couple of ways of looking at this conceptually either that we're sending a method down or that we're reaching up from child to parent in order to trigger a method.", 'start': 2830.029, 'duration': 10.244}, {'end': 2843.794, 'text': "So what we'll do is we'll take this send message and send it down.", 'start': 2840.473, 'duration': 3.321}], 'summary': 'In react, data is sent from child to parent to trigger a method.', 'duration': 28.318, 'max_score': 2815.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw2815476.jpg'}, {'end': 2944.802, 'src': 'embed', 'start': 2914.577, 'weight': 0, 'content': [{'end': 2918.544, 'text': "let's try it again, run the code again and hit enter.", 'start': 2914.577, 'duration': 3.967}, {'end': 2920.766, 'text': 'Boom, that worked.', 'start': 2919.325, 'duration': 1.441}, {'end': 2925.309, 'text': 'We now sent the message off to chat kit via this that current user not send message.', 'start': 2921.026, 'duration': 4.283}, {'end': 2933.974, 'text': 'And then, since we are listening for new messages here and setting the state, adding the latest message to the state here,', 'start': 2925.569, 'duration': 8.405}, {'end': 2937.196, 'text': 'that state got updated to again triggered a rerender.', 'start': 2933.974, 'duration': 3.222}, {'end': 2939.978, 'text': 'So that this message list also got rerendered.', 'start': 2937.656, 'duration': 2.322}, {'end': 2944.802, 'text': 'and it results in four messages being displayed in chat instead of just the three.', 'start': 2940.798, 'duration': 4.004}], 'summary': 'Successfully sent message to chat kit, resulting in display of four messages.', 'duration': 30.225, 'max_score': 2914.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw2914577.jpg'}, {'end': 3022.043, 'src': 'embed', 'start': 2995.852, 'weight': 2, 'content': [{'end': 3001.415, 'text': 'So as you know, all communication with the API happens in the app component, or only smart component.', 'start': 2995.852, 'duration': 5.563}, {'end': 3005.016, 'text': 'And it happens through the this dot current user object.', 'start': 3001.735, 'duration': 3.281}, {'end': 3015.54, 'text': "So what we'll do is this dot current user dot get joinable rooms like that, that returns a promise.", 'start': 3005.376, 'duration': 10.164}, {'end': 3022.043, 'text': 'And when that promise has been resolved, we get access to the joinable rooms like that.', 'start': 3016.341, 'duration': 5.702}], 'summary': 'Api communication in app component, accessing joinable rooms through this.current user object.', 'duration': 26.191, 'max_score': 2995.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw2995852.jpg'}, {'end': 3144.227, 'src': 'embed', 'start': 3102.727, 'weight': 3, 'content': [{'end': 3104.888, 'text': "So we're going to refactor it a little bit later on.", 'start': 3102.727, 'duration': 2.161}, {'end': 3110.431, 'text': "If you find it to be a bit confusing, a bit bit too massive, don't worry, we'll clean it up afterwards.", 'start': 3105.149, 'duration': 5.282}, {'end': 3115.694, 'text': "For now, though, let's see if we're able to send these rooms down to the room list component.", 'start': 3110.911, 'duration': 4.783}, {'end': 3120.556, 'text': "So what we'll do is we'll give the room list component a prop called rooms.", 'start': 3116.334, 'duration': 4.222}, {'end': 3144.227, 'text': "In it we'll use the spread operator to combine the two arrays of this dot state dot joinable rooms with this dot state dot joined rooms that now in the room list we can log out this dot props dot rooms.", 'start': 3122.197, 'duration': 22.03}], 'summary': 'Refactoring code to send rooms to room list component.', 'duration': 41.5, 'max_score': 3102.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3102727.jpg'}, {'end': 3347.799, 'src': 'embed', 'start': 3316.175, 'weight': 4, 'content': [{'end': 3331.447, 'text': 'and then also replace this code with this dot get rules that and of course bind it So now we have a much more manageable component amount method.', 'start': 3316.175, 'duration': 15.272}, {'end': 3336.351, 'text': 'And what we want to do is enable the user to click a room and thus subscribe to it.', 'start': 3331.887, 'duration': 4.464}, {'end': 3347.799, 'text': 'So we need to pass down the subscribe to room method down to the room list through the subscribe to room equals this dot subscribe to room.', 'start': 3336.731, 'duration': 11.068}], 'summary': 'Update code to enable user to subscribe to rooms.', 'duration': 31.624, 'max_score': 3316.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3316175.jpg'}], 'start': 2648.692, 'title': 'Chat kit features', 'summary': 'Covers message sending with binding methods, inverse data flow in react, and updating message list, and chat room management including fetching and displaying joinable and joined rooms, rendering room list, and enabling room subscription for a fully functional chat app.', 'chapters': [{'end': 2967.786, 'start': 2648.692, 'title': 'Chat kit message sending', 'summary': 'Covers the process of sending messages to the chat kit servers, including binding methods, inverse data flow in react, and updating the message list upon sending a new message, resulting in a rerender and display of the new message.', 'duration': 319.094, 'highlights': ['The process of sending messages to the Chat Kit servers is explained, including the methods and components involved. The chapter extensively covers the process of sending messages to the Chat Kit servers, including binding methods and explaining the components involved.', 'The concept of inverse data flow in React is discussed, focusing on the challenges and methods to transfer data from child to parent components. The concept of inverse data flow in React is explained, emphasizing the challenges and methods to transfer data from child to parent components.', 'The update of the message list upon sending a new message is detailed, highlighting the automatic rerender and display of the new message. The process of updating the message list upon sending a new message is explained, emphasizing the automatic rerender and display of the new message.']}, {'end': 3398.379, 'start': 2968.466, 'title': 'Chat room management and subscription', 'summary': 'Covers fetching and displaying joinable and joined rooms, rendering room list, and enabling room subscription, leading to a fully functional chat app.', 'duration': 429.913, 'highlights': ['Fetching joinable and joined rooms and displaying them in the room list component The app component fetches joinable and joined rooms using this.current_user.getJoinableRooms() and this.current_user.rooms, adds them to the state, initializes them, and sends them down to the room list component.', 'Refactoring the component method for better manageability The method for fetching rooms is refactored for better manageability by creating separate methods for subscribing to a room and fetching rooms, which are then bound and passed down to the room list component.', 'Enabling room subscription through user interaction The user is enabled to click on a room and subscribe to it, by passing down the subscribe to room method to the room list and invoking it on the click event with the respective room ID.']}], 'duration': 749.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw2648692.jpg', 'highlights': ['Covers message sending with binding methods and automatic rerender of new messages.', 'Explains inverse data flow in React, focusing on data transfer challenges.', 'Details fetching and displaying joinable and joined rooms in the room list component.', 'Refactors component method for better manageability by creating separate methods.', 'Enables room subscription through user interaction by passing down the subscribe to room method.']}, {'end': 3815.745, 'segs': [{'end': 3473.614, 'src': 'embed', 'start': 3422.771, 'weight': 0, 'content': [{'end': 3429.594, 'text': 'And now we should be able to subscribe to rooms through clicking on these items here,', 'start': 3422.771, 'duration': 6.823}, {'end': 3437.883, 'text': "meaning we'll actually remove this first subscribe to room from the component did mount.", 'start': 3429.594, 'duration': 8.289}, {'end': 3441.346, 'text': 'we now want to enable the user to do that instead of doing it automatically.', 'start': 3437.883, 'duration': 3.463}, {'end': 3444.708, 'text': "So we'll run the code and click on NFL.", 'start': 3441.806, 'duration': 2.902}, {'end': 3448.251, 'text': 'And as you can see, we got messages from that chatroom.', 'start': 3445.349, 'duration': 2.902}, {'end': 3454.295, 'text': "Beautiful Now if we head into welcome as well, we'll see that we have a bug.", 'start': 3448.551, 'duration': 5.744}, {'end': 3458.942, 'text': 'So the welcome messages was placed after the NFL messages.', 'start': 3455.359, 'duration': 3.583}, {'end': 3460.203, 'text': "And that's not good.", 'start': 3459.442, 'duration': 0.761}, {'end': 3464.967, 'text': "That's because when we subscribe to a room and we get our on new message event listener,", 'start': 3460.503, 'duration': 4.464}, {'end': 3468.37, 'text': "we're simply just continuing to append new messages to the state.", 'start': 3464.967, 'duration': 3.403}, {'end': 3473.614, 'text': 'So what we need to do before we subscribe to room is clean up the state.', 'start': 3469.171, 'duration': 4.443}], 'summary': 'Enable user to manually subscribe to rooms, fix bug in welcome messages order', 'duration': 50.843, 'max_score': 3422.771, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3422771.jpg'}, {'end': 3549.343, 'src': 'embed', 'start': 3506.899, 'weight': 1, 'content': [{'end': 3513.202, 'text': 'Because the list you can see here contains both the rooms you have joined, and the rooms you can join.', 'start': 3506.899, 'duration': 6.303}, {'end': 3518.704, 'text': 'And they look for this app, completely similar, regardless of whether or not you have joined it.', 'start': 3514.042, 'duration': 4.662}, {'end': 3525.547, 'text': "And the thing is, when you subscribe to a room, that means when you're listening for messages and displaying them here,", 'start': 3519.184, 'duration': 6.363}, {'end': 3527.208, 'text': "you're automatically joining it as well.", 'start': 3525.547, 'duration': 1.661}, {'end': 3531.397, 'text': "So if there's a room that I haven't joined yet, let's say, for example,", 'start': 3528.356, 'duration': 3.041}, {'end': 3538.339, 'text': 'this NBA room and I joined that then these two joinable rooms and joined rooms should change.', 'start': 3531.397, 'duration': 6.942}, {'end': 3543.801, 'text': 'one room from the joinable rooms, should be extracted and put into the joined rooms array.', 'start': 3538.339, 'duration': 5.462}, {'end': 3549.343, 'text': "So after I've subscribed to a room, we actually need to call this get joinable rooms again.", 'start': 3544.161, 'duration': 5.182}], 'summary': 'App dynamically updates joinable and joined rooms when subscribed, ensuring accurate representation.', 'duration': 42.444, 'max_score': 3506.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3506899.jpg'}, {'end': 3609.742, 'src': 'embed', 'start': 3579.488, 'weight': 4, 'content': [{'end': 3584.21, 'text': 'What we then need to do is to make sure that we can send messages to the correct room.', 'start': 3579.488, 'duration': 4.722}, {'end': 3591.694, 'text': "Right now, when we're triggering the send message, just hard coding in that we're sending a message to this specific room.", 'start': 3585.111, 'duration': 6.583}, {'end': 3593.575, 'text': "And that of course doesn't work.", 'start': 3592.254, 'duration': 1.321}, {'end': 3597.877, 'text': 'And the answer to that is also to be found in this callback function here.', 'start': 3594.075, 'duration': 3.802}, {'end': 3609.742, 'text': "because what we then can do is we can do this dot set state and we can keep track of which room we're currently at by doing room ID and setting it to the room dot ID.", 'start': 3598.697, 'duration': 11.045}], 'summary': 'Need to send messages to correct room by setting state with room id.', 'duration': 30.254, 'max_score': 3579.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3579488.jpg'}, {'end': 3720.568, 'src': 'embed', 'start': 3692.538, 'weight': 6, 'content': [{'end': 3701.224, 'text': "Namely making sure that these rooms are always displayed in the order we want them to be displayed in and that we're highlighting which room you're currently at.", 'start': 3692.538, 'duration': 8.686}, {'end': 3704.487, 'text': "So in the next screencast, we'll fix both those things.", 'start': 3701.725, 'duration': 2.762}, {'end': 3713.584, 'text': "Hey, in this lecture, we're gonna fix a couple of things in our room list component.", 'start': 3710.322, 'duration': 3.262}, {'end': 3720.568, 'text': "And the first one being that if I now paste in a new username here, which hasn't joined any rooms yet.", 'start': 3713.964, 'duration': 6.604}], 'summary': 'Fixing room display order and highlighting current room in the list.', 'duration': 28.03, 'max_score': 3692.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3692538.jpg'}, {'end': 3788.73, 'src': 'embed', 'start': 3739.544, 'weight': 5, 'content': [{'end': 3741.306, 'text': "That's not a good user experience.", 'start': 3739.544, 'duration': 1.762}, {'end': 3746.853, 'text': "And it's because rooms jump from being joinable rooms to being joined rooms.", 'start': 3742.127, 'duration': 4.726}, {'end': 3755.598, 'text': 'and namely happens in this dot set state here, when we have fetched out the joinable rooms after the user has joined the room.', 'start': 3748.055, 'duration': 7.543}, {'end': 3760.72, 'text': 'And this dot current user dot rooms is by the way, updated automatically.', 'start': 3756.218, 'duration': 4.502}, {'end': 3772.524, 'text': 'But the point being that an object has jumped from here to here and thus the order of this dot props, dot rooms down in room list,', 'start': 3761.3, 'duration': 11.224}, {'end': 3774.824, 'text': 'which we are mapping through here, has changed.', 'start': 3772.524, 'duration': 2.3}, {'end': 3778.606, 'text': 'So the order in the user interface will change.', 'start': 3775.265, 'duration': 3.341}, {'end': 3788.73, 'text': 'And the way to solve this is to create an ordered array up here called ordered rooms equals this dot props dot rooms.', 'start': 3778.626, 'duration': 10.104}], 'summary': 'User interface order changes due to rooms jumping from joinable to joined, solved by creating ordered array.', 'duration': 49.186, 'max_score': 3739.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3739544.jpg'}], 'start': 3398.379, 'title': 'Real-time chat room management', 'summary': 'Explains subscribing to and managing chat rooms, including automatic joining, updating joinable rooms, and tracking the current room for sending messages.', 'chapters': [{'end': 3506.279, 'start': 3398.379, 'title': 'React component state and event handling', 'summary': 'Discusses subscribing to chat rooms in a react component, handling state updates, and resolving bugs, enabling users to subscribe to chat rooms and ensuring proper state management for joinable and joined rooms.', 'duration': 107.9, 'highlights': ['Enabling users to subscribe to chat rooms The code allows users to subscribe to chat rooms by clicking on the items, resulting in successful messages retrieval from the chatroom.', 'Resolving bug in welcome messages placement Identifying and resolving the bug where welcome messages were placed after the NFL messages, by cleaning up the state before subscribing to a room and setting messages to an empty array.', 'Properly updating joinable rooms and joined rooms Ensuring the joinable rooms and joined rooms are properly updated to maintain the functionality of joining rooms in the chat application.']}, {'end': 3625.233, 'start': 3506.899, 'title': 'Real-time chat room management', 'summary': 'Discusses the process of subscribing to and managing chat rooms, including the automatic joining of rooms upon subscription, updating joinable rooms after subscribing, and tracking the current room for sending messages.', 'duration': 118.334, 'highlights': ['The process of subscribing to a room automatically results in joining it as well. When subscribing to a room, the user is automatically joined to it, simplifying the management of multiple chat rooms.', 'Updating joinable rooms is necessary after subscribing to a room. After subscribing to a room, the joinable rooms list needs to be updated, ensuring accurate representation of available rooms for the user to join.', 'Tracking the current room is essential for sending messages to the correct room. The necessity of tracking the current room is highlighted to ensure that messages are sent to the right chat room, enhancing the user experience.']}, {'end': 3815.745, 'start': 3625.653, 'title': 'Fixing room list issues', 'summary': 'Discusses fixing issues in the room list component, including maintaining the order of rooms and highlighting the current room, aiming to improve user experience and prevent shuffling of rooms when joining.', 'duration': 190.092, 'highlights': ['The order of rooms in the user interface changes when a joinable room becomes a joined room, causing a poor user experience.', 'Creating an ordered array called ordered rooms using a compare function to sort the rooms by ID to maintain the desired order in the user interface.', 'Ensuring that the room list component is complete by addressing the issues of room order display and highlighting the current room for improved user experience.']}], 'duration': 417.366, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3398379.jpg', 'highlights': ['Enabling users to subscribe to chat rooms by clicking on the items, resulting in successful messages retrieval from the chatroom.', 'The process of subscribing to a room automatically results in joining it as well, simplifying the management of multiple chat rooms.', 'Properly updating joinable rooms and joined rooms to maintain the functionality of joining rooms in the chat application.', 'Updating joinable rooms is necessary after subscribing to a room to ensure accurate representation of available rooms for the user to join.', 'Tracking the current room is essential for sending messages to the correct room, enhancing the user experience.', 'Creating an ordered array called ordered rooms using a compare function to sort the rooms by ID to maintain the desired order in the user interface.', 'Ensuring that the room list component is complete by addressing the issues of room order display and highlighting the current room for improved user experience.', 'Identifying and resolving the bug where welcome messages were placed after the NFL messages by cleaning up the state before subscribing to a room and setting messages to an empty array.', 'The order of rooms in the user interface changes when a joinable room becomes a joined room, causing a poor user experience.']}, {'end': 4987.758, 'segs': [{'end': 3869.753, 'src': 'embed', 'start': 3816.206, 'weight': 1, 'content': [{'end': 3822.23, 'text': "Or if we return a positive number, then A will be seen on as greater than B, and it'll sort it accordingly.", 'start': 3816.206, 'duration': 6.024}, {'end': 3826.894, 'text': 'So now it should sort our rooms in ascending order based upon their IDs.', 'start': 3822.73, 'duration': 4.164}, {'end': 3834.56, 'text': 'and we need to create a new array as sort would indeed modify the original array, and you should never modify props.', 'start': 3827.774, 'duration': 6.786}, {'end': 3839.704, 'text': "So then we'll take the order rooms and swap this out here.", 'start': 3835.24, 'duration': 4.464}, {'end': 3842.166, 'text': "We'll run the code.", 'start': 3841.025, 'duration': 1.141}, {'end': 3849.032, 'text': "Now let's try joining who seems to be working really good.", 'start': 3844.128, 'duration': 4.904}, {'end': 3851.547, 'text': "they don't jump around.", 'start': 3850.506, 'duration': 1.041}, {'end': 3854.87, 'text': 'Cool So now you only have one more thing left.', 'start': 3851.967, 'duration': 2.903}, {'end': 3858.494, 'text': "And that is to highlight which room you're currently at.", 'start': 3855.351, 'duration': 3.143}, {'end': 3862.277, 'text': "Because right now we don't really know which room we're at.", 'start': 3859.334, 'duration': 2.943}, {'end': 3864.009, 'text': "let's click Welcome.", 'start': 3863.168, 'duration': 0.841}, {'end': 3869.753, 'text': 'And what we want to happen is for this item here to glow up a little or to change color.', 'start': 3864.429, 'duration': 5.324}], 'summary': 'Code sorts rooms in ascending order based on ids.', 'duration': 53.547, 'max_score': 3816.206, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3816206.jpg'}, {'end': 4017.901, 'src': 'embed', 'start': 3992.216, 'weight': 2, 'content': [{'end': 3999.537, 'text': 'And the way we solve this is through adding the component did update method.', 'start': 3992.216, 'duration': 7.321}, {'end': 4003.458, 'text': 'And this is yet another of the lifecycle methods in react.', 'start': 4000.198, 'duration': 3.26}, {'end': 4007.139, 'text': "And it's called directly after a component has been updated.", 'start': 4003.698, 'duration': 3.441}, {'end': 4010.78, 'text': 'So this is a nice time for scrolling down if you want to do that.', 'start': 4007.439, 'duration': 3.341}, {'end': 4017.901, 'text': "And first, we need to grab hold of the message list component itself, the DOM node, basically, we'll do const node.", 'start': 4011.38, 'duration': 6.521}], 'summary': 'Adding componentdidupdate method in react for updating components.', 'duration': 25.685, 'max_score': 3992.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3992216.jpg'}, {'end': 4102.336, 'src': 'embed', 'start': 4072.271, 'weight': 3, 'content': [{'end': 4073.331, 'text': 'Now we are scrolled to the bottom.', 'start': 4072.271, 'duration': 1.06}, {'end': 4077.692, 'text': 'If we try to write, my name is there.', 'start': 4074.371, 'duration': 3.321}, {'end': 4079.522, 'text': 'we scroll down.', 'start': 4078.882, 'duration': 0.64}, {'end': 4084.525, 'text': "However, there are certain situations where we don't want this action to trigger.", 'start': 4080.043, 'duration': 4.482}, {'end': 4091.589, 'text': "For example, let's say I'm reading through all the messages up here, and then suddenly, a new message appears at the bottom.", 'start': 4085.006, 'duration': 6.583}, {'end': 4097.153, 'text': "Now, what I'm going to do now, I'm actually going to head into another window, which you can't see here at scrim bar.", 'start': 4092.27, 'duration': 4.883}, {'end': 4100.234, 'text': "And then I'm going to write a message from that client.", 'start': 4097.773, 'duration': 2.461}, {'end': 4102.336, 'text': "So I've connected from that client as well.", 'start': 4100.535, 'duration': 1.801}], 'summary': 'The transcript discusses scrolling and writing messages in a chat window, including a situation where a new message appears at the bottom.', 'duration': 30.065, 'max_score': 4072.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw4072271.jpg'}, {'end': 4356.128, 'src': 'embed', 'start': 4321.643, 'weight': 0, 'content': [{'end': 4323.684, 'text': 'And they can, of course, also create rooms.', 'start': 4321.643, 'duration': 2.041}, {'end': 4328.788, 'text': 'So this will be very similar to how we did the send message form.', 'start': 4324.345, 'duration': 4.443}, {'end': 4332.651, 'text': "So I'm going to go quickly through how we'll build out the new room form.", 'start': 4328.948, 'duration': 3.703}, {'end': 4336.501, 'text': 'as you remember, we prefer to create controlled components.', 'start': 4333.74, 'duration': 2.761}, {'end': 4340.382, 'text': "So we're going to give this one an on change handler.", 'start': 4336.701, 'duration': 3.681}, {'end': 4346.604, 'text': "And we're going to trigger this dot handle change, which is a method we'll write here.", 'start': 4340.862, 'duration': 5.742}, {'end': 4356.128, 'text': 'And it will do this dot set state and set the room name to E dot target dot value.', 'start': 4346.624, 'duration': 9.504}], 'summary': 'The transcript discusses creating a new room form with controlled components and an onchange handler.', 'duration': 34.485, 'max_score': 4321.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw4321643.jpg'}], 'start': 3816.206, 'title': 'React component lifecycle and scroll functionality', 'summary': 'Covers the usage of componentdidmount and componentdidupdate to achieve automatic scrolling in a chat window, sorting rooms based on ids, adding a visual indicator for the active room, and developing a controlled component for creating new chat rooms.', 'chapters': [{'end': 3991.152, 'start': 3816.206, 'title': 'Automatically scrolling and highlighting active room', 'summary': 'Covers sorting rooms in ascending order based on their ids and adding a visual indicator for the currently active room by applying a class to the corresponding list item, achieving automatic scrolling to the bottom when new messages appear.', 'duration': 174.946, 'highlights': ['The rooms are sorted in ascending order based on their IDs to ensure proper organization and management.', 'A visual indicator is added to highlight the currently active room, enhancing user experience and facilitating navigation.', 'Automatic scrolling to the bottom is implemented to ensure new messages are immediately visible, improving the user interaction.']}, {'end': 4987.758, 'start': 3992.216, 'title': 'React component lifecycle and scroll functionality', 'summary': 'Explains the usage of the component lifecycle method componentdidmount to scroll to the bottom of a chat window and the use of componentdidupdate to trigger automatic scrolling when near the bottom, along with the development of a controlled component for creating new chat rooms.', 'duration': 995.542, 'highlights': ['The chapter explains the usage of the component lifecycle method componentDidMount to scroll to the bottom of a chat window. The method componentDidMount is used to automatically scroll to the bottom of the chat window, ensuring a user-friendly chat experience.', 'The use of componentDidUpdate to trigger automatic scrolling when near the bottom of the chat window is described. The componentDidUpdate method is utilized to trigger automatic scrolling when near the bottom of the chat window, enhancing user experience and preventing unnecessary scrolling interruptions.', 'The development of a controlled component for creating new chat rooms is demonstrated. A controlled component is developed to enable users to create new chat rooms, ensuring efficient management and handling of room creation within the chat application.']}], 'duration': 1171.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw3816206.jpg', 'highlights': ['The development of a controlled component for creating new chat rooms is demonstrated. A controlled component is developed to enable users to create new chat rooms, ensuring efficient management and handling of room creation within the chat application.', 'A visual indicator is added to highlight the currently active room, enhancing user experience and facilitating navigation.', 'The use of componentDidUpdate to trigger automatic scrolling when near the bottom of the chat window is described. The componentDidUpdate method is utilized to trigger automatic scrolling when near the bottom of the chat window, enhancing user experience and preventing unnecessary scrolling interruptions.', 'Automatic scrolling to the bottom is implemented to ensure new messages are immediately visible, improving the user interaction.', 'The chapter explains the usage of the component lifecycle method componentDidMount to scroll to the bottom of a chat window. The method componentDidMount is used to automatically scroll to the bottom of the chat window, ensuring a user-friendly chat experience.', 'The rooms are sorted in ascending order based on their IDs to ensure proper organization and management.']}, {'end': 5688.392, 'segs': [{'end': 5084.491, 'src': 'embed', 'start': 5035.519, 'weight': 0, 'content': [{'end': 5044.927, 'text': 'and how you very easily can swap around on these and turn this chat application into exactly the type of application you want layout wise.', 'start': 5035.519, 'duration': 9.408}, {'end': 5050.119, 'text': 'So here is our code for creating the grid.', 'start': 5046.576, 'duration': 3.543}, {'end': 5054.362, 'text': 'First to display grid, setting the height to 100%.', 'start': 5051.099, 'duration': 3.263}, {'end': 5061.147, 'text': "And we're then defining some columns and some rows, and then template areas.", 'start': 5054.362, 'duration': 6.785}, {'end': 5072.035, 'text': "Before we jump into exactly what these mean, let's see what it does actually, because what then happens is that CSS splits the entire div,", 'start': 5061.667, 'duration': 10.368}, {'end': 5073.797, 'text': 'which is the app.', 'start': 5072.035, 'duration': 1.762}, {'end': 5076.523, 'text': 'div here traps our entire application.', 'start': 5073.797, 'duration': 2.726}, {'end': 5080.471, 'text': 'it splits it into columns and rows and basically turns it into a grid.', 'start': 5076.523, 'duration': 3.948}, {'end': 5084.491, 'text': 'And as you can see, we have six columns and six rows.', 'start': 5081.209, 'duration': 3.282}], 'summary': 'The code creates a grid layout with 6 columns and 6 rows for a chat application.', 'duration': 48.972, 'max_score': 5035.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw5035519.jpg'}, {'end': 5369.202, 'src': 'embed', 'start': 5342.663, 'weight': 3, 'content': [{'end': 5348.632, 'text': "And then in the next lecture, we're going to change the theme as well, meaning the colors of the application.", 'start': 5342.663, 'duration': 5.969}, {'end': 5349.914, 'text': "So I'll see you there.", 'start': 5349.333, 'duration': 0.581}, {'end': 5361.138, 'text': "Hey, in this lecture, we're going to have a look at CSS variables, which I'm using to set the colors for the chat room.", 'start': 5355.475, 'duration': 5.663}, {'end': 5365.38, 'text': "And if you haven't seen CSS variables before, they work like this.", 'start': 5361.878, 'duration': 3.502}, {'end': 5369.202, 'text': 'So first, you need to define the scope of your variables.', 'start': 5366.1, 'duration': 3.102}], 'summary': 'Next lecture: changing application colors using css variables for chat room.', 'duration': 26.539, 'max_score': 5342.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw5342663.jpg'}, {'end': 5490.403, 'src': 'embed', 'start': 5468.345, 'weight': 4, 'content': [{'end': 5477.313, 'text': 'And since they are used all over the place, here and here and here and here, it completely changes the feeling of the app.', 'start': 5468.345, 'duration': 8.968}, {'end': 5483.299, 'text': 'So what I want you to do now is go online and find color palette you like,', 'start': 5478.277, 'duration': 5.022}, {'end': 5488.222, 'text': 'try and swap out these here so that you get a chat app which really matches you as a person.', 'start': 5483.299, 'duration': 4.923}, {'end': 5490.403, 'text': "However, don't do it in this.", 'start': 5488.902, 'duration': 1.501}], 'summary': "Improving the app's color scheme to match the user's preference and personality is suggested.", 'duration': 22.058, 'max_score': 5468.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw5468345.jpg'}, {'end': 5583.481, 'src': 'embed', 'start': 5557.901, 'weight': 5, 'content': [{'end': 5563.005, 'text': "It's voluntarily something you should do if you want to continue diving into how to create awesome chat applications.", 'start': 5557.901, 'duration': 5.104}, {'end': 5570.309, 'text': 'Because what would really enhance the user experience of this app is if you added an online users component,', 'start': 5563.585, 'duration': 6.724}, {'end': 5578.595, 'text': 'meaning displaying which users are online in the room at any given time and also typing indicators to see if someone else are typing in that room.', 'start': 5570.309, 'duration': 8.286}, {'end': 5581.52, 'text': "And I'm going to point you towards how to solve these.", 'start': 5579.68, 'duration': 1.84}, {'end': 5583.481, 'text': "They'll not give you the entire solution.", 'start': 5581.961, 'duration': 1.52}], 'summary': 'Enhance user experience by adding online users component and typing indicators to the chat app.', 'duration': 25.58, 'max_score': 5557.901, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw5557901.jpg'}], 'start': 4989.758, 'title': 'Customizing chat app with css grid and changing app colors with css variables', 'summary': 'Discusses utilizing css grid to customize a chat app layout with 6 columns and 6 rows, and grid template areas, while also explaining how to use css variables to change app colors, encouraging customization and addition of new features.', 'chapters': [{'end': 5342.443, 'start': 4989.758, 'title': 'Customizing chat app with css grid', 'summary': 'Discusses how to use css grid to customize a chat app layout, utilizing 6 columns and 6 rows, along with grid template areas to position components, enabling easy layout modifications.', 'duration': 352.685, 'highlights': ['The chapter explains the use of CSS Grid to layout the chat application, utilizing 6 columns and 6 rows. The CSS Grid splits the entire div into 6 columns and 6 rows, creating a grid layout for the chat application.', "It discusses the use of grid template areas to position components within the grid layout. The grid template areas are used to visually represent the layout and position components within the grid, enabling easy modifications of the chat app's layout.", 'It showcases the ease of swapping and rearranging components using CSS Grid to create the desired layout for the chat app. The demonstration highlights the simplicity of rearranging components within the grid layout to achieve the desired chat app layout.']}, {'end': 5688.392, 'start': 5342.663, 'title': 'Changing app colors with css variables', 'summary': 'Explains how to use css variables to change the colors of the application, demonstrating the syntax and application of variables, and encourages the audience to customize the chat app by replacing color palettes and adding new features such as online users component and typing indicators.', 'duration': 345.729, 'highlights': ['Demonstrating the syntax and application of CSS variables, allowing for easy and widespread color changes within the application. The lecturer demonstrates the syntax and application of CSS variables, showcasing how changing just five variables can completely alter the look and feel of the chat app.', 'Encouraging the audience to customize the chat app by replacing color palettes and adding new features such as online users component and typing indicators. The audience is encouraged to find color palettes they like and swap out the variables to create a chat app that matches their preferences. They are also prompted to enhance user experience by adding features such as an online users component and typing indicators.', "Providing guidance on how to add an online users component and typing indicators, suggesting the use of 'this.currentuser' for accessing user information and UI avatars for generating avatars from initials. The lecturer provides guidance on adding an online users component and typing indicators, pointing towards using 'this.currentuser' to access user information and suggesting the use of UI avatars for generating avatars from initials."]}], 'duration': 698.634, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/jFNHerJqvFw/pics/jFNHerJqvFw4989758.jpg', 'highlights': ['The CSS Grid splits the entire div into 6 columns and 6 rows, creating a grid layout for the chat application.', "The grid template areas are used to visually represent the layout and position components within the grid, enabling easy modifications of the chat app's layout.", 'The demonstration highlights the simplicity of rearranging components within the grid layout to achieve the desired chat app layout.', 'The lecturer demonstrates the syntax and application of CSS variables, showcasing how changing just five variables can completely alter the look and feel of the chat app.', 'The audience is encouraged to find color palettes they like and swap out the variables to create a chat app that matches their preferences.', "The lecturer provides guidance on adding an online users component and typing indicators, pointing towards using 'this.currentuser' to access user information and suggesting the use of UI avatars for generating avatars from initials."]}], 'highlights': ['The course includes 17 interactive screencasts for learning how to build a chat application using ReactJS and the chatkit API.', 'Personalization of the chat application is facilitated through the use of CSS variables and CSS grid.', 'The chapter discusses the component architecture of a React app, emphasizing breaking the UI into components and visualizing the hierarchy.', 'The distinction between smart and dumb components is explained, with the app component serving as a smart component handling logic and data.', "The importance of unique key props in React It's essential for each child in an array or iterator to have a unique key prop.", 'Integration of Chatkit API in a React component The process involves installing the Chatkit SDK using NPM, creating a chat manager with the instance locator, and utilizing the component did mount lifecycle method.', 'The process of updating the state using setState to store and render messages from the chatkit API is detailed, including the use of the spread operator to create a new array and avoid modifying the original array.', 'Covers message sending with binding methods and automatic rerender of new messages.', 'Enabling users to subscribe to chat rooms by clicking on the items, resulting in successful messages retrieval from the chatroom.', 'The development of a controlled component for creating new chat rooms is demonstrated. A controlled component is developed to enable users to create new chat rooms, ensuring efficient management and handling of room creation within the chat application.', 'The CSS Grid splits the entire div into 6 columns and 6 rows, creating a grid layout for the chat application.', "The grid template areas are used to visually represent the layout and position components within the grid, enabling easy modifications of the chat app's layout.", 'The demonstration highlights the simplicity of rearranging components within the grid layout to achieve the desired chat app layout.', 'The lecturer demonstrates the syntax and application of CSS variables, showcasing how changing just five variables can completely alter the look and feel of the chat app.']}