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