This video is available to students only

Swap out Some Simple Components

Ant Design's thorough documentation makes the process of replacing custom components less difficult than it might otherwise be.

Swap out some simple React components#

Ant Design is part of Hardware Handler now. It's time to start taking advantage of all it affords us and simplifying the code our app is responsible for in the process.

In this lesson, we'll replace some of our more elemental components with AntD versions and see how it can make our code simpler.

Let's start with our buttons#

One of the most basic components we can start with swapping out is the few instances where we've got <button> elements in our app. A great thing about the Ant Design system is that it offers standardized versions of even the most basic elements, like buttons and checkboxes, all the way up to very complex components like tables, trees, and forms.

To get us going, we'll start with a small, relatively simple element. If you do a search in your code for buttons, you'll find three distinct instances of it in the Product.js file, the CheckoutItem.js file, and the ProductForm.js file.

Add a <Button> to Product.js#

The Product.js file seems as good a place as any to begin replacing our components with AntD versions, so pop it open in your IDE.

If you scroll down in our app, there's a <button> element on line 24.

To start the process of replacing this with an AntD component, we'll import the <Button> at the top of this file.

Best practice: Keep library imports above custom components imports

One bit of advice I follow is keeping imports from outside libraries like AntD or React more towards the top of the imports list in my files.

It's just another way to keep files organized in a manner that other developers can easily recognize and emulate, so if you see me doing this in our app's files, you know why.

With the Ant <Button> here, we'll scroll down to where the original button is declared and swap it out like so:

You'll notice that in order to get our new button to take on the styling provided by Ant, we'll replace the className="primary" property with a type="primary" instead. We'll also make the button slightly larger than the default sizing by adding the size="large" property.

I got this info by reviewing the AntD button documentation on the site. Believe me; it really is useful.

Ant Design button documentation

Now, if you notice, we completely removed a class from this file — the primary class — so let's check and see if we can clean up some CSS because of it (spoiler: we can).

Inside of the Product.css file, there's some CSS we can now delete completely. All this code beginning on line 37 for .product .primary — get rid of it.

At this point, let's check that our products continue to look good. Go ahead and start up the app if it's not running, and navigate to the My Products page.

Here's what I'm seeing on screen — I think these buttons look pretty close to the originals, and look back at the code we just deleted in the process.

Products using AntD buttons

That wasn't so bad, now was it? We can do pretty much the same routine to replace the <button> in our CheckoutItem.js file.

Replace CheckoutItem.js's button#

In our CheckoutItem.js file, import the AntD <Button> at the top of our file.

Then, replace our original <button> component with the following AntD component. Just like in our previous component, add the type="primary" and size="large" to the button.

And now we can clean up our CSS a bit, too.

Give it a quick visual check to make sure those buttons look good, and we'll turn our attention to the last <button> in our app — the one attached to the <ProductForm> component.

The button in ProductForm isn't so different after all#

I was a little hesitant to tackle the <button> element in the ProductForm.js file because I wasn't sure if I'd need to do something special with an Ant Form to make it work, but when I checked the form documentation, I saw that a simple <Button> component is just being used within the form, completely separate — fantastic!

How great is it that we can do upgrades as incremental as this?

So open the ProductForm.js file, and make the required import at the top of the file.

Scroll all the way down the file to the <button> element on line 146. Just as with our other replacements, trade one button for another. We can keep the data-testid property and add our type and size properties to tell Ant how to style this button.

With the class of primary gone, we can clean up the associated CSS a bit now. All of the CSS around the button, including the styling showing it's disabled, can now be deleted.

One thing I wasn't sure would work the same for this button was the form validation we're using to disable and enable the submission button, but lo and behold, Ant uses the same disabled property on its components, and our validation function isValid() continues to work. What a piece of good fortune.

Now, I'd recommend a quick smoke test that all of these buttons still work as expected, and let's move on and replace another of our custom components with its Ant equivalent.

Start a new discussion. All notification go to the author.