React Components and How They Work.

So you’re learning React.js because all the cool kids are doing it. Sick. 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 component doo dads. They are sort of like the meat and gravy of React. 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. Lets use line 8 for example. Here we are calling a component that we have created called List. We import this component into our Home component on line 2. Now when we call on the Home component, it will call on our two nested components. 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 <List /> Component we called back on line 8 of our Home component. As you can see this allows us to break our code down into concerns. We know we want to display this list on our Home page, but we definitely don’t want all of this code clogging up our Home.JS. React gives us this neat and clean solution.

Props

Props (or properties) are values we can hand down from the parent component (Home) to the child component (List). To do this is super simple. When we call on a component we can pass information by assigning it in the component call like this <List name={“Billy”} /> We can now call on our name prop inside of our list component like so, this.props.name which will give us “Billy”.

That’s the easy cheesy basics of components for you. There is a ton that can be done with this simple structure and Google will definitely be your best friend when it comes to learning the in’s and out’s. Good Luck!