Duration 16:10

React For Beginners 2 - Project Structure Walkthrough

28 998 watched
0
811
Published 27 May 2021

Welcome back to another react tutorial for beginners! In this video, I'm going to be going through the pre-generated files that were created in the previous video after we ran the script that generated our react app. 💻 AlgoExpert is the coding interview prep platform that I used to ace my Microsoft and Shopify interviews. Check it out and get a discount on the platform using the code "techwithtim" https://algoexpert.io/techwithtim 🔍 Playlist: /playlist/PLzMcBGfZo4-nRV61oEu3KfMwWKI571uPT ⭐️ Timestamps ⭐️ 00:00 | Introduction 00:29 | Public Folder 03:37 | Src Folder 10:14 | package.json 11:23 | git & .gitignore 11:50 | Node Modules and NPM 14:03 | Webpack and Babel ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️ 💰 Courses & Merch 💰 💻 The Fundamentals of Programming w/ Python: https://tech-with-tim.teachable.com/p/the-fundamentals-of-programming-with-python 👕 Merchandise: https://teespring.com/stores/tech-with-tim-merch-shop 🔗 Social Medias 🔗 📸 Instagram: https://www.instagram.com/tech_with_tim 📱 Twitter: https://twitter.com/TechWithTimm ⭐ Discord: https://discord.gg/twt 📝 LinkedIn: https://www.linkedin.com/in/tim-ruscica-82631b179/ 🌎 Website: https://techwithtim.net 📂 GitHub: https://github.com/techwithtim 🔊 Podcast: https://anchor.fm/tech-with-tim 🎬 My YouTube Gear 🎬 🎥 Main Camera (EOS Canon 90D): https://amzn.to/3cY23y9 🎥 Secondary Camera (Panasonic Lumix G7): https://amzn.to/3fl2iEV 📹 Main Lens (EFS 24mm f/2.8): https://amzn.to/2Yuol5r 🕹 Tripod: https://amzn.to/3hpSprv 🎤 Main Microphone (Rode NT1): https://amzn.to/2HrZxXc 🎤 Secondary Microphone (Synco Wireless Lapel System): https://amzn.to/3e07Swl 🎤 Third Microphone (Rode NTG4+): https://amzn.to/3oi0v8Z ☀️ Lights: https://amzn.to/2ApeiXr ⌨ Keyboard (Daskeyboard 4Q): https://amzn.to/2YpN5vm 🖱 Mouse (Logitech MX Master): https://amzn.to/2HsmRDN 📸 Webcam (Logitech 1080p Pro): https://amzn.to/2B2IXcQ 📢 Speaker (Beats Pill): https://amzn.to/2XYc5ef 🎧 Headphones (Bose Quiet Comfort 35): https://amzn.to/2MWbl3e 🌞 Lamp (BenQ E-reading Lamp): https://amzn.to/3e0UCr8 🌞 Secondary Lamp (BenQ Screenbar Plus): https://amzn.to/30Dtafi 💻 Monitor (BenQ EX2780Q): https://amzn.to/2HsmUPZ 💻 Monitor (LG Ultrawide 34WN750): https://amzn.to/3dSD7tS 🎙 Mic Boom Arm (Rode PSA 1): https://amzn.to/30EZw9m 🎚 Audio Interface (Focusrite Scarlet 4i4): https://amzn.to/2TjXsih 💸 Donations 💸 💵 One-Time Donations: https://www.paypal.com/donate?hosted_button_id=CU9FV329ADNT8 💰 Patreon: https://www.patreon.com/techwithtim ◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️ ⭐️ Tags ⭐️ - Tech With Tim - React - React Tutorial - Javascript - Programming - Javascript Programming ⭐️ Hashtags ⭐️ #TechWithTim #ReactTutorial

Category

Show more

Comments - 46
  • @
    @mirandaperry52453 years ago I don't know if you read these Tim, but I am self learning coding at 39 years old with no prior experience and the way you explain things is soooo helpful. I really appreciate how you break things down and explain everything. I am not finding many other videos I understand and enjoy as much. Thanks! ... 9
  • @
    @tomevans50622 years ago This is very clear and it's easy to follow. Thank you for the series. 1
  • @
    @victor202143 years ago Tim has helped me learnt to code, and i also so fit to teach others 3
  • @
    @eliber3 years ago thanks for all, the best digital teacher in the world i ever saw
  • @
    @faisal78233 years ago Thank you so much for this useful series
    It really helped me 👍
    3
  • @
    @oatie42626 months ago finally, someone who explained the public folder. thank you!
  • @
    @adithmanu37153 years ago Do you use Google cloud to deploy your apps, website e.g..? I know you use Linode and gotten sponsored BUT, just asking 4
  • @
    @wrestelman13 years ago One video a day? I'm actually eager to learn, can't wait for the next episode 2
  • @
    @xocoins31843 years ago React-bootstrap or react simple webpage? Please🙏 1
  • @
    @adilshaikh67363 years ago Hey tim, can you please upload a series where flask interacts with react?😄 6
  • @
    @hexadecimalhexadecimal52412 years ago How come when i create a file just like him and deleted webvitals.js my app crashed and wont load?? like it displays barebones but i cant change anything to the text unless i bring back the damn useless vitals js file.....why tho ... 1
  • @
    @giwrgosiwannidis46843 years ago We want Function based Components not Class based!!! 8
  • @
    @yungzee44532 years ago Not sure why NO ONE else ran into this problem but when I followed the instructions to remove the node modules folder I cant reinstall using the npm command. I get a bunch of errors. I know I followed exactly what he did in the video but mine comes up with lots of errors:
    PS C:\Users\...\React> npm i
    npm ERR! code ENOENT
    npm ERR! syscall open
    npm ERR! path C:\Users\...\React/package.json
    npm ERR! errno -4058
    npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\...\React\package.json'
    npm ERR! enoent This is related to npm not being able to find a file.
    npm ERR! enoent
    I've uninstalled NodeJS and started the tutorial all over again with the same result...Help...someone...
    ...
  • @
    @jayvardhan13223 years ago Pls upload upto advanced level with Django 5
  • @
    @kennykenny61762 years ago i wish youd speak slower were not all from usa but great vid
  • @
    @mirandaperry52453 years ago I don't know if you read these Tim, but I am self learning coding at 39 years old with no prior experience and the way you explain things is soooo helpful. I really appreciate how you break things down and explain everything. I am not finding many other videos I understand and enjoy as much. Thanks! ... 9
  • @
    @tomevans50622 years ago This is very clear and it's easy to follow. Thank you for the series. 1
  • @
    @victor202143 years ago Tim has helped me learnt to code, and i also so fit to teach others 3
  • @
    @eliber3 years ago thanks for all, the best digital teacher in the world i ever saw
  • @
    @faisal78233 years ago Thank you so much for this useful series
    It really helped me 👍
    3
  • @
    @oatie42626 months ago finally, someone who explained the public folder. thank you!
  • @
    @adithmanu37153 years ago Do you use Google cloud to deploy your apps, website e.g..? I know you use Linode and gotten sponsored BUT, just asking 4
  • @
    @wrestelman13 years ago One video a day? I'm actually eager to learn, can't wait for the next episode 2
  • @
    @xocoins31843 years ago React-bootstrap or react simple webpage? Please🙏 1
  • @
    @adilshaikh67363 years ago Hey tim, can you please upload a series where flask interacts with react?😄 6
  • @
    @hexadecimalhexadecimal52412 years ago How come when i create a file just like him and deleted webvitals.js my app crashed and wont load?? like it displays barebones but i cant change anything to the text unless i bring back the damn useless vitals js file.....why tho ... 1
  • @
    @giwrgosiwannidis46843 years ago We want Function based Components not Class based!!! 8
  • @
    @yungzee44532 years ago Not sure why NO ONE else ran into this problem but when I followed the instructions to remove the node modules folder I cant reinstall using the npm command. I get a bunch of errors. I know I followed exactly what he did in the video but mine comes up with lots of errors:
    PS C:\Users\...\React> npm i
    npm ERR! code ENOENT
    npm ERR! syscall open
    npm ERR! path C:\Users\...\React/package.json
    npm ERR! errno -4058
    npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\...\React\package.json'
    npm ERR! enoent This is related to npm not being able to find a file.
    npm ERR! enoent
    I've uninstalled NodeJS and started the tutorial all over again with the same result...Help...someone...
    ...
  • @
    @jayvardhan13223 years ago Pls upload upto advanced level with Django 5
  • @
    @kennykenny61762 years ago i wish youd speak slower were not all from usa but great vid
  • @
    @mirandaperry52453 years ago I don't know if you read these Tim, but I am self learning coding at 39 years old with no prior experience and the way you explain things is soooo helpful. I really appreciate how you break things down and explain everything. I am not finding many other videos I understand and enjoy as much. Thanks! ... 9
  • @
    @tomevans50622 years ago This is very clear and it's easy to follow. Thank you for the series. 1
  • @
    @victor202143 years ago Tim has helped me learnt to code, and i also so fit to teach others 3
  • @
    @eliber3 years ago thanks for all, the best digital teacher in the world i ever saw
  • @
    @faisal78233 years ago Thank you so much for this useful series
    It really helped me 👍
    3
  • @
    @oatie42626 months ago finally, someone who explained the public folder. thank you!
  • @
    @adithmanu37153 years ago Do you use Google cloud to deploy your apps, website e.g..? I know you use Linode and gotten sponsored BUT, just asking 4
  • @
    @wrestelman13 years ago One video a day? I'm actually eager to learn, can't wait for the next episode 2
  • @
    @xocoins31843 years ago React-bootstrap or react simple webpage? Please🙏 1
  • @
    @adilshaikh67363 years ago Hey tim, can you please upload a series where flask interacts with react?😄 6
  • @
    @hexadecimalhexadecimal52412 years ago How come when i create a file just like him and deleted webvitals.js my app crashed and wont load?? like it displays barebones but i cant change anything to the text unless i bring back the damn useless vitals js file.....why tho ... 1
  • @
    @giwrgosiwannidis46843 years ago We want Function based Components not Class based!!! 8
  • @
    @yungzee44532 years ago Not sure why NO ONE else ran into this problem but when I followed the instructions to remove the node modules folder I cant reinstall using the npm command. I get a bunch of errors. I know I followed exactly what he did in the video but mine comes up with lots of errors:
    PS C:\Users\...\React> npm i
    npm ERR! code ENOENT
    npm ERR! syscall open
    npm ERR! path C:\Users\...\React/package.json
    npm ERR! errno -4058
    npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\...\React\package.json'
    npm ERR! enoent This is related to npm not being able to find a file.
    npm ERR! enoent
    I've uninstalled NodeJS and started the tutorial all over again with the same result...Help...someone...
    ...
  • @
    @jayvardhan13223 years ago Pls upload upto advanced level with Django 5
  • @
    @kennykenny61762 years ago i wish youd speak slower were not all from usa but great vid