Super friendly introduction to classnames in React

If you have been writing ReactJS applications, you might have stumbled upon the classnames npm package from the classnames npm package. Here is a beginner friendly intro to classnames.

So, why do we use classnames?

Because they help us to conditionally show content based on state.

In this tutorial we are going to build an application that toggles between different states as shown below using classnames

Prerequisites before reading this article ☺️

It’ would be nice to have some basic understanding of:

ReactJS

CSS

JavaScript

Here is an example

Let’s start by bootstrapping a react application using the create-react-app command

Head over to the terminal and type

After the set up is complete,

The code . command opens Visual Studio code if you have it installed on your machine if it hasn’t install visual studio code editor here and learn how to configure visual studio code to boot up when after running code . command here.

Now let’s learn the classnames magic

Our initial directory structure for this tutorial looks like this

For the simplicity of this tutorial, we’ll work on the App.js file and the App.css file. So click on the App.js file. Start by clearing off the following code that comes by default,

So that we are left with the following code

Lets start by intrdoducing some state into the application

The useState hook helps us manage state in a react application. The state we will introduce in this application will be named toggleState and will be initialized to false.

For us to toggle in between states we’ll have to have a function that changes the toggleState state.

We’ll now add a button that will utilize this function

To see the button in action, head over to the terminal using classnames-intro directory as your base and type

This will open the browser at localhost:3000/

Let’s add some more content to our page,

Such that our code now looks like (new code is in bold)

Let’s bring classnames to action now! CMD + ` or CTRL + ` opens the terminal in Visual Studio Code. In this terminal type,

In the App.js file, bring in classnames

In our App.css file let’s add some styling that will help us demostrate the use of classnames. Delete the intial App.css code and replace it with

In the App.js file create an object called toggleClasses with the following key value pairs

The key value pairs will be responsible for the css that will be shown in our application.

Again, change the div with the <p></p> tags to the following (change in the code is in bold)

If you head back to the browser and click on the button there will be no change but after using cx from classnames we will see some change. So change the toggleClasses object to the following (code change is in bold)

Make sure npm start is running and in your browser and try clicking the toggle button. You’ll notice that the background color of the div with the paragraph changes based on whether the toggleState is true or false. Great!

Our final App.js file looks like this,

Our final App.css code looks like this,

That was a short introduction to classnames in react. The github for this project can be found here 👉🏻 classnames-intro/repo

You can also check out this project in this sandbox

A class component based of this project can be found in this sandbox-class

I hope you’ve learnt something you can add into your projects.

Thanks for reading!

--

--

--

Am a software engineer based in Nairobi, Kenya. Here is where I document my learning.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Follow for follow?

Your Guide to: Animation on the Canvas with JavaScript

Optimizing multi-package apps with TypeScript Project References

Confusing Javascript Terms: isNaN and NOT(!) Operator

Supercharge your Ruby on Rails app with ActionCables and Vue.js!

Common rxjs patterns

Redux Basic

Are tech tutorials really reliable?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex.Muriuki

Alex.Muriuki

Am a software engineer based in Nairobi, Kenya. Here is where I document my learning.

More from Medium

Treasureverse Blockchain Architecture

Introduction to Koa.js

How to refresh your daily dev environment automated?

GEM of 2022?