ReactJS Tutorial - 17 - List Rendering

Подписаться 652 тыс.

Просмотров 525 тыс.

50% 1

📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
When you build web applications, a common scenario is to display a list of items. For example, a list of names,
a list of products, a list of courses and so on. So what we want to is to repeat some HTML for each item in the list.
In this video, lets take a look at list rendering in React.

Опубликовано:

1 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 189

@gabrielbessa2575 4 года назад

Best Teacher Ever

@nirvikranjandas6200 3 года назад

Exactly

@shivakumar_bammidi 2 года назад

h1{ font-size: 1000px; }

@codingninja01_ 2 года назад

@@shivakumar_bammidi 100000000000px

@shivakumar_bammidi 2 года назад

@@codingninja01_ 🤣🤣

@returnMarcco Год назад

Don't overeact

@omarmahmood4209 Год назад

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' } ]

@rohitrai4215 5 лет назад

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.

@aribkamal3239 2 года назад

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.

@memeherp166 2 года назад

@@aribkamal3239 same, i wasted my money to udemy

@youssefhlem6270 Год назад

it just 16 video Wat da fuk ?!!

@reeteshtiwari5257 3 года назад

I will never forget three persons in my life: Bruce , Clark and Diana

@Ahmadavocado 3 года назад

And vishwas!

@zoalerix 3 года назад

This man is a great Teacher, Knows how to explain but most importantly the tutorials are so well constructed as whole. Exceptional work Brother!

@shivakumar_bammidi 2 года назад

I'm sure that no one can beat you in teaching the react concept in the next 10 decades. Wonderful way of teaching.👏👏

@toannew 3 года назад

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

@attilathehun6033 4 года назад

Best react tutorials I have seen so far. Short, simple, easy to understand. Good job, I hope you will be profiting from these.

@zigzag4273 4 года назад

7:44 "That sounded more complicated than it should be." Yep, he had me lost for a minute there.

@ivan-the-l 4 года назад

Simply the best React course for the beginners. Thank you so much!

@amirkehtarian Год назад

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🙏

@fredianriko5648 3 года назад

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

@mannunni08 3 года назад

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

@gargigoyal2582 4 года назад

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

@swapnilvmahajan 4 года назад

Sir! you deserve a standing ovation.Thank you.

@dishantkumawat7508 4 года назад

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

@paintingmylifeawaify 4 года назад

Your React tutorial series is amazing. Thank you for your hard work! :)

@amitbasp 3 года назад

RU-vid should start enabling a 'Love' button instead of 'Like' for such phenomenal videos :)

@Ermosparis 4 года назад

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.

@abidoyeridwan3886 2 года назад

Don't forget to import Person from "./Person" in your NameList.js... Great Course

@kenshirohimura8587 2 года назад

This is defenily one of the best React tutorials for beginners.

@midasman714 4 года назад

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!

@gagandeepdayal 2 года назад

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.

@Enigmata23 2 года назад

I never considered storing my map method in a separate variable. Brilliant refactoring.

@nesmaaboki7213 2 года назад

I rarely comment on a video, but I have to say this series is just amazing

@haripraveensubramanian6595 4 года назад

thank you so much for explaining things so easily

@simonzkiflay289 3 года назад

Best react tutorial by far! Thank You Vishwas!

@mihajloilic5836 3 года назад

Awesome, I displayed while learning all of them in table! :)

@edwindodoh164 4 года назад

This is a very awesome tutorial.. love from Nigeria

@tatekgirma4086 4 месяца назад

Simple and easy to understand. Thank you.

@moizkhalid2714 4 года назад

in NameList component add import Person from './Person'

@skall3112 4 года назад

thank You for the help with React - love the videos - short, understandable like it should be thanks again and keep going :)

@gopalakrishnamurthy7862 3 года назад

👌👌Superb explanation,I loved ur way of explanation it is crystal clear👍👍

@vugargaragozlu6737 4 года назад

who disliked this video? this is the best .map() explanation ive ever seen!

@fargh 4 года назад

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.

@YodaSW2 4 года назад

@@fargh Use Shift + Alt + F to format

@mhmdsahilk Год назад

Thanks Gopinath For this wonderful tutorial

@ArjunSingh-oo1mh 4 года назад

These videos are exciting me to keep watching

@ndahayokevin7626 2 года назад

Vishwas you are the best React tutor

@arkachakraborty843 9 месяцев назад

Thanks for you lectures sir!

@mayanks633 4 года назад

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.

@snehaldeshpande5810 4 года назад

Its very helpful and its clears the basic. and please make viedo on routing

@balajir6670 Год назад

Very good explanation .Thanks ❤

@LordMegabite 4 года назад

Men you are awesome teaching.

@soyaiburrahman3806 5 лет назад

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

@user-eu7bh5mt5s 5 лет назад

I can see that you're a DC fan Vishwas... no one is perfect :D Keep up the good work. Great video.

@milosleng1175 3 года назад

Hats down man. You are the best!

@vaibsify 2 года назад

awesome explanation 🙏

@ImperiousRex13 2 года назад

I'd like to 2nd what @Rohit Rai said. Great videos and thank you so much!

@lathagm666 9 месяцев назад

completed video 17. Thank you :-)

@lgtecnology1908 2 года назад

Thanks you!!! Good explanation!

@chaitras4108 4 года назад

The Best Teacher:)

@sudamwagh4501 4 года назад

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

@rahul-ti9cm Год назад

great explanation

@TheAdel136 4 года назад

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 ;)

@RyanMitchell-yy4no Год назад

great tutorial thank you

@timr.8798 3 года назад

Simply awesome.

@shivammaniya2962 4 года назад

wow your teaching skills

@amolmali3583 3 года назад

Nice explanation..

@ayushsaxena3689 3 года назад

If you are getting the error "Person is not defined", import it in NameList.js import Person from './Person';

@shonuff4323 11 месяцев назад

Thanks. I was wondering if he skipped that part. Glad I am not crazy.

@bluewonk9232 2 года назад

Thank you so much !

@tejamaroju123 2 года назад

Thank you sir

@rumanaruma3952 Год назад

hello ...great teaching technique

@picnic. 5 лет назад

Sir, you must import person function component to the nameList component (import Person from './Person'). thank you

@moderncloth682 3 года назад

Dude, THANK you.

@davidkubik4283 3 года назад

He probably didn't include this because he's using the Visual Code extension that auto fills this info

@yanikemann 2 года назад

Thank You!

@helanymelo4050 3 года назад

Amazing! Congrats:)

@lasithadulshan7357 2 года назад

Thank you .. ! ❤

@anas2004 5 лет назад

good job

@Aditya.Santra 2 года назад

amazing video

@AhamedKabeer-wn1jb 4 года назад

Thanks bro

@user-qc7lr2sy5d 5 лет назад

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?

@elkinbautista2172 4 года назад

hi, do you have some tutorial of a RecyclerListView with defirebase users in React Native and Hooks???? or could one explain?

@aneeshkalra3360 2 месяца назад

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?

@vishalkshatriya7498 3 года назад

Cannot read property 'name' of undefined . PLEASE SOLVE THIS ERROR

@betafuchs8490 4 года назад

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) { ... }

@eduardom800 Год назад

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.

@swapnilkatpally4808 4 года назад

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.

@moderncloth682 3 года назад

I love you, Vishwas.

@snehalkumar.singh.cse2070 2 года назад

Why does vs code sometimes highlights imports with the three dots underneath, as you can see while importing react.

@crazyshorts4890 5 месяцев назад

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

@soumityachauhan8609 4 года назад

Name is undefined in person.js ?

@jaKERmEn100 3 года назад

Thanks

@dmigrz 2 года назад

7:10 How did you make the code cleaner please, did you use an extension?

@lorenzoantenucci7216 4 года назад

Are you using Prettify Symbols Mode?

@shubhamkalaria3755 2 года назад

which formatter you used to format the code??

@alokmarathe2517 Год назад

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", }, ]

@elia552 Год назад

thank you

@karthiky898989 Год назад

Nice video

@ajazmiah 3 года назад

How do we add styles to specific item in the list?

@Humble_Artist 3 года назад

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.

@awaisshafiqofficial 3 года назад

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.

@AAKSHAS 2 года назад

10:22 This line const personList = persons.map((person) => ); can be rewriiten as (to avoid confusion): - const personList = persons.map((personTempVar) => );

@zakaryalaarrague 7 месяцев назад

thanks

@UdayPawarUdi 4 года назад

Import import Person from './Person'; in NameList.js

@sophiapineda1225 3 года назад

THANK YOU

@vishwajeetohal9137 2 года назад

10:46 Why do we need to add curly braces while accepting person as a parameter?

@samvelpetrosyan494 2 года назад

In this case coudn't we user forEach instead of map ?

@abrarfahim64 2 года назад

why has to return {personLists} ? because we have to return something? But where's the output ?

@aninexclusive466 Год назад

Why are you so Awesome?

@capricious-agent-007 3 года назад

this guy is a fan of DC universe

@manvirsingh5381 Месяц назад

do we have to import the Person component in the list.js in order to use that component in the list.js file ?

@pranjalsrivastava4260 Месяц назад

no we don't need to

@timestamper 2 года назад

how to apply style to particular item looping through map ???

@reisezone4574 2 года назад

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