Скачать с ютуб React JS Lists and Keys | Learn ReactJS в хорошем качестве

React JS Lists and Keys | Learn ReactJS

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap In this tutorial, we will learn React JS Lists and Keys. You will discover every element in a list within ReactJS needs a key. You will also learn how to generate a dynamic list of elements within the JSX of React. 🚩 Subscribe ➜ https://bit.ly/3nGHmNn 🚀 This lesson is part of a Learn React tutorial series playlist:    • React Tutorials   🔗 Higher Order Functions tutorial:    • Higher Order Functions Javascript | f...   🔗 localStorage tutorial:    • JavaScript LocalStorage and Session S...   🔗 Source Code for this tutorial: https://github.com/gitdagray/react_li... React JS Lists and Keys | Learn ReactJS (00:00) Intro (00:05) Tutorial Setup (01:30) Changing the default state (03:02) View the new state in React Dev Tools (03:57) Displaying list items with map() (06:23) Lists of elements need keys (07:17) Previewing the React list (07:35) Adding the react-icons package (12:39) Applying CSS styles to the React list (15:20) Why we don't see a checkmark when we click (15:52) Adding an onChange listener (18:24) The handleCheck function (22:05) View the new component state in React Dev Tools (23:19) Saving state to localStorage (24:08) Adding an onDoubleClick listener (25:12) Adding conditional CSS styling (26:07) Adding an onClick listener (27:40) The handleDelete function (29:32) Adding an empty list message (32:07) When will we load state from localStorage? 🚩 Quick note: 1) In the tutorial, I save react-icons as a dev dependency like this: npm i react-icons -D ...but we're going to eventually need the icons in production, so you can save it like this instead: npm i react-icons -S ...if you saved it as a dev dependency, you can move it to production like this: npm i react-icons --save-prod 🔗 ES7 React JS Snippets Extension for VS Code: https://marketplace.visualstudio.com/... 🔗 React Dev Tools Extension for Chrome: https://chrome.google.com/webstore/de... 🔗 Styled Components: https://styled-components.com/ 📚 References: ReactJS Official site: https://reactjs.org/ React Wikipedia: https://en.wikipedia.org/wiki/React_(...) React Jobs: https://www.ziprecruiter.com/candidat... ✅ Follow Me: Twitter:   / yesdavidgray   LinkedIn:   / davidagray   Blog: https://yesdavidgray.com Reddit:   / daveoneleven   Was this tutorial about Lists and Keys in React JS helpful? If so, please share. Let me know your thoughts in the comments. #react #lists #keys