Children and Inheritance

This past week has been a more in depth look into React. It turns out there are many different ways to approach compartmentalizing code. Organizationally, React likes to keep everything in components. This way code can be written for a specific section, including its logic, its HTML, and its styling, all in one place that is separate from the rest. These components are likely to still be a piece of the whole page so in order to avoid typing the same code over and over there are a few different approaches.

Inheritance is exactly as it sounds, small components can inherit properties from the section it is inside of or the larger component around it. Just like last week, these properties are passed down in the constructor. They can include defined variables, functions, or even state. In a way, inheritance is a method of linking the separated components together to allow for more reusable code.

Children components are very similar. Some properties can still be passed down to children but the organization of them is a little different. It is more comparable to setting boxes inside of other boxes. If I have a webpage that has a header, a footer, and the body consists of an image on the left side and a contact form on the right I can make the image and form children of the body.