EZ Bnb: An EZ Understanding of React
This project was recently inspired when I was looking for an Airbnb in New York to go visit friends for a few days. There were so many features to the website that I could easily use to create a scalable project.
The way that React works is that a UI(user interface) is broken up into different parts(called components). One of the most important things to remember about React is that it is all about one-way data flow down the component hierarchy.
This means that a child of another parent can’t receive data from them. In my project, I had an image container, which holds all the images, and the individual listings are the children of that parent class. On the trips section of the project was its own parent (trips container) and the individual trips, were the children of the trips container.
The data flow was the first thing I learned about React and grateful that I did because once that made sense the rest of my project moved along great.
Okay, now we have all this data and how does this data get moved around from parent to child? Props.
Props passing the data down.
The value of state can change over time and the easiest example can be input of the user. And another term used often is state and state is used for user interactivity, one example used often is an input field. Each state does belong somewhere and that’s where the programmer decides to put the state or create a whole new component to fit that state.
Well, if someone adds and input, wouldn’t they want the application to send back their input? This is where the function setState comes into play.
React is pretty straight forward for what it wants, but as projects get larger, it’s about managing each parent-child component and to make sure the data flows.