What We'll Create

We'll create a follow button inspired by Twitter's design. The functionality is similar, but the implementation differs. The button toggles between "Follow" and "Following" text when clicked, and displays "Unfollow" text when hovered over while in the "Following" state. Feel free to adjust the CSS styling as needed.

Required Knowledge

• Basic knowledge of React setup and component creation
• Some understanding of JSX and Babel

Environment

• React: v15.3.0
• Babel: Compiler (also compiles JSX)

Prepare HTML and CSS First

Note: Adjust paths as needed!

The div with the ID content will contain the follow button component. The follow-button CSS class defines the style of the button. If you only want to check the behavior, you can skip the CSS.

Creating the Follow Button Component

Thoughts

It seems I still need more practice to create components at the level of React tutorials (:3」∠)

References

• React: Dynamically Add/Remove Element Classes with JedWatson's classnames
• Beginner's Guide to React and Example Collection - A great resource for learning React step by step!