title
React JS Crash Course

description
Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more. Code: https://github.com/bradtraversy/react-crash-2021 React Front To Back 2022 Course: https://www.udemy.com/course/react-front-to-back-2022/?referralCode=4A622C7E48DB66154114 💖 Support The Channel! http://www.patreon.com/traversymedia Timestamps: 0:00 - Intro & Slides 12:37 - Create a React app 14:52 - Files & folders 18:54 - App component & JSX 22:39 - Expressions in JSX 23:49 - Creating a component 27:18 - Component Props 28:50 - PropTypes 30:42 - Styling 34:17 - Button Component 37:46 - Events 40:18 - Tasks Component 41:03 - Create a list with .map() 43:07 - State & useState Hook 44:55 - Global state 46:52 - Task Component 49:30 - Icons with react-icons 51:41 - Delete task & prop drilling 55:50 - Optional message if no tasks 56:58 - Toggle reminder & conditional styling 1:03:13 - Add Task Form 1:06:16 - Form input state (controlled components) 1:09:18 - Add task submit 1:14:36 - showAddTask state 1:15:58 - Button toggle 1:19:33 - Build for production 1:21:51 - JSON Server 1:25:53 - useEffect Hook & Fetch tasks from server 1:30:13 - Delete task from server 1:31:51 - Add task to server 1:35:15 - Toggle reminder on server 1:39:15 - Routing, footer & about

detail
{'title': 'React JS Crash Course', 'heatmap': [{'end': 914.718, 'start': 847.888, 'weight': 0.751}, {'end': 1243.478, 'start': 1168.292, 'weight': 0.846}, {'end': 1566.783, 'start': 1497.853, 'weight': 1}, {'end': 1698.419, 'start': 1631.562, 'weight': 0.797}, {'end': 2025.18, 'start': 1956.054, 'weight': 0.773}, {'end': 2488.68, 'start': 2343.323, 'weight': 0.713}, {'end': 2677.121, 'start': 2544.4, 'weight': 0.746}, {'end': 2808.449, 'start': 2738.38, 'weight': 0.71}, {'end': 3268.524, 'start': 3197.429, 'weight': 0.902}, {'end': 4243.38, 'start': 4176.828, 'weight': 0.812}, {'end': 4375.261, 'start': 4307.574, 'weight': 0.82}, {'end': 4639.466, 'start': 4499.93, 'weight': 0.815}, {'end': 4897.682, 'start': 4831.77, 'weight': 0.705}, {'end': 6207.22, 'start': 6135.825, 'weight': 0.739}], 'summary': 'This react js crash course covers core concepts, building a task tracker app, react setup, component-based ui development, event handling, state management, form components, dynamic interfaces, routing with react router dom, and emphasizes continued learning for mastering react.', 'chapters': [{'end': 423.414, 'segs': [{'end': 110.896, 'src': 'embed', 'start': 85.834, 'weight': 0, 'content': [{'end': 93.099, 'text': "With React, you build what's called a single page application or a spa, where you have a single HTML page, and then all of your routing.", 'start': 85.834, 'duration': 7.265}, {'end': 99.443, 'text': "all of that stuff is done through React, which then compiles to a JavaScript bundle that's loaded by the browser.", 'start': 93.099, 'duration': 6.344}, {'end': 103.106, 'text': 'So it makes for really fast and interactive interfaces.', 'start': 99.783, 'duration': 3.323}, {'end': 110.896, 'text': "Now, even though React is a front end framework, so you can't directly, for instance, communicate with your database,", 'start': 103.726, 'duration': 7.17}], 'summary': 'React allows building fast single page applications with all routing and compilation to javascript bundle.', 'duration': 25.062, 'max_score': 85.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv885834.jpg'}, {'end': 291.604, 'src': 'embed', 'start': 246.607, 'weight': 1, 'content': [{'end': 253.97, 'text': "Now, if you've tried to build a large dynamic interface using JavaScript, vanilla JavaScript, it can get really messy.", 'start': 246.607, 'duration': 7.363}, {'end': 258.531, 'text': 'Your HTML, your styling and your JavaScript logic are just all over the place.', 'start': 254.13, 'duration': 4.401}, {'end': 261.692, 'text': 'And everyone writes vanilla JavaScript differently.', 'start': 259.072, 'duration': 2.62}, {'end': 266.534, 'text': 'React allows you to build your UI using what are called reusable components.', 'start': 262.493, 'duration': 4.041}, {'end': 273.477, 'text': 'So every part of your user interface is looked at as a dynamic component that can hold its own state and data.', 'start': 266.974, 'duration': 6.503}, {'end': 284.001, 'text': "We also don't have to separate our markup from our logic because React uses something called JSX or JavaScript Syntax Extension.", 'start': 274.797, 'duration': 9.204}, {'end': 288.123, 'text': 'And this allows us to basically write dynamic HTML.', 'start': 284.561, 'duration': 3.562}, {'end': 291.604, 'text': "It's actually JavaScript, but it's formatted like HTML.", 'start': 288.683, 'duration': 2.921}], 'summary': 'React simplifies ui development with reusable components and jsx, reducing messy code and promoting consistency.', 'duration': 44.997, 'max_score': 246.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8246607.jpg'}, {'end': 356.197, 'src': 'embed', 'start': 328.083, 'weight': 2, 'content': [{'end': 331.845, 'text': 'So this makes things much more faster, more dynamic and interactive.', 'start': 328.083, 'duration': 3.762}, {'end': 334.846, 'text': 'React also has performance and testing benefits.', 'start': 332.505, 'duration': 2.341}, {'end': 339.289, 'text': "Another huge reason to learn React is it's very big in the industry right now.", 'start': 335.527, 'duration': 3.762}, {'end': 341.43, 'text': 'Just by the way, it structures everything.', 'start': 339.669, 'duration': 1.761}, {'end': 347.813, 'text': 'it makes it much easier to work on projects with teams rather than just having, you know, a bunch of jumbled JavaScript.', 'start': 341.43, 'duration': 6.383}, {'end': 352.175, 'text': 'So managing data is also really easy with one way data binding.', 'start': 348.513, 'duration': 3.662}, {'end': 356.197, 'text': "All the data in your state is immutable, meaning you can't mutate it directly.", 'start': 352.735, 'duration': 3.462}], 'summary': 'React offers faster, dynamic, and interactive development, with performance and testing benefits, and is widely adopted in the industry.', 'duration': 28.114, 'max_score': 328.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8328083.jpg'}, {'end': 398.237, 'src': 'embed', 'start': 371.145, 'weight': 4, 'content': [{'end': 377.146, 'text': 'This can vary depending on on person to person, but generally you want to have a good handle on JavaScript.', 'start': 371.145, 'duration': 6.001}, {'end': 380.847, 'text': "You don't want to go from learning HTML and CSS and then jump right into react.", 'start': 377.186, 'duration': 3.661}, {'end': 386.609, 'text': 'You should know all the fundamentals of JavaScript, including things like data types, variables, functions, loops, etc.', 'start': 381.167, 'duration': 5.442}, {'end': 394.794, 'text': 'in react and javascript in general, you work with a lot of asynchronous code, so you should be familiar with things like promises.', 'start': 387.449, 'duration': 7.345}, {'end': 398.237, 'text': 'array methods such as foreach, map, filter, reduce.', 'start': 394.794, 'duration': 3.443}], 'summary': 'To work with react, have a strong grasp of javascript fundamentals, including data types, variables, functions, loops, and asynchronous code like promises. familiarity with array methods such as foreach, map, filter, and reduce is essential.', 'duration': 27.092, 'max_score': 371.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8371145.jpg'}], 'start': 7.318, 'title': '2021 react crash course', 'summary': 'Covers core concepts and fundamentals of react, building a task tracker application, using react hooks, dealing with json server, explaining react as a front end library/framework, reasons for using react, and prerequisites for learning react.', 'chapters': [{'end': 423.414, 'start': 7.318, 'title': '2021 react crash course', 'summary': 'Covers the core concepts and fundamentals of react, building a task tracker application, using react hooks, dealing with json server, explaining react as a front end library/framework, reasons for using react, and prerequisites for learning react.', 'duration': 416.096, 'highlights': ['React allows building single page applications, providing fast and interactive interfaces, and can be combined with other technologies for creating full stack applications. React enables building single page applications, offering fast and interactive interfaces, which can be combined with other technologies to create full stack applications.', 'React is used to structure the view layer of applications, helping in building large dynamic interfaces using reusable components. React is used to structure the view layer of applications, facilitating the building of large dynamic interfaces using reusable components.', 'Prerequisites for learning React include a good understanding of JavaScript, including data types, variables, functions, loops, asynchronous code, array methods, and the fetch API. Prerequisites for learning React include a good understanding of JavaScript, including data types, variables, functions, loops, asynchronous code, array methods, and the fetch API.', "React's popularity and industry relevance make it beneficial for working on projects with teams, and it provides performance and testing benefits. React's popularity and industry relevance make it beneficial for working on projects with teams, and it provides performance and testing benefits.", 'React uses JSX for writing dynamic HTML, and its apps are interactive due to the virtual DOM, which allows updating parts of the page without reloading it. React uses JSX for writing dynamic HTML, and its apps are interactive due to the virtual DOM, which allows updating parts of the page without reloading it.']}], 'duration': 416.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv87318.jpg', 'highlights': ['React allows building single page applications, providing fast and interactive interfaces, and can be combined with other technologies for creating full stack applications.', 'React is used to structure the view layer of applications, helping in building large dynamic interfaces using reusable components.', "React's popularity and industry relevance make it beneficial for working on projects with teams, and it provides performance and testing benefits.", 'React uses JSX for writing dynamic HTML, and its apps are interactive due to the virtual DOM, which allows updating parts of the page without reloading it.', 'Prerequisites for learning React include a good understanding of JavaScript, including data types, variables, functions, loops, asynchronous code, array methods, and the fetch API.']}, {'end': 725.575, 'segs': [{'end': 450.91, 'src': 'embed', 'start': 424.134, 'weight': 0, 'content': [{'end': 430.758, 'text': "So as I said, with reactant in pretty much any front end framework, you're going to be looking at your user interface as a bunch of components.", 'start': 424.134, 'duration': 6.624}, {'end': 432.619, 'text': "So here's the app will be building.", 'start': 431.199, 'duration': 1.42}, {'end': 434.3, 'text': "It's called just called Task Tracker.", 'start': 432.679, 'duration': 1.621}, {'end': 435.061, 'text': "It's pretty simple.", 'start': 434.34, 'duration': 0.721}, {'end': 437.002, 'text': 'You just add a task with a day and a time.', 'start': 435.101, 'duration': 1.901}, {'end': 443.626, 'text': "You can set a reminder and you'll be able to double click and set the reminder to either true or false, which will show this border.", 'start': 437.042, 'duration': 6.584}, {'end': 445.286, 'text': 'and we can delete and so on.', 'start': 443.985, 'duration': 1.301}, {'end': 450.91, 'text': 'Now over here I just have outlined or created a border around each of the components.', 'start': 445.766, 'duration': 5.144}], 'summary': 'Using reactant in front-end framework to build a simple task tracker app with reminder and delete functionalities.', 'duration': 26.776, 'max_score': 424.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8424134.jpg'}, {'end': 524.022, 'src': 'embed', 'start': 499.088, 'weight': 2, 'content': [{'end': 504.25, 'text': "So that's kind of the mind frame that you want to be in when you're working with react or even angular view.", 'start': 499.088, 'duration': 5.162}, {'end': 512.395, 'text': 'Now, as far as how we create components in React, they can be created with both classes and functions or functions, I should say.', 'start': 504.932, 'duration': 7.463}, {'end': 519.7, 'text': "Now, we'll be focusing mostly on function components with hooks, which seems to be kind of the more common way to do things these days.", 'start': 512.836, 'duration': 6.864}, {'end': 524.022, 'text': 'In my 2019 React crash course, we focused on classes.', 'start': 520.2, 'duration': 3.822}], 'summary': 'React components can be created with classes or functions, with a shift towards function components with hooks being more common.', 'duration': 24.934, 'max_score': 499.088, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8499088.jpg'}, {'end': 712.841, 'src': 'embed', 'start': 685.105, 'weight': 1, 'content': [{'end': 690.009, 'text': 'which allow us to use state and other lifecycle functions within function components.', 'start': 685.105, 'duration': 4.904}, {'end': 692.731, 'text': "And that's what we'll be focusing on in this crash course.", 'start': 690.389, 'duration': 2.342}, {'end': 699.754, 'text': 'Specifically, the use state hook, which allows us to return a stateful value along with a function to update it.', 'start': 693.571, 'duration': 6.183}, {'end': 701.495, 'text': "There's other hooks as well.", 'start': 700.395, 'duration': 1.1}, {'end': 705.197, 'text': 'Use effect is used to perform side effects in function components.', 'start': 701.655, 'duration': 3.542}, {'end': 707.078, 'text': "We'll be using that towards the end.", 'start': 705.537, 'duration': 1.541}, {'end': 712.841, 'text': 'One of the biggest uses for use effect is to make HTTP requests when the page loads.', 'start': 708.079, 'duration': 4.762}], 'summary': 'Focus on the use state hook in function components, including its ability to return a stateful value and update function. also, use effect for performing side effects, such as making http requests when the page loads.', 'duration': 27.736, 'max_score': 685.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8685105.jpg'}], 'start': 424.134, 'title': 'Component-based ui development and react components and state', 'summary': 'Discusses component usage in front end frameworks like react, focusing on creating a task tracker app with features like adding tasks, setting reminders, and deleting tasks. it also covers react components and state basics, emphasizing function components with hooks and introducing hooks in react 16.8, including use state hook and use effect hook, while touching on app state management and the option of using redux.', 'chapters': [{'end': 455.934, 'start': 424.134, 'title': 'Component-based ui development', 'summary': 'Discusses the use of components in front end frameworks such as react, illustrating the creation of a simple task tracker app with features like adding tasks, setting reminders, and deleting tasks.', 'duration': 31.8, 'highlights': ['The chapter emphasizes the use of components in front end frameworks like React, demonstrating the creation of a Task Tracker app with basic functionalities such as adding tasks, setting reminders, and deleting tasks.', 'The app allows users to add tasks with a specified day and time, set reminders, and modify the reminder status by double-clicking, showcasing a practical demonstration of component-based UI development.', 'The demonstration includes the use of borders to outline the components, providing a visual representation of the component structure and layout.']}, {'end': 725.575, 'start': 456.354, 'title': 'React components and state', 'summary': 'Covers the basics of react components and state, emphasizing the use of function components with hooks, and the introduction of hooks in react version 16.8, including the use state hook and use effect hook for performing side effects. it also touches on the management of app state and the option of using a third-party state manager like redux.', 'duration': 269.221, 'highlights': ['The chapter covers the basics of React components and state, emphasizing the use of function components with hooks. It explains that function components with hooks seem to be the more common way to create components in React, focusing mostly on function components with hooks.', 'The introduction of hooks in React version 16.8, including the use state hook and use effect hook for performing side effects. It mentions the introduction of hooks in React version 16.8, specifically highlighting the use state hook for returning a stateful value along with a function to update it, and the use effect hook for performing side effects in function components.', 'The management of app state and the option of using a third-party state manager like Redux. It discusses the management of app state and the difficulty in managing app level state, mentioning options such as using the context API built into React or a third-party state manager like Redux.']}], 'duration': 301.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8424134.jpg', 'highlights': ['The chapter emphasizes the use of components in front end frameworks like React, demonstrating the creation of a Task Tracker app with basic functionalities such as adding tasks, setting reminders, and deleting tasks.', 'The introduction of hooks in React version 16.8, including the use state hook and use effect hook for performing side effects. It mentions the introduction of hooks in React version 16.8, specifically highlighting the use state hook for returning a stateful value along with a function to update it, and the use effect hook for performing side effects in function components.', 'The chapter covers the basics of React components and state, emphasizing the use of function components with hooks. It explains that function components with hooks seem to be the more common way to create components in React, focusing mostly on function components with hooks.']}, {'end': 1419.262, 'segs': [{'end': 804.53, 'src': 'embed', 'start': 741.851, 'weight': 0, 'content': [{'end': 744.073, 'text': "which we're going to use as kind of a fake back end.", 'start': 741.851, 'duration': 2.222}, {'end': 752.06, 'text': 'So you can see how React would work if you were building a full stack application and making requests to a back end or an API.', 'start': 744.173, 'duration': 7.887}, {'end': 753.061, 'text': 'All right.', 'start': 752.221, 'duration': 0.84}, {'end': 754.342, 'text': 'So enough with the slides.', 'start': 753.161, 'duration': 1.181}, {'end': 756.965, 'text': "Let's go ahead and jump in and let's get started with React.", 'start': 754.362, 'duration': 2.603}, {'end': 757.848, 'text': 'All right.', 'start': 757.588, 'duration': 0.26}, {'end': 759.148, 'text': "So we're going to get started now.", 'start': 757.868, 'duration': 1.28}, {'end': 763.45, 'text': "There's a bunch of ways to to basically start a react application.", 'start': 759.228, 'duration': 4.222}, {'end': 770.052, 'text': 'One of the most common and easiest ways is using a program called Create React App, which is a CLI.', 'start': 763.51, 'duration': 6.542}, {'end': 777.914, 'text': "It's a command line interface tool to just easily get up and running and set up a boilerplate with all the files and folders and packages that you need.", 'start': 770.072, 'duration': 7.842}, {'end': 780.195, 'text': 'it also has a development server.', 'start': 778.314, 'duration': 1.881}, {'end': 783.677, 'text': 'it has a way to build out your static assets to deploy.', 'start': 780.195, 'duration': 3.482}, {'end': 790.061, 'text': 'so to install this, we need to use npm, which is the node package manager, and in order to use that,', 'start': 783.677, 'duration': 6.384}, {'end': 792.582, 'text': 'you have to have node.js installed on your system.', 'start': 790.061, 'duration': 2.521}, {'end': 794.423, 'text': "i'm sure that a lot of you already do.", 'start': 792.582, 'duration': 1.841}, {'end': 798.165, 'text': "if you don't just go to nodejs.org, download it, install it.", 'start': 794.423, 'duration': 3.742}, {'end': 799.246, 'text': "doesn't matter if you're on.", 'start': 798.165, 'duration': 1.081}, {'end': 800.787, 'text': 'you know windows, mac or linux.', 'start': 799.246, 'duration': 1.541}, {'end': 804.53, 'text': 'Another thing I would suggest installing is the React DevTools.', 'start': 801.708, 'duration': 2.822}], 'summary': 'Introduction to using create react app for building a full stack application and making requests to a back end or an api, with emphasis on installation using npm and node.js.', 'duration': 62.679, 'max_score': 741.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8741851.jpg'}, {'end': 940.405, 'src': 'heatmap', 'start': 847.888, 'weight': 3, 'content': [{'end': 859.595, 'text': "Actually, let's call it React dash task dash tracker because I will be doing a Vue.js and Angular course and we'll be doing the same application.", 'start': 847.888, 'duration': 11.707}, {'end': 865.305, 'text': 'And this is just going to set up all of the files and folders that we need.', 'start': 860.742, 'duration': 4.563}, {'end': 867.947, 'text': "It's going to install all the packages that we need and so on.", 'start': 865.345, 'duration': 2.602}, {'end': 869.768, 'text': "Okay, so that's all set.", 'start': 868.667, 'duration': 1.101}, {'end': 872.529, 'text': 'Now you just want to open that folder up in your text editor.', 'start': 869.868, 'duration': 2.661}, {'end': 880.214, 'text': "I'm using VS Code, so I'm going to cd into what I call it, react-tasktracker.", 'start': 872.549, 'duration': 7.665}, {'end': 885.618, 'text': "And I'm going to run code and then dot, which just means I want to open VS Code in the current folder.", 'start': 880.555, 'duration': 5.063}, {'end': 886.964, 'text': 'All right.', 'start': 886.684, 'duration': 0.28}, {'end': 889.986, 'text': 'So now over here you can see all the files and folders.', 'start': 887.024, 'duration': 2.962}, {'end': 891.626, 'text': "I'm just going to make this bigger for now.", 'start': 890.006, 'duration': 1.62}, {'end': 893.647, 'text': 'And I just want to go over some of this.', 'start': 892.367, 'duration': 1.28}, {'end': 899.33, 'text': 'So package.json, if we look at the dependencies that are included, of course, we have the React library.', 'start': 893.687, 'duration': 5.643}, {'end': 906.774, 'text': 'We have React DOM, which is responsible for rendering our React application out to the document object model to the browser.', 'start': 899.831, 'duration': 6.943}, {'end': 914.718, 'text': "If you were to use, let's say, React Native, you'd have the same React library, but you would also have React Native instead of React DOM.", 'start': 907.334, 'duration': 7.384}, {'end': 924.045, 'text': 'OK, React scripts comes with, you know, the development server, the build tool and so on, everything that that create React app offers.', 'start': 915.376, 'duration': 8.669}, {'end': 928.19, 'text': "And then you have some testing libraries, which we're not going to get into in this crash course.", 'start': 924.466, 'duration': 3.724}, {'end': 931.759, 'text': 'Down here we have our start script.', 'start': 929.157, 'duration': 2.602}, {'end': 936.443, 'text': 'So NPM start will run the development server on localhost 3000.', 'start': 931.879, 'duration': 4.564}, {'end': 940.405, 'text': 'NPM run build will build out our static assets for deployment.', 'start': 936.443, 'duration': 3.962}], 'summary': 'Setting up react task tracker for vue.js and angular course, including package installation and folder structure review.', 'duration': 46.718, 'max_score': 847.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8847888.jpg'}, {'end': 1115.81, 'src': 'embed', 'start': 1082.47, 'weight': 5, 'content': [{'end': 1084.971, 'text': 'So remember, I said to think of everything in components.', 'start': 1082.47, 'duration': 2.501}, {'end': 1087.193, 'text': 'Well, app is the root app.', 'start': 1085.392, 'duration': 1.801}, {'end': 1088.674, 'text': "I'm sorry, the root component.", 'start': 1087.393, 'duration': 1.281}, {'end': 1098.981, 'text': 'So every component that we create, like our header, our events, footer, the ad form, all that stuff is going to be in this main root app component.', 'start': 1089.034, 'duration': 9.947}, {'end': 1103.484, 'text': "And then that is what's being put into that div right here.", 'start': 1099.741, 'duration': 3.743}, {'end': 1107.706, 'text': 'OK, so I just wanted to kind of explain that now.', 'start': 1104.284, 'duration': 3.422}, {'end': 1115.81, 'text': "Let's actually just want to change the title here, change it to task tracker.", 'start': 1108.746, 'duration': 7.064}], 'summary': 'Components define main root app component with components like header, events, footer, and ad form.', 'duration': 33.34, 'max_score': 1082.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv81082470.jpg'}, {'end': 1243.478, 'src': 'heatmap', 'start': 1168.292, 'weight': 0.846, 'content': [{'end': 1175.996, 'text': 'i might give you an example of that, but if we look in the return of this function, it looks like html, but this is actually jsx,', 'start': 1168.292, 'duration': 7.704}, {'end': 1179.699, 'text': "javascript syntax extension, And there's a few differences.", 'start': 1175.996, 'duration': 3.703}, {'end': 1181.701, 'text': 'For instance, you might notice class name.', 'start': 1179.779, 'duration': 1.922}, {'end': 1184.644, 'text': "We can't use the class attribute to assign a class.", 'start': 1182.041, 'duration': 2.603}, {'end': 1185.805, 'text': 'We use class name.', 'start': 1184.684, 'duration': 1.121}, {'end': 1187.066, 'text': 'Same with four.', 'start': 1186.225, 'duration': 0.841}, {'end': 1190.75, 'text': "If you have a label with a four attribute, you don't want to use foreign react.", 'start': 1187.226, 'duration': 3.524}, {'end': 1193.392, 'text': 'You would use HTML for like that.', 'start': 1190.79, 'duration': 2.602}, {'end': 1194.393, 'text': 'All right.', 'start': 1194.073, 'duration': 0.32}, {'end': 1195.814, 'text': 'So just keep that in mind.', 'start': 1194.513, 'duration': 1.301}, {'end': 1197.654, 'text': 'You can.', 'start': 1197.294, 'duration': 0.36}, {'end': 1199.075, 'text': 'This is also dynamic.', 'start': 1197.674, 'duration': 1.401}, {'end': 1202.116, 'text': 'We can have JavaScript expressions and variables here.', 'start': 1199.115, 'duration': 3.001}, {'end': 1205.477, 'text': "We're bringing in logo, adding it to the source of the image.", 'start': 1202.136, 'duration': 3.341}, {'end': 1210.079, 'text': "What I'm going to do, though, is just get rid of everything that's inside of this dev.", 'start': 1206.337, 'duration': 3.742}, {'end': 1216.901, 'text': "And for now, let's just put if you want Emmett to work in here, you can see it's not working right now.", 'start': 1211.279, 'duration': 5.622}, {'end': 1218.342, 'text': 'It might for you.', 'start': 1217.581, 'duration': 0.761}, {'end': 1221.603, 'text': "If it doesn't click where it says JavaScript, you can change that.", 'start': 1218.422, 'duration': 3.181}, {'end': 1225.653, 'text': 'to JavaScript react and then it should work.', 'start': 1222.472, 'duration': 3.181}, {'end': 1230.374, 'text': "So let's just say hello from react for now.", 'start': 1226.193, 'duration': 4.181}, {'end': 1243.478, 'text': "I'm going to save that and this will auto reload and we don't need to bring in the logo and app CSS and we also don't need some of these files anymore.", 'start': 1230.434, 'duration': 13.044}], 'summary': 'Jsx syntax and its differences, dynamic with javascript expressions, and adjusting file dependencies in a react project.', 'duration': 75.186, 'max_score': 1168.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv81168292.jpg'}], 'start': 725.595, 'title': 'React setup and dependencies', 'summary': "Covers setting up a react application using create react app, including installation of node.js, npm, and react devtools, use of json server, react's dependencies in package.json, build process with npm commands, and the structure of the root app component and jsx syntax.", 'chapters': [{'end': 893.647, 'start': 725.595, 'title': 'Getting started with react', 'summary': 'Introduces the process of setting up a react application using create react app, including the installation of necessary tools like node.js, npm, and react devtools, as well as the use of json server for simulating a back end, with a focus on building a user interface and making requests to the back end or an api.', 'duration': 168.052, 'highlights': ['The chapter introduces the process of setting up a React application using Create React App Create React App is a CLI tool that provides an easy way to set up a React application with all necessary files, folders, and packages.', 'Installation of necessary tools like Node.js, npm, and React DevTools Node.js and npm are required for installing Create React App and managing packages, while React DevTools provide visibility into the components, props, and state of the React application.', 'Use of JSON server for simulating a back end JSON server is employed as a fake back end to demonstrate how React works when making requests to a back end or an API in a full stack application.']}, {'end': 1419.262, 'start': 893.687, 'title': 'React dependencies and build process', 'summary': 'Explains the dependencies in package.json including react, react dom, and react scripts, and the build process involving npm start, npm run build, and the usage of index.html and index.js. it also covers the structure of the root app component and jsx syntax in react.', 'duration': 525.575, 'highlights': ['The chapter explains the dependencies in package.json including React, React DOM, and React scripts. The package.json file includes dependencies like React library, React DOM for rendering the React application, and React scripts for development server and build tools.', 'The chapter covers the build process involving NPM start, NPM run build, and the usage of index.html and index.js. The start script NPM start runs the development server on localhost 3000, while NPM run build builds static assets for deployment. The index.html serves as the single page application, and index.js is the entry point for React.', 'The chapter explains the structure of the root app component and JSX syntax in React. The root app component is the main component containing all other components like header, events, footer, and ad form. It also demonstrates the usage of JSX syntax in React for dynamic UI rendering.']}], 'duration': 693.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv8725595.jpg', 'highlights': ['Create React App is a CLI tool for setting up a React application with necessary files and packages.', 'Node.js, npm, and React DevTools are essential for installing Create React App and managing packages.', "JSON server is used to simulate a back end for demonstrating React's interaction with a full stack application.", 'Package.json includes dependencies like React, React DOM, and React scripts for building a React application.', 'NPM start runs the development server, NPM run build builds static assets, and index.html serves as the single page application.', 'The root app component in React contains other components like header, events, footer, and ad form, using JSX syntax for dynamic UI rendering.']}, {'end': 2273.252, 'segs': [{'end': 1483.84, 'src': 'embed', 'start': 1420.403, 'weight': 0, 'content': [{'end': 1423.464, 'text': "And now we're going to work on just creating our own components.", 'start': 1420.403, 'duration': 3.061}, {'end': 1428.645, 'text': 'Remember, I said to think of your your app or your user interface as just a bunch of components.', 'start': 1423.904, 'duration': 4.741}, {'end': 1430.266, 'text': "So we're going to start with the header.", 'start': 1428.665, 'duration': 1.601}, {'end': 1434.567, 'text': "I'm going to go over to source my source folder, create a folder called components.", 'start': 1430.666, 'duration': 3.901}, {'end': 1438.069, 'text': "And this is where we're going to create all of our components.", 'start': 1435.828, 'duration': 2.241}, {'end': 1440.229, 'text': "The first one we're going to call.", 'start': 1438.109, 'duration': 2.12}, {'end': 1444.93, 'text': "We're going to call this header dot J.S.", 'start': 1440.249, 'duration': 4.681}, {'end': 1446.971, 'text': "uppercase Oops, didn't mean to do that.", 'start': 1445.31, 'duration': 1.661}, {'end': 1448.271, 'text': 'Uppercase H.', 'start': 1447.391, 'duration': 0.88}, {'end': 1450.632, 'text': "That's just the convention for components.", 'start': 1448.271, 'duration': 2.361}, {'end': 1453.392, 'text': 'And this could be a class or a function.', 'start': 1451.272, 'duration': 2.12}, {'end': 1459.114, 'text': "And there's an extension for VS code that I'd highly recommend if you're using it, if you're using VS code.", 'start': 1453.613, 'duration': 5.501}, {'end': 1468.296, 'text': "And that's ES7 React, Redux, Graph, QL React Native Snippets, which has a bunch of snippets for things like imports, exports,", 'start': 1459.634, 'duration': 8.662}, {'end': 1471.257, 'text': 'even like loops and just regular JavaScript stuff.', 'start': 1468.296, 'duration': 2.961}, {'end': 1475.658, 'text': 'But it also has these these snippets for components.', 'start': 1471.657, 'duration': 4.001}, {'end': 1478.739, 'text': 'So RCC will create a class based component.', 'start': 1475.878, 'duration': 2.861}, {'end': 1483.84, 'text': 'RCE will create a class component, but it will export down at the bottom here.', 'start': 1479.279, 'duration': 4.561}], 'summary': 'Creating components for user interface with conventions and vs code extension for react components.', 'duration': 63.437, 'max_score': 1420.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv81420403.jpg'}, {'end': 1566.783, 'src': 'heatmap', 'start': 1497.853, 'weight': 1, 'content': [{'end': 1503.498, 'text': "So what I'll do is just do R-A, with that extension installed, R-A-F-C-E, enter.", 'start': 1497.853, 'duration': 5.645}, {'end': 1509.492, 'text': 'And that creates just a boilerplate of a component of an arrow function component.', 'start': 1504.728, 'duration': 4.764}, {'end': 1515.997, 'text': "Now, this here, it's importing react because this used to be required for every react component.", 'start': 1509.892, 'duration': 6.105}, {'end': 1519.24, 'text': "However, we don't need this anymore, so we can actually get rid of it.", 'start': 1516.298, 'duration': 2.942}, {'end': 1526.686, 'text': "Now, as far as what I want to output for the header, I'm going to use a header tag as my just parent element.", 'start': 1520.461, 'duration': 6.225}, {'end': 1532.211, 'text': "And then we'll put in each one in here and we'll say task tracker.", 'start': 1527.147, 'duration': 5.064}, {'end': 1537.606, 'text': "Now, if I save it, nothing's going to happen because we just created the component.", 'start': 1533.905, 'duration': 3.701}, {'end': 1540.447, 'text': "We didn't put it into our application.", 'start': 1537.646, 'duration': 2.801}, {'end': 1550.869, 'text': "So back in our app JS, let's go ahead and import header from and we want to go into dot slash components slash header.", 'start': 1540.547, 'duration': 10.322}, {'end': 1555.39, 'text': 'And we just embed it just like it was like an XML tag.', 'start': 1551.789, 'duration': 3.601}, {'end': 1558.111, 'text': 'So header just like that.', 'start': 1555.43, 'duration': 2.681}, {'end': 1559.351, 'text': 'Save it.', 'start': 1558.991, 'duration': 0.36}, {'end': 1561.979, 'text': 'And now we have task tracker.', 'start': 1560.478, 'duration': 1.501}, {'end': 1566.783, 'text': "Now, just to show you a class based component real quick, I'm just going to comment this out.", 'start': 1562.56, 'duration': 4.223}], 'summary': 'Creating a react component, importing, and embedding into an app.', 'duration': 68.93, 'max_score': 1497.853, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv81497853.jpg'}, {'end': 1698.419, 'src': 'heatmap', 'start': 1631.562, 'weight': 0.797, 'content': [{'end': 1633.243, 'text': "And let's comment this.", 'start': 1631.562, 'duration': 1.681}, {'end': 1636.041, 'text': 'And there we go.', 'start': 1635.32, 'duration': 0.721}, {'end': 1637.461, 'text': 'So now we have our header back.', 'start': 1636.101, 'duration': 1.36}, {'end': 1645.626, 'text': 'Now I want to talk a little bit about props, because you can pass stuff in here like if we want to pass in a title to our header,', 'start': 1638.122, 'duration': 7.504}, {'end': 1647.707, 'text': "and for now we'll just say hello.", 'start': 1645.626, 'duration': 2.081}, {'end': 1651.905, 'text': "Now it's not going to do anything because we're not handling it,", 'start': 1649.363, 'duration': 2.542}, {'end': 1659.07, 'text': 'but we can pass anything we want in to retrieve this prop inside of our component here.', 'start': 1651.905, 'duration': 7.165}, {'end': 1670.778, 'text': "We take in props as as a parameter and then down here let's say we want to replace this static text with our props dot title.", 'start': 1659.73, 'duration': 11.048}, {'end': 1675.462, 'text': "If I save that now we see hello because that's what's being passed in.", 'start': 1671.499, 'duration': 3.963}, {'end': 1678.909, 'text': 'Now we can also have default props.', 'start': 1676.468, 'duration': 2.441}, {'end': 1684.812, 'text': "So if I don't pass anything in here and I save that, that's not going to show anything because there's no title.", 'start': 1678.949, 'duration': 5.863}, {'end': 1698.419, 'text': 'However, I could go below the function, the components, a header dot default props and set that to an object and set the title to task tracker.', 'start': 1685.613, 'duration': 12.806}], 'summary': 'Explained passing and using props in react components.', 'duration': 66.857, 'max_score': 1631.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv81631562.jpg'}, {'end': 1753.033, 'src': 'embed', 'start': 1726.636, 'weight': 3, 'content': [{'end': 1730.377, 'text': "We can just go like that and that's going to give us the same exact result.", 'start': 1726.636, 'duration': 3.741}, {'end': 1737.881, 'text': "Now there's also prop types, which is kind of like a built in type system for your properties.", 'start': 1731.536, 'duration': 6.345}, {'end': 1746.267, 'text': "It's not like it's not something you have to use, but it's something that will will help you out and make your code a little bit more robust.", 'start': 1739.122, 'duration': 7.145}, {'end': 1753.033, 'text': "I'm not going to focus on creating prop types for everything, but I just want to kind of show you how it works.", 'start': 1746.928, 'duration': 6.105}], 'summary': 'Introduction to prop types for robust code, not mandatory but helpful.', 'duration': 26.397, 'max_score': 1726.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv81726636.jpg'}, {'end': 1877.53, 'src': 'embed', 'start': 1849.317, 'weight': 4, 'content': [{'end': 1853.559, 'text': "So one is to just use a style sheet, which is what ultimately we're going to do.", 'start': 1849.317, 'duration': 4.242}, {'end': 1855.34, 'text': "I'm going to use this index CSS.", 'start': 1853.619, 'duration': 1.721}, {'end': 1863.604, 'text': 'I already have some styles prepared, but you can also use something like style components, which is an external package that is really popular.', 'start': 1855.36, 'duration': 8.244}, {'end': 1868.226, 'text': 'You can also use direct CSS in JavaScript.', 'start': 1864.084, 'duration': 4.142}, {'end': 1870.727, 'text': "so i'm going to give you an example of that.", 'start': 1868.766, 'duration': 1.961}, {'end': 1877.53, 'text': 'so this h1 here we could set style and when you use style, you want to use double curly braces.', 'start': 1870.727, 'duration': 6.803}], 'summary': 'Use css stylesheet or style components for styling, with direct css in javascript as an alternative.', 'duration': 28.213, 'max_score': 1849.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv81849317.jpg'}, {'end': 2025.18, 'src': 'heatmap', 'start': 1956.054, 'weight': 0.773, 'content': [{'end': 1958.517, 'text': "Now I'm going to add some CSS.", 'start': 1956.054, 'duration': 2.463}, {'end': 1962.22, 'text': "So this index style sheet, we're going to get rid of that.", 'start': 1959.297, 'duration': 2.923}, {'end': 1968.987, 'text': 'And you can get this code, you can get this whole this whole thing in the GitHub repository in the description.', 'start': 1962.801, 'duration': 6.186}, {'end': 1971.369, 'text': 'So just grab the styling, paste it in.', 'start': 1969.047, 'duration': 2.322}, {'end': 1972.51, 'text': "I'll go through it real quick.", 'start': 1971.409, 'duration': 1.101}, {'end': 1973.331, 'text': "It's pretty simple.", 'start': 1972.57, 'duration': 0.761}, {'end': 1974.792, 'text': "We're using the Poppins font.", 'start': 1973.351, 'duration': 1.441}, {'end': 1976.213, 'text': 'We have a reset.', 'start': 1975.293, 'duration': 0.92}, {'end': 1980.337, 'text': 'The container is going to be 500 pixels wide with a border.', 'start': 1976.594, 'duration': 3.743}, {'end': 1983.279, 'text': 'Header is going to be flex box.', 'start': 1981.138, 'duration': 2.141}, {'end': 1989.342, 'text': "We're going to have a button on the side button classes, button styles, events.", 'start': 1983.299, 'duration': 6.043}, {'end': 1995.204, 'text': 'So our list of events will be styled our form and form control and then our footer.', 'start': 1989.742, 'duration': 5.462}, {'end': 1996.065, 'text': 'So pretty simple.', 'start': 1995.244, 'duration': 0.821}, {'end': 1999.346, 'text': "I'm going to go ahead and save that and it's going to look like this.", 'start': 1996.185, 'duration': 3.161}, {'end': 2002.848, 'text': 'We just make this a little wider like that.', 'start': 1999.686, 'duration': 3.162}, {'end': 2005.469, 'text': 'All right.', 'start': 2005.149, 'duration': 0.32}, {'end': 2009.791, 'text': "So close that up and we shouldn't have to touch the index CSS anymore.", 'start': 2006.069, 'duration': 3.722}, {'end': 2016.075, 'text': "Now the next thing that I'd like to do here is add a button.", 'start': 2011.052, 'duration': 5.023}, {'end': 2025.18, 'text': "So next to the H1 let's put a button here and this is going to say add for now.", 'start': 2016.755, 'duration': 8.425}], 'summary': 'Adding css to the index style sheet, utilizing poppins font, creating a 500-pixel wide container with a border, flex box header, and button styling for events and form controls.', 'duration': 69.126, 'max_score': 1956.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv81956054.jpg'}, {'end': 2202.181, 'src': 'embed', 'start': 2175.921, 'weight': 5, 'content': [{'end': 2182.923, 'text': 'So if we wanted to add other buttons, you know, we could copy this down and this one here, this one here.', 'start': 2175.921, 'duration': 7.002}, {'end': 2195.656, 'text': 'we could say hello one, swan, hello three, and we could change colors blue, read so this is what what I mean by reusable components.', 'start': 2182.923, 'duration': 12.733}, {'end': 2198.618, 'text': "obviously that doesn't look good, but you get the point.", 'start': 2195.656, 'duration': 2.962}, {'end': 2199.139, 'text': 'we can have.', 'start': 2198.618, 'duration': 0.521}, {'end': 2202.181, 'text': 'we can reuse this component with different props.', 'start': 2199.139, 'duration': 3.042}], 'summary': 'Demonstrating the reusability of components for adding buttons with different text and colors.', 'duration': 26.26, 'max_score': 2175.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82175921.jpg'}], 'start': 1420.403, 'title': 'Creating and styling react components', 'summary': "Covers creating components in react, emphasizing the process and initial steps for creating the 'header' component in a source folder named 'components', as well as creating components with snippets, using arrow functions, class components, handling props, default props, prop types, and styling with css in react, including reusable components.", 'chapters': [{'end': 1459.114, 'start': 1420.403, 'title': 'Creating components in react', 'summary': "Covers the process of creating components in react, emphasizing the importance of organizing the app's user interface into components and detailing the initial steps for creating the 'header' component in a source folder named 'components'.", 'duration': 38.711, 'highlights': ["The importance of organizing the app's user interface into components was emphasized, with the process starting by creating a 'header' component in a dedicated 'components' folder in the source directory.", "The recommended convention for naming components in React was highlighted, specifying the use of uppercase letters for the first letter of each component's name."]}, {'end': 2273.252, 'start': 1459.634, 'title': 'React components and styling', 'summary': 'Covers creating react components with snippets, using arrow functions, class components, handling props, default props, prop types, and styling with css in react, including reusable components.', 'duration': 813.618, 'highlights': ['The chapter covers creating React components with snippets, using arrow functions, class components, handling props, default props, prop types, and styling with CSS in React, including reusable components. This is the overarching summary of the chapter, encompassing the main topics discussed.', 'The extension ES7 React provides useful snippets for creating components and regular JavaScript stuff, making development more efficient. The ES7 React extension provides helpful snippets for faster development.', 'The transcript explains the usage of arrow functions for creating clean and efficient components in React. Demonstrates the use of arrow functions for creating clean and efficient components.', 'The discussion covers class components, including importing React, extending components, and using lifecycle methods. Provides insights into creating class components, including importing React, extending components, and using lifecycle methods.', 'The chapter explains handling props, passing props, and using default props with examples, demonstrating the flexibility and customization available in components. Illustrates the handling of props, passing props, and using default props, showcasing the flexibility and customization available in components.', 'The usage of prop types is explained, which helps in creating a built-in type system for properties, making the code more robust and catching errors before they happen. Details the usage of prop types to create a built-in type system for properties, enhancing code robustness and error detection.', 'The chapter discusses styling in React, including the use of style sheets, style components, and direct CSS in JavaScript, showcasing the various approaches available for styling. Explains the different approaches for styling in React, including style sheets, style components, and direct CSS in JavaScript.', 'The concept of reusable components is demonstrated with the creation of a button component, showcasing the ability to pass props for customization and reusability. Demonstrates the creation of a reusable button component, highlighting the ability to pass props for customization and reusability.']}], 'duration': 852.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv81420403.jpg', 'highlights': ['The chapter covers creating React components with snippets, using arrow functions, class components, handling props, default props, prop types, and styling with CSS in React, including reusable components.', "The importance of organizing the app's user interface into components was emphasized, with the process starting by creating a 'header' component in a dedicated 'components' folder in the source directory.", "The recommended convention for naming components in React was highlighted, specifying the use of uppercase letters for the first letter of each component's name.", 'The usage of prop types is explained, which helps in creating a built-in type system for properties, making the code more robust and catching errors before they happen.', 'The chapter discusses styling in React, including the use of style sheets, style components, and direct CSS in JavaScript, showcasing the various approaches available for styling.', 'The concept of reusable components is demonstrated with the creation of a button component, showcasing the ability to pass props for customization and reusability.', 'The extension ES7 React provides useful snippets for creating components and regular JavaScript stuff, making development more efficient.']}, {'end': 2961.789, 'segs': [{'end': 2306.958, 'src': 'embed', 'start': 2273.352, 'weight': 5, 'content': [{'end': 2275.493, 'text': "So let's say I want to have an event on this button.", 'start': 2273.352, 'duration': 2.141}, {'end': 2281.257, 'text': 'I could just add right here, say on click and set that to.', 'start': 2276.014, 'duration': 5.243}, {'end': 2289.986, 'text': 'a function called on click and I could go up here and create that function.', 'start': 2282.341, 'duration': 7.645}, {'end': 2299.233, 'text': 'So const on click and we could do a console log and just say click.', 'start': 2290.066, 'duration': 9.167}, {'end': 2303.956, 'text': "So if I go over here I click you can see it's going to log that down here.", 'start': 2300.113, 'duration': 3.843}, {'end': 2306.958, 'text': 'You can also pass in the event object.', 'start': 2303.976, 'duration': 2.982}], 'summary': "Creating an event on a button with on click function logging 'click'.", 'duration': 33.606, 'max_score': 2273.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82273352.jpg'}, {'end': 2488.68, 'src': 'heatmap', 'start': 2343.323, 'weight': 0.713, 'content': [{'end': 2353.343, 'text': "i'm just putting it here for now and we'll say console log, click All right now this is getting passed in as a prop,", 'start': 2343.323, 'duration': 10.02}, {'end': 2359.805, 'text': 'so in our button we have to catch it here, just like we did with the other ones, and we can get rid of this.', 'start': 2353.343, 'duration': 6.462}, {'end': 2367.348, 'text': "because what's going to happen is this will call this on click and it'll get sent up to the header or wherever you embed this button.", 'start': 2359.805, 'duration': 7.543}, {'end': 2371.609, 'text': 'Now down here in the prop types we could add on click.', 'start': 2367.988, 'duration': 3.621}, {'end': 2376.254, 'text': 'Say we want that as a prop, types dot, funk,', 'start': 2373.152, 'duration': 3.102}, {'end': 2382.559, 'text': "because it's a function and we could say it is required because you're most likely going to want a button to click.", 'start': 2376.254, 'duration': 6.305}, {'end': 2385.361, 'text': "Well, actually, no, we'll get rid of it.", 'start': 2383.759, 'duration': 1.602}, {'end': 2385.981, 'text': "We don't need that.", 'start': 2385.381, 'duration': 0.6}, {'end': 2387.082, 'text': "It's required.", 'start': 2386.461, 'duration': 0.621}, {'end': 2388.703, 'text': "So we'll save that.", 'start': 2387.802, 'duration': 0.901}, {'end': 2394.187, 'text': "Now, if I go and let's just reload that and click add, we see click.", 'start': 2389.303, 'duration': 4.884}, {'end': 2401.991, 'text': 'OK because we embedded this button component and we had the on click prop just call this function here.', 'start': 2395.327, 'duration': 6.664}, {'end': 2407.274, 'text': "Now we're going to later on this is going to toggle the form but we're not going to do that just yet.", 'start': 2402.511, 'duration': 4.763}, {'end': 2410.656, 'text': 'I just kind of wanted to give you an idea of how events work.', 'start': 2407.634, 'duration': 3.022}, {'end': 2415.163, 'text': 'I could also I could have made it a double on double click on submit.', 'start': 2411.64, 'duration': 3.523}, {'end': 2417.605, 'text': "There's a whole bunch of different events that you can add.", 'start': 2415.263, 'duration': 2.342}, {'end': 2423.45, 'text': "Now I want to start to talk about state and we're going to start dealing with our tasks.", 'start': 2418.186, 'duration': 5.264}, {'end': 2428.454, 'text': "So let's close up header and button and we're going to create in components.", 'start': 2423.59, 'duration': 4.864}, {'end': 2432.398, 'text': "I'm going to create a new file called tasks dot JS.", 'start': 2428.494, 'duration': 3.904}, {'end': 2434.079, 'text': 'This is our task component.', 'start': 2432.438, 'duration': 1.641}, {'end': 2436.441, 'text': "So let's sketch out a component here.", 'start': 2434.119, 'duration': 2.322}, {'end': 2438.482, 'text': 'And we can get rid of this.', 'start': 2437.461, 'duration': 1.021}, {'end': 2443.984, 'text': "And for now, I'm just going to create a variable called tasks up here and set that to an array.", 'start': 2439.122, 'duration': 4.862}, {'end': 2447.386, 'text': "And I'm just going to paste in three different tasks.", 'start': 2444.444, 'duration': 2.942}, {'end': 2452.188, 'text': "They're just objects with an ID tax day and a reminder, which is just a Boolean value.", 'start': 2447.426, 'duration': 4.762}, {'end': 2453.129, 'text': 'All right.', 'start': 2452.829, 'duration': 0.3}, {'end': 2456.697, 'text': 'Ultimately, this is not the way that we want to do this.', 'start': 2454.594, 'duration': 2.103}, {'end': 2459.06, 'text': 'We want the task to be part of our state.', 'start': 2456.737, 'duration': 2.323}, {'end': 2463.166, 'text': "So I'll show you how to integrate that into our component in a minute.", 'start': 2459.941, 'duration': 3.225}, {'end': 2469.194, 'text': 'But I just want to first show you how we can map through these or loop through these tasks and output something.', 'start': 2463.226, 'duration': 5.968}, {'end': 2471.255, 'text': 'based on, you know, for each one.', 'start': 2469.634, 'duration': 1.621}, {'end': 2480.058, 'text': "So we do that by creating what's called a list and we create a list by using the map array method, which is just JavaScript.", 'start': 2472.155, 'duration': 7.903}, {'end': 2486.24, 'text': 'You should be familiar with like for each map filter and so on.', 'start': 2481.038, 'duration': 5.202}, {'end': 2488.68, 'text': "I'm not going to really explain those too much.", 'start': 2486.26, 'duration': 2.42}], 'summary': 'Demonstrating handling events and initializing task components using javascript methods and state integration.', 'duration': 145.357, 'max_score': 2343.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82343323.jpg'}, {'end': 2385.361, 'src': 'embed', 'start': 2359.805, 'weight': 6, 'content': [{'end': 2367.348, 'text': "because what's going to happen is this will call this on click and it'll get sent up to the header or wherever you embed this button.", 'start': 2359.805, 'duration': 7.543}, {'end': 2371.609, 'text': 'Now down here in the prop types we could add on click.', 'start': 2367.988, 'duration': 3.621}, {'end': 2376.254, 'text': 'Say we want that as a prop, types dot, funk,', 'start': 2373.152, 'duration': 3.102}, {'end': 2382.559, 'text': "because it's a function and we could say it is required because you're most likely going to want a button to click.", 'start': 2376.254, 'duration': 6.305}, {'end': 2385.361, 'text': "Well, actually, no, we'll get rid of it.", 'start': 2383.759, 'duration': 1.602}], 'summary': 'The on-click function is set as a required prop for a button.', 'duration': 25.556, 'max_score': 2359.805, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82359805.jpg'}, {'end': 2486.24, 'src': 'embed', 'start': 2456.737, 'weight': 7, 'content': [{'end': 2459.06, 'text': 'We want the task to be part of our state.', 'start': 2456.737, 'duration': 2.323}, {'end': 2463.166, 'text': "So I'll show you how to integrate that into our component in a minute.", 'start': 2459.941, 'duration': 3.225}, {'end': 2469.194, 'text': 'But I just want to first show you how we can map through these or loop through these tasks and output something.', 'start': 2463.226, 'duration': 5.968}, {'end': 2471.255, 'text': 'based on, you know, for each one.', 'start': 2469.634, 'duration': 1.621}, {'end': 2480.058, 'text': "So we do that by creating what's called a list and we create a list by using the map array method, which is just JavaScript.", 'start': 2472.155, 'duration': 7.903}, {'end': 2486.24, 'text': 'You should be familiar with like for each map filter and so on.', 'start': 2481.038, 'duration': 5.202}], 'summary': 'Integrating the task into the component and mapping through tasks using javascript methods.', 'duration': 29.503, 'max_score': 2456.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82456737.jpg'}, {'end': 2679.202, 'src': 'heatmap', 'start': 2544.4, 'weight': 2, 'content': [{'end': 2557.333, 'text': "tasks and then go under the header here and say tasks all right so save that And notice that it's showing an H3 of each of the task text.", 'start': 2544.4, 'duration': 12.933}, {'end': 2567.395, 'text': 'Okay, so in addition to that, we have a warning that says each child in a list should have a unique key prop.', 'start': 2558.253, 'duration': 9.142}, {'end': 2571.955, 'text': "So when we use .map in here and we output JSX, that's called a list.", 'start': 2567.515, 'duration': 4.44}, {'end': 2578.877, 'text': 'So the parent of the list, which in this case is an H3, should have a key prop, and that should be something unique.', 'start': 2572.495, 'duration': 6.382}, {'end': 2581.777, 'text': "So we'll use the task.id because those are unique.", 'start': 2578.937, 'duration': 2.84}, {'end': 2586.525, 'text': "So if I save that and we reload that's going to get rid of the console warning down here.", 'start': 2582.363, 'duration': 4.162}, {'end': 2591.027, 'text': "Now ultimately like I said that we don't want this to be separate from our component.", 'start': 2587.265, 'duration': 3.762}, {'end': 2592.988, 'text': 'We want this to be part of our state.', 'start': 2591.327, 'duration': 1.661}, {'end': 2603.733, 'text': "So what I'm going to do is just cut the array itself and delete this and to use state inside of a function we use.", 'start': 2593.068, 'duration': 10.665}, {'end': 2607.015, 'text': 'We use a hook called use state.', 'start': 2604.194, 'duration': 2.821}, {'end': 2611.077, 'text': "So let's say imports and then in curly braces.", 'start': 2607.775, 'duration': 3.302}, {'end': 2615.614, 'text': "We want to take you state and that's from react directly.", 'start': 2612.073, 'duration': 3.541}, {'end': 2619.296, 'text': 'OK, Now, the way we do this is above the return.', 'start': 2615.634, 'duration': 3.662}, {'end': 2624.898, 'text': "we're going to say const brackets and then what we want to call this piece of state,", 'start': 2619.296, 'duration': 5.602}, {'end': 2631.34, 'text': "which is tasks and then a function to to update the state which we're going to call set tasks.", 'start': 2624.898, 'duration': 6.442}, {'end': 2634.441, 'text': 'We want to set that to use state and then in.', 'start': 2631.98, 'duration': 2.461}, {'end': 2641.324, 'text': "here is the default that we want to use for this piece of state for our tasks, which I'm going to go ahead and just paste in that array.", 'start': 2634.441, 'duration': 6.883}, {'end': 2643.086, 'text': 'All right now.', 'start': 2642.506, 'duration': 0.58}, {'end': 2651.51, 'text': "if I save this, you'll see that there's no difference here, because this tasks variable is still.", 'start': 2643.086, 'duration': 8.424}, {'end': 2657.873, 'text': "you know, it's still being used right here, except instead of having it come from outside of our component.", 'start': 2651.51, 'duration': 6.363}, {'end': 2659.754, 'text': "it's now part of our component state.", 'start': 2657.873, 'duration': 1.881}, {'end': 2663.856, 'text': 'If we wanted to change any part of the state we would use set tasks.', 'start': 2660.214, 'duration': 3.642}, {'end': 2668.738, 'text': "It's important to know that you wouldn't do something like tasks dot push.", 'start': 2664.256, 'duration': 4.482}, {'end': 2674.44, 'text': "If you wanted to add to it because state is immutable, it's not something that you can directly change.", 'start': 2669.398, 'duration': 5.042}, {'end': 2677.121, 'text': 'You basically recreate it and send it down.', 'start': 2674.76, 'duration': 2.361}, {'end': 2679.202, 'text': "It's it's it's one way data.", 'start': 2677.501, 'duration': 1.701}], 'summary': 'Using usestate hook to manage component state and unique key prop for list items, resolving console warning.', 'duration': 18.988, 'max_score': 2544.4, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82544400.jpg'}, {'end': 2728.235, 'src': 'embed', 'start': 2705.62, 'weight': 3, 'content': [{'end': 2713.806, 'text': 'So you could use something like the context API or Redux, where you would have a kind of a store that that hovers over your UI,', 'start': 2705.62, 'duration': 8.186}, {'end': 2717.389, 'text': 'where you could pull you know, different pieces of state from.', 'start': 2713.806, 'duration': 3.583}, {'end': 2718.97, 'text': "But we're not going to get into that.", 'start': 2717.829, 'duration': 1.141}, {'end': 2724.393, 'text': 'What we want to do is just put it in our app JS that will make it our global state.', 'start': 2720.171, 'duration': 4.222}, {'end': 2728.235, 'text': 'Then we can pass it down into components that we want as props.', 'start': 2724.433, 'duration': 3.802}], 'summary': 'Use context api or redux to manage global state and pass it down into components as props.', 'duration': 22.615, 'max_score': 2705.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82705620.jpg'}, {'end': 2808.449, 'src': 'heatmap', 'start': 2738.38, 'weight': 0.71, 'content': [{'end': 2746.264, 'text': "And then I'm also going to take this whole thing where we define this task and set task and cut that.", 'start': 2738.38, 'duration': 7.884}, {'end': 2749.78, 'text': 'All right.', 'start': 2749.54, 'duration': 0.24}, {'end': 2752.243, 'text': "And then we're going to put that in our app.", 'start': 2749.94, 'duration': 2.303}, {'end': 2754.044, 'text': 'So this is going to break for a second.', 'start': 2752.563, 'duration': 1.481}, {'end': 2754.905, 'text': "Don't worry about that.", 'start': 2754.064, 'duration': 0.841}, {'end': 2756.947, 'text': "But we're going to put that in here.", 'start': 2755.486, 'duration': 1.461}, {'end': 2761.772, 'text': 'So now this is part of our app component state, our app level state.', 'start': 2757.468, 'duration': 4.304}, {'end': 2767.937, 'text': 'And what we can do is take our task and pass them into our task component as a prop.', 'start': 2762.312, 'duration': 5.625}, {'end': 2771.141, 'text': 'So we want to set tasks equals tasks.', 'start': 2768.838, 'duration': 2.303}, {'end': 2773.162, 'text': "It's still not going to work because.", 'start': 2771.681, 'duration': 1.481}, {'end': 2779.378, 'text': "tasks right here isn't defined, but remember it's being passed in as a prop.", 'start': 2774.315, 'duration': 5.063}, {'end': 2787.663, 'text': 'we could do props and then props dot tasks or we can just destructure and tasks and now it works.', 'start': 2779.378, 'duration': 8.285}, {'end': 2790.265, 'text': 'okay, if i reload, console should clear.', 'start': 2787.663, 'duration': 2.602}, {'end': 2794.027, 'text': 'so now we have our state where it should be, which is at the top level,', 'start': 2790.265, 'duration': 3.762}, {'end': 2798.87, 'text': 'because we want to be able to use these within other components or we may want to.', 'start': 2794.027, 'duration': 4.843}, {'end': 2801.685, 'text': "If we keep it in task, we can't.", 'start': 2799.804, 'duration': 1.881}, {'end': 2808.449, 'text': 'we can only use it in, you know, components we embed in here, or we would have to send it up.', 'start': 2801.685, 'duration': 6.764}], 'summary': 'Setting tasks as a component state and passing them as props for use in other components.', 'duration': 70.069, 'max_score': 2738.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82738380.jpg'}, {'end': 2787.663, 'src': 'embed', 'start': 2757.468, 'weight': 0, 'content': [{'end': 2761.772, 'text': 'So now this is part of our app component state, our app level state.', 'start': 2757.468, 'duration': 4.304}, {'end': 2767.937, 'text': 'And what we can do is take our task and pass them into our task component as a prop.', 'start': 2762.312, 'duration': 5.625}, {'end': 2771.141, 'text': 'So we want to set tasks equals tasks.', 'start': 2768.838, 'duration': 2.303}, {'end': 2773.162, 'text': "It's still not going to work because.", 'start': 2771.681, 'duration': 1.481}, {'end': 2779.378, 'text': "tasks right here isn't defined, but remember it's being passed in as a prop.", 'start': 2774.315, 'duration': 5.063}, {'end': 2787.663, 'text': 'we could do props and then props dot tasks or we can just destructure and tasks and now it works.', 'start': 2779.378, 'duration': 8.285}], 'summary': 'Tasks are passed into the task component as a prop, utilizing destructuring.', 'duration': 30.195, 'max_score': 2757.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82757468.jpg'}], 'start': 2273.352, 'title': 'React event handling and state management', 'summary': 'Covers event handling in react, including event listeners and passing events as props, and introduces state and mapping tasks to output data in components. it also demonstrates the use of the usestate hook to manage component state, emphasizing immutability and app-level state management, and creating separate task components with props.', 'chapters': [{'end': 2586.525, 'start': 2273.352, 'title': 'Event handling and state in react', 'summary': 'Discusses event handling in react, including adding event listeners, passing events as props, and also introduces the concept of state and mapping through tasks to output data in react components.', 'duration': 313.173, 'highlights': ["Adding Event Listeners The chapter explains how to add event listeners in React by using 'on click' and creating the corresponding function, showcasing the functionality with a console log when the button is clicked.", "Passing Events as Props It demonstrates passing events as props from a component, setting 'on click' as a prop, and catching it in the button component, ensuring the prop types are defined and are required.", 'Introduction to State and Mapping Tasks The chapter introduces the concept of state and demonstrates mapping through tasks using the map array method to output data in React components, while also addressing the issue of unique key prop for each child in a list.']}, {'end': 2961.789, 'start': 2587.265, 'title': 'Managing state with react hooks', 'summary': 'Demonstrates the use of the usestate hook in react to manage component state, emphasizing the importance of immutability and the benefits of managing state at the app level, and creating separate task components with props.', 'duration': 374.524, 'highlights': ['The chapter demonstrates the use of the useState hook in React to manage component state, emphasizing the importance of immutability and the benefits of managing state at the app level, and creating separate task components with props.', "State is managed using the useState hook, where a piece of state called 'tasks' is defined, along with a function 'setTasks' to update the state, initialized with an array as the default value.", "The importance of immutability in state management is highlighted, emphasizing the use of 'setTasks' instead of directly mutating the state, and the concept of recreating and sending down the state as one-way data.", 'The strategy of managing state at the app level is explained, enabling access to the state from other components and the potential to pass it down as props.', 'Creation of a separate task component is demonstrated, with the import of the task component, passing individual tasks as props, and rendering the task text and day within the component.']}], 'duration': 688.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82273352.jpg', 'highlights': ['The chapter demonstrates the use of the useState hook in React to manage component state, emphasizing the importance of immutability and the benefits of managing state at the app level, and creating separate task components with props.', "State is managed using the useState hook, where a piece of state called 'tasks' is defined, along with a function 'setTasks' to update the state, initialized with an array as the default value.", "The importance of immutability in state management is highlighted, emphasizing the use of 'setTasks' instead of directly mutating the state, and the concept of recreating and sending down the state as one-way data.", 'The strategy of managing state at the app level is explained, enabling access to the state from other components and the potential to pass it down as props.', 'Creation of a separate task component is demonstrated, with the import of the task component, passing individual tasks as props, and rendering the task text and day within the component.', "Adding Event Listeners The chapter explains how to add event listeners in React by using 'on click' and creating the corresponding function, showcasing the functionality with a console log when the button is clicked.", "Passing Events as Props It demonstrates passing events as props from a component, setting 'on click' as a prop, and catching it in the button component, ensuring the prop types are defined and are required.", 'Introduction to State and Mapping Tasks The chapter introduces the concept of state and demonstrates mapping through tasks using the map array method to output data in React components, while also addressing the issue of unique key prop for each child in a list.']}, {'end': 3414.294, 'segs': [{'end': 2997.377, 'src': 'embed', 'start': 2963.43, 'weight': 5, 'content': [{'end': 2964.03, 'text': 'Save that.', 'start': 2963.43, 'duration': 0.6}, {'end': 2964.831, 'text': 'There we go.', 'start': 2964.27, 'duration': 0.561}, {'end': 2965.551, 'text': 'Looks good.', 'start': 2965.051, 'duration': 0.5}, {'end': 2969.478, 'text': 'See what else do you want to do.', 'start': 2968.337, 'duration': 1.141}, {'end': 2972.38, 'text': "We're going to want to have a delete icon.", 'start': 2969.498, 'duration': 2.882}, {'end': 2974.641, 'text': 'So I guess we can do that.', 'start': 2973.22, 'duration': 1.421}, {'end': 2978.084, 'text': "You could include the I'm going to use font awesome.", 'start': 2975.902, 'duration': 2.182}, {'end': 2983.387, 'text': 'You could include font awesome the CDN in your index HTML in your public folder.', 'start': 2978.104, 'duration': 5.283}, {'end': 2989.191, 'text': "However what I'm going to do is install react icons which allows you to use multiple icon libraries.", 'start': 2983.447, 'duration': 5.744}, {'end': 2997.377, 'text': "So I'm going to leave my dev server running open a new tab and say NPM install react dash icons.", 'start': 2989.612, 'duration': 7.765}], 'summary': 'Incorporating delete icon using react icons for multiple libraries.', 'duration': 33.947, 'max_score': 2963.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82963430.jpg'}, {'end': 3048.544, 'src': 'embed', 'start': 3019.039, 'weight': 3, 'content': [{'end': 3022.46, 'text': "as long as it's not, as long as it's local and not global, you're going to see in here.", 'start': 3019.039, 'duration': 3.421}, {'end': 3025.781, 'text': 'So we want to bring in a specific icon.', 'start': 3023.32, 'duration': 2.461}, {'end': 3030.415, 'text': "So we're basically using icons as react components.", 'start': 3027.051, 'duration': 3.364}, {'end': 3039.544, 'text': "We're going to bring in F a times, which is the X icon from react icons and then slash FAA for font.", 'start': 3030.555, 'duration': 8.989}, {'end': 3042.528, 'text': "Awesome, because there's multiple libraries that you can use with this.", 'start': 3039.685, 'duration': 2.843}, {'end': 3044.39, 'text': "And then I'm going to go.", 'start': 3043.529, 'duration': 0.861}, {'end': 3048.544, 'text': "Let's see, let's go within the H3 right here.", 'start': 3046.001, 'duration': 2.543}], 'summary': 'Using local icons as react components, including x icon from react icons and font awesome, within an h3 element.', 'duration': 29.505, 'max_score': 3019.039, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv83019039.jpg'}, {'end': 3115.263, 'src': 'embed', 'start': 3079.011, 'weight': 1, 'content': [{'end': 3080.632, 'text': 'I am just going to I want to make them red.', 'start': 3079.011, 'duration': 1.621}, {'end': 3084.274, 'text': "So I'm going to add a style to this.", 'start': 3080.692, 'duration': 3.582}, {'end': 3096.341, 'text': "So say we want the color to be red and let's make the cursor a pointer.", 'start': 3086.315, 'duration': 10.026}, {'end': 3098.849, 'text': 'All right.', 'start': 3098.609, 'duration': 0.24}, {'end': 3100.471, 'text': 'So now we have our delete icons.', 'start': 3098.889, 'duration': 1.582}, {'end': 3105.815, 'text': 'Now we want to make it so that when we click this, it deletes that particular event.', 'start': 3101.171, 'duration': 4.644}, {'end': 3115.263, 'text': "But how do we do that when we don't have access to the events here? Remember, the the events are stored in the app JS and the app component.", 'start': 3105.955, 'duration': 9.308}], 'summary': 'Adding a red color style and pointer cursor to delete icons, aiming to enable deletion of specific events stored in the app js and component.', 'duration': 36.252, 'max_score': 3079.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv83079011.jpg'}, {'end': 3160.845, 'src': 'embed', 'start': 3132.93, 'weight': 0, 'content': [{'end': 3135.794, 'text': 'So in this case, what we can do is just use props.', 'start': 3132.93, 'duration': 2.864}, {'end': 3137.516, 'text': 'We can send down a function.', 'start': 3135.854, 'duration': 1.662}, {'end': 3142.136, 'text': 'as a prop and then fire that off when we click in here.', 'start': 3138.554, 'duration': 3.582}, {'end': 3146.258, 'text': "so in the app js let's create a function.", 'start': 3142.136, 'duration': 4.122}, {'end': 3150.88, 'text': "so whenever we want to delete a task or add or anything like that, it's going to be in this file.", 'start': 3146.258, 'duration': 4.622}, {'end': 3160.845, 'text': "so let's say delete task and we'll create a function called delete task and that's going to take in a specific id.", 'start': 3150.88, 'duration': 9.965}], 'summary': 'Using props to send and fire functions for task manipulation.', 'duration': 27.915, 'max_score': 3132.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv83132930.jpg'}, {'end': 3268.524, 'src': 'heatmap', 'start': 3197.429, 'weight': 0.902, 'content': [{'end': 3202.614, 'text': "I'm going to do that a few times through this because I decided to change it to tasks at the last minute.", 'start': 3197.429, 'duration': 5.185}, {'end': 3205.337, 'text': 'So this is going to be delete task.', 'start': 3203.535, 'duration': 1.802}, {'end': 3208.164, 'text': 'All right.', 'start': 3207.904, 'duration': 0.26}, {'end': 3212.287, 'text': 'And then on delete is going to be a prop of tasks.', 'start': 3208.304, 'duration': 3.983}, {'end': 3216.37, 'text': 'So just like we passed in tasks, we want to pass in on delete.', 'start': 3212.688, 'duration': 3.682}, {'end': 3221.414, 'text': "And then that's going to get passed in here as a prop as well, because that's where we want to use it.", 'start': 3216.851, 'duration': 4.563}, {'end': 3225.077, 'text': 'So on delete equals on delete.', 'start': 3221.935, 'duration': 3.142}, {'end': 3230.361, 'text': 'And then in task, again, pass in on delete as a prop.', 'start': 3226.098, 'duration': 4.263}, {'end': 3232.543, 'text': 'However, we want to call that on a click.', 'start': 3230.661, 'duration': 1.882}, {'end': 3236.726, 'text': "Right So in this FA times, let's say on click.", 'start': 3232.803, 'duration': 3.923}, {'end': 3247.489, 'text': 'and set that to on delete which is going to basically work its way up to here and call delete tasks.', 'start': 3237.355, 'duration': 10.134}, {'end': 3249.271, 'text': 'So state gets passed down.', 'start': 3247.569, 'duration': 1.702}, {'end': 3250.974, 'text': 'Actions get passed up.', 'start': 3249.732, 'duration': 1.242}, {'end': 3259.895, 'text': "So if I click this we do get the delete text but we also see this event stuff because that's what's being passed in here by default.", 'start': 3251.806, 'duration': 8.089}, {'end': 3268.524, 'text': 'If I want to actually pass the idea, and what I have to do is in on the on, click here instead of calling Andre on delete directly,', 'start': 3260.315, 'duration': 8.209}], 'summary': 'Discussion about updating tasks and passing ondelete prop for deletion action.', 'duration': 71.095, 'max_score': 3197.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv83197429.jpg'}, {'end': 3317.346, 'src': 'embed', 'start': 3295.097, 'weight': 2, 'content': [{'end': 3304.181, 'text': "because that's how we deal with with this with our mutable state and we're going to take the tasks that are already there and just filter.", 'start': 3295.097, 'duration': 9.084}, {'end': 3306.401, 'text': 'So dot filter is a high order array method.', 'start': 3304.341, 'duration': 2.06}, {'end': 3309.703, 'text': 'You should really know this stuff before getting into react.', 'start': 3307.022, 'duration': 2.681}, {'end': 3312.344, 'text': 'But basically this takes in a function.', 'start': 3309.823, 'duration': 2.521}, {'end': 3317.346, 'text': "So we'll say for each task I want to filter.", 'start': 3312.364, 'duration': 4.982}], 'summary': 'Using dot filter method for mutable state in react tasks.', 'duration': 22.249, 'max_score': 3295.097, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv83295097.jpg'}, {'end': 3392.643, 'src': 'embed', 'start': 3348.371, 'weight': 4, 'content': [{'end': 3348.891, 'text': 'All right now.', 'start': 3348.371, 'duration': 0.52}, {'end': 3351.072, 'text': 'if I wanted to make it so, it shows like a message.', 'start': 3348.891, 'duration': 2.181}, {'end': 3370.859, 'text': "if there is no tasks, I could go down to here and wrap this in curly braces and I could say if tasks dot length, if it's greater than zero,", 'start': 3351.072, 'duration': 19.787}, {'end': 3374.64, 'text': 'then show tasks, else show nothing.', 'start': 3370.859, 'duration': 3.781}, {'end': 3382.14, 'text': 'So if I save that Wait, what am I doing? If task.length else show nothing.', 'start': 3375.96, 'duration': 6.18}, {'end': 3389.507, 'text': 'No, I want to show no tasks to show.', 'start': 3382.2, 'duration': 7.307}, {'end': 3392.103, 'text': 'All right.', 'start': 3391.843, 'duration': 0.26}, {'end': 3392.643, 'text': 'So there we go.', 'start': 3392.143, 'duration': 0.5}], 'summary': 'Code review: conditional message display based on tasks length.', 'duration': 44.272, 'max_score': 3348.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv83348371.jpg'}], 'start': 2963.43, 'title': 'Adding delete icon and managing state with props in react', 'summary': 'Covers adding a delete icon with react icons, allowing the use of multiple icon libraries and making the delete icons red with a pointer cursor. it also discusses managing state in react using props and passing down functions as props to delete tasks and render messages based on the length of tasks in a react application.', 'chapters': [{'end': 3105.815, 'start': 2963.43, 'title': 'Adding delete icon with react icons', 'summary': 'Covers how to add a delete icon using react icons, allowing the use of multiple icon libraries and making the delete icons red with a pointer cursor.', 'duration': 142.385, 'highlights': ['The chapter explains installing React Icons to use multiple icon libraries and adding a delete icon, the X icon, to the application.', 'It demonstrates making the delete icons red and changing the cursor to a pointer when clicked.', 'It describes the process of using React Icons as react components to bring in specific icons.']}, {'end': 3414.294, 'start': 3105.955, 'title': 'Managing state with props in react', 'summary': 'Discusses managing state in react using props and passing down functions as props, illustrating how to delete tasks and render messages based on the length of tasks in a react application.', 'duration': 308.339, 'highlights': ['Passing down functions as props to manage state in React The chapter explains using props to pass down functions like delete task to manage state in a React application.', 'Filtering tasks using the dot filter method in React The chapter illustrates how to use the dot filter method to filter tasks based on their IDs in a React application, effectively managing state.', "Rendering messages based on the length of tasks in React The chapter demonstrates rendering messages based on the length of tasks in a React application, showing 'No tasks to show' when there are no tasks present."]}], 'duration': 450.864, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv82963430.jpg', 'highlights': ['The chapter explains using props to pass down functions like delete task to manage state in a React application.', 'It demonstrates making the delete icons red and changing the cursor to a pointer when clicked.', 'The chapter illustrates how to use the dot filter method to filter tasks based on their IDs in a React application, effectively managing state.', 'It describes the process of using React Icons as react components to bring in specific icons.', "Rendering messages based on the length of tasks in a React application, showing 'No tasks to show' when there are no tasks present.", 'The chapter explains installing React Icons to use multiple icon libraries and adding a delete icon, the X icon, to the application.']}, {'end': 4712.399, 'segs': [{'end': 3732.864, 'src': 'embed', 'start': 3697.911, 'weight': 1, 'content': [{'end': 3699.813, 'text': 'by click, it again goes to true.', 'start': 3697.911, 'duration': 1.902}, {'end': 3705.297, 'text': "So we know that's working but there's no there's no there's nothing in the UI that lets us know that.", 'start': 3699.873, 'duration': 5.424}, {'end': 3709, 'text': "So what we'll do is go back into task.", 'start': 3705.797, 'duration': 3.203}, {'end': 3717.036, 'text': 'And remember we have that specific class of reminder that will add a border to to the edge.', 'start': 3710.467, 'duration': 6.569}, {'end': 3719.019, 'text': "So let's go.", 'start': 3717.817, 'duration': 1.202}, {'end': 3721.722, 'text': 'So we have class name equals task.', 'start': 3719.039, 'duration': 2.683}, {'end': 3725.567, 'text': "What I'm going to do here is make this into an expression and.", 'start': 3722.163, 'duration': 3.404}, {'end': 3732.864, 'text': "some back ticks and I still want the task class that's going to be there no matter what.", 'start': 3727.481, 'duration': 5.383}], 'summary': 'The ui lacks indication for task completion, adding border with a specific class will resolve this.', 'duration': 34.953, 'max_score': 3697.911, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv83697911.jpg'}, {'end': 4144.776, 'src': 'embed', 'start': 4111.706, 'weight': 2, 'content': [{'end': 4113.747, 'text': 'If we go to our react dev tools.', 'start': 4111.706, 'duration': 2.041}, {'end': 4115.506, 'text': 'So down here it says components.', 'start': 4113.827, 'duration': 1.679}, {'end': 4117.487, 'text': 'We can see all of our components.', 'start': 4116.027, 'duration': 1.46}, {'end': 4123.049, 'text': 'And if we go to add task, we should be able to see our state.', 'start': 4117.528, 'duration': 5.521}, {'end': 4126.769, 'text': 'So right here you can see each one of these is the three inputs.', 'start': 4123.749, 'duration': 3.02}, {'end': 4135.587, 'text': "If I start to type in the text and I say text because that's what we called you know, that piece of state.", 'start': 4127.25, 'duration': 8.337}, {'end': 4137.89, 'text': 'We can see it down here.', 'start': 4136.729, 'duration': 1.161}, {'end': 4144.776, 'text': 'If I type in a day, we can see that if I check set reminder, you can see that that changes.', 'start': 4137.95, 'duration': 6.826}], 'summary': 'Using react dev tools to view components and state changes in real-time.', 'duration': 33.07, 'max_score': 4111.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv84111706.jpg'}, {'end': 4243.38, 'src': 'heatmap', 'start': 4176.828, 'weight': 0.812, 'content': [{'end': 4181.432, 'text': "It's going to take in as far as what this takes in.", 'start': 4176.828, 'duration': 4.604}, {'end': 4185.254, 'text': "We'll just say task.", 'start': 4181.452, 'duration': 3.802}, {'end': 4190.095, 'text': "And yeah, we'll just console log that.", 'start': 4188.375, 'duration': 1.72}, {'end': 4202.245, 'text': "Now we have to pass this in or we have to pass a prop into add task let's say on add and then that's going to call add task.", 'start': 4192.182, 'duration': 10.063}, {'end': 4220.852, 'text': "OK Now in our add task component we want to take in on add and what I'm going to do is add a submit event here so on submit and set that to on submit.", 'start': 4203.426, 'duration': 17.426}, {'end': 4229.232, 'text': "And then on submit is going to be defined in here const on submit because there's a few things we need to do.", 'start': 4222.068, 'duration': 7.164}, {'end': 4231.453, 'text': "So we're not calling on add directly.", 'start': 4229.572, 'duration': 1.881}, {'end': 4243.38, 'text': "So on submit that's going to take in the event object because we need to E dot prevent default so it doesn't actually submit to a page and then.", 'start': 4232.914, 'duration': 10.466}], 'summary': 'Developing code to pass a prop into add task and handle a submit event.', 'duration': 66.552, 'max_score': 4176.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv84176828.jpg'}, {'end': 4375.261, 'src': 'heatmap', 'start': 4307.574, 'weight': 0.82, 'content': [{'end': 4309.554, 'text': "So that's going to get set to false.", 'start': 4307.574, 'duration': 1.98}, {'end': 4311.455, 'text': 'All right.', 'start': 4311.115, 'duration': 0.34}, {'end': 4314.175, 'text': "Now I want I want it to be unchecked if it's false.", 'start': 4311.535, 'duration': 2.64}, {'end': 4322.937, 'text': 'So down here we have our check checkboxes can take to take in a checked value, which will be true or false.', 'start': 4314.595, 'duration': 8.342}, {'end': 4326.538, 'text': "So I'm going to say if reminder.", 'start': 4322.957, 'duration': 3.581}, {'end': 4327.738, 'text': "So if that's true, then.", 'start': 4326.658, 'duration': 1.08}, {'end': 4334.034, 'text': 'Actually, no, you can just set it to set it to reminder.', 'start': 4330.593, 'duration': 3.441}, {'end': 4338.335, 'text': 'So save that.', 'start': 4337.415, 'duration': 0.92}, {'end': 4348.578, 'text': 'OK, now, when I submit this, what should happen is it should call it should check to see if text is there.', 'start': 4338.355, 'duration': 10.223}, {'end': 4351.919, 'text': "So if I don't have that filled in, I'll get an alert.", 'start': 4348.618, 'duration': 3.301}, {'end': 4361.607, 'text': 'Then it should call on ad, which is just going to call Add task which up here is going to console log the task.', 'start': 4352.639, 'duration': 8.968}, {'end': 4369.675, 'text': "So let's open up our console and we're just going to type whatever in here and save.", 'start': 4361.627, 'duration': 8.048}, {'end': 4375.261, 'text': 'So the form also cleared and down here you can see that we have our data.', 'start': 4370.416, 'duration': 4.845}], 'summary': 'Setting reminder to false, checking for filled text, and console logging the task upon submission.', 'duration': 67.687, 'max_score': 4307.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv84307574.jpg'}, {'end': 4639.466, 'src': 'heatmap', 'start': 4470.237, 'weight': 0, 'content': [{'end': 4472.578, 'text': 'And we can change the reminder.', 'start': 4470.237, 'duration': 2.341}, {'end': 4473.359, 'text': 'We can delete it.', 'start': 4472.658, 'duration': 0.701}, {'end': 4474.94, 'text': "So now we're able to add it.", 'start': 4473.839, 'duration': 1.101}, {'end': 4481.549, 'text': 'Cool So the next thing I want to do is this button here should toggle this form.', 'start': 4476.203, 'duration': 5.346}, {'end': 4488.737, 'text': 'We want it to start off not showing, but then we want to click this, show it, click it again to toggle it.', 'start': 4481.769, 'duration': 6.968}, {'end': 4494.823, 'text': "So we're going to have another piece of state in our app JS and we're going to call that, let's say const.", 'start': 4488.777, 'duration': 6.046}, {'end': 4499.029, 'text': "Let's say what do we want to call this.", 'start': 4496.147, 'duration': 2.882}, {'end': 4508.577, 'text': 'She will say show add task and then set show add task which is going to be a Boolean.', 'start': 4499.93, 'duration': 8.647}, {'end': 4516.723, 'text': 'So set this to use state set it to false by default and then this form is going to be dependent on that piece of state.', 'start': 4508.977, 'duration': 7.746}, {'end': 4529.818, 'text': "So down where we're embedding add task let's wrap this in curly braces and say If show add task is true then show that component.", 'start': 4516.803, 'duration': 13.015}, {'end': 4533.261, 'text': 'Now this is just a shorter way of doing a ternary without an else.', 'start': 4529.958, 'duration': 3.303}, {'end': 4537.784, 'text': "OK we don't need an else we just want to see if it's true if it is do this if not nothing.", 'start': 4533.821, 'duration': 3.963}, {'end': 4540.667, 'text': "So we'll save that and now it's not showing.", 'start': 4538.545, 'duration': 2.122}, {'end': 4549.054, 'text': "Now if I set the default of that show add task to true then it's going to show it by default.", 'start': 4541.327, 'duration': 7.727}, {'end': 4550.363, 'text': 'All right.', 'start': 4550.063, 'duration': 0.3}, {'end': 4552.964, 'text': 'Now we want this button to toggle that.', 'start': 4550.443, 'duration': 2.521}, {'end': 4555.305, 'text': "So we're going to have to do a couple of things with that.", 'start': 4553.124, 'duration': 2.181}, {'end': 4559.287, 'text': 'Now that button is inside of the header.', 'start': 4557.366, 'duration': 1.921}, {'end': 4564.669, 'text': "So if we go down to header let's say let's have a prop called on add.", 'start': 4559.927, 'duration': 4.742}, {'end': 4577.379, 'text': "Now when that's fired off we'll have a function and we'll call set show add task we want to set it to the opposite of whatever the value is.", 'start': 4565.389, 'duration': 11.99}, {'end': 4585.445, 'text': 'So the opposite of show add task now on ad is going to get passed into header as a prop.', 'start': 4577.479, 'duration': 7.966}, {'end': 4594.812, 'text': "So let's say on ad and right now the button on click is just set to this right here on click.", 'start': 4585.565, 'duration': 9.247}, {'end': 4599.455, 'text': 'We just want to get rid of that and change on click to on add.', 'start': 4594.832, 'duration': 4.623}, {'end': 4606.23, 'text': "So if we save that And it's just open up our console here as well.", 'start': 4601.917, 'duration': 4.313}, {'end': 4612.054, 'text': 'So we save that I click add it shows the form I click it again it goes away.', 'start': 4607.03, 'duration': 5.024}, {'end': 4621.161, 'text': "OK now I think we should also change the button if it's open change the text to close we could even change the color.", 'start': 4612.074, 'duration': 9.087}, {'end': 4623.442, 'text': 'So to do that.', 'start': 4622.421, 'duration': 1.021}, {'end': 4626.845, 'text': "Let's see we'll go back to app J.S.", 'start': 4624.463, 'duration': 2.382}, {'end': 4628.486, 'text': 'and where we have our header.', 'start': 4627.245, 'duration': 1.241}, {'end': 4639.466, 'text': "In addition to the on ad prop, let's also just pass in whatever the value of show show ad task is.", 'start': 4630.881, 'duration': 8.585}], 'summary': 'Implemented functionality to toggle form visibility and update button text based on state, achieving dynamic ui interaction.', 'duration': 59.581, 'max_score': 4470.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv84470237.jpg'}], 'start': 3414.374, 'title': 'React form components', 'summary': 'Covers implementing a task reminder toggle feature, creating a form component in react, using react dev tools for state management, and demonstrating form state management and validation.', 'chapters': [{'end': 3780.93, 'start': 3414.374, 'title': 'Task reminder toggle', 'summary': 'Covers the implementation of a task reminder toggle feature where double-clicking a task changes its reminder status, reflected by a green border, and the ui updates in real-time.', 'duration': 366.556, 'highlights': ['Double-clicking a task toggles its reminder status and updates the UI in real-time, with the reminder being reflected by a green border. By implementing a function triggered by double-clicking a task, the reminder status is toggled and visually represented by a green border, providing real-time UI updates.', 'The logic involves mapping through tasks and changing the reminder status to its opposite value when double-clicked, utilizing set tasks and conditional class assignment to reflect the reminder status visually. The logic involves mapping through tasks and updating the reminder status to the opposite value upon double-clicking, utilizing set tasks for state management and conditional class assignment to visually reflect the reminder status.', 'The UI dynamically reflects the reminder status through a conditional class assignment, where the presence of the green border indicates a true reminder status, providing a user-friendly visual indication. A conditional class assignment dynamically updates the UI to reflect the reminder status, where the presence of the green border serves as a user-friendly visual indication of a true reminder status.']}, {'end': 4080.678, 'start': 3781.01, 'title': 'Creating a form component', 'summary': 'Covers creating a form component in react, with a form containing input fields for task, day and time, and a checkbox for setting a reminder, along with styling and state management.', 'duration': 299.668, 'highlights': ['The chapter covers creating a form component in React The chapter focuses on creating a form component in React for managing tasks and reminders.', 'Form contains input fields for task, day and time, and a checkbox for setting a reminder The form includes input fields for tasks, day and time, and a checkbox for setting a reminder, allowing users to input and manage task-related data.', 'Styling and state management are also discussed The chapter also addresses styling the form with classes for better appearance and the implementation of component-level state management using useState from React.']}, {'end': 4351.919, 'start': 4081.299, 'title': 'React dev tools and task submission', 'summary': 'Explains how to use react dev tools to view component state and demonstrates the process of handling task submission with form validation and state updates.', 'duration': 270.62, 'highlights': ['The chapter explains how to use React Dev Tools to view component state The transcript describes using React Dev Tools to view the component state, demonstrating the ability to observe the state of different inputs and checkboxes in the application.', 'The process of handling task submission with form validation and state updates is demonstrated The transcript details the process of handling task submission, including form validation for the task text, day, and reminder, and the subsequent updates to the state by setting the text, day, and reminder values as well as demonstrating the behavior of the checkbox based on the reminder state.']}, {'end': 4712.399, 'start': 4352.639, 'title': 'React form state management', 'summary': 'Demonstrates the process of adding a new task to the state in a react form, implementing a toggle feature for a form, and dynamically changing the button text and color based on its state.', 'duration': 359.76, 'highlights': ['The chapter demonstrates the process of adding a new task to the state in a React form Adding a new task involves creating a unique ID using math.floor and math.random, creating a new task object with the ID and task details, and updating the state using setTasks to append the new task to the existing tasks.', "Implementing a toggle feature for a form The form's visibility is controlled by a state variable, showAddTask, using conditional rendering based on its value. A button click triggers the toggling of the form's visibility by updating the showAddTask state.", "Dynamically changing the button text and color based on its state The button text and color are dynamically adjusted based on the showAdd state using conditional rendering in the JSX code, resulting in the button displaying 'Add' or 'Close' and changing colors between green and red."]}], 'duration': 1298.025, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv83414374.jpg', 'highlights': ['The chapter covers creating a form component in React for managing tasks and reminders.', 'The UI dynamically reflects the reminder status through a conditional class assignment, where the presence of the green border indicates a true reminder status, providing a user-friendly visual indication.', 'The chapter explains how to use React Dev Tools to view component state, demonstrating the ability to observe the state of different inputs and checkboxes in the application.', "Implementing a toggle feature for a form. The form's visibility is controlled by a state variable, showAddTask, using conditional rendering based on its value."]}, {'end': 5915.54, 'segs': [{'end': 4756.77, 'src': 'embed', 'start': 4712.419, 'weight': 0, 'content': [{'end': 4716.982, 'text': 'So you can see how this is where how this is where react is really valuable.', 'start': 4712.419, 'duration': 4.563}, {'end': 4722.787, 'text': 'It allows you to make really dynamic interfaces and no pages are being reloaded or anything like that.', 'start': 4717.022, 'duration': 5.765}, {'end': 4728.531, 'text': 'So I mean this is a really small application but you can see the value in this.', 'start': 4723.928, 'duration': 4.603}, {'end': 4734.058, 'text': 'And I mean it might be a little intimidating at first, but you can,', 'start': 4729.555, 'duration': 4.503}, {'end': 4739.641, 'text': 'you really get the hang of it and you see how valuable it is to do stuff like this in vanilla.', 'start': 4734.058, 'duration': 5.583}, {'end': 4740.501, 'text': 'JavaScript is.', 'start': 4739.641, 'duration': 0.86}, {'end': 4743.563, 'text': "it's just very messy and unorganized and much more difficult.", 'start': 4740.501, 'duration': 3.062}, {'end': 4746.404, 'text': "So let's see what's next.", 'start': 4745.184, 'duration': 1.22}, {'end': 4751.007, 'text': 'We can show our ad form, we can add, we can delete, we can set toggle.', 'start': 4746.464, 'duration': 4.543}, {'end': 4756.77, 'text': "I think that we're pretty much done as far as like just the UI goes.", 'start': 4752.327, 'duration': 4.443}], 'summary': 'React enables dynamic interfaces without page reloads. ui features include ad form, add, delete, and toggle.', 'duration': 44.351, 'max_score': 4712.419, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv84712419.jpg'}, {'end': 4805.662, 'src': 'embed', 'start': 4779.105, 'weight': 4, 'content': [{'end': 4788.371, 'text': "If you're ready to deploy so and it says right here use yarn build or NPM run build depends on you know if you use yarn or NPM.", 'start': 4779.105, 'duration': 9.266}, {'end': 4799.018, 'text': "But if I go ahead and I'm going to stop the server for a second and you'll see that this very low doesn't work and I'm going to run NPM run build.", 'start': 4789.011, 'duration': 10.007}, {'end': 4805.662, 'text': "And it's going to create an optimized production build in a folder called build.", 'start': 4801.079, 'duration': 4.583}], 'summary': "Using 'npm run build' creates an optimized production build in a folder called build.", 'duration': 26.557, 'max_score': 4779.105, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv84779105.jpg'}, {'end': 4897.682, 'src': 'heatmap', 'start': 4831.77, 'weight': 0.705, 'content': [{'end': 4836.654, 'text': 'Now, if you want to try this locally, you could install the NPM serve.', 'start': 4831.77, 'duration': 4.884}, {'end': 4841.544, 'text': 'serve package globally, so we can go ahead and do that.', 'start': 4838.559, 'duration': 2.985}, {'end': 4846.071, 'text': "so let's say npm install dash g actually have to use.", 'start': 4841.544, 'duration': 4.527}, {'end': 4852.46, 'text': "if you're on a mac or linux, you'll have to use sudo for permissions because we're installing this globally and then serve.", 'start': 4846.071, 'duration': 6.389}, {'end': 4860.967, 'text': "And it's just that this is just a basic HTTP server.", 'start': 4858.325, 'duration': 2.642}, {'end': 4865.05, 'text': 'So I should now be able to serve.', 'start': 4861.548, 'duration': 3.502}, {'end': 4870.915, 'text': "Let's say serve dash s and then the build folder.", 'start': 4865.391, 'duration': 5.524}, {'end': 4874.318, 'text': 'And then I want to serve it on a port.', 'start': 4871.736, 'duration': 2.582}, {'end': 4876.86, 'text': "Let's say dash P eight thousand.", 'start': 4874.458, 'duration': 2.402}, {'end': 4878.641, 'text': 'All right.', 'start': 4876.88, 'duration': 1.761}, {'end': 4883.465, 'text': "So now if I go to and remember locals three thousand isn't working that's our dev server.", 'start': 4878.761, 'duration': 4.704}, {'end': 4886.708, 'text': 'If I go to eight thousand there it is.', 'start': 4883.765, 'duration': 2.943}, {'end': 4889.276, 'text': 'All right.', 'start': 4888.936, 'duration': 0.34}, {'end': 4895.18, 'text': "So this now, if you look at the react dev tools icon, it's blue, not orange.", 'start': 4889.356, 'duration': 5.824}, {'end': 4897.682, 'text': 'And it says this page is using the production build.', 'start': 4895.24, 'duration': 2.442}], 'summary': 'Install npm serve package globally and serve build folder on port 8000.', 'duration': 65.912, 'max_score': 4831.77, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv84831770.jpg'}, {'end': 4944.004, 'src': 'embed', 'start': 4913.312, 'weight': 5, 'content': [{'end': 4918.375, 'text': "I'm going to keep going so that you can see how to deal with kind of a mock back end.", 'start': 4913.312, 'duration': 5.063}, {'end': 4931.651, 'text': "Now, there's a there's a really cool tool called Jason Server, and it basically allows us to create a mock rest API with our own data.", 'start': 4919.264, 'duration': 12.387}, {'end': 4933.792, 'text': 'So we install it.', 'start': 4932.612, 'duration': 1.18}, {'end': 4935.453, 'text': "We're not going to install it globally.", 'start': 4934.132, 'duration': 1.321}, {'end': 4936.614, 'text': 'You will install it locally.', 'start': 4935.493, 'duration': 1.121}, {'end': 4944.004, 'text': 'And then you can create a DB dot, Jason, with some resources, and you can make post requests, put requests, patch and all that,', 'start': 4937.318, 'duration': 6.686}], 'summary': 'Demonstrating how to create a mock rest api using json server locally.', 'duration': 30.692, 'max_score': 4913.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv84913312.jpg'}, {'end': 5156.903, 'src': 'embed', 'start': 5125.795, 'weight': 2, 'content': [{'end': 5127.917, 'text': 'So that looks good now.', 'start': 5125.795, 'duration': 2.122}, {'end': 5130.558, 'text': "Let's see.", 'start': 5127.937, 'duration': 2.621}, {'end': 5131.819, 'text': 'Close that up.', 'start': 5130.999, 'duration': 0.82}, {'end': 5137.924, 'text': "So the first thing we'll do is is let's fetch our tasks from the back end from low.", 'start': 5132.84, 'duration': 5.084}, {'end': 5140.726, 'text': 'And you can even do this right from your browser.', 'start': 5138.344, 'duration': 2.382}, {'end': 5146.53, 'text': 'HTTP local host five thousand slash tasks.', 'start': 5140.746, 'duration': 5.784}, {'end': 5147.791, 'text': 'And there we go.', 'start': 5147.311, 'duration': 0.48}, {'end': 5150.333, 'text': 'And we can also make post put and delete requests.', 'start': 5147.811, 'duration': 2.522}, {'end': 5156.903, 'text': "So, In order to load them when the page loads, we're going to use a hook called use effect,", 'start': 5151.013, 'duration': 5.89}], 'summary': 'Fetching tasks from backend with http requests and using useeffect hook for page loading.', 'duration': 31.108, 'max_score': 5125.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv85125795.jpg'}, {'end': 5442.468, 'src': 'embed', 'start': 5408.627, 'weight': 3, 'content': [{'end': 5413.249, 'text': "So we're able to fetch our tasks from the back end and display them.", 'start': 5408.627, 'duration': 4.622}, {'end': 5418.612, 'text': 'so the next thing I want to do is be able to delete them.', 'start': 5413.249, 'duration': 5.363}, {'end': 5424.015, 'text': "so we already have a delete and it's going to delete from the UI, just fine, but if I reload their back because.", 'start': 5418.612, 'duration': 5.403}, {'end': 5427.098, 'text': "There we haven't deleted them from the server.", 'start': 5424.656, 'duration': 2.442}, {'end': 5430.58, 'text': "So let's go down to where we have our delete.", 'start': 5427.818, 'duration': 2.762}, {'end': 5432.582, 'text': 'So we have delete task.', 'start': 5431.361, 'duration': 1.221}, {'end': 5442.468, 'text': 'And this is going to be pretty simple because we just need to make a simple delete request right before we, you know, filter through the UI.', 'start': 5432.662, 'duration': 9.806}], 'summary': 'Tasks fetched and displayed, now aiming to implement delete feature using simple delete request.', 'duration': 33.841, 'max_score': 5408.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv85408627.jpg'}], 'start': 4712.419, 'title': "React's value in creating dynamic interfaces", 'summary': 'Highlights using react for dynamic interfaces, eliminating page reloads, and building interactive ui components compared to vanilla javascript. it also covers building and deploying static assets, setting up a mock rest api, fetching and managing tasks in react, and backend tasks management.', 'chapters': [{'end': 4756.77, 'start': 4712.419, 'title': "React's value in creating dynamic interfaces", 'summary': 'Highlights the value of using react to create dynamic interfaces, emphasizing the elimination of page reloads and the ease of building interactive ui components compared to vanilla javascript.', 'duration': 44.351, 'highlights': ['React allows for creating dynamic interfaces without page reloads, making it valuable for building interactive UI components.', 'Using vanilla JavaScript for such tasks is described as messy, unorganized, and more difficult compared to using React.', 'The speaker suggests that although using React may seem intimidating at first, users can quickly grasp its value and ease of use.', 'The chapter mentions the ability to show ad forms, add, delete, and set toggle, indicating the completion of UI-related tasks.']}, {'end': 4913.272, 'start': 4758.041, 'title': 'Building and deploying static assets', 'summary': 'Covers the process of building and deploying static assets using npm or yarn, including creating an optimized production build and serving it locally on a specific port.', 'duration': 155.231, 'highlights': ['Creating an optimized production build using NPM run build NPM run build creates an optimized production build in a folder called build.', 'Serving the production build locally using NPM serve on a specific port Using NPM serve to serve the production build locally on a specific port, making it accessible at that port.', 'The importance of the build folder as the deployment package for static assets Emphasizing the build folder as the deployment package for static assets, clarifying its role in the deployment process.']}, {'end': 5124.754, 'start': 4913.312, 'title': 'Using jason server for mock rest api', 'summary': 'Discusses setting up jason server locally to create a mock rest api for making various requests and interacting with a local database, facilitating the integration of data into a react development server.', 'duration': 211.442, 'highlights': ['Setting up Jason Server locally to create a mock rest API with own data Explains the process of installing Jason Server locally and using it to create a mock rest API with custom data.', 'Running Jason Server with specified settings and port Describes the creation of a script to run Jason Server with specific settings and port, enabling the simulation of a real backend environment.', 'Integrating data from Jason Server into a React development server Details the process of integrating data from Jason Server into a React development server by modifying the data format to fit the JSON standards.']}, {'end': 5339.449, 'start': 5125.795, 'title': 'Fetching and managing tasks in react', 'summary': 'Discusses fetching tasks from the backend using the fetch api and managing them in react using the useeffect hook, allowing for data retrieval and state management, with a demonstration of making http requests and dealing with side effects.', 'duration': 213.654, 'highlights': ['The chapter discusses fetching tasks from the backend using the fetch API It covers fetching tasks from the backend using the fetch API to retrieve data, demonstrating the process of making HTTP requests.', 'Managing tasks in React using the useEffect hook for data retrieval and state management It explains using the useEffect hook in React for data retrieval and state management, showcasing the process of dealing with side effects and performing actions when the page loads.', 'Demonstration of making HTTP requests and dealing with side effects It illustrates making HTTP requests and dealing with side effects in React, highlighting the usage of asynchronous functions and awaiting promises for data retrieval.']}, {'end': 5637.543, 'start': 5340.908, 'title': 'Backend tasks management', 'summary': 'Covers how to fetch, delete, and add tasks to the backend, including making a delete request, displaying responses, and setting up a post request for adding data.', 'duration': 296.635, 'highlights': ['The chapter covers how to fetch, delete, and add tasks to the backend The chapter discusses fetching, deleting, and adding tasks to the backend, focusing on backend management.', 'Making a delete request and displaying responses The process includes making a delete request and displaying responses in the UI, ensuring the deleted task is removed from the server.', 'Setting up a post request for adding data The tutorial explains the setup of a post request to add data, including specifying the method as post, adding headers, setting the body, and updating the tasks array with the new task.']}, {'end': 5915.54, 'start': 5639.063, 'title': 'Server-side task management', 'summary': 'Covers the process of creating, updating, and fetching tasks from the server-side, including troubleshooting a key error and handling reminders with a focus on asynchronous operations and http requests.', 'duration': 276.477, 'highlights': ['The chapter covers the process of creating, updating, and fetching tasks from the server-side Explains the process of creating, updating, and fetching tasks from the server-side, involving setting reminders and resolving key errors.', 'Troubleshooting a key error Discusses identifying and resolving the key error in the server-side task management process.', 'Handling reminders with a focus on asynchronous operations and HTTP requests Details the process of handling reminders with a focus on asynchronous operations and making HTTP requests for updating tasks.']}], 'duration': 1203.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv84712419.jpg', 'highlights': ['React allows for creating dynamic interfaces without page reloads, making it valuable for building interactive UI components.', 'Using vanilla JavaScript for such tasks is described as messy, unorganized, and more difficult compared to using React.', 'The chapter discusses fetching tasks from the backend using the fetch API, covering the process of making HTTP requests.', 'The chapter covers how to fetch, delete, and add tasks to the backend, focusing on backend management.', 'Creating an optimized production build using NPM run build creates an optimized production build in a folder called build.', 'Setting up Jason Server locally to create a mock rest API with own data explains the process of installing Jason Server locally and using it to create a mock rest API with custom data.']}, {'end': 6526.69, 'segs': [{'end': 5998.962, 'src': 'embed', 'start': 5966.433, 'weight': 4, 'content': [{'end': 5971.015, 'text': "So to use routing, there's no routing included with the core library.", 'start': 5966.433, 'duration': 4.582}, {'end': 5973.717, 'text': "I'm just going to let's see.", 'start': 5972.096, 'duration': 1.621}, {'end': 5975.298, 'text': "I'll just open a new tab here.", 'start': 5973.777, 'duration': 1.521}, {'end': 5978.219, 'text': 'So we use a package called React Router Dom.', 'start': 5975.678, 'duration': 2.541}, {'end': 5983.782, 'text': "So let's NPM install react dash router dash Dom.", 'start': 5978.599, 'duration': 5.183}, {'end': 5989.793, 'text': "And that's going to show up in our package dot Jason.", 'start': 5987.571, 'duration': 2.222}, {'end': 5998.962, 'text': 'OK, so there it is now in our app JS.', 'start': 5989.813, 'duration': 9.149}], 'summary': 'React router dom package installed via npm for routing in app.js', 'duration': 32.529, 'max_score': 5966.433, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv85966433.jpg'}, {'end': 6207.22, 'src': 'heatmap', 'start': 6135.825, 'weight': 0.739, 'content': [{'end': 6139.788, 'text': "Now this about component I'm going to bring into app JS.", 'start': 6135.825, 'duration': 3.963}, {'end': 6151.494, 'text': "And of course, I could just embed it like we've been doing, but I want to use the router.", 'start': 6147.711, 'duration': 3.783}, {'end': 6161.44, 'text': "So we need to bring in, let's say, import from react router Dom.", 'start': 6152.154, 'duration': 9.286}, {'end': 6168.925, 'text': 'And what we want to bring in are two things we want to bring in browser router, which will use the HTML5 push state.', 'start': 6161.6, 'duration': 7.325}, {'end': 6171.987, 'text': "I'm going to give it an alias of router, though.", 'start': 6169.545, 'duration': 2.442}, {'end': 6173.728, 'text': 'And then we also want to bring in route.', 'start': 6172.167, 'duration': 1.561}, {'end': 6178.271, 'text': 'So to use the router, we have to wrap everything in our output.', 'start': 6174.969, 'duration': 3.302}, {'end': 6184.114, 'text': "So in our return right here, we're going to wrap everything in router.", 'start': 6180.572, 'duration': 3.542}, {'end': 6185.615, 'text': 'All right.', 'start': 6184.134, 'duration': 1.481}, {'end': 6190.537, 'text': "So I'm going to grab that and put that down here.", 'start': 6185.635, 'duration': 4.902}, {'end': 6193.859, 'text': 'So now since we wrap that in router, we can use routes.', 'start': 6190.917, 'duration': 2.942}, {'end': 6200.983, 'text': "So right above the footer, I'm going to say route and pass in a path.", 'start': 6194.479, 'duration': 6.504}, {'end': 6207.22, 'text': 'of slash about and then pass in a component.', 'start': 6202.034, 'duration': 5.186}], 'summary': 'Using react router to bring in browser router and route for app js.', 'duration': 71.395, 'max_score': 6135.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv86135825.jpg'}, {'end': 6236.324, 'src': 'embed', 'start': 6212.045, 'weight': 2, 'content': [{'end': 6219.894, 'text': "Now, if I save that, if I click on about I can see the about component I can see the other ones as well because they're just embedded up here.", 'start': 6212.045, 'duration': 7.849}, {'end': 6223.856, 'text': "So any route we create we're always going to see those which I want to change.", 'start': 6220.314, 'duration': 3.542}, {'end': 6228.079, 'text': "Now it's not going to be as easy as just labeling a component,", 'start': 6224.457, 'duration': 3.622}, {'end': 6236.324, 'text': 'because we I want to put the add task component in the tasks component all in one route on the index route.', 'start': 6228.079, 'duration': 8.245}], 'summary': 'Discussing the addition of components to a route for better visualization and accessibility.', 'duration': 24.279, 'max_score': 6212.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv86212045.jpg'}, {'end': 6323.041, 'src': 'embed', 'start': 6295.48, 'weight': 0, 'content': [{'end': 6300.684, 'text': 'Now we see the ad and the the tasks.', 'start': 6295.48, 'duration': 5.204}, {'end': 6303.255, 'text': 'All right.', 'start': 6302.975, 'duration': 0.28}, {'end': 6304.415, 'text': "So let's see.", 'start': 6303.495, 'duration': 0.92}, {'end': 6312.778, 'text': 'Next thing you notice when I click on about or go back, see how the reload in up here, see how the page reloads.', 'start': 6304.475, 'duration': 8.303}, {'end': 6313.578, 'text': "We don't want that.", 'start': 6312.798, 'duration': 0.78}, {'end': 6319.14, 'text': "So to stop that from happening, instead of using an a tag, for instance, let's go to the about page.", 'start': 6313.978, 'duration': 5.162}, {'end': 6323.041, 'text': "Instead of using an a tag, we're going to use link from react router DOM.", 'start': 6319.18, 'duration': 3.861}], 'summary': 'Using link from react router dom to prevent page reloads.', 'duration': 27.561, 'max_score': 6295.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv86295480.jpg'}], 'start': 5916.641, 'title': 'Implementing routing in react', 'summary': 'Covers implementing routing in react using react router dom, creating routes, adding components to routes, using links for navigation, and conditionally rendering components based on route. it also emphasizes the importance of practice and continued learning in mastering react.', 'chapters': [{'end': 6526.69, 'start': 5916.641, 'title': 'Implementing routing in react', 'summary': 'Covers implementing routing in react using react router dom, creating routes, adding components to routes, using links for navigation, and conditionally rendering components based on route. it also emphasizes the importance of practice and continued learning in mastering react.', 'duration': 610.049, 'highlights': ['The chapter covers implementing routing in React using React Router Dom. This includes installing the package and wrapping the components in the router.', "Creating routes and adding components to routes are demonstrated. The chapter demonstrates creating routes for different components and adding components to these routes using the 'route' and 'render' methods.", "Using links for navigation and preventing page reloads is explained. The importance of using 'link' from React Router Dom instead of regular 'a' tags for navigation is emphasized, as it prevents page reloads and provides instant navigation.", "Conditionally rendering components based on the route is discussed. The use of 'useLocation' hook from React Router Dom to conditionally render components based on the current route is demonstrated, ensuring certain components are displayed based on the route.", "The chapter emphasizes the importance of practice and continued learning in mastering React. Viewers are encouraged to practice and continue learning, with the suggestion to explore documentation, review others' code, and take advantage of available resources to enhance their understanding of React."]}], 'duration': 610.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/w7ejDZ8SWv8/pics/w7ejDZ8SWv85916641.jpg', 'highlights': ['The chapter emphasizes the importance of practice and continued learning in mastering React.', 'Using links for navigation and preventing page reloads is explained.', 'Creating routes and adding components to routes are demonstrated.', 'Conditionally rendering components based on the route is discussed.', 'Covers implementing routing in React using React Router Dom.']}], 'highlights': ['React allows building single page applications, providing fast and interactive interfaces, and can be combined with other technologies for creating full stack applications.', 'React is used to structure the view layer of applications, helping in building large dynamic interfaces using reusable components.', "React's popularity and industry relevance make it beneficial for working on projects with teams, and it provides performance and testing benefits.", 'React uses JSX for writing dynamic HTML, and its apps are interactive due to the virtual DOM, which allows updating parts of the page without reloading it.', 'Prerequisites for learning React include a good understanding of JavaScript, including data types, variables, functions, loops, asynchronous code, array methods, and the fetch API.', 'The chapter emphasizes the use of components in front end frameworks like React, demonstrating the creation of a Task Tracker app with basic functionalities such as adding tasks, setting reminders, and deleting tasks.', 'The introduction of hooks in React version 16.8, including the use state hook and use effect hook for performing side effects.', 'Create React App is a CLI tool for setting up a React application with necessary files and packages.', 'The chapter covers creating React components with snippets, using arrow functions, class components, handling props, default props, prop types, and styling with CSS in React, including reusable components.', 'The chapter demonstrates the use of the useState hook in React to manage component state, emphasizing the importance of immutability and the benefits of managing state at the app level, and creating separate task components with props.', 'The chapter explains using props to pass down functions like delete task to manage state in a React application.', 'The chapter covers creating a form component in React for managing tasks and reminders.', 'React allows for creating dynamic interfaces without page reloads, making it valuable for building interactive UI components.', 'The chapter emphasizes the importance of practice and continued learning in mastering React.', 'Covers implementing routing in React using React Router Dom.']}