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:
https://youtube.com/playlist?list=PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp

Higher Order Functions tutorial: https://youtu.be/7BeT6lsudL4
localStorage tutorial: https://youtu.be/zmFDvFwj6-8

Source Code for this tutorial: https://github.com/gitdagray/react_lists_keys

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/items?itemName=dsznajder.es7-react-js-snippets

React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Styled Components: https://styled-components.com/

References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(JavaScript_library)
React Jobs: https://www.ziprecruiter.com/candidate/search?search=react&location=

Follow Me:
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/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