Today I will talk about creating components using the react framework. I will go over the concept of a component in react and why they are the foundation for what makes react an amazing tool, then I will talk about the differences between a class component and a functional component.
So first of all, react is an amazing framework that works with the front end of web applications. The foundation of react are things called components. Components are basically pieces of web applications that can be broken down into smaller parts that are easier to deal with. Picture Amazons front page and well have something like a search bar, thats a component, the add to cart button, thats a component, the whole navigation bar that those two components live on that is also a component.
Using react we can set up components and basically put them together likes legos and build up an application. What makes these components really cool, and what makes react really cool is how state works. We can change the state of a component without refreshing. When we first build out a component, we need to start with some basics. The first thing you are going to want to do is run the create-react-app which will give you the boiler plate code for your app, and get your imports in for your index to render the starting component of your app. Generally I call this first component App.
Once this is made what I like to do is I will create a mock up of what I want my app hierarchy to look like. Which components are going to be parents for which children with which siblings etc. This is important because one thing that is very fundamental when using react is that components will give information to other components. This can be done in many ways, but the classic way is passing information from components to other components via "props".
Now we get into why the distinction between class components and functional components. Classically when creating react apps the distinction between class and functional components would be for a simple reason. Inside a class component we would hold and change state. Functional components would not. This changed with hooks, which I will go over soon. If the reader is not aware creating a class component is as simple as creating a class that extends a react component which is derived from the react library which is imported.
A functional component is just a function.
These two components are taken from the official react documentation and are equivalent by reacts standards. Of course being in a class we can use the this keyword in the class component vs the functional component. Normally in the class component we could make state by just defining state as something, a number, a name, whatever. Then we would change state with the setState function. We cannot change state in this way in a functional component.
More modernly I hear many people talking about how they use functional components almost purely. Of course my first reaction was that then they must just use redux purely in order to maintain state in the global store. But we can actually change and create state in functional components using hooks.
In order to use hook we first need to import the useState hook from the react library. Then we can set up our state by creating a variable that will hold our state declaration and our state modifier. These will then be used with our useState function which will be passed our initial state.
Again from the react docs in this example we are just making a counter and the initial state passed into the useState function is just a number but it can be anything from a string to an object. Now in a class component if we were to set this up we would create a state object and then in order to change it we would use the setState function. Using JSX we would have to say something like { this.state.count } but in this functional component, all we have to do is write { count }.
Similarly the change is simpler. Rather than setting state by changing the value of the key in the state object, we can pass the state right into the setCount modifier when we created our count hook earlier. Obviously we do not need the this keyword and our change of state is much more blatant, clean and efficient.
Class component change of state :
Functional component change of state using hook:
As you can see hooks are pretty straightforward. It also is, in my opinion, easier to read and this can be very important for those who are new to a codebase and trying to figure out what is going on. Although I tend to use redux a lot for state management, functional components and hooks are amazing in a pinch!
Top comments (0)