If you're pretty new to react like myself, then you're probably familiar with the phrase "components" by now. But what are they? Well, let's dive into it.
In React, there are built in tools that allow us to maintain the state of our application a lot smoother when it comes to how many requests are being sent to the server. React does alot of the work for us inside of the web browser first by managing different "components" of the webpage.
For example, let's say we were navigating a web application in today's world, and we wanted to return to the home page of the app. Typically, in order to do so there would be a home button on the page somewhere. If we were to click that button in the earlier days, the server would then have to fetch that home page once the button is clicked, and spit it back out to the page. The problem, is that the process may vary in speed depending on the design of each web application. Thus making some websites appear to work faster than others back then. To solve this in React, the developers created idea of components.
In this diagram, you notice how the home page is considered the root. The root has two separate branches that each point to their own separate categories. Those categories, are considered "components" to the webpage. Not only that, but in react, the Home page itself, aka our "app" is also considered to be its own component. Since every other component points to the home page, our home page component must have the ability to access each component when being built.
Components, at their core, are simply functions! More specifically, they are functions that represent a specific "component" to the webpage. Because they are functions, that's what makes them reusable, allowing components to be passed from one to another. In React, there are two types of components that we must take a look at.
Functional Component
A functional component in React is useful for several reasons. The first being that it's considered a bit easier to read and write compared to its counterpart. Meaning, the syntax typically requires less lines of code. The hmtl, or "jsx" elements that you want to render are simply returned within your component function.
This is a fine example of someone creating a recipe list component to their website. As you can see, the recipe list itself is a function. And inside of that function, a list element is being created for every ingredient thanks to the map function. In order to render that list of ingredients to the page, a functional component must simply return the element(s) created. In order for any other component to have access to this recipe list however, the "RecipeList" has to be exported at the end of the file. Functional components also have the capability of passing other component "props" by typing props as a parameter.
Class Components
Class components on the other hand, are defined differently. Defining a class component in React requires you to "extend" from the built-in Component class that is a feature of React. That Component class is used as the base for creating other class components.
If you notice, in order to render your jsx html elements, class components require use of the built in react "render" method, unlike it's functional counterpart that simply returns what you want to render.
Class components also allow you to pass properties of a class down to other components. These properties are referred to as "props" as well in React. Technically they can be named anything, but it is common convention to name them "props" to avoid confusion.
As you can see, we can reference the props of our parent component by referencing them within the class by saying "this.props". From there we are accessing the name property that we would like to pass down to our other components. It's a declaration that we use to later define what we want our props to be. So in the case of this example, we want the name of the prop to be "Taylor", that way other components can have access to this prop should we decide to use it for something else. This is an essential aspect to using React components in general. This allows for reusability.
In conclusion, there are other things that make class components unique such as maintaining state. But for now, these are a few key differences between the two types.
Top comments (0)