DEV Community

Takane Ichinose
Takane Ichinose

Posted on

2

Reaction Social Media Card with ReactJS

Reaction Social Media Card with ReactJS

Description

This example program is created using ReactJS, to practice my skills in how to use it. I highly implemented "React hooks" to create this thing.

The main feature of this sample program is when you hover on the "React" button, the reaction pop-up will appear, then you could select your reaction. Although this will not work even though you click it. I just created this for fun, and to practice.

You may also click on the "Comment" button. If you do so, the comment section will appear. Although, it is just for display. Even if you tried to input your comment, no one would receive it.

A added few seconds of throttle in loading the data, to simulate how page load works in real world.

The dark mode of this sample program runs by changing your system setting to light or dark mode. All depends on your preferences.

The behavior of the functionality of this example program is based on Facebook (on web).

Resources

  1. JavaScript library: ReactJS
  2. Fonts: Open Sans (I just used the one from the 'Assets')
  3. Image (For avatar): いらすとや
  4. Icons: Font Awesome
  5. SVG: Inkscape

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️