React Client

The Client is bootstrapped with Create React App. I am assuming you already have some experience with CRA. If not, here is a great tutorial.

To me, it is important that a user has these 3 things:

An application that is in a workable state before they can doSomething() Feedback that something is happening when the application is doing work Confirmation that the application has finished doing work

The Client for this application has only a few components and could be written with much less code (and comments) than what you will see below.

I chose to trade code overhead for enhanced user experience.

Tip: Use Bit to manage reusable components and save time. Keep a collection of your useful components, use them in multiple projects and easily sync changes. It will help you build faster, give it a try.

But enough talk, time to JavaScript.

App.js

Landing.js

This component is shown when the user drops into the workable application.

Confirm.js

This is the component that is loaded by React Router when the user has clicked on the unique link in the email sent to their email address.

Spinner.js

If you were paying close attention above, we actually used the <Spinner /> component 4 different times! The only thing that changed was the props that were passed into the component.

Spinner.js provides feedback:

When the application is loading Inside the button when it has been pressed When the email link has been clicked and the server is confirming As a button to restart the whole process

All of that in 8 lines of awesome Reactiness.

And…

Spinner.js is the end of the Client.

I know that probably seems like a lot of code for the simple task of confirming an email address. However, if the feedback bits (and comments) were removed it could easily be cut in half.

But that would chop the user experience in half as well.

It is important to keep the user in the loop that things are happening plus have an application that is fully loaded and ready to go before the user tries to doSomething().

Providing feedback will add to the code footprint but it also provides a better experience.

Now we just need to get the Client a Server to talk to.