2 years ago when I started to learn web development, I randomly came to this React Tutorial and back then I've doubted myself if I can get a job in software development. I almost quit this web development tutorial stuff but then I still believed in myself and now I am a React Developer and Tech lead in my team. thanks mosh!
@@swagatalakshmipal7711 I am turning 40 in few months :) .. you try to learn or not but the truth is you are always learning something , the question is that the something is what you wanted or its coming to you without your knowledge. And I think, whoever can answer this question can learn many many things irrespective of all barriers/ hurdles
Please Mosh kindly help: I am writing a code that finds logical difference between two numbers and then print out the even numbers between the two numbers const myFunction = (x, y) => { // Code here if (x > y) { return (x%2 == 0) } else { return ('This is an Odd number') } } console.log(myFunction(10,2));
@@i-am-oi a little confused by the prompt.... 'finds the logical difference between two numbers', and 'print out the even numbers between the two numbers'.... clarify a little bit, and I should be able to help.
Mosh is by far the most awesome tutor on the entire net. I already took two of his Angular courses and it landed me in a pretty good job. For added difficulty I had concentration difficulties at the time due to serious trauma, so bad I literally couldn't read a page in one sitting. I genuinely felt that I can't carry on with my profession, but Mosh gave it all back to me. Now I'm switching to React, and he's still the only one who can flawlessly explain the entire mess. We have to come up with some super fancy award for this guy.
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
Man I just went through some serious stuff in life last year and this year I can barely focus or read.. I never thought it could be trauma related, I just thought it was normal stress but no matter how many breaks I take and try to go back it's still hard. It literally sucks the life out of you not being able to concentrate and retain information it's like my vision is zoomed in and I can't see the bigger picture. It always leads to frustration in the end. I'm watching this video wondering how far I'll be able to get into it before I lose focus and so far so good I'm glad I read your comment I hope this works for me.
@@yayz_ sometimes having a foggy mind could be due to a lack of important vitamins like Vitamin D. Start taking that along with a glass of pomegranate juice every day, because the latter is great for the mind, especially the memory part of your brain.
Yes, online learning is the way to go these days, especially for coders! Are you a student or working currently? Would you be interested in job opportunities in software development roles?
43:12 If you, like me, installed the latest version of bootstrap (v5 at the time of writing this) the "badge-primary" won't work. In bootstrap v5 it's changed to "bg-primary" and "bg-secondary" etc instead, so try className="badge bg-primary m-2" for it to function correctly!
I had to pause the video to share my thoughts. It's just unbelievable how he explains everything so simply yet so effectively. I was looking for a perfect react video to get me started and I just landed on one..Thanks Mosh
@@mohammedlaslaa9549 This is a good introduction and overview to React. Especially if you're like me and have never used it before. However, it's a crash course and so does not go heavily in-depth. I recommend to take this crash course first to get a feel for React and how it works. As well as its capabilities. But then do the full course afterwards to fill in the gaps missed in this crash course. Another good course to look at is the 5-hour course on freecodecamp. :-)
This is the fourth React app I've built from a tutorial but the first one where I was actually able to understand what was going on because of how it was all explained in detail. Really excellent style of teaching and much appreciated!
The comment section of this video is so helpful. Really good to see so many people willing to help out someone else so that they don't go through the trouble they went through
How to fix: "npm ERR! missing script: start" when trying to run. 1. Uninstall the global version of the create-react app : Write in your console: uninstall -g create-react-app 2. Delete the folder react-app (if this is the name of your react project) 3. Recreate your new project locally Write in your console: npx create-react-app react-app 4. go into your react-app folder and type npm start .... Have fun This error is happening because create-react-app is not allowed to be used globally for some time
I did struggle a lot to learn React. A lot of time that I wasted. The problem? I did not know the basics of Javascript in first place. You need to walk before you can run. So I took a few very basic books (books, not complex tutorials!) and learned the fundamentals. After I learned the basics of Javascript, learning React became much easier. Edit: For those asking about the books, for the very basics I learned with Javascript In Less than 50 Pages. And to develop my knowledge I learned with Head First Javacript Programming.
1:53:52 in handleIncrement(counter) you can simply update the value of counter directly since it is a pointer to the counter in the state, then just setState(counters) handleIncrement = (counter) => { counter.value++; const counters = this.state.counters; this.setState({ counters}); };
thanks, I couldn't understand his code at that point, therefor I came into the comment section with the idea that may somebody have easy code and found you
Some error fixes that might be helpful -- 1:23:25 If you get "TypeError: Cannot read property 'value' of undefined" after adding this.props.value, try removing the Counter constructor in counter.jsx 1:40:07 If your counterId is undefined, add prop "id={counter.id}" to your Counter component in counters.jsx 2:04:13 Change your App.js to match the other classes ie. from "function App()" to class "App extends Component" ...and add "render()" to return your React.Fragment
8:40 On windows, go to file -> Preferences -> Settings Edit: Then, at the search bar at the top, search for "format on save". Tick the small box to enable it :) Then, at setting, search for "Default format" At "Editor: Default formater", select from null to prettier-vscode for it to work :)
@@joandianamilton1074 I'm using node.js to use npm, and then from npm install create-react-package, and then go to directory i want to create react package from node.js command prompt, type create-react-app my-react-app-title
@@destinyjames6117 if I type npx create-react-app my-app, it's throwing a error saying Error: EPERM: operation not permitted, mkdir 'C:\Users\joan' Command not found: create-react-app
good tutorial, but for anyone trying to follow and code along this is easy to miss: at 1:27:30 you say "we are going to delete the code that we wrote in this lecture" and delete the console log statement and child element of counter, but NOT the bit you also wrote where you assign the id property in props to counter.id. ( id={counter.id} ). this is really important to leave in as it will be referenced as the event argument of the delete button event handler
Yeah what a pain, he says at a point in time that id is a special attribute, but nowhere states that it should be declared explicitely in Counters.render() ... so I ended up having to write: that's sooo odd and verbose....
#keyTakeAways 39:00 A new syntax for me --> Gets count property of state and assigns it to new count constant. 44:22 Applying your own styles in jsx 47:22 Conditional styling 51:51 Cant use loops in jsx elements. Use map(), filter() functions 56:00 Two ways of conditional rendering 1:06:30 Changing state variable arrow functions and setState() 1:11:13 To pass an element to onClick event don't use an explicit intermediate handler function. Use this intermediate function inside the onClick() 1:26:41 render variables in html in components
Totally agree, the same way a great athlete makes hard things look easy to do, a great teacher makes coding looks easy too, even coding beeing hard most of the times =)
Thank you so much for this course. I was trying to learn React through an online course but was getting so confused. Your style is very easy to follow and I have gained a stronger grasp on the material.
I know the basics of JS , OOP in JS and ES6 hacks. I was wondering whether a full fledged react course with projects would be suitable or learning react through this video and then search for projects would be ideal. Can someone give me a feedback ?
@@rishabhchopra883 I think this video is enough and going on your own and doing projects is the best way if you are comfortable with it, since it forces you to think however that depends on how comfortable you are with the prerequisites to react so if you are just starting out courses might serve quite well and his teaching style is so good, I might give them a try myself
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
Great course! Did this with the most up to date node packages and used Bulma instead of Bootstrap and everything worked perfectly. So as of 2018-08-29 everything in the tutorial is up to date with the most current versions.
I’ve not even finished watching the video and already you have mastered how to give me a fluffy feeling that it’s gonna be interesting and fun. I think I’ll enjoy this.
on 20:00 import ReactDOM from 'react-dom'; root.render(element) those had been removed from version 18, instead you will use below import {createRoot} from 'react-dom/client' const root=createRoot(document.getElementById('root')) root.render(element)
I have to admit that I did train a lot of people in programming. As an IT architect I had to learn a lot of new technologies and pass it to other people in my day to day work. The way how you teach is very good; balanced. You explain all concepts clearly at the same time avoiding throwing too much on the listener. It’s a hard Art to master. Respect.
I really liked your Tutorial, Specially the way you cover every single details, like your keyboard shortcut keys, why you don't mentioned curly brace while importing React (As it is a default export) and why you install extensions and how to its work! Good Job Man!
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
If anyone is having trouble installing and using create-react-app (because the one he is using is very outdated), here are the commands to install the latest version and create a new application: npm init npm install create-react-app (don't use -g) npx create-react-app react-app cd react-app npm start
You are just great Mosh! Whenever i have to learn something i directly go to your tutorials. You are all-rounder guy. Your tutorials are just awesome and your way of teaching is just incredible!!! In the video of approx 2hrs i can get my half of the things done about that particular topic. These 2hrs videos are equal to many books or i would say there is no one like you. So thank you so much for all of this knowledge!! Keep going ahead and keep sharing your knowledge like this!!
I recently switched my career from Data Analysis/Science to Full stack web development. As a result, I needed to learn React JS, I have looked up a lot of online videos on this topic, although they were helpful, but I must confess this course by Mosh is second to none. You deserve an award! God bless you if you believe.
Some tips from my side where you could face some issues- 1. If you are watching this tutorial after April 2022 you should use react version 17 because version 18 is fairly new and it would be difficult to follow the tutorial. 2. Components names in react should always start from capital letters.
I thought it was helpful, but I wish he hadn't back-tracked so much. If this had been my very first introduction to React, I think I would have been quite confused each time he does something just to undo it, or to do it a different way.
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
TABLE OF CONTENT 00:00 Introduction 01:14 What is React 05:48 Setting Up the Development Environment 09:27 Your First React App 16:03 Hello World 22:26 Components 24:06 Setting Up the Project 26:15 Your First React Component 31:38 Specifying Children 35:56 Embedding Expressions 40:49 Setting Attributes 46:36 Rendering Classes Dynamically 50:57 Rendering Lists 54:58 Conditional Rendering 1:01:04 Handling Events 1:03:56 Binding Event Handlers 1:08:34 Updating the State 1:10:51 What Happens When State Changes 1:12:58 Passing Event Arguments 1:17:31 Composing Components 1:21:18 Passing Data to Components 1:24:31 Passing Children 1:27:44 Debugging React Apps 1:31:55 Props vs State 1:34:22 Raising and Handling Events 1:39:16 Updating the State 1:43:57 Single Source of Truth 1:47:55 Removing the Local State 1:54:44 Multiple Components in Sync 2:00:39 Lifting the State Up 2:06:18 Stateless Functional Components 2:08:49 Destructuring Arguments 2:10:52 Lifecycle Hooks 2:12:32 Mounting Phase 2:18:09 Updating Phase 2:22:31 Unmounting Phase
this was such an awesome tutorial. react was a blocker i frequently had working on my projects. i reviewed the video twice, just watching, not "copying" into my own project and then took on a new project and knocked the front end out within an hour. thank you sir, excellent tutorial.
at 1:15:59, when you typed () => this.handleIncrement(product) --> gave me undefined and didn't work. I got it to work with product => this.handleIncrement(product) which solved the problem. and this is the function: handleIncrement = product => { this.setState({ count: this.state.count + 1 }); }; so I don't know if did anything wrong before that, that I got undefined for the prodcut parameter passed to the function
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
Brilliant tutorial. I've done a couple of different React tutorials, and this is by far the best I have come across. I wasn't expecting that considering all of the other tutorials I have seen so far have been on paid subscriptions! Thank you very much, I feel like I have a decent understanding of React now, enough to get me going on a project!
Guys he updated his full course, there's even more awesomeness in it I strongly recommend it :) The best thing about the course is I didn't only get much better at react, but also lot of great programming techniques, shortcuts, and thinking about how to put together an app. To mosh - thanks a lot for updating the course man, and upping my programming knowledge in general. I'm on a subscription even though I originally just needed the react course in to support you. But after I cover the rest of your updates to the react course I will start looking at the other ones I'm interested in too since i got your subscription anyway :P
Thanks that's fine, I reworded a little to make it more clear for other people reading lol. I just wanted to notify others that your course is EVEN better now and how much i gained from it beyond learning react.
hi mosh, your way of teaching is amazing... plz make a new tutorial on react again, because a lot new features have released now ...like use memo hooks, use callbacks etc
I am in love with the way you teaches the courses.Thanks for giving this free courses.Very helpful for people who cannot afford like me.Thanks you so much
Hi Saipavan! Yes, these courses are really helpful to enthusiastic coders who are looking to learn! Are you looking out for job opportunities in software dev currently?
@@programmingwithmosh I'm not much of a SoMe person (youtube only), but I will guarantee you a slot on the "recommended" tab of my site and I will, of course, recommend you to anyone with whom I discuss coding and tutorials in the future :) Update: After a bit of consideration, I've decided to buy the entire course. That's a definite first for me as I'm the most stingy man alive. It's well worth it and at a very favourable price; good quality deserves recognition.
I was going through the React course on Udemy and honestly I found it quite fast paced and I couldn't follow it properly. Now after watching this Tutorial, I have much more clarity on these concepts. Amazing the way you explain things!
Hey have you taken this course? If yes is it updated or old i . Asking because on the website it says that its last updated in 2020 jan so should i purchase it or not?
Wow! Mosh! i'm just two minute and few seconds into your react crash course and I'm already giving a big shout out to the best react instructor ever on youtube. #CALEB from Lagos,Nigeria.
The absolute worth of every minute Mosh!!! It takes you to the beginner level to Intermediate level. Thanks a lot for the course... Keep up the good work...
I came here to get my feet wet with react thinking I knew JS and I am just blown away by the amount of stuff I've picked up about writing JS expressions and I'm not even half way though! my mind is melting. Thanks Mosh!
For anyone getting an error around 1:23:23 where he changes count to this.props.value, you need to change the constructor to be like this: constructor(props) { super(props); }
Since my class/grade one, I've never interacted with a teacher like Mosh. I really like your tutorials. Be blessed. Right now I'm almost a Developer with Mosh tutorials
First port of call for anything programming related is a tutorial by Mosh. This tutorial could be updated though - as I found a few issues but managed to sort it out with a struggle.
Few days back, I started watching a bestseller react course from Udemy but after watching it's 4 5 sections I still felt that I am unable to understand react. Then I watched this crash course and WOAH. This course is building your base better than a best seller paid course. Thank you Mosh for providing all this content for free. :) God bless
watched the tutorial without practicing, and it was so amazing, finally decided to begin practically at around halfway, ran into various problems trying to run the old react/bootstrap versions from this tutorial (react 1.5.2 and bootstrap 3 or 4, I think?) and used the latest (as of this comment) versions instead (react 18.2.0 and bootstrap 5). ran into some inconsistencies, but after fixing those problems, I am back on track! the tutorial is very well done in such a way that if I run into problems due to the version differences, I still have an idea on how to go about fixing it. Thank you!
I just skimmed through understanding what we will talk about, he says this is for beginners but it looks like he's gonna make us all pro. Thank you so much Mosh! I even use your udemy courses.
Followed along with documentation.. It took me around 10 hours to complete this video.. But finally I did it... I really recommend beginners to watch this. Shared you video in all of my whatsapp groups. Thanks Mosh Hamedani😍😚
Just curious from whom / which book did you learn React ? You're one of those rare breed of teachers who can explain complex topic is simplest possible way
Wow, I love Mosh, he is one amazing teacher, i have learned Angular 60ish minute video(2 years ago and that helped me to become an Angular js expert now). Have learned Modern JS concepts and amazing React Hands on introduction from him. Such a great work Mosh! And such a big help to dev like us. Thank You So much :)
Wanted to clarify an issue with create-react-app and npm start. At this time, the method of installing create-react-app is no longer supported as this tutorial uses the older global installation method. The documentation says "If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version" - create-react-app.dev/docs/getting-started. If you are having trouble, run the uninstall command, and make your react app using "npx create-react-app my-app". Then. cd to the directory as explained in the guide and npm start will work as expected.
4th Birthday of one of the best React course available on TH-cam. As a beginner you will find these things a bit messy. A good approach will be to learn ES6 modules and a bit of Object Oriented JavaScript. Because the new versions are coming so you might get stuck in installing the package and adding bootstrap. So the Solution is to add external bootstrap link and run command npx create-react-app react-app and then code along with Mosh Hamedani.
Hi Mosh, amazing tutorial right there, been following it from the beginning. However i noticed on "1:21:18 Passing Data to Components" if you are using the version v16.13.1 or any version higher than the one you are using, u will get an error "Undefined prop". the fix to this is defining a constructor and passing props and and argument and in the constructor define super and also pass props as an argument => constructor(props) { super(props); }
Fantastic library, cool ide and Amazing tutorial ! Thanks for such an in depth video... i will definitely consider getting the full version once my brain finishes processing this one. Kudos !
Compatibility changes if you are using current versions of the software: Format on save: -Checkbox instead of inline code -You have to manually assign a formatter, search settings for 'default formatter' and set it to Prettier bootstrap syntax: -'badge bg-primary" instead of "badge badge-primary" Page stops working after elevating state around 2:05:00 -this is because in newer versions of React, the main App.js declares the App as a function, in order to follow this tutorial, you have to revert it to a class by changing it to "class App extends Component" instead of function App. You also need to add a render() wrapper around the jsx return snippet at the bottom. I'm also a beginner, so this is probably not the right thing to do, but doing this will allow you to follow the tutorial.
This is one of the best tutorials that I've seen. Easy to understand and indepth explanation, overall interesting to watch. Thank you for sharing your knowledge 🙌
Appreciated the highly recommend React.js video. I was searching lots of react.js video on TH-cam getting the pure clean concept but I din't. Finally from this video I gained every information about react that helps to me learning real React.js concept. Thanks a lot for such an excellent video. This react tutorial is ever best among all other. I am watching from Frankfurt university of applied sciences, Frankfurt, Germany.
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript Here is the playlist for React JS th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
It with the functions instead of class I guess but if you follow his coding style to learn , you can try doing the function way which kinda he explained at end
![The Complete Web Development Roadmap [2024]](http://i.ytimg.com/vi/GxmfcnU3feo/mqdefault.jpg)
![ตีสิบเดย์ [FULL] | ตัวตึง! ปากกล้า! ท้ารบ! "ทนายไพศาล เรืองฤทธิ์"](http://i.ytimg.com/vi/pU3dXTsaBVc/mqdefault.jpg)
- Want to learn more? Get my complete React mastery course: mosh.link/react-course
- Subscribe for more videos like this: goo.gl/6PYaGF
2 years ago when I started to learn web development, I randomly came to this React Tutorial and back then I've doubted myself if I can get a job in software development. I almost quit this web development tutorial stuff but then I still believed in myself and now I am a React Developer and Tech lead in my team. thanks mosh!
wow bro i really wanna be like you
@@shohjaxonkomilov5201 Just believe in yourself!!!!!!!!!!!!
@speedfastman thank youu
I am in the same path as your early days that is tensed self doubt. But inspired from your words. Hope this tutorial work for me,😊
@@swagatalakshmipal7711 I am turning 40 in few months :) .. you try to learn or not but the truth is you are always learning something , the question is that the something is what you wanted or its coming to you without your knowledge. And I think, whoever can answer this question can learn many many things irrespective of all barriers/ hurdles
I am going to put "Trained by Mosh" on my resume and get all the jobs!
That's cheating you'd get every job instantly
I already did that
How many jobs you got so far??? I will do the same trained by Mosh
Please Mosh kindly help:
I am writing a code that finds logical difference between two numbers and then print out the even numbers between the two numbers
const myFunction = (x, y) => {
// Code here
if (x > y) {
return (x%2 == 0)
}
else {
return ('This is an Odd number')
}
}
console.log(myFunction(10,2));
@@i-am-oi a little confused by the prompt.... 'finds the logical difference between two numbers', and 'print out the even numbers between the two numbers'.... clarify a little bit, and I should be able to help.
Mosh is by far the most awesome tutor on the entire net. I already took two of his Angular courses and it landed me in a pretty good job. For added difficulty I had concentration difficulties at the time due to serious trauma, so bad I literally couldn't read a page in one sitting. I genuinely felt that I can't carry on with my profession, but Mosh gave it all back to me. Now I'm switching to React, and he's still the only one who can flawlessly explain the entire mess. We have to come up with some super fancy award for this guy.
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
Here is the playlist for React JS
th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
Man I just went through some serious stuff in life last year and this year I can barely focus or read.. I never thought it could be trauma related, I just thought it was normal stress but no matter how many breaks I take and try to go back it's still hard. It literally sucks the life out of you not being able to concentrate and retain information it's like my vision is zoomed in and I can't see the bigger picture. It always leads to frustration in the end. I'm watching this video wondering how far I'll be able to get into it before I lose focus and so far so good I'm glad I read your comment I hope this works for me.
@@yayz_ More power to you. Everyone gets out of their problems. Good luck man
@@yayz_ sometimes having a foggy mind could be due to a lack of important vitamins like Vitamin D. Start taking that along with a glass of pomegranate juice every day, because the latter is great for the mind, especially the memory part of your brain.
@@dragonballsuper1519 Thanks for the advice, I will definitely try that out !
This guy explains react better than the documentations. we are blessed to be living in the age of internet.
Yes, online learning is the way to go these days, especially for coders! Are you a student or working currently? Would you be interested in job opportunities in software development roles?
Yeah it helps a lot.
@@shivanigaddagimath6105 do you have any job to offer?
@@gopikannan7053 yes, we are a web development company and are looking for developers.
@@shivanigaddagimath6105 Any Internships available for college students?
W10 update for VSC 1.38.1
8:30 : file -> preferences -> settings -> text editor -> formatting : format on save
You're an awesome human being.
This also helps Mac users using the new version of VS code, thanks
Love ya man
hey thanks man
Thanks
43:12 If you, like me, installed the latest version of bootstrap (v5 at the time of writing this) the "badge-primary" won't work. In bootstrap v5 it's changed to "bg-primary" and "bg-secondary" etc instead, so try className="badge bg-primary m-2" for it to function correctly!
upvote. wasted close to 45 mins to find out where I did wrong then I saw I installed latest bootstrap which is v5.0.
Thank you @Davve1001
Aswell for the "badge-pill" , you can use "rounded-pill" instead !
Wow, such a great help! I was super confused as to what I did wrong. Thanks!
Thank you! Almost wasted a ton of time with this until I happened to see your comment.
My god, cannot believe that you provide this for free, really really appreciate it !!!
I had to pause the video to share my thoughts. It's just unbelievable how he explains everything so simply yet so effectively. I was looking for a perfect react video to get me started and I just landed on one..Thanks Mosh
React is really elegant in the way it is designed and compiled. Kudos to the facebook team, and of course Mosh who taught us!
This is probably the best tutorial on React available on YT
Is this video sufficient to beggining to learn react or i should to follow the full course of 10 hours ?
Mohammed Laslaa take the 10 hours course, and then start building a project and then come back here if you are stuck.
@@mohammedlaslaa9549 This is a good introduction and overview to React. Especially if you're like me and have never used it before. However, it's a crash course and so does not go heavily in-depth. I recommend to take this crash course first to get a feel for React and how it works. As well as its capabilities. But then do the full course afterwards to fill in the gaps missed in this crash course. Another good course to look at is the 5-hour course on freecodecamp. :-)
Thanks 😊
This is the fourth React app I've built from a tutorial but the first one where I was actually able to understand what was going on because of how it was all explained in detail. Really excellent style of teaching and much appreciated!
The comment section of this video is so helpful. Really good to see so many people willing to help out someone else so that they don't go through the trouble they went through
Dude, I've literally watched 100 videos on this and nothing clicked until I saw this. I LOVE YOU MOSH!
Not all heroes wear capes. Thank you so much, Mosh. This was incredible.
carter steinhoff I wear a cape when I plan to expose myself in front of the Safeway.
we are being led by saitama
How to fix: "npm ERR! missing script: start" when trying to run.
1. Uninstall the global version of the create-react app :
Write in your console: uninstall -g create-react-app
2. Delete the folder react-app (if this is the name of your react project)
3. Recreate your new project locally
Write in your console: npx create-react-app react-app
4. go into your react-app folder and type
npm start .... Have fun
This error is happening because create-react-app is not allowed to be used globally for some time
1. the line should have npm infront of it: npm uninstall -g create-react-app
@@Slurbisaur In my case I also need to delete the path..
so I use this command
which create-react-app | sudo xargs rm
Thanks alot Christian! Couldnt get it to work properly
thank you!
React/Python Lover Come Here!
Let's learn and practice together : discord.gg/vwgACw
I did struggle a lot to learn React. A lot of time that I wasted.
The problem? I did not know the basics of Javascript in first place. You need to walk before you can run.
So I took a few very basic books (books, not complex tutorials!) and learned the fundamentals.
After I learned the basics of Javascript, learning React became much easier.
Edit: For those asking about the books, for the very basics I learned with Javascript In Less than 50 Pages.
And to develop my knowledge I learned with Head First Javacript Programming.
1:53:52 in handleIncrement(counter) you can simply update the value of counter directly since it is a pointer to the counter in the state, then just setState(counters)
handleIncrement = (counter) => {
counter.value++;
const counters = this.state.counters;
this.setState({ counters});
};
thanks, I couldn't understand his code at that point, therefor I came into the comment section with the idea that may somebody have easy code and found you
Some error fixes that might be helpful --
1:23:25 If you get "TypeError: Cannot read property 'value' of undefined" after adding this.props.value, try removing the Counter constructor in counter.jsx
1:40:07 If your counterId is undefined, add prop "id={counter.id}" to your Counter component in counters.jsx
2:04:13 Change your App.js to match the other classes ie. from "function App()" to class "App extends Component" ...and add "render()" to return your React.Fragment
thank you very much
this thing should be pinned by mosh
bro what do you mean by removing the Counter constructor? Sorry, I`m new to programming
true
ur fix for 1:40:07 worked great for me ty!
8:40
On windows, go to file -> Preferences -> Settings
Edit: Then, at the search bar at the top, search for "format on save".
Tick the small box to enable it :)
Then, at setting, search for "Default format"
At "Editor: Default formater", select from null to prettier-vscode for it to work :)
How to create react app on windows?
@@joandianamilton1074 I'm using node.js to use npm, and then from npm install create-react-package, and then go to directory i want to create react package from node.js command prompt, type create-react-app my-react-app-title
@@destinyjames6117 if I type npx create-react-app my-app, it's throwing a error saying
Error: EPERM: operation not permitted, mkdir 'C:\Users\joan'
Command not found: create-react-app
@@joandianamilton1074 Try "npm i -g create-react-app"
This will install create-react-app for use
If not, try this:
"npm i create-react-app"
Thank you so much James😍
Got an internship interview and they asked that I made a React site in 2 weeks, to see how my code is and such. This guy literally saved me lmfao
O shit man this way of interview would be really relaxed never seen before.
good tutorial, but for anyone trying to follow and code along this is easy to miss: at 1:27:30 you say "we are going to delete the code that we wrote in this lecture" and delete the console log statement and child element of counter, but NOT the bit you also wrote where you assign the id property in props to counter.id. ( id={counter.id} ). this is really important to leave in as it will be referenced as the event argument of the delete button event handler
man you are the boss! I backtracked 3 times to see what went wrong before finding this comment! :D
You just made my day!
Yeah what a pain, he says at a point in time that id is a special attribute, but nowhere states that it should be declared explicitely in Counters.render() ... so I ended up having to write:
that's sooo odd and verbose....
Thank you soo much for this... couldn't find what a I doing wrong.
well spotted mishabruml, - now it's working...
#keyTakeAways
39:00 A new syntax for me --> Gets count property of state and assigns it to new count constant.
44:22 Applying your own styles in jsx
47:22 Conditional styling
51:51 Cant use loops in jsx elements. Use map(), filter() functions
56:00 Two ways of conditional rendering
1:06:30 Changing state variable arrow functions and setState()
1:11:13 To pass an element to onClick event don't use an explicit intermediate handler function. Use this intermediate function inside the onClick()
1:26:41 render variables in html in components
I am getting an error "product' is noy defined after doing that change
I appreciate how mosh makes things looks so much easier with great examples, and doesn't skip concepts like many other youtubers ... ❤️
Totally agree, the same way a great athlete makes hard things look easy to do, a great teacher makes coding looks easy too, even coding beeing hard most of the times =)
Thank you so much for this course. I was trying to learn React through an online course but was getting so confused. Your style is very easy to follow and I have gained a stronger grasp on the material.
I know the basics of JS , OOP in JS and ES6 hacks. I was wondering whether a full fledged react course with projects would be suitable or learning react through this video and then search for projects would be ideal. Can someone give me a feedback ?
@@rishabhchopra883 I think this video is enough and going on your own and doing projects is the best way if you are comfortable with it, since it forces you to think
however that depends on how comfortable you are with the prerequisites to react
so if you are just starting out courses might serve quite well
and his teaching style is so good, I might give them a try myself
@@darshandev1754 hey bro do you have any idea about mosh's java course. are they worth money?
@@ak332 sorry I haven't tried them so can't say about it
@@darshandev1754 hey is this course updated? Because in his website it says its updated in jan 2020 so should i buy this course??
The guy is good. Clear. Teaching qualities you've got. And you are smart. Don't change am following
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
Here is the playlist for React JS
th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
8:55 in version 1.59.0 of VS Code you go to Settings, then to Text Editor, then to Formatting and then click "Format on Save".
You deserve more likes!
Thank you so much, was struggling with this since 15 minutes!
Despite this tutorial being outdated by 4 years , it's still one of the best React tutorials out there
How much has changed? I never used React before. Does it still use classes with state and render methods?
@@pranavrao6370 I see one difference now, with the introduction of Hooks the whole app is contained within a function instead of a class.
Great course! Did this with the most up to date node packages and used Bulma instead of Bootstrap and everything worked perfectly. So as of 2018-08-29 everything in the tutorial is up to date with the most current versions.
Style worked after adding this code in my index.js import "bootstrap/dist/css/bootstrap.css";
I’ve not even finished watching the video and already you have mastered how to give me a fluffy feeling that it’s gonna be interesting and fun. I think I’ll enjoy this.
Mosh's teaching is pure and clear as his head. thank you. I learn a lot.
Hi Nilupul! Are you studying or working currently? Would you be interested in job opportunities in software dev?
@@shivanigaddagimath6105 Yes nice to hear, Can you give me more details. I'm currently working in startupcompany.
@@nilupulheshan27 Thanks for your response! Can we please connect via LinkedIn for more details? I have sent you a request on LinkedIn. Please accept.
How can you be so good??? Like literally with such a good explanation and clarity. U made this so simple. Thanks mosh
on 20:00
import ReactDOM from 'react-dom';
root.render(element)
those had been removed from version 18, instead you will use below
import {createRoot} from 'react-dom/client'
const root=createRoot(document.getElementById('root'))
root.render(element)
I have to admit that I did train a lot of people in programming. As an IT architect I had to learn a lot of new technologies and pass it to other people in my day to day work. The way how you teach is very good; balanced. You explain all concepts clearly at the same time avoiding throwing too much on the listener. It’s a hard Art to master. Respect.
Please if you still exit I need you to save me by guiding me on how to use this skills to
I really liked your Tutorial, Specially the way you cover every single details, like your keyboard shortcut keys, why you don't mentioned curly brace while importing React (As it is a default export) and why you install extensions and how to its work!
Good Job Man!
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
Here is the playlist for React JS
th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
yes I liked the way to describe the things in very detailed manner
React/Python Lover Come Here!
Let's learn and practice together : discord.gg/vwgACw
Hi Ankit! Are you looking our for job opportunities in software development currently? Please let me know if you are.
@@singhaditya3295 Hi Aditya! Are you studying or working currently? Would you be interested in internships/jobs in software development?
If anyone is having trouble installing and using create-react-app (because the one he is using is very outdated), here are the commands to install the latest version and create a new application:
npm init
npm install create-react-app (don't use -g)
npx create-react-app react-app
cd react-app
npm start
yes correct, but you could use yarn start as well because create-react-app suggests that only.
Thank you i was struggling with this
Thanks for this
Thanks man
Why no -g? Just wondering..
You are just great Mosh! Whenever i have to learn something i directly go to your tutorials. You are all-rounder guy. Your tutorials are just awesome and your way of teaching is just incredible!!! In the video of approx 2hrs i can get my half of the things done about that particular topic. These 2hrs videos are equal to many books or i would say there is no one like you.
So thank you so much for all of this knowledge!!
Keep going ahead and keep sharing your knowledge like this!!
React/Python Lover Come Here!
Let's learn and practice together : discord.gg/vwgACw
Man, you're doing a really good job. And I really like the way you each time pronounce "Save the changeeeeees".
I recently switched my career from Data Analysis/Science to Full stack web development. As a result, I needed to learn React JS, I have looked up a lot of online videos on this topic, although they were helpful, but I must confess this course by Mosh is second to none. You deserve an award! God bless you if you believe.
Hello Leonard,
May I know how did you switched career to Web development since the experience is on other domain?
Some tips from my side where you could face some issues-
1. If you are watching this tutorial after April 2022 you should use react version 17 because version 18 is fairly new and it would be difficult to follow the tutorial.
2. Components names in react should always start from capital letters.
Thank you ...
However I will need to write you a private message I need a guard
Can you explain it more coz I am facing difficulties in creating react app
thanks bro
Fantastic tutorial. Thank you for this.
Also... Drinking game: take a shot every time he says "save the changes."
or every time he says "beautiful"
or just type: true && "hi" and you get hi
Ba-dum-tss!
"Back to the browser"
"Lemme show you..."
Thank you, you have helped me hit the Ballmer Peak.
following this course was more exciting than a thriller. Never seen such clarity!
I got you..
I thought it was helpful, but I wish he hadn't back-tracked so much. If this had been my very first introduction to React, I think I would have been quite confused each time he does something just to undo it, or to do it a different way.
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
Here is the playlist for React JS
th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
TABLE OF CONTENT
00:00 Introduction
01:14 What is React
05:48 Setting Up the Development Environment
09:27 Your First React App
16:03 Hello World
22:26 Components
24:06 Setting Up the Project
26:15 Your First React Component
31:38 Specifying Children
35:56 Embedding Expressions
40:49 Setting Attributes
46:36 Rendering Classes Dynamically
50:57 Rendering Lists
54:58 Conditional Rendering
1:01:04 Handling Events
1:03:56 Binding Event Handlers
1:08:34 Updating the State
1:10:51 What Happens When State Changes
1:12:58 Passing Event Arguments
1:17:31 Composing Components
1:21:18 Passing Data to Components
1:24:31 Passing Children
1:27:44 Debugging React Apps
1:31:55 Props vs State
1:34:22 Raising and Handling Events
1:39:16 Updating the State
1:43:57 Single Source of Truth
1:47:55 Removing the Local State
1:54:44 Multiple Components in Sync
2:00:39 Lifting the State Up
2:06:18 Stateless Functional Components
2:08:49 Destructuring Arguments
2:10:52 Lifecycle Hooks
2:12:32 Mounting Phase
2:18:09 Updating Phase
2:22:31 Unmounting Phase
WOW
React/Python Lover Come Here!
Let's learn and practice together : discord.gg/vwgACw
@Nobel Nazrul lmao
in desc srry
@@gully40 mad?
this was such an awesome tutorial. react was a blocker i frequently had working on my projects. i reviewed the video twice, just watching, not "copying" into my own project and then took on a new project and knocked the front end out within an hour. thank you sir, excellent tutorial.
did u use his version of create-react-app or just used npx to make the app?
@@alenjose3903 npx
at 1:15:59, when you typed () => this.handleIncrement(product) --> gave me undefined and didn't work. I got it to work with product => this.handleIncrement(product) which solved the problem.
and this is the function:
handleIncrement = product => {
this.setState({ count: this.state.count + 1 });
};
so I don't know if did anything wrong before that, that I got undefined for the prodcut parameter passed to the function
Awesome, that solved it for me too, thanks.
Thank you :D I had the same error
Same problem. Thank you !
Thank you! I had the same issue!
still getting product is not defined
For those who sleep in all lecturing classes, you're gonna enjoy his fun way of teaching. He is a god in 'learn by doing' teaching.
Hi Harish! Are you studying or working currently? Would you be interested in internship/job opportunities in software dev?
I have passed many courses learning react and this one is the best with High-quality contents. Thank you, Mr. Mosh "Dastet dard nakone"
Is this video sufficient to beggining to learn react or i should to follow the full course of 10 hours ?
Best React tutorial on youtube. I''ve been watching Mosh tutorials for a long time ago and the conclusion is pretty clear: he's a great teacher
Brilliant brilliant tutorial. The tips in between are priceless!
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
Here is the playlist for React JS
th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
Brilliant tutorial. I've done a couple of different React tutorials, and this is by far the best I have come across. I wasn't expecting that considering all of the other tutorials I have seen so far have been on paid subscriptions! Thank you very much, I feel like I have a decent understanding of React now, enough to get me going on a project!
is it better than the freecodecamp React Native tutorial on TH-cam?
@@jesseguerrero8203 yeah much better....i have done both
Guys he updated his full course, there's even more awesomeness in it I strongly recommend it :) The best thing about the course is I didn't only get much better at react, but also lot of great programming techniques, shortcuts, and thinking about how to put together an app.
To mosh - thanks a lot for updating the course man, and upping my programming knowledge in general. I'm on a subscription even though I originally just needed the react course in to support you. But after I cover the rest of your updates to the react course I will start looking at the other ones I'm interested in too since i got your subscription anyway :P
Thanks that's fine, I reworded a little to make it more clear for other people reading lol. I just wanted to notify others that your course is EVEN better now and how much i gained from it beyond learning react.
MOSH MOSH you are magical and I have learn more and more about from your programing languages videos and they are quite smart and thank you so much!!!
hi mosh, your way of teaching is amazing... plz make a new tutorial on react again, because a lot new features have released now ...like use memo hooks, use callbacks etc
I am in love with the way you teaches the courses.Thanks for giving this free courses.Very helpful for people who cannot afford like me.Thanks you so much
Yes I do.But not this clear about the stuff going inside.
Hi Saipavan! Yes, these courses are really helpful to enthusiastic coders who are looking to learn! Are you looking out for job opportunities in software dev currently?
Mosh, you're a diamond at helping me catch up when i need to. Never stop, sensai!
I'm so glad I found you, these tutorials are actually soooo good, and I'm actually learning rather than just copying. Thanks Mosh!
Going to watch all the adds through, just for this guy. :D
You can use ads blocker brother :D
Can't imagine life on TH-cam without an AdBlocker brother.
@@amratanshu99 Hi Amratanshu! Are you a student currently or working? Are you looking out for software developer roles ?
43:38
@@programmingwithmosh I'm not much of a SoMe person (youtube only), but I will guarantee you a slot on the "recommended" tab of my site and I will, of course, recommend you to anyone with whom I discuss coding and tutorials in the future :)
Update: After a bit of consideration, I've decided to buy the entire course. That's a definite first for me as I'm the most stingy man alive. It's well worth it and at a very favourable price; good quality deserves recognition.
I was going through the React course on Udemy and honestly I found it quite fast paced and I couldn't follow it properly. Now after watching this Tutorial, I have much more clarity on these concepts. Amazing the way you explain things!
Hi Itish! Are you a student or working currently? Would you be interested in software development roles?
Hey have you taken this course? If yes is it updated or old i . Asking because on the website it says that its last updated in 2020 jan so should i purchase it or not?
Wow! Mosh! i'm just two minute and few seconds into your react crash course and I'm already giving a big shout out to the best react instructor ever on youtube.
#CALEB from Lagos,Nigeria.
At last the long awaited course 🙂
Thanks Mosh
Your courses are always extra ordinary.
I can say now, Learning react was fun and made super easy by you. Thank you for teaching us !
th-cam.com/video/6lB7f6nNS6U/w-d-xo.html..
Hi Amardeep! Are you studying or working currently? Would you be interested in opportunities for software developer roles?
One of the best tutorial for learning react on Internet today
Hi Ajinkya! Are you a student currently or working? would you be interested in opportunities in software development?
you are good at explaining reactjs i've been watching this tutorial for an hour now and i didn't feel the time passing
The absolute worth of every minute Mosh!!! It takes you to the beginner level to Intermediate level. Thanks a lot for the course... Keep up the good work...
Hey! Are you working currently? Are you looking for jobs in software development roles?
This guy has such quality lessons, I'm so gonna buy the full course.
th-cam.com/video/6lB7f6nNS6U/w-d-xo.html. ..
Im thinking of buying it too and i was wondering if its up to date. Can you please give me a feeback about the course
Please make an updated version of this course! It's so good but a lot of elements aren't feasible anymore :'(
yes truee...im a lil confused bcoz of that :(
Yes same here! I am unable to start my react. Does anyone know the solution?
Any insights into what will break with the newest version of React? I don't feel great using an outdated version of the React library.
@@smithmarta There are many more tutorials on youtube which might be helpful!
@@samselvaraj8171 thank you, I found another great course here.
I came here to get my feet wet with react thinking I knew JS and I am just blown away by the amount of stuff I've picked up about writing JS expressions and I'm not even half way though! my mind is melting. Thanks Mosh!
For anyone getting an error around 1:23:23 where he changes count to this.props.value, you need to change the constructor to be like this:
constructor(props) {
super(props);
}
ty
You are a Lifesaver
thank you so much bro. helped alot
I really like how u explain all things...."Plssssssss MAKE A NEW SERIES ON ANGULAR"..
th-cam.com/video/6lB7f6nNS6U/w-d-xo.html..
😭
Hi Suyash! Are you a student or working currently? Would you be interested in job opportunities in software development?
Since my class/grade one, I've never interacted with a teacher like Mosh. I really like your tutorials. Be blessed.
Right now I'm almost a Developer with Mosh tutorials
You are a sad person
Very clear and consistent course! Did have no single question. Thank you!
8:37 For windows users in visual studio code type Ctrl + , to open user settings to configure prettier formatter
This helped me!
Lucas M. I am glad!
i can't install react in "cmd"
Maulik what is the error message, and what did you write?
First port of call for anything programming related is a tutorial by Mosh. This tutorial could be updated though - as I found a few issues but managed to sort it out with a struggle.
Few days back, I started watching a bestseller react course from Udemy but after watching it's 4 5 sections I still felt that I am unable to understand react. Then I watched this crash course and WOAH. This course is building your base better than a best seller paid course. Thank you Mosh for providing all this content for free. :) God bless
What was the best seller paid course's name?
watched the tutorial without practicing, and it was so amazing, finally decided to begin practically at around halfway, ran into various problems trying to run the old react/bootstrap versions from this tutorial (react 1.5.2 and bootstrap 3 or 4, I think?) and used the latest (as of this comment) versions instead (react 18.2.0 and bootstrap 5). ran into some inconsistencies, but after fixing those problems, I am back on track!
the tutorial is very well done in such a way that if I run into problems due to the version differences, I still have an idea on how to go about fixing it. Thank you!
I second what you saying
Thank you Mosh!
This is the best React Tutorial I have came across. so simple yet cleared all the necessary concepts.
I just skimmed through understanding what we will talk about, he says this is for beginners but it looks like he's gonna make us all pro. Thank you so much Mosh! I even use your udemy courses.
is this tutorial outdated?
@@MukeshKumar-co5ky he added a section for new/advanced react stuff
@@EZboyrocks mind asking, where can i find that latest tutorial?
@@nurfarihasalam5370 it’s on his website, you need to pay for the full course
@@EZboyrocks ohh i see. thank you!!!
This is by far the easiest JS tutorial I've ever watched.
Followed along with documentation.. It took me around 10 hours to complete this video.. But finally I did it... I really recommend beginners to watch this. Shared you video in all of my whatsapp groups. Thanks Mosh Hamedani😍😚
Just curious from whom / which book did you learn React ?
You're one of those rare breed of teachers who can explain complex topic is simplest possible way
took almost 4hour to complete this, but totally worth it
thats Fast!! im on all day, will have to stay up late
Wow, I love Mosh, he is one amazing teacher, i have learned Angular 60ish minute video(2 years ago and that helped me to become an Angular js expert now).
Have learned Modern JS concepts and amazing React Hands on introduction from him. Such a great work Mosh! And such a big help to dev like us. Thank You So much :)
> become an Angular js expert now
[citation needed]
Honestly, this Course is wow..
Thanks so much Mosh.
God bless you.
This is an awesome course. You made it seem so easy to understand.
Wanted to clarify an issue with create-react-app and npm start. At this time, the method of installing create-react-app is no longer supported as this tutorial uses the older global installation method. The documentation says "If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version" - create-react-app.dev/docs/getting-started. If you are having trouble, run the uninstall command, and make your react app using "npx create-react-app my-app". Then. cd to the directory as explained in the guide and npm start will work as expected.
Thank you very much for this, I have been battling this stuff for ages, I just did as you said and it worked perfectly.
Great info. Thanks !!!
This class is exceptional! Wish I could learn every technology like this. Thank you very much!
You can let's train our mind
Absolutely clearly explained along with explaining how to avoid easy mistakes
This course is amazing and you are an awesome teacher!😍Congrats:)
4th Birthday of one of the best React course available on TH-cam. As a beginner you will find these things a bit messy. A good approach will be to learn ES6 modules and a bit of Object Oriented JavaScript. Because the new versions are coming so you might get stuck in installing the package and adding bootstrap. So the Solution is to add external bootstrap link and run command npx create-react-app react-app and then code along with Mosh Hamedani.
How to add external Bootstrap?
still working 4 years later or it's outdated?
Hi Mosh, amazing tutorial right there, been following it from the beginning. However i noticed on "1:21:18 Passing Data to Components" if you are using the version v16.13.1 or any version higher than the one you are using, u will get an error "Undefined prop". the fix to this is defining a constructor and passing props and and argument and in the constructor define super and also pass props as an argument => constructor(props) {
super(props); }
A great help! thanks alot!
2 years later you are still helping people! thanks
35:11 Command + D(on Mac) can edit the same selections ( multiple cursors ) in one go, SUPER HANDY ! Thanks Mosh !
Please make a new video with a current version
Fantastic library, cool ide and Amazing tutorial ! Thanks for such an in depth video... i will definitely consider getting the full version once my brain finishes processing this one. Kudos !
@@programmingwithmosh will buy the course anyways :)
Compatibility changes if you are using current versions of the software:
Format on save:
-Checkbox instead of inline code
-You have to manually assign a formatter, search settings for 'default formatter' and set it to Prettier
bootstrap syntax:
-'badge bg-primary" instead of "badge badge-primary"
Page stops working after elevating state around 2:05:00
-this is because in newer versions of React, the main App.js declares the App as a function, in order to follow this tutorial, you have to revert it to a class by changing it to "class App extends Component" instead of function App. You also need to add a render() wrapper around the jsx return snippet at the bottom. I'm also a beginner, so this is probably not the right thing to do, but doing this will allow you to follow the tutorial.
Thank you for noting this, I thought I was crazy and that I had accidentally changed my App.js, but nope, it really just is different.
This is one of the best tutorials that I've seen. Easy to understand and indepth explanation, overall interesting to watch. Thank you for sharing your knowledge 🙌
still working 4 years later or it's outdated?
Appreciated the highly recommend React.js video. I was searching lots of react.js video on TH-cam getting the pure clean concept but I din't. Finally from this video I gained every information about react that helps to me learning real React.js concept. Thanks a lot for such an excellent video. This react tutorial is ever best among all other. I am watching from Frankfurt university of applied sciences, Frankfurt, Germany.
Watch 1000+ Tech Videos from My channel talking about Everything in Javascript
Here is the playlist for React JS
th-cam.com/video/ZWqfADc-0K8/w-d-xo.html
React/Python Lover Come Here!
Let's learn and practice together : discord.gg/vwgACw
completely watched this tutorial..covers all the necessary basics of react..Also please do video for Redux in React..Thank You Mosh..
Can Mosh do a new version of this? The code create-react generates now is so different to what it generated in his tut 2 years ago
It with the functions instead of class I guess but if you follow his coding style to learn , you can try doing the function way which kinda he explained at end
Thank you - as always!! You're saving this novice dev EVERY SINGLE DAY.