title
React Tutorial for Beginners

description
React JS Tutorial for Beginners - Learn React 18 with TypeScript and build awesome frontend app! - Want to learn more? Get my complete React mastery course: http://bit.ly/3l0vWYR - Subscribe for more videos like this: https://goo.gl/6PYaGF Want to learn more from me? Check out my blog and courses: Courses: https://codewithmosh.com Blog: https://programmingwithmosh.com Facebook: https://www.facebook.com/programmingwithmosh/ Twitter: https://twitter.com/moshhamedani TABLE OF CONTENT 00:00:00 Course Intro 00:01:55 Prerequisites 00:02:43 What is React? 00:04:57 Setting Up the Development Environment 00:06:24 Creating a React App 00:09:17 Project Structure 00:11:20 Creating a React Component 00:16:41 How React Works 00:19:00 React Ecosystem 00:21:04 Building Components 00:21:40 Creating a ListGroup Component 00:27:15 Fragments 00:29:42 Rendering Lists 00:33:11 Conditional Rendering 00:38:36 Handling Events 00:44:43 Managing State 00:50:44 Passing Data Via Props 00:54:42 Passing Functions Via Props 00:58:27 State Vs Props 01:00:00 Passing Children 01:05:04 Inspecting Components with React Dev Tools 01:07:14 Exercise: Building a Button Component 01:14:15 Exercise: Showing an Alert #react #webdevelopment #programming

detail
{'title': 'React Tutorial for Beginners', 'heatmap': [{'end': 914.676, 'start': 858.973, 'weight': 0.712}, {'end': 2887.306, 'start': 2784.281, 'weight': 0.747}, {'end': 3034.665, 'start': 2978.318, 'weight': 1}, {'end': 3523.36, 'start': 3458.562, 'weight': 0.932}], 'summary': 'Titled 《react tutorial for beginners》 features an ultimate react course taught by mosh hamadani, covering basic to advanced concepts, building a production-grade app, including setting up the development environment with node.js, typescript, and vite, react fundamentals, jsx formatting, event handling, dynamic css classes, state hooks, props, and creating dynamic components with typescript usage, immutability, and mutability of state.', 'chapters': [{'end': 102.433, 'segs': [{'end': 53.977, 'src': 'embed', 'start': 22.354, 'weight': 1, 'content': [{'end': 23.875, 'text': 'this is the right react course for you.', 'start': 22.354, 'duration': 1.521}, {'end': 26.637, 'text': "You won't need any prior knowledge of react to get started.", 'start': 24.276, 'duration': 2.361}, {'end': 28.458, 'text': 'Everything you need to know is right here.', 'start': 27.057, 'duration': 1.401}, {'end': 31.901, 'text': "So you won't need to jump back and forth between random tutorials.", 'start': 28.819, 'duration': 3.082}, {'end': 35.543, 'text': "Now, unlike other courses, we won't be building a dummy app.", 'start': 32.621, 'duration': 2.922}, {'end': 41.928, 'text': "Instead, we'll be building and deploying a beautiful production grade app for discovering video games.", 'start': 36.104, 'duration': 5.824}, {'end': 47.352, 'text': 'This app has all the features and UI patterns you would expect from a modern application.', 'start': 42.348, 'duration': 5.004}, {'end': 53.977, 'text': 'We can toggle between the dark and light modes, we can search for games, filter them by genre, as well as platform.', 'start': 47.712, 'duration': 6.265}], 'summary': 'React course with production-grade video games app, including dark/light modes and search/filter features.', 'duration': 31.623, 'max_score': 22.354, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk22354.jpg'}, {'end': 102.433, 'src': 'embed', 'start': 64.76, 'weight': 0, 'content': [{'end': 65.781, 'text': "And that's just the start.", 'start': 64.76, 'duration': 1.021}, {'end': 74.343, 'text': "In the next part, which I'm currently working on, we'll dive into advanced topics like routing, state management, fetching data with React query,", 'start': 66.041, 'duration': 8.302}, {'end': 78.444, 'text': 'authentication, error handling, performance optimization and much, much more.', 'start': 74.343, 'duration': 4.101}, {'end': 84.985, 'text': "I've put my heart and soul into creating this course and I'm confident that it's going to be a game changer for your React skills.", 'start': 79.004, 'duration': 5.981}, {'end': 86.665, 'text': "I'm Mosh Hamadani.", 'start': 85.865, 'duration': 0.8}, {'end': 97.771, 'text': "I'm a software engineer with over 20 years of experience and I've taught millions of people how to code and become professional software engineers through my YouTube channel and online school codewithmosh.com.", 'start': 87.106, 'duration': 10.665}, {'end': 102.433, 'text': "If you're new here, make sure to subscribe as I upload new videos all the time.", 'start': 98.331, 'duration': 4.102}], 'summary': 'Upcoming react course covers advanced topics like routing, state management, authentication, and more, by mosh hamadani, a software engineer with over 20 years of experience.', 'duration': 37.673, 'max_score': 64.76, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk64760.jpg'}], 'start': 2.401, 'title': 'Ultimate react course', 'summary': 'Covers the ultimate react course, including basic to advanced concepts, building a production-grade app, and diving into advanced topics, taught by mosh hamadani, with over 20 years of experience.', 'chapters': [{'end': 102.433, 'start': 2.401, 'title': 'Ultimate react course', 'summary': 'Covers the ultimate react course, including basic to advanced concepts, building a production-grade app, and diving into advanced topics, taught by mosh hamadani, with over 20 years of experience.', 'duration': 100.032, 'highlights': ['Mosh Hamadani, with over 20 years of experience, teaches a comprehensive React course, covering basic to advanced concepts.', 'Building and deploying a production-grade app for discovering video games, with all features and UI patterns of a modern application.', 'Diving into advanced topics like routing, state management, fetching data with React query, authentication, error handling, and performance optimization.']}], 'duration': 100.032, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2401.jpg', 'highlights': ['Mosh Hamadani teaches comprehensive React course, 20 years experience', 'Building & deploying production-grade app for discovering video games', 'Diving into advanced topics: routing, state management, data fetching, authentication, error handling, performance optimization']}, {'end': 993.52, 'segs': [{'end': 159.427, 'src': 'embed', 'start': 134.522, 'weight': 1, 'content': [{'end': 139.648, 'text': 'If you are comfortable writing code in these languages, you are in a great position to start learning React.', 'start': 134.522, 'duration': 5.126}, {'end': 142.27, 'text': "Now, throughout the course, we'll be using TypeScript.", 'start': 140.228, 'duration': 2.042}, {'end': 147.135, 'text': 'TypeScript is a super set of JavaScript that adds static typing to the language.', 'start': 142.711, 'duration': 4.424}, {'end': 153.601, 'text': 'Essentially, it helps us catch errors earlier in the development process, which can save us time and headaches down the road.', 'start': 147.575, 'duration': 6.026}, {'end': 159.427, 'text': "Now, don't worry if you have never coded in TypeScript before, I'll hold your hands and teach you everything from scratch.", 'start': 154.122, 'duration': 5.305}], 'summary': 'Learning react using typescript can catch errors early, saving time and headaches.', 'duration': 24.905, 'max_score': 134.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk134522.jpg'}, {'end': 246.742, 'src': 'embed', 'start': 179.656, 'weight': 0, 'content': [{'end': 186.78, 'text': 'It was created at Facebook in 2011 and is currently the most widely used JavaScript library for front-end development.', 'start': 179.656, 'duration': 7.124}, {'end': 193.243, 'text': "So if you're looking for a job as a front-end developer, you should know how to confidently build applications with React.", 'start': 187.2, 'duration': 6.043}, {'end': 195.224, 'text': 'But why was React created?', 'start': 193.843, 'duration': 1.381}, {'end': 199.648, 'text': 'Well, as you probably know, when a web page is loaded in a browser,', 'start': 195.725, 'duration': 3.923}, {'end': 207.936, 'text': 'the browser takes the HTML code and creates a tree-like structure called the document object model or the DOM for short.', 'start': 199.648, 'duration': 8.288}, {'end': 213.721, 'text': 'This allows us to use JavaScript and change the page content in response to user actions.', 'start': 208.537, 'duration': 5.184}, {'end': 218.186, 'text': 'For example, we can use JavaScript to hide an element when a button is clicked.', 'start': 214.222, 'duration': 3.964}, {'end': 224.129, 'text': 'This is called vanilla JavaScript, meaning plain JavaScript code without any third party tools.', 'start': 218.666, 'duration': 5.463}, {'end': 230.233, 'text': 'Now, as our applications grow, working with a DOM can become quite complex and challenging to manage.', 'start': 224.709, 'duration': 5.524}, {'end': 232.614, 'text': 'This is where React comes into play.', 'start': 230.733, 'duration': 1.881}, {'end': 237.276, 'text': 'With React, we no longer need to worry about querying and updating DOM elements.', 'start': 232.994, 'duration': 4.282}, {'end': 246.742, 'text': 'Instead, we describe a webpage using small reusable components, and React will take care of efficiently creating and updating DOM elements.', 'start': 237.837, 'duration': 8.905}], 'summary': 'React, the most widely used javascript library, simplifies front-end development by creating and updating dom elements efficiently.', 'duration': 67.086, 'max_score': 179.656, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk179656.jpg'}, {'end': 317.721, 'src': 'embed', 'start': 290.694, 'weight': 4, 'content': [{'end': 296.518, 'text': "Next, we're going to set up our development environment and get a feel for what it's like to build applications with React.", 'start': 290.694, 'duration': 5.824}, {'end': 306.855, 'text': 'Alright, to take this course, you need to have node version 16 or higher.', 'start': 303.373, 'duration': 3.482}, {'end': 315.1, 'text': 'Now to check the version of node on your machine, open up your command prompt or terminal window, and run node dash v.', 'start': 307.455, 'duration': 7.645}, {'end': 317.721, 'text': "So, on this machine I'm running node version 19,.", 'start': 315.1, 'duration': 2.621}], 'summary': 'Setting up development environment with react, requiring node version 16 or higher. node version on the machine is 19.', 'duration': 27.027, 'max_score': 290.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk290694.jpg'}, {'end': 423.819, 'src': 'embed', 'start': 392.844, 'weight': 3, 'content': [{'end': 398.591, 'text': "We can use the official tool provided by the react team, it's called create react app or CRA.", 'start': 392.844, 'duration': 5.747}, {'end': 407.882, 'text': "But we also have another tool called Vite that's getting increasingly popular these days because it's much faster and gives us smaller bundle sizes.", 'start': 399.072, 'duration': 8.81}, {'end': 414.069, 'text': "So, here in the terminal window I'm currently on my desktop to create a new app using Vite.", 'start': 408.803, 'duration': 5.266}, {'end': 423.819, 'text': 'all you have to do is run npm, create Vite at latest or, if you want to use the exact same version as me which is what I recommend you,', 'start': 414.069, 'duration': 9.75}], 'summary': 'Comparing create react app (cra) and vite for app creation, with vite being faster and providing smaller bundle sizes.', 'duration': 30.975, 'max_score': 392.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk392844.jpg'}, {'end': 914.676, 'src': 'heatmap', 'start': 858.973, 'weight': 0.712, 'content': [{'end': 865.335, 'text': 'so first we need to import our message component from period slash message.', 'start': 858.973, 'duration': 6.362}, {'end': 866.576, 'text': 'so period means the current folder.', 'start': 865.335, 'duration': 1.241}, {'end': 871.819, 'text': 'now we can use this component, just like regular html elements.', 'start': 867.536, 'duration': 4.283}, {'end': 875.721, 'text': 'so we add the opening tag and close it.', 'start': 871.819, 'duration': 3.902}, {'end': 876.961, 'text': "it's really important to close it.", 'start': 875.721, 'duration': 1.24}, {'end': 881.344, 'text': "we should always close our react components or we'll get a compilation error now.", 'start': 876.961, 'duration': 4.383}, {'end': 883.965, 'text': 'here we can also use the self-closing syntax.', 'start': 881.344, 'duration': 2.621}, {'end': 885.686, 'text': 'that is more concise.', 'start': 883.965, 'duration': 1.721}, {'end': 893.551, 'text': 'now, just like the message component, we should export the app component so it can be used somewhere else.', 'start': 885.686, 'duration': 7.865}, {'end': 902.325, 'text': 'Now, here in the terminal, you can see our web server is still running and here we have HMR, which is short for hot module replacement.', 'start': 894.557, 'duration': 7.768}, {'end': 905.969, 'text': 'so Vite under the hood monitors our files for changes.', 'start': 902.325, 'duration': 3.644}, {'end': 910.033, 'text': 'whenever we make any changes, it will automatically refresh our page in the browser.', 'start': 905.969, 'duration': 4.064}, {'end': 914.676, 'text': 'So now you can see our message component rendered on the screen.', 'start': 911.311, 'duration': 3.365}], 'summary': 'Import message component, use self-closing syntax, hmr for automatic refresh.', 'duration': 55.703, 'max_score': 858.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk858973.jpg'}], 'start': 103.033, 'title': 'Learning react and setting up development environment', 'summary': 'Covers the prerequisites for learning react, the significance of typescript, and guides on setting up the development environment with node.js 16 or higher, installing vs code with prettier extension, and creating a react application using vite.', 'chapters': [{'end': 290.254, 'start': 103.033, 'title': 'Master react and build front-end apps', 'summary': 'Introduces the prerequisites for learning react, the significance of typescript, the purpose of react, and the benefits of using react for building dynamic and interactive user interfaces.', 'duration': 187.221, 'highlights': ['React is the most widely used JavaScript library for front-end development', 'TypeScript adds static typing to JavaScript, aiding in error detection and saving time in the development process', 'React allows the creation of small reusable components, efficiently managing DOM elements']}, {'end': 993.52, 'start': 290.694, 'title': 'Setting up react development environment', 'summary': 'Guides on setting up the development environment with node.js 16 or higher, installing vs code with prettier extension, creating a react application using vite, and creating and using react components with jsx.', 'duration': 702.826, 'highlights': ['Setting up Development Environment', 'Creating React Application with Vite', 'Creating and Using React Components with JSX']}], 'duration': 890.487, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk103033.jpg', 'highlights': ['React is the most widely used JavaScript library for front-end development', 'TypeScript adds static typing to JavaScript, aiding in error detection and saving time', 'React allows the creation of small reusable components, efficiently managing DOM elements', 'Creating React Application with Vite', 'Setting up Development Environment', 'Creating and Using React Components with JSX']}, {'end': 1578.13, 'segs': [{'end': 1042.028, 'src': 'embed', 'start': 994.121, 'weight': 0, 'content': [{'end': 1000.386, 'text': 'So this is the beauty of JSX, using this syntax, we can easily describe the user interface of our applications.', 'start': 994.121, 'duration': 6.265}, {'end': 1014.389, 'text': 'you So currently we have a component tree with the app being the root or top level component and the message being a child.', 'start': 1003.234, 'duration': 11.155}, {'end': 1022.195, 'text': 'When our application starts, React takes this component tree and builds a JavaScript data structure called the virtual DOM.', 'start': 1014.95, 'duration': 7.245}, {'end': 1025.778, 'text': 'This virtual DOM is different from the actual DOM in the browser.', 'start': 1022.816, 'duration': 2.962}, {'end': 1033.425, 'text': "It's a lightweight in-memory representation of our component tree where each node represents a component and its properties.", 'start': 1026.138, 'duration': 7.287}, {'end': 1042.028, 'text': 'When the state or the data of a component changes, React updates the corresponding node in the virtual DOM to reflect the new state.', 'start': 1034.065, 'duration': 7.963}], 'summary': 'Jsx simplifies ui description, react uses virtual dom to update state.', 'duration': 47.907, 'max_score': 994.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk994121.jpg'}, {'end': 1159.302, 'src': 'embed', 'start': 1133.92, 'weight': 3, 'content': [{'end': 1139.567, 'text': "it's platform agnostic and we can use it to build apps for web, mobile and desktop devices.", 'start': 1133.92, 'duration': 5.647}, {'end': 1151.06, 'text': 'So you have learned that React is a JavaScript library for creating user interfaces.', 'start': 1147.119, 'duration': 3.941}, {'end': 1156.161, 'text': 'In contrast to React, we have other tools like Angular and Vue which are frameworks.', 'start': 1151.54, 'duration': 4.621}, {'end': 1159.302, 'text': 'But what is the difference between a library and a framework?', 'start': 1156.582, 'duration': 2.72}], 'summary': 'React is a versatile javascript library for building uis across platforms.', 'duration': 25.382, 'max_score': 1133.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk1133920.jpg'}, {'end': 1294.997, 'src': 'embed', 'start': 1267.307, 'weight': 1, 'content': [{'end': 1269.908, 'text': 'So you got a taste of building applications with react.', 'start': 1267.307, 'duration': 2.601}, {'end': 1274.57, 'text': "In this section, we'll be covering the fundamental concepts in react applications.", 'start': 1270.348, 'duration': 4.222}, {'end': 1278.271, 'text': "This is the most important section in this course you don't want to miss.", 'start': 1274.93, 'duration': 3.341}, {'end': 1282.573, 'text': "The materials I've covered here help you build a strong foundation in react.", 'start': 1278.651, 'duration': 3.922}, {'end': 1287.214, 'text': "We'll talk about building components, rendering markup with JSX,", 'start': 1283.133, 'duration': 4.081}, {'end': 1292.816, 'text': 'managing state passing input to components for props and debugging react applications.', 'start': 1287.214, 'duration': 5.602}, {'end': 1294.997, 'text': "So let's jump in and get started.", 'start': 1293.536, 'duration': 1.461}], 'summary': 'Fundamental concepts of react applications covered, including building components and managing state.', 'duration': 27.69, 'max_score': 1267.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk1267307.jpg'}, {'end': 1337.668, 'src': 'embed', 'start': 1314.992, 'weight': 2, 'content': [{'end': 1323.378, 'text': "Now in case you're not familiar with bootstrap, it's a very popular CSS library that gives us a bunch of CSS classes for styling our applications.", 'start': 1314.992, 'duration': 8.386}, {'end': 1327.341, 'text': 'So here we open up our terminal window.', 'start': 1324.159, 'duration': 3.182}, {'end': 1329.162, 'text': 'you can see our web server is running.', 'start': 1327.341, 'duration': 1.821}, {'end': 1333.205, 'text': 'so we open a new terminal window and run npm.', 'start': 1329.162, 'duration': 4.043}, {'end': 1335.226, 'text': 'install bootstrap.', 'start': 1333.205, 'duration': 2.021}, {'end': 1336.907, 'text': "the version that I'm using in this video is 5.2..", 'start': 1335.226, 'duration': 1.681}, {'end': 1337.668, 'text': "3. Let's go ahead.", 'start': 1336.907, 'duration': 0.761}], 'summary': 'Using bootstrap, a popular css library, version 5.2.3 for styling applications.', 'duration': 22.676, 'max_score': 1314.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk1314992.jpg'}], 'start': 994.121, 'title': 'React fundamentals & complete course overview', 'summary': 'Highlights the introduction to react and its ecosystem, including a 8-hour complete course with a 30-day money-back guarantee, covering fundamental concepts, installing bootstrap for styling, and importing bootstrap into a react application.', 'chapters': [{'end': 1201.372, 'start': 994.121, 'title': 'Understanding react and jsx', 'summary': 'Explains the role of jsx in describing user interfaces, the virtual dom in react for efficient updates, and the platform-agnostic nature of react for building web, mobile, and desktop apps.', 'duration': 207.251, 'highlights': ['React is platform agnostic and can be used to build apps for web, mobile, and desktop devices.', 'The virtual DOM in React enables efficient updates by comparing current and previous versions to identify and update specific nodes in the actual DOM.', 'JSX allows for easy description of user interface in applications, providing a convenient syntax for UI development.']}, {'end': 1397.534, 'start': 1201.952, 'title': 'React fundamentals & complete course overview', 'summary': 'Highlights the introduction to react and its ecosystem, including a 8-hour complete course with a 30-day money-back guarantee, covering fundamental concepts, installing bootstrap for styling, and importing bootstrap into a react application.', 'duration': 195.582, 'highlights': ['The complete course includes 8 hours of content, packed with the latest techniques and best practices, and comes with a 30-day money-back guarantee.', 'In the section, fundamental concepts in react applications are covered, including building components, rendering markup with JSX, managing state, passing input to components for props, and debugging react applications.', 'The tutorial features the creation of a basic list group component and the installation of Bootstrap (version 5.2.3) to give the application a modern look and feel.', 'Explanation on how to import Bootstrap into the React application by replacing the line with import bootstrap/dist/css/bootstrap.css in the main.tsx file to ensure proper import.']}, {'end': 1578.13, 'start': 1397.534, 'title': 'Creating list group component', 'summary': 'Discusses the process of creating a list group component in a project, including naming conventions, importing the component, and resolving errors related to javascript or typescript keywords, along with demonstrating shortcut commands for efficient coding practices.', 'duration': 180.596, 'highlights': ['Creating a List Group Component', 'Importing and Using the List Group Component', 'Resolving Errors Related to JavaScript or TypeScript Keywords', 'Efficient Coding Practices']}], 'duration': 584.009, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk994121.jpg', 'highlights': ['8-hour complete course with 30-day money-back guarantee', 'Fundamental concepts in react applications covered', 'Installing Bootstrap (v5.2.3) for modern look and feel', "React's platform agnostic nature for web, mobile, and desktop apps", 'Virtual DOM in React enables efficient updates', 'JSX provides convenient syntax for UI development']}, {'end': 2304.503, 'segs': [{'end': 1607.132, 'src': 'embed', 'start': 1578.13, 'weight': 0, 'content': [{'end': 1585.915, 'text': 'note, the shortcut on mac is shift, command and p, and here we search for format document.', 'start': 1578.13, 'duration': 7.785}, {'end': 1591.299, 'text': 'okay, here we have an error saying there are multiple formatters for typescript jsx files.', 'start': 1585.915, 'duration': 5.384}, {'end': 1598.665, 'text': "so let's click on configure and here we're going to use predier as our default code formatter.", 'start': 1591.299, 'duration': 7.366}, {'end': 1602.468, 'text': 'Good, now this file is formatted beautiful.', 'start': 1599.425, 'duration': 3.043}, {'end': 1607.132, 'text': 'just note that predier automatically wrapped our jsx markup in parenthesis.', 'start': 1602.468, 'duration': 4.664}], 'summary': 'Configured predier as default code formatter for typescript jsx files, improving formatting and automatically wrapping jsx markup in parenthesis.', 'duration': 29.002, 'max_score': 1578.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk1578130.jpg'}, {'end': 1733.181, 'src': 'embed', 'start': 1701.476, 'weight': 2, 'content': [{'end': 1708.359, 'text': 'now we press enter and here we specify the type of element that we want to use to wrap this entire code.', 'start': 1701.476, 'duration': 6.883}, {'end': 1710.96, 'text': 'so div enter done.', 'start': 1708.359, 'duration': 2.601}, {'end': 1718.323, 'text': "so that's one way, but we are adding one extra element in the dom purely for making react happy.", 'start': 1712.461, 'duration': 5.862}, {'end': 1719.584, 'text': 'this is unnecessary.', 'start': 1718.323, 'duration': 1.261}, {'end': 1721.805, 'text': 'a better way is to use a fragment.', 'start': 1719.584, 'duration': 2.221}, {'end': 1727.598, 'text': 'so on the top, import fragment from react.', 'start': 1721.805, 'duration': 5.793}, {'end': 1730.099, 'text': 'make sure to put it in braces.', 'start': 1727.598, 'duration': 2.501}, {'end': 1733.181, 'text': 'now we replace the div with a fragment.', 'start': 1730.099, 'duration': 3.082}], 'summary': 'Using a fragment instead of an extra div in react for efficiency.', 'duration': 31.705, 'max_score': 1701.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk1701476.jpg'}, {'end': 1846.007, 'src': 'embed', 'start': 1814.281, 'weight': 3, 'content': [{'end': 1822.488, 'text': "Now, in jsx, we don't have a for loop, so we cannot write code like for item in items rendered, whatever.", 'start': 1814.281, 'duration': 8.207}, {'end': 1823.529, 'text': "It doesn't work that way.", 'start': 1822.728, 'duration': 0.801}, {'end': 1825.411, 'text': 'So we have to use a different technique.', 'start': 1823.989, 'duration': 1.422}, {'end': 1835.199, 'text': 'In javascript, as you probably know, arrays have a method called map for mapping or converting each item to an item of a different type.', 'start': 1826.211, 'duration': 8.988}, {'end': 1846.007, 'text': 'So if you type items.map, here we can pass an arrow function, we can say take each item and convert it to an item of a different type.', 'start': 1836, 'duration': 10.007}], 'summary': 'In jsx, use the map method for converting items to a different type.', 'duration': 31.726, 'max_score': 1814.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk1814281.jpg'}, {'end': 1975.017, 'src': 'embed', 'start': 1945.562, 'weight': 5, 'content': [{'end': 1952.465, 'text': 'Here, the warning is saying that each list item should have a key prop or a key property that uniquely identifies that item.', 'start': 1945.562, 'duration': 6.903}, {'end': 1961.83, 'text': 'React needs this to keep track of our items, so later when we add or remove items dynamically, React knows what part of the page should be updated.', 'start': 1953.066, 'duration': 8.764}, {'end': 1967.973, 'text': 'So when rendering a list of items using the map method, we should give each item a unique key.', 'start': 1962.51, 'duration': 5.463}, {'end': 1975.017, 'text': 'Now, in this case, each item is a unique string, so we can use the item itself as a unique key.', 'start': 1968.714, 'duration': 6.303}], 'summary': 'Each list item should have a unique key prop in react to enable dynamic updates.', 'duration': 29.455, 'max_score': 1945.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk1945562.jpg'}, {'end': 2099.548, 'src': 'embed', 'start': 2049.409, 'weight': 4, 'content': [{'end': 2058.132, 'text': 'if I save the changes, 3dr reformats our code and here once again we have parenthesis for spreading this code over multiple lights.', 'start': 2049.409, 'duration': 8.723}, {'end': 2066.176, 'text': "With this, our heading is back, but I don't like this implementation because we have a bit of duplication and, generally speaking,", 'start': 2059.174, 'duration': 7.002}, {'end': 2069.077, 'text': 'duplication in code is not considered a good practice.', 'start': 2066.176, 'duration': 2.901}, {'end': 2072.178, 'text': 'So let me show you a different way to achieve the same result.', 'start': 2069.536, 'duration': 2.642}, {'end': 2081.647, 'text': "we're going to get rid of the if statement, instead, we're going to render things conditionally inside our JSX expression.", 'start': 2072.938, 'duration': 8.709}, {'end': 2088.715, 'text': 'However, inside this JSX expression we cannot write an if statement because, as I told you earlier,', 'start': 2082.328, 'duration': 6.387}, {'end': 2093.139, 'text': 'here we can only use HTML elements or other React components.', 'start': 2088.715, 'duration': 4.424}, {'end': 2099.548, 'text': 'The only exception is braces, with braces we can render anything dynamically.', 'start': 2093.679, 'duration': 5.869}], 'summary': 'Reformatted code with 3dr, reduced duplication using jsx expressions instead of if statement.', 'duration': 50.139, 'max_score': 2049.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2049409.jpg'}], 'start': 1578.13, 'title': 'React jsx formatting, rendering, and basics', 'summary': 'Explains formatting jsx code in vs code, resolving issues with returning multiple elements in a react component, and provides alternatives. it also covers jsx basics in react, including mapping through arrays, handling dynamic content, conditional rendering, and code optimization.', 'chapters': [{'end': 1757.251, 'start': 1578.13, 'title': 'React jsx formatting and rendering', 'summary': 'Explains how to format jsx code in vs code using prettier, resolve issues with returning multiple elements in a react component, and provides alternatives like using fragments or wrapping with another element.', 'duration': 179.121, 'highlights': ['The chapter demonstrates how to format JSX code in VS Code using Prettier, which automatically wraps JSX markup in parentheses and ensures proper formatting of the code.', 'It highlights the issue of returning multiple elements in a React component and explains the solutions, such as wrapping the expression inside a div or using a fragment, with the latter being preferred to avoid unnecessary additional elements in the DOM.', 'The chapter also emphasizes the importance of properly formatting JSX code to ensure readability and maintainability, showcasing the use of shortcuts and commands in VS Code for efficient code editing.']}, {'end': 2304.503, 'start': 1757.531, 'title': 'React jsx basics', 'summary': 'Covers the basics of jsx in react, including mapping through arrays, handling dynamic content, conditional rendering, and optimizing code structure, with a focus on improving readability and avoiding code duplication.', 'duration': 546.972, 'highlights': ['JSX Basics and Mapping through Arrays', 'Conditional Rendering and Optimization', 'Handling Unique Key Prop in Lists', 'Organizing Code Structure with Functions and Variables']}], 'duration': 726.373, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk1578130.jpg', 'highlights': ['The chapter demonstrates how to format JSX code in VS Code using Prettier, which automatically wraps JSX markup in parentheses and ensures proper formatting of the code.', 'The chapter also emphasizes the importance of properly formatting JSX code to ensure readability and maintainability, showcasing the use of shortcuts and commands in VS Code for efficient code editing.', 'The issue of returning multiple elements in a React component is highlighted, with explanations of solutions such as wrapping the expression inside a div or using a fragment, with the latter being preferred to avoid unnecessary additional elements in the DOM.', 'JSX Basics and Mapping through Arrays', 'Conditional Rendering and Optimization', 'Handling Unique Key Prop in Lists', 'Organizing Code Structure with Functions and Variables']}, {'end': 2643.316, 'segs': [{'end': 2360.401, 'src': 'embed', 'start': 2305.164, 'weight': 0, 'content': [{'end': 2309.507, 'text': 'So this is a very common technique react developers use to render content dynamically.', 'start': 2305.164, 'duration': 4.343}, {'end': 2314.59, 'text': 'With this we can remove this line and this is our final implementation.', 'start': 2310.467, 'duration': 4.123}, {'end': 2325.176, 'text': "Alright, now let's see how we can handle click events in a component.", 'start': 2321.994, 'duration': 3.182}, {'end': 2330.198, 'text': "First I'm going to remove this line, so we bring back our items, good.", 'start': 2325.916, 'duration': 4.282}, {'end': 2336.942, 'text': 'Now I just realized that earlier I made a mistake and forgot to apply one of the bootstrap classes to these items.', 'start': 2330.659, 'duration': 6.283}, {'end': 2345.987, 'text': "So back to our code, this is where we're rendering a list item, we should give this a class of list-group-item.", 'start': 2337.462, 'duration': 8.525}, {'end': 2350.099, 'text': "okay, that's better.", 'start': 2348.058, 'duration': 2.041}, {'end': 2355.2, 'text': 'now we want to be able to click on each item and see it on the console in react.', 'start': 2350.099, 'duration': 5.101}, {'end': 2360.401, 'text': 'each element has a property or a prop called on click.', 'start': 2355.2, 'duration': 5.201}], 'summary': 'React developers use dynamic rendering. added bootstrap class to items. implemented click event handling.', 'duration': 55.237, 'max_score': 2305.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2305164.jpg'}, {'end': 2483.805, 'src': 'embed', 'start': 2404.932, 'weight': 3, 'content': [{'end': 2412.719, 'text': 'So, when creating this list item, we have access to each item because we are using that item as the key of each list item right?', 'start': 2404.932, 'duration': 7.787}, {'end': 2417.343, 'text': 'So instead of logging clicked, we can simply log item.', 'start': 2413.42, 'duration': 3.923}, {'end': 2423.083, 'text': 'now if we click on each item, we see it on the console, beautiful.', 'start': 2419.562, 'duration': 3.521}, {'end': 2431.227, 'text': 'And, by the way, when mapping items, we can optionally add a second parameter as an index,', 'start': 2423.704, 'duration': 7.523}, {'end': 2434.828, 'text': 'and with this we can see the index of the item that was clicked.', 'start': 2431.227, 'duration': 3.601}, {'end': 2443.891, 'text': "So let me show you, I'm going to clear the console, now if we click on each item, we can also see its index in the array.", 'start': 2435.288, 'duration': 8.603}, {'end': 2450.8, 'text': 'Lovely Now this arrow function can optionally have a parameter that represents the browser event.', 'start': 2444.392, 'duration': 6.408}, {'end': 2454.545, 'text': 'We can call that e or event, whatever we prefer.', 'start': 2451.381, 'duration': 3.164}, {'end': 2458.031, 'text': "Now let's log this on the console and see what we get.", 'start': 2455.287, 'duration': 2.744}, {'end': 2462.337, 'text': 'so clear click.', 'start': 2460.256, 'duration': 2.081}, {'end': 2466.738, 'text': 'look. the type of this object is synthetic base event.', 'start': 2462.337, 'duration': 4.401}, {'end': 2468.159, 'text': "i know it's a fancy term.", 'start': 2466.738, 'duration': 1.421}, {'end': 2474.762, 'text': 'this is one of the built-in classes in react, because different browsers have different implementations of event objects.', 'start': 2468.159, 'duration': 6.603}, {'end': 2483.805, 'text': 'so to make this cross browser react team have created a class called synthetic base event, that is, a wrapper around the native browser event object.', 'start': 2474.762, 'duration': 9.043}], 'summary': 'Using item as key, logging item and index, observing browser event in react', 'duration': 78.873, 'max_score': 2404.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2404932.jpg'}, {'end': 2541.507, 'src': 'embed', 'start': 2508.915, 'weight': 4, 'content': [{'end': 2510.356, 'text': "it's just a one-liner.", 'start': 2508.915, 'duration': 1.441}, {'end': 2513.056, 'text': 'so writing a function here is totally fine.', 'start': 2510.356, 'duration': 2.7}, {'end': 2518.798, 'text': "but if our logic gets more complex, we don't want to write that logic here in the middle of a JSX markup.", 'start': 2513.056, 'duration': 5.742}, {'end': 2521.679, 'text': 'instead we should move that logic into a separate function.', 'start': 2518.798, 'duration': 2.881}, {'end': 2532.886, 'text': 'So, in this component, we declare a function, by convention we start with the word handle, and then we specify the type of event, in this case, click.', 'start': 2522.399, 'duration': 10.487}, {'end': 2541.507, 'text': "Now we set this to, let's grab this piece of code, and paste it here.", 'start': 2533.767, 'duration': 7.74}], 'summary': 'For complex logic, move it into a separate function to maintain clarity and organization.', 'duration': 32.592, 'max_score': 2508.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2508915.jpg'}, {'end': 2629.168, 'src': 'embed', 'start': 2596.74, 'weight': 5, 'content': [{'end': 2601.703, 'text': "the typescript compiler doesn't know where we're going to use this, so it doesn't know the type of this parameter.", 'start': 2596.74, 'duration': 4.963}, {'end': 2613.343, 'text': 'So we should go on the top, and import mouse event from react, and then after the parameter, we type a colon followed by its type.', 'start': 2602.303, 'duration': 11.04}, {'end': 2616.524, 'text': 'This is called type annotation in typescript.', 'start': 2613.803, 'duration': 2.721}, {'end': 2621.685, 'text': 'So with type annotation, we can specify the type of our variables, parameters, and so on.', 'start': 2616.944, 'duration': 4.741}, {'end': 2629.168, 'text': 'Now with this annotation, if we use the dot operator, we can see all the properties of this mouse event object.', 'start': 2622.365, 'duration': 6.803}], 'summary': 'Type annotation in typescript specifies variable types, enabling access to properties of objects.', 'duration': 32.428, 'max_score': 2596.74, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2596740.jpg'}], 'start': 2305.164, 'title': 'React event handling', 'summary': 'Covers techniques for rendering content dynamically, handling click events, and event handling in react, including mapping items, accessing item and index, handling browser events, and type annotation in typescript for auto-completion and type safety.', 'chapters': [{'end': 2383.59, 'start': 2305.164, 'title': 'React rendering and handling click events', 'summary': 'Covers a common technique used by react developers to render content dynamically and demonstrates how to handle click events in a component, including adding a bootstrap class to items and implementing a click event to log a message to the console.', 'duration': 78.426, 'highlights': ['The chapter covers a common technique used by React developers to render content dynamically.', 'The chapter demonstrates how to handle click events in a component, including adding a bootstrap class to items and implementing a click event to log a message to the console.', 'The technique involves removing specific lines to achieve a final implementation.', "The chapter explains the process of adding a bootstrap class, 'list-group-item', to a list item for better presentation.", "The chapter shows how to set up a click event in React using the 'on click' prop and an arrow function to log a message to the console."]}, {'end': 2643.316, 'start': 2384.891, 'title': 'React event handling', 'summary': 'Explains event handling in react, including mapping items to list items, accessing item and index, handling browser events, and type annotation in typescript for auto-completion and type safety.', 'duration': 258.425, 'highlights': ['Event Handling Logic', 'Type Annotation in TypeScript', 'Accessing Item and Index', 'Handling Browser Events']}], 'duration': 338.152, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2305164.jpg', 'highlights': ['The chapter covers a common technique used by React developers to render content dynamically.', 'The chapter demonstrates how to handle click events in a component, including adding a bootstrap class to items and implementing a click event to log a message to the console.', "The chapter explains the process of adding a bootstrap class, 'list-group-item', to a list item for better presentation.", "The chapter shows how to set up a click event in React using the 'on click' prop and an arrow function to log a message to the console.", 'Event Handling Logic', 'Type Annotation in TypeScript', 'Accessing Item and Index', 'Handling Browser Events', 'The technique involves removing specific lines to achieve a final implementation.']}, {'end': 3661.306, 'segs': [{'end': 2672.71, 'src': 'embed', 'start': 2644.156, 'weight': 3, 'content': [{'end': 2649.038, 'text': 'So now we have a function here, this function is called an event handler.', 'start': 2644.156, 'duration': 4.882}, {'end': 2653.421, 'text': "Because it's job is handling an event, in this case, the click event.", 'start': 2649.479, 'duration': 3.942}, {'end': 2662.525, 'text': "Now, over here, we're going to remove this inline function, and simply reference our handle click function.", 'start': 2654.261, 'duration': 8.264}, {'end': 2667.347, 'text': "Note that I'm not calling this function, we don't want to call it, we just want to pass a reference.", 'start': 2663.045, 'duration': 4.302}, {'end': 2672.71, 'text': "So we're telling react that whenever the user clicks on this event, this function should be called.", 'start': 2667.788, 'duration': 4.922}], 'summary': 'Function handle click is referenced to handle click event in react.', 'duration': 28.554, 'max_score': 2644.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2644156.jpg'}, {'end': 2783.74, 'src': 'embed', 'start': 2751.346, 'weight': 4, 'content': [{'end': 2753.128, 'text': 'here we can check the selected index.', 'start': 2751.346, 'duration': 1.782}, {'end': 2759.713, 'text': 'If it equals the index of the current item, that means that item should be active.', 'start': 2753.868, 'duration': 5.845}, {'end': 2765.098, 'text': "So we're going to give it two classes, list group item and active.", 'start': 2760.334, 'duration': 4.764}, {'end': 2770.243, 'text': 'Otherwise, we should only give it the list group item class.', 'start': 2765.999, 'duration': 4.244}, {'end': 2774.028, 'text': 'This is a very simple way to add classes dynamically.', 'start': 2771.084, 'duration': 2.944}, {'end': 2776.05, 'text': 'there are other, more advanced techniques.', 'start': 2774.028, 'duration': 2.022}, {'end': 2777.813, 'text': "let's not worry about them at this stage.", 'start': 2776.05, 'duration': 1.763}, {'end': 2779.355, 'text': "let's just see if this works or not.", 'start': 2777.813, 'duration': 1.542}, {'end': 2783.74, 'text': 'So, back to the browser, now the first item is selected, beautiful.', 'start': 2779.775, 'duration': 3.965}], 'summary': 'Checking selected index to add classes dynamically.', 'duration': 32.394, 'max_score': 2751.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2751346.jpg'}, {'end': 2887.306, 'src': 'heatmap', 'start': 2784.281, 'weight': 0.747, 'content': [{'end': 2787.625, 'text': 'Now when we click on an item, we should change the selected index.', 'start': 2784.281, 'duration': 3.344}, {'end': 2792.29, 'text': "so this is where we're handling the click event now.", 'start': 2788.326, 'duration': 3.964}, {'end': 2796.614, 'text': 'in this case, we need a simple error function to update the selected index.', 'start': 2792.29, 'duration': 4.324}, {'end': 2801.98, 'text': "so I'm going to get rid of this handle click function, so we delete it from here.", 'start': 2796.614, 'duration': 5.366}, {'end': 2808.006, 'text': 'as well as here, we should also delete the mouse event import on the top.', 'start': 2801.98, 'duration': 6.026}, {'end': 2811.694, 'text': 'So always pay attention to cleaning up your code.', 'start': 2809.091, 'duration': 2.603}, {'end': 2819.363, 'text': 'So here we write a simple arrow function, and here we set selected index to the index of the current item.', 'start': 2812.435, 'duration': 6.928}, {'end': 2825.166, 'text': "Now back to the browser, let's click on an item, Nothing is happening.", 'start': 2820.945, 'duration': 4.221}, {'end': 2831.168, 'text': 'Why is that? Well, this variable we have declared here is local to this function component.', 'start': 2825.566, 'duration': 5.602}, {'end': 2833.049, 'text': 'So React is not aware of it.', 'start': 2831.688, 'duration': 1.361}, {'end': 2835.849, 'text': "It's like a little secret inside this component.", 'start': 2833.389, 'duration': 2.46}, {'end': 2843.452, 'text': 'To solve this problem, we should tell React that this component is going to have data or state that might change over time.', 'start': 2836.49, 'duration': 6.962}, {'end': 2848.893, 'text': 'And to do that, we have to use one of the built-in functions in React called useState.', 'start': 2843.952, 'duration': 4.941}, {'end': 2854.055, 'text': 'So when we type this here and press enter, it gets imported on the top.', 'start': 2849.514, 'duration': 4.541}, {'end': 2857.598, 'text': 'Now this function is called a hook.', 'start': 2855.222, 'duration': 2.376}, {'end': 2863.06, 'text': 'A hook is a function that allows us to tap into built in features in react.', 'start': 2858.999, 'duration': 4.061}, {'end': 2868.221, 'text': 'So this is called the state hook, we have other hooks that you will learn about as we go through this course.', 'start': 2863.6, 'duration': 4.621}, {'end': 2874.983, 'text': 'Using the state hook, we can tell react that this component can have data or state that will change over time.', 'start': 2868.761, 'duration': 6.222}, {'end': 2879.764, 'text': "So, instead of declaring a variable this way, we're going to call this function.", 'start': 2875.643, 'duration': 4.121}, {'end': 2882.845, 'text': "now we're going to initialize our variable.", 'start': 2879.764, 'duration': 3.081}, {'end': 2887.306, 'text': 'we can give it the initial value of negative 1, now this returns an array.', 'start': 2882.845, 'duration': 4.461}], 'summary': 'Handling click event, using usestate hook for state management.', 'duration': 103.025, 'max_score': 2784.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2784281.jpg'}, {'end': 2887.306, 'src': 'embed', 'start': 2855.222, 'weight': 0, 'content': [{'end': 2857.598, 'text': 'Now this function is called a hook.', 'start': 2855.222, 'duration': 2.376}, {'end': 2863.06, 'text': 'A hook is a function that allows us to tap into built in features in react.', 'start': 2858.999, 'duration': 4.061}, {'end': 2868.221, 'text': 'So this is called the state hook, we have other hooks that you will learn about as we go through this course.', 'start': 2863.6, 'duration': 4.621}, {'end': 2874.983, 'text': 'Using the state hook, we can tell react that this component can have data or state that will change over time.', 'start': 2868.761, 'duration': 6.222}, {'end': 2879.764, 'text': "So, instead of declaring a variable this way, we're going to call this function.", 'start': 2875.643, 'duration': 4.121}, {'end': 2882.845, 'text': "now we're going to initialize our variable.", 'start': 2879.764, 'duration': 3.081}, {'end': 2887.306, 'text': 'we can give it the initial value of negative 1, now this returns an array.', 'start': 2882.845, 'duration': 4.461}], 'summary': 'State hook in react allows managing changing component data, initialized with a value of -1.', 'duration': 32.084, 'max_score': 2855.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2855222.jpg'}, {'end': 2933.454, 'src': 'embed', 'start': 2902.54, 'weight': 5, 'content': [{'end': 2903.941, 'text': 'Using that updater function,', 'start': 2902.54, 'duration': 1.401}, {'end': 2911.684, 'text': 'we can update this variable and at that point react will be notified so it knows that the state of our component is changed,', 'start': 2903.941, 'duration': 7.743}, {'end': 2916.967, 'text': 'and then it will re-render our component, which causes the DOM to be updated under the hood.', 'start': 2911.684, 'duration': 5.283}, {'end': 2922.489, 'text': 'So as I told you earlier in the course, with react, we almost never have to touch the DOM directly.', 'start': 2917.427, 'duration': 5.062}, {'end': 2925.15, 'text': 'We think in terms of components that have state.', 'start': 2922.829, 'duration': 2.321}, {'end': 2931.093, 'text': 'When the state of a component changes, react will update the DOM to match the new component state.', 'start': 2925.631, 'duration': 5.462}, {'end': 2933.454, 'text': "Now let's see how we can use this.", 'start': 2932.273, 'duration': 1.181}], 'summary': "React's updater function notifies changes in component state, triggering dom updates.", 'duration': 30.914, 'max_score': 2902.54, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2902540.jpg'}, {'end': 3034.665, 'src': 'heatmap', 'start': 2978.318, 'weight': 1, 'content': [{'end': 2979.619, 'text': "that's the idea now.", 'start': 2978.318, 'duration': 1.301}, {'end': 2985.842, 'text': "in this case we don't need a name variable, so let's delete this line and the comment and this line.", 'start': 2979.619, 'duration': 6.223}, {'end': 2990.913, 'text': 'So here we have a state variable called selected index.', 'start': 2987.372, 'duration': 3.541}, {'end': 2999.736, 'text': "now down here, to update this variable, we're going to call set selected index and give it the new index.", 'start': 2990.913, 'duration': 8.823}, {'end': 3004.158, 'text': 'With this, when we click on an item, it gets selected.', 'start': 3000.756, 'duration': 3.402}, {'end': 3010.242, 'text': 'Beautiful So this is how we tell react that our component can have state that will change over time.', 'start': 3004.298, 'duration': 5.944}, {'end': 3016.026, 'text': 'Now one thing you need to know about component state is that each component is going to have its own state.', 'start': 3010.882, 'duration': 5.144}, {'end': 3025.274, 'text': 'So if you go back to our app component and add another instance of our list group here, each list group is going to have its own state.', 'start': 3016.547, 'duration': 8.727}, {'end': 3034.665, 'text': 'So, in our first list group, tires is selected, but in our second list group, nothing is selected because this component has its own state.', 'start': 3025.874, 'duration': 8.791}], 'summary': 'Using react to manage component state for dynamic updates.', 'duration': 56.347, 'max_score': 2978.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2978318.jpg'}, {'end': 3140.078, 'src': 'embed', 'start': 3091.1, 'weight': 6, 'content': [{'end': 3095.762, 'text': 'So how can we do that? Well, first we need to decide the shape of the input to this component.', 'start': 3091.1, 'duration': 4.662}, {'end': 3100.705, 'text': 'So we should be able to pass an object with two properties.', 'start': 3096.322, 'duration': 4.383}, {'end': 3106.348, 'text': 'Items, which is going to be an array, and heading, which is going to be a string.', 'start': 3101.285, 'duration': 5.063}, {'end': 3110.429, 'text': 'To do that we use one of the typescript features called an interface.', 'start': 3107.088, 'duration': 3.341}, {'end': 3115.771, 'text': 'Using an interface we can define the shape or the interface of an object.', 'start': 3111.109, 'duration': 4.662}, {'end': 3118.492, 'text': 'So we start with the interface keyword.', 'start': 3116.471, 'duration': 2.021}, {'end': 3119.832, 'text': 'give this a name.', 'start': 3118.492, 'duration': 1.34}, {'end': 3125.574, 'text': 'by convention we use props, but some people prefer to prefix it with the name of the component.', 'start': 3119.832, 'duration': 5.742}, {'end': 3127.415, 'text': 'so list group props.', 'start': 3125.574, 'duration': 1.841}, {'end': 3129.076, 'text': 'Either way works.', 'start': 3128.075, 'duration': 1.001}, {'end': 3132.049, 'text': 'I prefer a shorter name here.', 'start': 3129.076, 'duration': 2.973}, {'end': 3140.078, 'text': 'in braces we define various properties and their types, so we want to have items, which is going to be an array of strings,', 'start': 3132.049, 'duration': 8.029}], 'summary': 'Using typescript interface to define object shape with items as array and heading as string.', 'duration': 48.978, 'max_score': 3091.1, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk3091100.jpg'}, {'end': 3340.444, 'src': 'embed', 'start': 3313.125, 'weight': 1, 'content': [{'end': 3320.59, 'text': "So we don't want to implement that piece of logic inside our list group component because then it's not going to be a reusable component anymore.", 'start': 3313.125, 'duration': 7.465}, {'end': 3327.795, 'text': 'So we need a mechanism to notify the consumer or the parent of this component that an item is selected.', 'start': 3321.17, 'duration': 6.625}, {'end': 3333.158, 'text': 'In this case, the consumer or the parent of this component is our app component.', 'start': 3328.235, 'duration': 4.923}, {'end': 3335.06, 'text': "This is where we're using the list group.", 'start': 3333.398, 'duration': 1.662}, {'end': 3340.444, 'text': 'when an item is selected, we should notify the app component that an item is selected.', 'start': 3335.92, 'duration': 4.524}], 'summary': 'Avoid logic in list group for reusability. notify app component when item is selected.', 'duration': 27.319, 'max_score': 3313.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk3313125.jpg'}, {'end': 3431.175, 'src': 'embed', 'start': 3406.129, 'weight': 8, 'content': [{'end': 3413.071, 'text': 'Okay? With that, now we have a compilation error in our app component, how can I tell? Look, it turned red.', 'start': 3406.129, 'duration': 6.942}, {'end': 3419.513, 'text': 'Also, we can go to the top under view, open up the problems panel.', 'start': 3413.731, 'duration': 5.782}, {'end': 3425.114, 'text': 'so the typescript compiler is telling us that in the app component we have forgotten to pass this prop.', 'start': 3419.513, 'duration': 5.601}, {'end': 3431.175, 'text': 'So once again, the typescript compiler is helping us catch a lot of potential problems early on.', 'start': 3425.734, 'duration': 5.441}], 'summary': 'Typescript compiler helps catch potential problems early on', 'duration': 25.046, 'max_score': 3406.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk3406129.jpg'}, {'end': 3543.208, 'src': 'heatmap', 'start': 3458.562, 'weight': 2, 'content': [{'end': 3465.226, 'text': 'Now we set this to a function with the signature that we just defined, so item of type string goes to nothing.', 'start': 3458.562, 'duration': 6.664}, {'end': 3470.61, 'text': 'Now here we can just do a console.log and print the item on the console.', 'start': 3465.907, 'duration': 4.703}, {'end': 3476.894, 'text': 'Now we can pass that down here, handle select item.', 'start': 3471.43, 'duration': 5.464}, {'end': 3478.435, 'text': 'Now the last step.', 'start': 3477.754, 'duration': 0.681}, {'end': 3490.599, 'text': 'back to our list group over here, when destructuring the props, we should pick the unselect item property and then, when selecting the item,', 'start': 3479.255, 'duration': 11.344}, {'end': 3492.599, 'text': 'we should call this function.', 'start': 3490.599, 'duration': 2}, {'end': 3499.702, 'text': 'so we call this and pass the selected item, which is this item variable here, now back to the browser.', 'start': 3492.599, 'duration': 7.103}, {'end': 3506.024, 'text': "when we select an item, the app component is notified and it's now printing the name of the selected city on the console.", 'start': 3499.702, 'duration': 6.322}, {'end': 3517.497, 'text': "Now let's talk about the differences and similarities between props and state.", 'start': 3513.496, 'duration': 4.001}, {'end': 3523.36, 'text': 'As you have seen, props or properties are the inputs or arguments passed to a component.', 'start': 3518.058, 'duration': 5.302}, {'end': 3528.922, 'text': 'State on the other hand is the internal data managed by a component that can change over time.', 'start': 3523.96, 'duration': 4.962}, {'end': 3534.764, 'text': 'So props are like function arguments and state is like local variables inside a function.', 'start': 3529.442, 'duration': 5.322}, {'end': 3539.266, 'text': 'Now one thing you need to know about props is that we should treat them as immutable.', 'start': 3535.364, 'duration': 3.902}, {'end': 3543.208, 'text': 'What does this mean? In English, to mutate something means to change it.', 'start': 3539.726, 'duration': 3.482}], 'summary': 'Passing item as function argument, updating state, and difference between props and state.', 'duration': 84.646, 'max_score': 3458.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk3458562.jpg'}, {'end': 3612.109, 'src': 'embed', 'start': 3582.327, 'weight': 9, 'content': [{'end': 3590.535, 'text': 'We want to tell React that this component has data that can change over time, right? So these were the differences between state and props.', 'start': 3582.327, 'duration': 8.208}, {'end': 3598.6, 'text': 'But one thing they both have in common is that anytime they change, react will re-render our component and update the dom accordingly.', 'start': 3591.015, 'duration': 7.585}, {'end': 3608.426, 'text': 'Sometimes we want to pass children to a component.', 'start': 3606.085, 'duration': 2.341}, {'end': 3612.109, 'text': 'Just like how we are passing a list group to this div element here.', 'start': 3608.947, 'duration': 3.162}], 'summary': 'React components can have changing state and props, which trigger re-rendering and updating the dom; passing children to components is also possible.', 'duration': 29.782, 'max_score': 3582.327, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk3582327.jpg'}], 'start': 2644.156, 'title': 'React fundamentals and event handling', 'summary': 'Covers event handling, dynamic css classes, state hooks, props, and notifying parent components, with a focus on typescript usage, immutability of props, and mutability of state.', 'chapters': [{'end': 2831.168, 'start': 2644.156, 'title': 'React event handling and dynamic css classes', 'summary': "Explains event handling in react, including the removal of inline functions, dynamic rendering of css classes, and updating state variables, with a focus on handling click events and dynamically adding the 'active' class to selected items.", 'duration': 187.012, 'highlights': ['The chapter explains event handling in React, including the removal of inline functions.', "The chapter emphasizes dynamically adding the 'active' class to selected items.", 'The chapter details the process of updating state variables when handling click events.']}, {'end': 3291.193, 'start': 2831.688, 'title': 'Using state hook and props in react', 'summary': 'Discusses the use of the state hook usestate to manage component state, ensuring re-rendering when the state changes, and demonstrates the use of props to pass data to components, leveraging typescript to define the shape of the input object.', 'duration': 459.505, 'highlights': ['The chapter discusses the use of the state hook useState to manage component state, ensuring re-rendering when the state changes.', 'Demonstrates the use of props to pass data to components, leveraging TypeScript to define the shape of the input object.']}, {'end': 3431.175, 'start': 3291.193, 'title': 'Notifying parent component on item selection', 'summary': 'Explains the importance of notifying the parent component when an item is selected in a list group to enable the parent component to take appropriate actions, using a function as a prop and demonstrating how typescript compiler helps in catching potential problems early on.', 'duration': 139.982, 'highlights': ['The importance of notifying the parent component when an item is selected in a list group to enable the parent component to take appropriate actions', 'Demonstrating using a function as a prop to notify the parent component when an item is selected', 'How TypeScript compiler helps in catching potential problems early on']}, {'end': 3661.306, 'start': 3431.895, 'title': 'React: props, state, and components', 'summary': 'Explains the differences and similarities between props and state in react, emphasizing the immutability of props and the mutability of state, as well as the concept of passing children to a component.', 'duration': 229.411, 'highlights': ['Props are like function arguments and state is like local variables inside a function.', 'Props should be treated as immutable, while state is mutable.', 'React re-renders the component and updates the dom when either props or state change.', 'Shows a shortcut for creating a component that can accept children using the ES7+ extension in Visual Studio Code.']}], 'duration': 1017.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk2644156.jpg', 'highlights': ['The chapter discusses the use of the state hook useState to manage component state, ensuring re-rendering when the state changes.', 'The importance of notifying the parent component when an item is selected in a list group to enable the parent component to take appropriate actions', 'Props should be treated as immutable, while state is mutable.', 'The chapter explains event handling in React, including the removal of inline functions.', "The chapter emphasizes dynamically adding the 'active' class to selected items.", 'The chapter details the process of updating state variables when handling click events.', 'Demonstrates the use of props to pass data to components, leveraging TypeScript to define the shape of the input object.', 'Demonstrating using a function as a prop to notify the parent component when an item is selected', 'How TypeScript compiler helps in catching potential problems early on', 'React re-renders the component and updates the dom when either props or state change.', 'Shows a shortcut for creating a component that can accept children using the ES7+ extension in Visual Studio Code.']}, {'end': 4796.746, 'segs': [{'end': 3944.991, 'src': 'embed', 'start': 3890.866, 'weight': 1, 'content': [{'end': 3898.152, 'text': "So let's import it on the top like this, and with that we can pass html content to our alert component.", 'start': 3890.866, 'duration': 7.286}, {'end': 3903.256, 'text': 'So to recap, using the children prop, we can pass children to a component.', 'start': 3899.113, 'duration': 4.143}, {'end': 3914.436, 'text': "the last thing we're going to cover in this section is react dev tools,", 'start': 3911.054, 'duration': 3.382}, {'end': 3920.699, 'text': 'which is a very useful browser extension for inspecting and analyzing our react applications.', 'start': 3914.436, 'duration': 6.263}, {'end': 3930.644, 'text': "it's available for chrome, firefox and microsoft edge, so simply google react developer tools or react dev tools and install it in your browser.", 'start': 3920.699, 'duration': 9.945}, {'end': 3934.346, 'text': 'once you do that, then go back to this page.', 'start': 3930.644, 'duration': 3.702}, {'end': 3937.528, 'text': 'here, in the dev tools, you will see a couple of new tabs.', 'start': 3934.346, 'duration': 3.182}, {'end': 3939.669, 'text': 'one is components, the other is profiler.', 'start': 3937.528, 'duration': 2.141}, {'end': 3942.41, 'text': 'Now look at the components tab.', 'start': 3940.569, 'duration': 1.841}, {'end': 3944.991, 'text': 'here we can see the hierarchy of our components.', 'start': 3942.41, 'duration': 2.581}], 'summary': 'Using children prop, passing html content to alert component. react dev tools for inspecting and analyzing react applications available for chrome, firefox, and microsoft edge.', 'duration': 54.125, 'max_score': 3890.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk3890866.jpg'}, {'end': 4189.349, 'src': 'embed', 'start': 4161.444, 'weight': 4, 'content': [{'end': 4164.688, 'text': 'here we need to use an interface to define the shape of props.', 'start': 4161.444, 'duration': 3.244}, {'end': 4171.412, 'text': 'Now I want to use the children prop here so we can pass the text just like html buttons.', 'start': 4165.689, 'duration': 5.723}, {'end': 4178.255, 'text': "So I'm going to set the type of children to string, we could also use react node, but I prefer to use a string in this case.", 'start': 4172.091, 'duration': 6.164}, {'end': 4189.349, 'text': 'Next, we add the props parameter and destructure it And finally, we render children right here.', 'start': 4179.295, 'duration': 10.054}], 'summary': 'Using interface to define props shape, setting children type to string, rendering children.', 'duration': 27.905, 'max_score': 4161.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk4161444.jpg'}, {'end': 4276.066, 'src': 'embed', 'start': 4250.586, 'weight': 2, 'content': [{'end': 4255.228, 'text': "Now in our app component we have an error because we haven't set the onclick prop.", 'start': 4250.586, 'duration': 4.642}, {'end': 4261.812, 'text': 'For now I just want to add a simple inline function, and log clicked on the console.', 'start': 4255.988, 'duration': 5.824}, {'end': 4264.174, 'text': "Let's see if our application is working.", 'start': 4262.893, 'duration': 1.281}, {'end': 4267.217, 'text': 'So, click, click, click, beautiful.', 'start': 4264.895, 'duration': 2.322}, {'end': 4270.18, 'text': 'Now the final step is implementing the color.', 'start': 4267.978, 'duration': 2.202}, {'end': 4276.066, 'text': 'So we want to be able to pass the color of this button from the outside like this.', 'start': 4270.741, 'duration': 5.325}], 'summary': 'App component error fixed with inline function, logging clicks, and implementing button color.', 'duration': 25.48, 'max_score': 4250.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk4250586.jpg'}, {'end': 4406.165, 'src': 'embed', 'start': 4380.931, 'weight': 3, 'content': [{'end': 4385.713, 'text': 'Well, there are no errors or warnings, but this is not how a button is supposed to look like.', 'start': 4380.931, 'duration': 4.782}, {'end': 4391.775, 'text': 'This is where we can use TypeScript to catch this kind of bugs early on before we deploy our application.', 'start': 4386.273, 'duration': 5.502}, {'end': 4392.615, 'text': 'Let me show you how.', 'start': 4392.015, 'duration': 0.6}, {'end': 4395.737, 'text': 'So back to our button component.', 'start': 4393.316, 'duration': 2.421}, {'end': 4401.259, 'text': 'instead of setting the type of color to string, we can set it to a string, literal, like primary,', 'start': 4395.737, 'duration': 5.522}, {'end': 4406.165, 'text': 'and with this we can only set this property to the value of primary.', 'start': 4402.199, 'duration': 3.966}], 'summary': "Using typescript to catch bugs early, by setting type to string literal 'primary' for button component.", 'duration': 25.234, 'max_score': 4380.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk4380931.jpg'}, {'end': 4788.624, 'src': 'embed', 'start': 4759.922, 'weight': 0, 'content': [{'end': 4762.846, 'text': 'I hope you found it helpful and learned a lot about React.', 'start': 4759.922, 'duration': 2.924}, {'end': 4764.007, 'text': 'But wait, there is more.', 'start': 4763.146, 'duration': 0.861}, {'end': 4767.772, 'text': 'This tutorial was just a small part of my complete React course.', 'start': 4764.468, 'duration': 3.304}, {'end': 4773.619, 'text': 'The full course includes eight hours of content and is jam-packed with the latest tools and best practices.', 'start': 4768.192, 'duration': 5.427}, {'end': 4780.481, 'text': "You'll get access to exercises, summary notes, cheat sheets, and the project I showed you at the beginning of this tutorial.", 'start': 4773.999, 'duration': 6.482}, {'end': 4783.222, 'text': "And if you're not completely satisfied, no problem.", 'start': 4780.821, 'duration': 2.401}, {'end': 4788.624, 'text': "The course comes with a 30-day money-back guarantee, so there's no risk in giving it a try.", 'start': 4783.502, 'duration': 5.122}], 'summary': 'Complete react course: 8 hours of content, exercises, cheat sheets, and 30-day money-back guarantee.', 'duration': 28.702, 'max_score': 4759.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk4759922.jpg'}], 'start': 3661.306, 'title': 'React components in action', 'summary': 'Covers creating dynamic alert and button components in react, including multi-cursor editing, prop passing, event handling, typescript usage, and state variable manipulation. additionally, it mentions the comprehensive content of a react course, offering eight hours of material and a 30-day money-back guarantee.', 'chapters': [{'end': 4189.349, 'start': 3661.306, 'title': 'React arrow function component export', 'summary': 'Demonstrates the creation of a dynamic alert component in react, utilizing multi-cursor editing, importing components, passing props, utilizing the children prop for dynamic content, and inspecting components with react dev tools.', 'duration': 528.043, 'highlights': ['The chapter demonstrates the creation of a dynamic alert component in React, utilizing multi-cursor editing, importing components, passing props, utilizing the children prop for dynamic content, and inspecting components with React Dev Tools.', 'Utilizing multi-cursor editing to efficiently make changes to the code.', 'Demonstrating the process of importing components and utilizing them in the application.', 'Utilizing the children prop to pass dynamic content to a component.', 'Inspecting and analyzing React applications using React Dev Tools, including the components tab and its features.']}, {'end': 4445.99, 'start': 4190.49, 'title': 'Button component implementation', 'summary': 'Discusses implementing a reusable button component in a react application, covering adding event handling, setting color properties, and utilizing typescript for type safety and bug prevention.', 'duration': 255.5, 'highlights': ['Implementing event handling for the button component', 'Setting color properties for the button component', 'Utilizing TypeScript for type safety in the button component']}, {'end': 4796.746, 'start': 4446.65, 'title': 'React component alert exercise', 'summary': 'Demonstrates how to implement a dismissible alert component in a react application by using state variables, event handling, and passing props. the tutorial is a small part of a complete react course that offers eight hours of content and comes with a 30-day money-back guarantee.', 'duration': 350.096, 'highlights': ['The tutorial is a small part of a complete React course that includes eight hours of content and is packed with the latest tools and best practices, as well as exercises, summary notes, cheat sheets, and a project.', "The implementation of a dismissible alert component in a React application involves using state variables to determine the alert's visibility and event handling to show or hide the alert.", "To make the alert dismissible, the 'alert dismissible' class needs to be added, along with a close button, and an 'onClose' function is created to handle the event when the close button is clicked."]}], 'duration': 1135.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/SqcY0GlETPk/pics/SqcY0GlETPk3661306.jpg', 'highlights': ['The tutorial is a small part of a complete React course with eight hours of content and a 30-day money-back guarantee.', 'Creating a dynamic alert component in React using multi-cursor editing, prop passing, and React Dev Tools inspection.', 'Implementing event handling and color properties for the button component.', 'Utilizing TypeScript for type safety in the button component.', 'Utilizing the children prop to pass dynamic content to a component.', 'Inspecting and analyzing React applications using React Dev Tools.']}], 'highlights': ['Mosh Hamadani teaches comprehensive React course, 20 years experience', 'Building & deploying production-grade app for discovering video games', 'React is the most widely used JavaScript library for front-end development', 'TypeScript adds static typing to JavaScript, aiding in error detection and saving time', '8-hour complete course with 30-day money-back guarantee', 'Fundamental concepts in react applications covered', 'The chapter demonstrates how to format JSX code in VS Code using Prettier', 'The chapter covers a common technique used by React developers to render content dynamically', 'The chapter discusses the use of the state hook useState to manage component state', 'Creating a dynamic alert component in React using multi-cursor editing, prop passing, and React Dev Tools inspection']}