As I am watching more and more of your videos on React, I am becoming more and more confident. Thanks for covering everything so neatly. I can't thank you enough.
For real man, i bought so many udemy courses and other certificates. I understood them but not as well. But after this, following their projects will be a breeze.
6:10 JS code inside HTML code, then HTML code inside JS code 7:11 -7:26 Advantage of JSX code 9:18 refactor the code into separate components 10:30 destructure the props right in the parameter of function of fnctional component 11:13: common pattern when building applications that render lists of data 11:45 unique 'key' prop
Big thanks to Vishwas for this beautiful classes, i am struggling to learn react to retain my position in my team. As a beginner last 2 months tried many methods now completely depending on this tutorial and getting some confidence. Thank you very much from 🇸🇬 singapore
straight 1 and half day I've been watching this playlist, still hanging in this list rendering video. hang on, I'll make coffee and get back to the next videos
perfect teaching, minimal speak and maximum understanding of complex concepts, thanks to vishwa's master class free of charge in youtube Thank you so much dear Vishwas🙏
Vishwas is great but this is easily his worst video (I've done the Chrome Extension and this one). I didn't dislike as Vishwas is amazing. But: (a) This is unreadable I have no idea what's going on and am just confused: personList = persons.map(person =>
(b) Vishwas forgets to tell us to import Person.js into Namelist.js / vice versa (c) His use of copy+pastes for example when creating the big array means it's harder to code along (d) He doesn't explain how to reformat code automatically in VS Code. From my perspective all I see is his code just suddenly jumping around. Sorry Vishwas, I'm only marking you against your incredibly good videos overall. It's just this one isn't as good as your others for the reasons above.
thank you so much...you know what is the best part of your videos....that you explain each thing first by simply doing it and then step by step changing it and shows the output......thank you so much
Vishwas I never skip your ad on youtube as I know youtubers gets paid for ads viewed this is just my way of supporting you and yes I subscribed you as well. You are a teaching god.
if I could find you before i could save 4 days. i have never saw such clear explanation like you sir. i subscribed and start watching your video from right away. In fact i was looking for tutorial video that explain every curly brace whenever it is used again and again. also every centex. you should also avoid using one keyword over and over as a variable and file name. i hope you will be great if you keep teaching people. God bless you sir
map is always a complicated subject in each language. so we all should watch this video atleay twice and hands on even after two days again. thanks viswas i know it is not easy to teach some morons. but u really know alot of things. it shows how much or practice and efforts you make.
for those who face problemes when moving the elment inside the Person.js ( error message "person is not define ") just use this solution in the Person.js function : function Person(props) { return (
my name is {props.person.name} i'am {props.person.age} and i know {props.person.skills}
) } juste use props as argument inside the function then use {props.person.name} instead of using {person.name} for exemple and it will work ;)
code in NameList.js import React from 'react' import Person from './Person' function NameList() { const persons = [ { id : 1, name : 'Bruice', age : 30, skill : 'React' }, { id : 2, name : 'Clark', age : 20, skill : 'React' }, { id : 3, name : 'Diana', age : 35, skill : 'React' } ] const personList = persons.map(person => ) return (
const personList = persons.map(person => this is why I just use "x", "item" , "elem(ent)", or "dict" (or something similar) when mapping because I don't find code lines like this all that readable. To each his own
I know it must sound like a vague question, but in this video at 7:28 if nameList is an array of JSX elements, how are we directly returning it in the return statement? Since in the beginning you used array index to display individual elements in the array. So why dont we need the array index to display the new array values?
Would the following be oke or is it bad practice? In NameList.js: const personList = persons.map(person => Person(person)) and in Person.js: function Person(person) { ... }
how many person did you use sir ? you better user person1, person2, person3 like that . i bet using one key word over and over is which that gives so much confusion to understand. I think this is the main cause that make react so much harder to learn
Very useful but CAN U UPDATE THIS REACT COURSE WITH ONLY FUNCTIONAL COMPONENTS; BECAUSE THE CLASS COMPONENT WHICH U MOSTLY USED IS NOT LONGER USEFUL NOW ADAYS: OTHERWISE I REALLY ENJOY THE WAY U TEACH ITS FIRST BY STEP VERY ALL THE RELEVANT INFORMATION; BUT ONLY TRY TO UPDATE BY REMOVING CLASS COMPONENT AND FOCUS ON FUNCTIONAL COMPONENTS
10:22 This line const personList = persons.map((person) => ); can be rewriiten as (to avoid confusion): - const personList = persons.map((personTempVar) => );
Getting this error. Failed to compile ./src/components/NameList.js Line 26:47: 'Person' is not defined react/jsx-no-undef Search for the keywords to learn more about each error. This error occurred during the build time and cannot be dismissed.
I am trying to iterate through a list of 15 items. Each item is bootstrap card which displays image and description. So 5 cards in each row i am supposed to obtain 3 rows. But what i observed is only 10 cards(2 rows) are displayed. I tried with 6 cards in row i am getting 12 cards. The missing part is scrolling. Only two rows are obtained which fit in screen. What would be the issue. Thanks in advance.
I have an issue at 10:14, In my computer's setup, if I do not import Person into NameList throws and error as Person is not defined. Once imported Person.js into NameList.js works as stated.
Why you are using same 'person' name so many times in arrow function, as component & props unnecessary ....makes it very confusing to differentiate.....
I am facing an error ,, my pointer points on id when i am assigning an array with id=1, and so on ,,, but i am facing expected tokken i mean SyntaxError and i have looked multiple times here i have seen no SyntaxError,, i have coped same code as you have written on your Vs code.
Small dobut sir , in map method in arrow function other than array name if we take any other name it shows the repetition of same statement, but if we take the same array name it is proper output as urs , Can u clarify y this happene
What if I have saparate module file with array of objects with info. And I want to add something there like new object with info from input, or remove. So, I just use import to my component, but I can't change my module array, format is .js not json, but I can't do nothing with array from react =( What I should do?
One clarity in Person.js why we are passing props argument in function as expression? function Person({person}) { In previous video we are not passing props as expression in function argument
It's because Person.js is a new file and doesn't know what person variable is or what personName array is. So by providing the props in function and defining the same thing in the jsx tag we are passing the values of persons right from Namelist.js to Person.js
Best Teacher Ever
Exactly
h1{
font-size: 1000px;
}
@@shivakumar_bammidi 100000000000px
@@codingninja01_ 🤣🤣
Don't overeact
If anyone needs the persons array:
const persons = [
{
id: 1,
name: 'Bruce',
age: 30,
skill: 'React'
},
{
id: 2,
name: 'Clark',
age: 25,
skill: 'Angular'
},
{
id: 3,
name: 'Diana',
age: 28,
skill: 'Vue'
}
]
tahnk you my good friend
As I am watching more and more of your videos on React, I am becoming more and more confident. Thanks for covering everything so neatly. I can't thank you enough.
For real man, i bought so many udemy courses and other certificates. I understood them but not as well. But after this, following their projects will be a breeze.
@@aribkamal3239 same, i wasted my money to udemy
it just 16 video Wat da fuk ?!!
This man is a great Teacher, Knows how to explain but most importantly the tutorials are so well constructed as whole. Exceptional work Brother!
I'm sure that no one can beat you in teaching the react concept in the next 10 decades.
Wonderful way of teaching.👏👏
Best react tutorials I have seen so far. Short, simple, easy to understand. Good job, I hope you will be profiting from these.
I will never forget three persons in my life:
Bruce , Clark and Diana
And vishwas!
6:10 JS code inside HTML code, then HTML code inside JS code
7:11 -7:26 Advantage of JSX code
9:18 refactor the code into separate components
10:30 destructure the props right in the parameter of function of fnctional component
11:13: common pattern when building applications that render lists of data
11:45 unique 'key' prop
Simply the best React course for the beginners. Thank you so much!
Big thanks to Vishwas for this beautiful classes, i am struggling to learn react to retain my position in my team. As a beginner last 2 months tried many methods now completely depending on this tutorial and getting some confidence. Thank you very much from 🇸🇬 singapore
straight 1 and half day I've been watching this playlist, still hanging in this list rendering video.
hang on, I'll make coffee and get back to the next videos
perfect teaching, minimal speak and maximum understanding of complex concepts, thanks to vishwa's master class free of charge in youtube
Thank you so much dear Vishwas🙏
Sir! you deserve a standing ovation.Thank you.
7:44 "That sounded more complicated than it should be." Yep, he had me lost for a minute there.
TH-cam should start enabling a 'Love' button instead of 'Like' for such phenomenal videos :)
guess what im watching this series for second time just as a revision and the github link is helping a lot . Not to mention best react teacher ever
You taught me something in under 12 minutes that would have taken me a week to figure out, not to mention made me a better developer! Subscribed!
Your React tutorial series is amazing. Thank you for your hard work! :)
who disliked this video? this is the best .map() explanation ive ever seen!
Vishwas is great but this is easily his worst video (I've done the Chrome Extension and this one). I didn't dislike as Vishwas is amazing. But:
(a) This is unreadable I have no idea what's going on and am just confused: personList = persons.map(person =>
(b) Vishwas forgets to tell us to import Person.js into Namelist.js / vice versa
(c) His use of copy+pastes for example when creating the big array means it's harder to code along
(d) He doesn't explain how to reformat code automatically in VS Code. From my perspective all I see is his code just suddenly jumping around.
Sorry Vishwas, I'm only marking you against your incredibly good videos overall. It's just this one isn't as good as your others for the reasons above.
@@fargh Use Shift + Alt + F to format
thank you so much...you know what is the best part of your videos....that you explain each thing first by simply doing it and then step by step changing it and shows the output......thank you so much
Vishwas I never skip your ad on youtube as I know youtubers gets paid for ads viewed this is just my way of supporting you and yes I subscribed you as well. You are a teaching god.
Dear Vishwas, thank you very much for this great tutorial. It's a pleasure to learn with you. Thank you for your time and effort.
Don't forget to import Person from "./Person" in your NameList.js... Great Course
I rarely comment on a video, but I have to say this series is just amazing
I can see that you're a DC fan Vishwas... no one is perfect :D Keep up the good work. Great video.
This is defenily one of the best React tutorials for beginners.
in NameList component add
import Person from './Person'
I never considered storing my map method in a separate variable. Brilliant refactoring.
👌👌Superb explanation,I loved ur way of explanation it is crystal clear👍👍
if I could find you before i could save 4 days. i have never saw such clear explanation like you sir. i subscribed and start watching your video from right away. In fact i was looking for tutorial video that explain every curly brace whenever it is used again and again. also every centex. you should also avoid using one keyword over and over as a variable and file name. i hope you will be great if you keep teaching people. God bless you sir
map is always a complicated subject in each language.
so we all should watch this video atleay twice and hands on even after two days again.
thanks viswas i know it is not easy to teach some morons. but u really know alot of things. it shows how much or practice and efforts you make.
for those who face problemes when moving the elment inside the Person.js ( error message "person is not define ") just use this solution in the Person.js function :
function Person(props) {
return (
my name is {props.person.name} i'am {props.person.age} and i know {props.person.skills}
)
}
juste use props as argument inside the function then use {props.person.name} instead of using {person.name} for exemple and it will work ;)
Simple and easy to understand. Thank you.
code in NameList.js
import React from 'react'
import Person from './Person'
function NameList() {
const persons = [
{
id : 1,
name : 'Bruice',
age : 30,
skill : 'React'
},
{
id : 2,
name : 'Clark',
age : 20,
skill : 'React'
},
{
id : 3,
name : 'Diana',
age : 35,
skill : 'React'
}
]
const personList = persons.map(person => )
return (
{personList}
)
}
export default NameList
This is a very awesome tutorial.. love from Nigeria
Best react tutorial by far! Thank You Vishwas!
Sir, you must import person function component to the nameList component (import Person from './Person'). thank you
Dude, THANK you.
He probably didn't include this because he's using the Visual Code extension that auto fills this info
If you are getting the error "Person is not defined", import it in NameList.js
import Person from './Person';
Thanks. I was wondering if he skipped that part. Glad I am not crazy.
Thanks Gopinath For this wonderful tutorial
Thanks for you lectures sir!
Vishwas you are the best React tutor
Awesome, I displayed while learning all of them in table! :)
I'd like to 2nd what @Rohit Rai said. Great videos and thank you so much!
Cannot read property 'name' of undefined . PLEASE SOLVE THIS ERROR
These videos are exciting me to keep watching
7:56 lines of code:
const persons = [
{
id: 1,
name: "Bruce",
age: 30,
skill: "React",
},
{
id: 2,
name: "Clark",
age: 25,
skill: "Angular",
},
{
id: 3,
name: "Diana",
age: 28,
skill: "Vue",
},
]
thank you
completed video 17. Thank you :-)
awesome explanation 🙏
thank You for the help with React - love the videos - short, understandable like it should be
thanks again and keep going :)
Very good explanation .Thanks ❤
thank you so much for explaining things so easily
Thank you sir
const personList = persons.map(person => (
Your name Is: {person.name}
Your Age Is: {person.age}
Your Skill Is: {person.skill}
))
and in return
{personList}
To make it better:
const personList = persons.map(person => (
Your name Is: {person.name}
Your Age Is: {person.age}
Your Skill Is: {person.skill}
));
return(
{personList}
)
Its very helpful and its clears the basic. and please make viedo on routing
Import
import Person from './Person';
in NameList.js
THANK YOU
great explanation
const personList = persons.map(person =>
this is why I just use "x", "item" , "elem(ent)", or "dict" (or something similar) when mapping because I don't find code lines like this all that readable. To each his own
Name is undefined in person.js ?
Hats down man. You are the best!
I know it must sound like a vague question, but in this video at 7:28 if nameList is an array of JSX elements, how are we directly returning it in the return statement? Since in the beginning you used array index to display individual elements in the array. So why dont we need the array index to display the new array values?
Nice explanation..
wow your teaching skills
hello ...great teaching technique
Thank you so much !
Would the following be oke or is it bad practice?
In NameList.js:
const personList = persons.map(person => Person(person))
and in Person.js:
function Person(person) { ... }
how many person did you use sir ? you better user person1, person2, person3 like that . i bet using one key word over and over is which that gives so much confusion to understand. I think this is the main cause that make react so much harder to learn
Men you are awesome teaching.
The Best Teacher:)
great tutorial thank you
Very useful but CAN U UPDATE THIS REACT COURSE WITH ONLY FUNCTIONAL COMPONENTS; BECAUSE THE CLASS COMPONENT WHICH U MOSTLY USED IS NOT LONGER USEFUL NOW ADAYS: OTHERWISE I REALLY ENJOY THE WAY U TEACH ITS FIRST BY STEP VERY ALL THE RELEVANT INFORMATION; BUT ONLY TRY TO UPDATE BY REMOVING CLASS COMPONENT AND FOCUS ON FUNCTIONAL COMPONENTS
10:22 This line
const personList = persons.map((person) => );
can be rewriiten as (to avoid confusion): -
const personList = persons.map((personTempVar) => );
Thanks you!!! Good explanation!
Simply awesome.
Thank You!
why has to return
{personLists}
?
because we have to return something? But where's the output ?
Why does vs code sometimes highlights imports with the three dots underneath, as you can see while importing react.
I love you, Vishwas.
Getting this error.
Failed to compile
./src/components/NameList.js
Line 26:47: 'Person' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.
Thank you .. ! ❤
I am trying to iterate through a list of 15 items. Each item is bootstrap card which displays image and description. So 5 cards in each row i am supposed to obtain 3 rows. But what i observed is only 10 cards(2 rows) are displayed. I tried with 6 cards in row i am getting 12 cards. The missing part is scrolling. Only two rows are obtained which fit in screen. What would be the issue. Thanks in advance.
amazing video
Map method is very similar to Select method in LINQ
I have an issue at 10:14, In my computer's setup, if I do not import Person into NameList throws and error as Person is not defined. Once imported Person.js into NameList.js works as stated.
10:46 Why do we need to add curly braces while accepting person as a parameter?
7:10 How did you make the code cleaner please, did you use an extension?
Why you are using same 'person' name so many times in arrow function, as component & props unnecessary ....makes it very confusing to differentiate.....
I am facing an error ,, my pointer points on id when i am assigning an array with id=1, and so on ,,, but i am facing expected tokken i mean SyntaxError and i have looked multiple times here i have seen no SyntaxError,, i have coped same code as you have written on your Vs code.
Thanks
Amazing!
Congrats:)
In Person.js couldn't we just use props as parameter in the Person() and use {props.person.name} instead of what we have used
Initially I was skeptical whether {props.person.name} will work or not, but it did. Glad to see someone else had the same thought.
7:27 How to render list of objects with few properties? 9:19 Recommended Way
Small dobut sir , in map method in arrow function other than array name if we take any other name it shows the repetition of same statement, but if we take the same array name it is proper output as urs ,
Can u clarify y this happene
In this case coudn't we user forEach instead of map ?
hi, do you have some tutorial of a RecyclerListView with defirebase users in React Native and Hooks????
or could one explain?
Why are you so Awesome?
do we have to import the Person component in the list.js in order to use that component in the list.js file ?
no we don't need to
What if I have saparate module file with array of objects with info. And I want to add something there like new object with info from input, or remove. So, I just use import to my component, but I can't change my module array, format is .js not json, but I can't do nothing with array from react =(
What I should do?
good job
One clarity
in Person.js why we are passing props argument in function as expression?
function Person({person}) {
In previous video we are not passing props as expression in function argument
It's because Person.js is a new file and doesn't know what person variable is or what personName array is. So by providing the props in function and defining the same thing in the jsx tag we are passing the values of persons right from Namelist.js to Person.js
how does array gets displayed inside jsx without looping (video time : 7:24) ?.