So you’re learning React.js ? What a great idea because all the cool cats know it! You boot up VS code and get your project setup and now you’re ready to make the next Facebook. This will be easy! Right? I mean, probably, considering React was made at Facebook. Anywho, these components are sort of like the meat and gravy of React (felt fitting for a food app). Anything you want to display to the user can easily be done with components. Let’s take a look, shall we?
Here we have a real simple component. Basically what we have is a function named Home that we can use in other files. Let’s use line 31 for example. Here we are calling a component that we have created called Nav. We import this component into our App.js component on line 11.If those components have nested components, they can be accessed as well! Lets looks into the list component and see what’s happening.
Whoa. That’s a lot of code inside of our little <Nav /> Component we called back on line 31 of our App.js. As you can see this allows us to break our code down into concerns. We know we want to display this list on our App.js page, but we definitely don’t want all of this code clogging it up. React gives us this neat and clean solution.
Props & State in React
Well, let’s explain this the most simple way possible… The difference between Props and State is that one is read only and the other is writeable.
Props — Read, they are immutable, they are used to pass data down from your parent component.
State — Write, it holds information that you can change.
When to use mapStateToProps vs mapDispatchToProps
mapStateToProps — information is in the store & we want access to it.
mapDispatchToProps — When we want to update the store.
