Don't worry man Your course is perfectly on going just continue in this phase Medium length videos + exercises at end Awesome course You can add more important stuff at any time as per your experience in this series also , that could be great help for beginners like me Thanks brother for this Reactjs course
The exercises at the end of the videos standout for me. For someone like me who watch all through, it ensures i get to practice what i learned.. Nice work
Started your course yesterdag, after learning HTML, CSS and Javascript last year! To comment on your explanation on how you structured this: it's great! It is very clear what you should know beforehand, the videos are nice bite-sized, you can either break it up in smaller parts yourself, or watch a few back-to-back. Looking forward to learning more, but I'm already a happy beginner. Thanks so much! 😄
You know what! I love your videos so much and I even watch them again and again instead of using social media in my spare time! Thank you, Pedro! Your videos let me know how to use my CSS & JavaScript skills in React! I've always been confused about how to change the syntax in React. I love the way you described the syntax in 'JavaScript first' -> shows the result and tells us how to write it in React, that's useful and understandable.
Thanks you so much Pedro, I promised myself that I'll watch every video of this series. Also Belated Happy Birthday 🎂 I hope that you had a very good time anyway and that you’ve got an amazing year to come. Lots of Love from INDIA ❤
Pedro I am a intermediate python developer coming with no experience in Javascript. That said your videos are concise enough that I am easily understanding the concepts and using very minimal googling to fill in the gaps. This course is the best I have found for React and your hard work in putting this together is very much appreciated.
Pedro you are a BOSSSSSS!!! Thank you so much bro for everything you do!!, I'm starting to learn react now and i wish you can teach me everything. I learn so much through your style. Im changing careers from geologist and really need a mentor.
People take an hour to explain this. Weird. This is not long especially if you do it at 1.5 times the speed. Time saver truly. Thank you for your great work
Pedro, your videos are amazing. I'm looking for a good tutorial/course on React to recommend to some friends who are learning javascript and after watching your videos I will 100% recommend your channel! I wish I had seen this video 1 year ago when I started with React. I wish you all the best,
Fantastic course!!! Thank you so much for creating this and presenting it so well. The only feedback is that I wouldn't call A && B a ternary operator - I would call it a hack using "short-circuit" evaluation. I like that you present it though since I had to dig in and try to understand it and I will start to use it, but I think it is best to not refer to it as ternary which involves three parts by definition: The expression A && B works to return B due to the way logical AND (&&) operations are evaluated in JavaScript and other similar languages. This behavior is part of the logical operators' "short-circuit" evaluation. The expression A && B is not a ternary operation because it does not follow the ternary operator's structure and does not serve the same purpose. Here's how they differ: Structure: A ternary operation in JavaScript and similar languages is structured as condition ? exprIfTrue : exprIfFalse. It consists of three parts: This course is so helpful! That would be the only update I would make in future courses.
This is first course I listening on english, before this I was listened course on my native language and it was easy to understand. But I can't say this is hard, it's isn't! I understand you at almost everything man, and yeah, this course is helpful. I am new in react and I hope I will figure out this!
Awesome video! I also found that you can use quick actions to move a function to a new file and it automatically adds the necessary import and export code
Why do these variable names sound like kids from stranger things This course is very precise and straight to the point, easy to understand. Good job man
Pedro, this way you are doing the videos it's awesome, make the learning more dynamic and with some exercises in the end will fix what we learned more easily. I have some question about the props, in the previous video you created the component inside the App.js file, but now you created a new file for the component and used the props it well. My question is about the usage of the props around the code, have some limitations or I can use in anywhere? Thanks a lot for the videos, you are a really good teacher :)
Heyy, you can use props in ny component. Think of a component as like a javascript function. You can put it anywhere you want as long as you export it so you can access it in another file. Now think of a prop as like a normal argument that a function has. You can pass anything you want as a prop, like strings, numbers, functions, objects, even other components. There are no limitations in that sense!
Hello, Pedro) Thanks for your hard work doing this tutorials. Is it possible to ask you to clarify some specific topics about React? There are some that aren't covered well in variety of other tutorials
@PedroTech Hi, Pedro, and thanks for your response)) Could you please talk in a bit deep details about optimization techniques available in React like useCallback and useMemo hooks. When to use them exactly, what is considered to be a "heavy calculation"? Is there any real reason to use class components in 2022? Is it ok to declare utility functions outside of the components? Could you make a separate deep tutorial on most common antipatterns we might use as React devs? Hope this list is somewhat ok)) Thanks in advance)
hi, do you plan to include in your course (after basics) some libraries, like Formik? thanks, you're doing a great job helping other people to get new skills and to improve their lives!
Hey, watch the 1st video of this series, there at the start he has mentioned all the topics he is going to cover. Also Yes he is going to teach formik library as well.
Projects will come later on in the course! The difference between class and functional component is the syntax and methods used. Dont use class components, they are outdated and obsolete
Thanks for tutorial, i have one question. Shouldnt we name the User component User.jsx instead of User.js when we work with jsx ? what is the difference between naming the files .js or .jsx ?
Both works the same way. Later on in the course i will go over best practices, i personally prefer to name pure javascript files with .js and components with .jsx (i technically use typescript but i will teach typescript later on)
hey pedro, very much thanks for the videos. I like your format and much easier to digest than other teachers. With that being said, I have a question in this episode: {{ color: isGreen ? "green" : "red" }}.... How does JS know that "green" string is the green color? Is it already a defined variable in JS? Thanks
Hi! In CSS there are actually predefined colors that you can use as strings (instead of HEX or RGB), you can just search online for "CSS valid color strings"
just dont put the key attribute in your anonymous function for the same functionality. Otherwise prepending it with `_` is also fine. Therefore (name) => {return xyz} or (name,_key) => {return xyz} are both valid code which wont give any errors and are cleaner than adding useless html attribute too.
Thank you Pedro you're a beast...i have a question thou XD! how can we make that logic reusable (I'm talking about the last exercise) i tried to make it as a separate component but I failed! can you help with that !
React bug maybe? Had a problem where no names was displaying when using "user" as the parameter ,only the ages were displaying. Changed "user " in the map section to "item" and started working
I think "component.module.css" is better than the normal way of "component.css", because the normal ruins the style if you use same class name in another component it will override it at all.
Your solution also works, but it's not clean. You are rendering all the planets even the ones that are not gas planets, you are just hiding the name; and you are passing a div as the name which is not recommended.
hi Pedro amazing series . one issue i have is that react autocomplete is not working for my .js file like style or color .is there any solution for that . thanks again for this series .
import styles from './App.module.css', and implementing classname with styles as styles.name, I dont think this is working anymore... Also, what is it trying to import as "styles", there is nothing exported in the file './App.module.css'.
can anyone please explain why we didn't use function with props in Planets exercise? can we not use conditionals statements within Planets element if used with props : return like this? in this statement somehow fit ternary operator. Help me out guys cant figure when to use props and when not to.
i tried displaying the list by using forEach method but it does not render the names on my page. function App() { const names = ["john", "jessica", "mike", "dustin"]; return (
@@ViswanathCodes9999 it's cause we are missing an "else" statement. here is the correct code: {planets.map((planet, key) => { if (planet.isGasPlanet) { return {planet.name}; } else { return null; // or any other value you want to return for non-gas planets } })}
![ReactJS Course [4] - UseState Hook | States in React Tutorial](http://i.ytimg.com/vi/iBfr6eOcCMg/mqdefault.jpg)
![ReactJS Course [4] - UseState Hook | States in React Tutorial](/img/tr.png)
![ReactJS Course [5] - CRUD In React | TodoList Tutorial](http://i.ytimg.com/vi/omphzcP6wf4/mqdefault.jpg)
![ReactJS Course [10] - React-Query Tutorial | How to Properly Fetch Data in React](http://i.ytimg.com/vi/SYXvHXOJzwc/mqdefault.jpg)
Don't worry man
Your course is perfectly on going just continue in this phase
Medium length videos + exercises at end
Awesome course
You can add more important stuff at any time as per your experience in this series also , that could be great help for beginners like me
Thanks brother for this Reactjs course
Thank youu!!
@@PedroTechnologies learning lots thank you!
@PedroTechnologies thank you!
in my oppinion this playlist is standalone enough to be production-ready reactJS developer, very very good composition, thank you
The exercises at the end of the videos standout for me. For someone like me who watch all through, it ensures i get to practice what i learned.. Nice work
Started your course yesterdag, after learning HTML, CSS and Javascript last year! To comment on your explanation on how you structured this: it's great! It is very clear what you should know beforehand, the videos are nice bite-sized, you can either break it up in smaller parts yourself, or watch a few back-to-back. Looking forward to learning more, but I'm already a happy beginner. Thanks so much! 😄
Best of luck! Glad you are liking it!!
Thanks! Great video , also a very Happy Birthdayy !! Keep educating us!
You know what! I love your videos so much and I even watch them again and again instead of using social media in my spare time! Thank you, Pedro!
Your videos let me know how to use my CSS & JavaScript skills in React! I've always been confused about how to change the syntax in React. I love the way you described the syntax in 'JavaScript first' -> shows the result and tells us how to write it in React, that's useful and understandable.
Thanks you so much Pedro, I promised myself that I'll watch every video of this series. Also Belated Happy Birthday 🎂 I hope that you had a very good time anyway and that you’ve got an amazing year to come. Lots of Love from INDIA ❤
Pedro I am a intermediate python developer coming with no experience in Javascript. That said your videos are concise enough that I am easily understanding the concepts and using very minimal googling to fill in the gaps.
This course is the best I have found for React and your hard work in putting this together is very much appreciated.
Pedro you are a BOSSSSSS!!! Thank you so much bro for everything you do!!, I'm starting to learn react now and i wish you can teach me everything. I learn so much through your style. Im changing careers from geologist and really need a mentor.
Good job bro.
Nice explanations and keeping it short is good.
Not making every lesson over complicated. Awesome work
I struggled a bit at the start, took almost 3 days, but now got through it! And I've to say, your teaching is amazing!
Awesome! I'm learning so much as I'm following along! Thanks Pedro!
Yesterday I found u through ur react hooks tutorial and found this playlist. Omg bro ur gold
People take an hour to explain this. Weird. This is not long especially if you do it at 1.5 times the speed. Time saver truly. Thank you for your great work
Thank you Pedro for making my react journey a smooth one. It might interest you to know you're my mentor. Thanks for doing what you're doing .
Your course is going amazing! Will be watching for every upload here on out!
Pedro, your videos are amazing. I'm looking for a good tutorial/course on React to recommend to some friends who are learning javascript and after watching your videos I will 100% recommend your channel! I wish I had seen this video 1 year ago when I started with React. I wish you all the best,
Thank u very Pedro, This course is amazing. I will definitely follow, share and support your channel.
Thanks for your knowledge and the ways you are conveying make me alert so much. Good Day 🇦🇺
Thank you!!
This was well explained. The exercise you give at the end of every video is truly helpful
Very easy explanation, and it's a great way to deliver the message. Keep going, Pedro's
Fantastic course!!! Thank you so much for creating this and presenting it so well.
The only feedback is that I wouldn't call A && B a ternary operator - I would call it a hack using "short-circuit" evaluation. I like that you present it though since I had to dig in and try to understand it and I will start to use it, but I think it is best to not refer to it as ternary which involves three parts by definition:
The expression A && B works to return B due to the way logical AND (&&) operations are evaluated in JavaScript and other similar languages. This behavior is part of the logical operators' "short-circuit" evaluation.
The expression A && B is not a ternary operation because it does not follow the ternary operator's structure and does not serve the same purpose. Here's how they differ:
Structure:
A ternary operation in JavaScript and similar languages is structured as condition ? exprIfTrue : exprIfFalse. It consists of three parts:
This course is so helpful! That would be the only update I would make in future courses.
This is first course I listening on english, before this I was listened course on my native language and it was easy to understand. But I can't say this is hard, it's isn't! I understand you at almost everything man, and yeah, this course is helpful. I am new in react and I hope I will figure out this!
Thank you for everything you do Pedro ! Just fixed so many mistakes I've made watching your videos.
I love your teaching Pedro, you are the best of all ,you are so precise in your explanation
Your course is extra, super and you give me your good vibe to coding in react - a lot of thanks :D
I'm definitely binge watching this, maratonandoooo :D
Awesome video! I also found that you can use quick actions to move a function to a new file and it automatically adds the necessary import and export code
Exactly what I was looking for! Thanks Pedro!
You truly are a great teacher
You are doing great on these videos! Really am learning alot! Thanks!
I believe the video length is great. Thanks for the content.
You are Champ Man.. Keep going.. You are really doin good bro..
Very good explanation
Why do these variable names sound like kids from stranger things
This course is very precise and straight to the point, easy to understand. Good job man
I was watching season 4 of stranger things during this course lmaooo
@@PedroTechnologies 😂 😂
Cool!
Whats the VS code theme extension you're using please?
thank u so much bro ill go to next video bro well done
Pedro, this way you are doing the videos it's awesome, make the learning more dynamic and with some exercises in the end will fix what we learned more easily. I have some question about the props, in the previous video you created the component inside the App.js file, but now you created a new file for the component and used the props it well. My question is about the usage of the props around the code, have some limitations or I can use in anywhere? Thanks a lot for the videos, you are a really good teacher :)
Heyy, you can use props in ny component. Think of a component as like a javascript function. You can put it anywhere you want as long as you export it so you can access it in another file. Now think of a prop as like a normal argument that a function has. You can pass anything you want as a prop, like strings, numbers, functions, objects, even other components. There are no limitations in that sense!
@@PedroTechnologies Ohhh okay, now is more clarify to me. Thanks for the explanation
finally i found a perfect course for me , Thankyou so much
kudos pedro
Awesome like always !
Hello, Pedro) Thanks for your hard work doing this tutorials. Is it possible to ask you to clarify some specific topics about React? There are some that aren't covered well in variety of other tutorials
Yes!! What topics do u want?
@@PedroTechnologies Pedro, salut))) THANK YOU A LOT! in next topics we can cover hooks one by one)
@PedroTech Hi, Pedro, and thanks for your response))
Could you please talk in a bit deep details about optimization techniques available in React like useCallback and useMemo hooks. When to use them exactly, what is considered to be a "heavy calculation"? Is there any real reason to use class components in 2022?
Is it ok to declare utility functions outside of the components?
Could you make a separate deep tutorial on most common antipatterns we might use as React devs?
Hope this list is somewhat ok))
Thanks in advance)
i really like the way you teach. thank you!
Happy birthday pedro♥️♥️♥️♥️
Thank you!!!!
Pedro, at 27:26 why don't we put planet.isGasPlanet in curly braces?? i can't understand why we must put {planet.name} but not {planet.isGasPlanet}
planet.isGasPlanet is condition
{planet.name} is object property
Keep it up man!!
Done! thanks a lot sir
Cool! I didn't know you could conditionally set the colors this way: Company Name
Awesome videos man, thanks a lot ❤❤❤❤❤❤❤❤
Thanks you so much Pedro!
awesome .......
thanks sir for this course I learn a lot from you
super explanation by breaking into parts
Thank you bro for the Course ❤
Pedro thank you for the amazing content! The discord link in the description is not working by the way.
hi, do you plan to include in your course (after basics) some libraries, like Formik? thanks, you're doing a great job helping other people to get new skills and to improve their lives!
Hey, watch the 1st video of this series, there at the start he has mentioned all the topics he is going to cover. Also Yes he is going to teach formik library as well.
Yess!! I will teach some extra libraries including formik and YUP
Hey Pedro, Please check my message on LinkedIn
Really awesome bruhhh....!
Thanks PEDRO
it is very hard to get like subscribe from me on youtube but your content force me to not leave without done that :) great effort
Sir can you explain about class and functional component and also frontend design with react like creating real website with design
Projects will come later on in the course! The difference between class and functional component is the syntax and methods used. Dont use class components, they are outdated and obsolete
Thank you so much sir.
Why we don't use the key attribute in ?
Thank u so much...
Much love
Did you mentioned why do you separate the opening html tags and the text inside them with 1 space?
Example
instead of
Example
Thanks for the videos , how to pass key values while we export component using props
Amazing many thanks
Thanks for tutorial, i have one question. Shouldnt we name the User component User.jsx instead of User.js when we work with jsx ? what is the difference between naming the files .js or .jsx ?
Both works the same way. Later on in the course i will go over best practices, i personally prefer to name pure javascript files with .js and components with .jsx (i technically use typescript but i will teach typescript later on)
episode 3 - conditional rendering
import './App.css';
function App() {
const planets = [
{name:"Mars" , isGasPlanet:false},
{name:"Earth" , isGasPlanet:false},
{name:"Jupiter" , isGasPlanet:true},
{name:"Venus" , isGasPlanet:false},
{name:"Neptune" , isGasPlanet:true},
{name:"Uranus" , isGasPlanet:true},
]
return (
{planets.map((planet,key)=>{
return {planet.isGasPlanet ? planet.name : null}
})}
);
}
export default App;
hey pedro, very much thanks for the videos. I like your format and much easier to digest than other teachers. With that being said, I have a question in this episode:
{{ color: isGreen ? "green" : "red" }}....
How does JS know that "green" string is the green color? Is it already a defined variable in JS? Thanks
Hi! In CSS there are actually predefined colors that you can use as strings (instead of HEX or RGB), you can just search online for "CSS valid color strings"
just dont put the key attribute in your anonymous function for the same functionality. Otherwise prepending it with `_` is also fine. Therefore (name) => {return xyz} or (name,_key) => {return xyz} are both valid code which wont give any errors and are cleaner than adding useless html attribute too.
Thanks bro
Thanks you from your work
Thanks much for awesome videos.. Can you upload videos every alternate day if possible
I will try my best! I couldnt this week because it was my birthday week. Starting next week I will post 3-4 times a week
@@PedroTechnologies Thanks for the response. Belated happy birthday
Thank you Pedro you're a beast...i have a question thou XD!
how can we make that logic reusable (I'm talking about the last exercise) i tried to make it as a separate component but I failed! can you help with that !
React bug maybe? Had a problem where no names was displaying when using "user" as the parameter ,only the ages were displaying. Changed "user " in the map section to "item" and started working
I tried the import and use method for planets array as well. It worked but is it a good practice
I think "component.module.css" is better than the normal way of "component.css", because the normal ruins the style if you use same class name in another component it will override it at all.
const planets = [
{ name: 'Mars', isGasPlant: false },
{ name: 'Earth', isGasPlant: false },
{ name: 'Jupiter', isGasPlant: true },
{ name: 'Venus', isGasPlant: false },
{ name: 'Nepyune', isGasPlant: true },
{ name: 'Uranus', isGasPlant: true },
]
nice pedro 😊😊👌👌👌👌👌👌
The CSS modules ensures that your styles don't conflict especially in big projects.
Hi Pedro! thanks for the video ! my answer was like this
return (
{planets.map((planet,key) => {
return ;
})}
);
did i overdo it ? was it a good way of using components ?
Your solution also works, but it's not clean. You are rendering all the planets even the ones that are not gas planets, you are just hiding the name; and you are passing a div as the name which is not recommended.
Hey man thanks for the course, my code works fine but console has these errors React errors, 24 of them how can i remove them?
Can you paste the errors here?
@@PedroTechnologies Thanks for responding i think when i played around the code i fixed it cause I can't find them anymore.
Will this only make me beginner sir?
Man can u make 1 hour long video if possible ,till today i completed all lectures,can u share more task ?
hi Pedro amazing series . one issue i have is that react autocomplete is not working for my .js file like style or color .is there any solution for that . thanks again for this series .
import styles from './App.module.css', and implementing classname with styles as styles.name, I dont think this is working anymore...
Also, what is it trying to import as "styles", there is nothing exported in the file './App.module.css'.
Why intellisense does not work when I typing styles?
Just......thanks !
can anyone please explain why we didn't use function with props in Planets exercise? can we not use conditionals statements within Planets element if used with props : return like this? in this statement somehow fit ternary operator.
Help me out guys cant figure when to use props and when not to.
❤️
in [eslint]
src\App.js
Parsing error: Invalid parenthesized assignment pattern.
what is this error
i tried displaying the list by using forEach method but it does not render the names on my page.
function App() {
const names = ["john", "jessica", "mike", "dustin"];
return (
{names.forEach(function (name) {
return {name};
})}
);
}
here is the code i wrote. can someone please explain why is this not working?
you are professor Oak for me...if I am Ash :D
return (
{planets.map((planet, key)=> {
if (planet.isGasPlanet) return {planet.name};
})}
);
it's not working in my own code for the exercise
i think i am also facing same problem bro..
@@ViswanathCodes9999 it's cause we are missing an "else" statement. here is the correct code: {planets.map((planet, key) => {
if (planet.isGasPlanet) {
return {planet.name};
} else {
return null; // or any other value you want to return for non-gas planets
}
})}
Pedro are you Brasilian???
❤️❤️❤️
😍😍😍😍
if I want to conditionally render user whose age is above for eg 21, how will we do that ? can somebody please tell me ?
const age = 29;
{ age >= 21?Over age :Under age }
output = Over age.
❤️🤭
i see that components it replacing 1,000 lines of code with 1,000 file of code
Stranger things character 😁
const planets = [
{ name: "Mars", isGasPlanet: false },
{ name: "Earth", isGasPlanet: false },
{ name: "Jupiter", isGasPlanet: true },
{ name: "Venus", isGasPlanet: false },
{ name: "Neptune", isGasPlanet: true },
{ name: "Uranus", isGasPlanet: true },
];