React JS - React Tutorial for Beginners in Hindi [Part-17] : Rendering List in React

#React #Tutorial #Hindi

Welcome to React Tutorial!

This course will teach you all you need to know to work with React.

In this video we will talk about how to Render List in React js.

React has a different approach to data flow & manipulation than other frameworks, and that’s why it can be difficult at the beginning to understand some concepts like props, state, and so on.
I believe it’s better to keep explaining them in separate video and in this video, we’re going to focus on React’s State feature and how to use it.

React components has a built-in state object.

The state object is where you store property values that belongs to the component.

When the state object changes, the component re-renders.

What is State?

The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component.

Learn modern React from scratch, and practice in an intuitive environment.

React Tutorial is suitable for developers with JavaScript experience. Not comfortable with JavaScript? Check out My JavaScript Videos.

ReactJs Complete Course: In this complete react tutorial for beginners in Hindi Tutorial, We will learn why we use react and how React js can be used to build amazing Single page applications.

How does React Work?

React creates a VIRTUAL DOM in memory.

Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

React only changes what needs to be changed!

React finds out what changes have been made, and changes only what needs to be changed.

You will learn the various aspects of how React does this in the rest of this tutorial.

This course covers React in 2021 from scratch. We've got a unique approach as we like to dive into the details so that you can fully understand how React works.

To better prepare you for the real world, we have projects that will help you build an app.

------------------------------------------------------------------------

Important Tutorial Links

[leo]

bhai 9:00 pe curly braces k badle circle braces lagane ka kaaran nai samjha .. arrow function ka syntax me to curly use karte h na ?

[SnehalAgalgave]

Aisehi fast video upload kar dena sir thank u so much sir thanks a lot sir❤️ u r the best teacher on YouTube …..Bahut knowledge he apke pass

[shaktipatole]

Sirji Advanced js me Object oriented ke 4 pillers ka video continue kijiye

[rajuraichur]

Sir help me😥😖 is video tak maine teen bar deka hu from starting 1st project se pata nahi same error araha hai like <Expenses item={expenses} ye expenses undefined araha hai aur dummy_expense bhi liku tho data enter nahi hora hai aur usestate ka expenses bhi add karu tho tolocalstring is not defined araha hai kuch bhi pata ny kya hua starting se.lekar ab tak 3 bar naye naye project keyetho bhi.same error araha hai plz koi tho madat karooo😫😭😭😭😭 explain me kidar galti kiya hu

[sanjeevsharma]

Thanks Viswajeet Sir, for uploading videos faster

[bestringtonesbr]

Sir please make video on javascript problem solving

[Lucifer-xtun]

When are u going to complete this series sir??

[lovelymusic]

Sir you are great love you sir you will make a complete lecture series on node JS?

[riyasdhunadda]

sir new data list me add nhi ho rha hai, na he koi error aa rha hai kya kre sir help me

[shahbazliaquat]

itni gaps k bad filhal ye series chor k vue kar raha sir m.. jab ye complete ho gi tab ye pori dekho ga playlist...❤

[ziyabhai]

Best perimum video editor for laptop

Kya filmora x

Please reply

[mohdali-yqgq]

Thanks SIR for uploading the videos in regular succession and I have one curiosity here which is about data displaying from the fixed objects and it is not coming from database like sql server or mongo db so please let us know which backend database you are going to implement in this application as application is going very interesting with each successive videos and our curiosity is also keeping pace in the same order to know the length of the application in term of advanced level so again request you to let us know what backends database are you going to deploy in This application.
Thanks for your great efforts to make this series very interesting.

[shwetasonth]

sir how many times can we give tests in Revel if we do not perform well at first or second attempt in Revel

[rahulrj]

Sir maximum how many videos will be there in this react series ? because I am following only your tutorials and eager to learn the react as soon as possible

[dreamhoouse]

Sir it is my humble request.🙏
Please make a tutorials use of Redux on React series.
I am thoroughly following you.

[VijayKumar-jzur]

Index : Rendering List in React
# Data transfer from Child to Parent (Concept Used)
# Looping/Rendering the List of Components
# Adding New Expense data into Expense Array

[sharmaji]

bhaiya i am facing some issue in this topic (rendering list)
please help me

[firstsecond]

bro please add this in your videos
daily 2 videos daala karo and video k end mein pehly summary diya karo and then ek task diya karo ta k hum practice kar saky jo b apki videos se seekhty hain

[funkimania]

Can People from Pakistan also apply on Relevel?

[VijayKumar-jzur]

P1: Rendering/Looping the Components
We will write the syntax of map fuction on "item" (i.e data coming from app.js) then Inside of it we will write only one expense components details

P2: Adding new Expense Data into Dummy Data
We will create a useState for Dummy data so, that it can store new data in it as well as Update the data evenever it get Updated