React JS Props and Prop Drilling | Learn ReactJS

30,156
0
Published 2021-07-02
Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap

React JS props and prop drilling are must learn concepts for anyone interested in learning ReactJS. React components often need to share data which is passed as props. Prop drilling passes props from parent to child components.

🚩 Subscribe ➜ bit.ly/3nGHmNn

🚀 This lesson is part of a Learn React tutorial series playlist:
   • React Tutorials  

React JS Props and Prop Drilling | Learn ReactJS

(00:00) Intro
(00:05) What are props?
(01:28) Passing props to a component
(02:47) Destructuring props
(03:43) defaultProps
(04:51) Moving state to the parent component
(10:17) Passing props to the Footer component
(12:44) Prop drilling to an Item List Component
(19:18) Prop drilling to a reusable Line Item component

🔗 ES7 React JS Snippets Extension for VS Code:
marketplace.visualstudio.com/items?itemName=dsznaj…

🔗 React Dev Tools Extension for Chrome:
chrome.google.com/webstore/detail/react-developer-…

🔗 Styled Components: styled-components.com/

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

✅ Follow Me:
Twitter: twitter.com/yesdavidgray
LinkedIn: www.linkedin.com/in/davidagray/
Blog: yesdavidgray.com/
Reddit: www.reddit.com/user/DaveOnEleven

Was this tutorial about Props and Prop Drilling in React JS helpful? If so, please share. Let me know your thoughts in the comments.

#react #props #prop-dr

All Comments (21)
  • Working with props is foundational knowledge for learning React, and sharing data between components in React is often a necessity. The data, which is referred to as props, is passed down from parent components to child components. This is also called "prop drilling". If you are just learning Javascript, I recommend starting with my full 8 hour Javascript tutorial here: https://youtu.be/EfAl9bwzVZk
  • @iamtharunraj
    Dave, I don't know how to thank you. I have been struggling with props. You just helped me get it in just a few minutes. Thank you!
  • I'm doing all tutorials you have Dave, very good lesons, i started with Redux when i find your video in the redux website. even already have studed React there´s always something to learn, thanks for sharing this axcelent material.
  • @toonice555
    Sweet. Never knew about default props!
  • @forshetrial
    Thank God! I came across with this treasure ❤
  • @neatunet
    Dave, you're a priceless teacher. In my opinion, it's easy to understand the topic you're explaining because you talk about the tiny details as well, while many others think that beginners should understand the obvious things, which is often not the case. Thank you!
  • Bro very well done , You did a excellent job. Really you can't imagine that i could never seen any tutorial same as yours in the past one and half year.
  • @mi5956
    You are a king. clean code, made everything simple. thank you
  • @AIcompany1
    This is one of most important lessons in React, that flow was no sense till now... Thank you a lot my friend, you r epic teacher!!
  • @Brightmdapps
    I had not learned of defaultProps before now. Thanks Dave!
  • @bhuvaneshraj5405
    wherever whenever i can openly say that this is the best react course ever and this channel has the best content everrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
  • @ebesquin
    Dear Dave It is a wonderful course. A clear, simple and complete presentation of React I'm definitely getting a lot out of it. Thank you very very much 🤓🤓🤓
  • Your explanation is great I really like the way you explain in great details.
  • @CTILET
    I am now pass drilling. Thanks