Problems before React

Web development is a trade that can sometimes be incredibly confusing and complex. The act of getting the buttons, pictures, and text that we see on a website is not always a simple endeavor.

Think about a web page with a little form to log into your account. You have at least two text boxes, usually for your username and your password, where you need to enter your details. You have a button or link that allows you to log in after the details have been entered, with maybe at least one extra little link in case you forget your password. You probably also have a logo for this site you are logging into, and maybe some sort of branding or otherwise compelling visual elements. Here is an example of a simple login page:

Figure 1.1: Login form

All of that doesn't just exist, though. A web developer needs to sit down and build each of these pieces and put them together in such a way so that the audience visiting that site can interact with each component inpidually. The real problem here is that all of that can be incredibly complicated to put together. For example, you might have multiple form inputs that all interact with each other depending on the values you entered and selected. Each piece needs to be able to interact with the next, and there are multiple different types of complex interactions that need to occur that go beyond just something happening as a result of a button being clicked.

For example, let's go back to our Packt login form example and examine some of the intricacies of interaction that exist even in such a simple and commonplace element. We will start off with the simplest example:

• Data needs to be entered into the username field.
• Data needs to be entered into the password field.
• The user needs to click the login button.
• The user is now logged in.

That's enough to make this work, but it's not a great user experience, is it? There's no validation, and nothing to help the user to get through the process smoothly or gracefully to let them know beforehand when the form fails to show the desired output.

So, we need to expand with additional use cases:

• If the user's username and password do not work, the user should see a failed login message.
• If the user fails to enter a username, the user should see a message reminding them to fill in the username field.
• If the user fails to enter a password, the user should see a message reminding them to fill in the password field.

These cases increase the complexity of the code pretty significantly.

Additionally, a few more elements for this web page are necessary:

• A message box displaying information if a username/password combination is incorrect, which evidently requires interaction with the server
• A message box displaying information if either of the username/password fields is left blank

The web page will get progressively more complicated as you move further along in improving the user experience.

For example, if we want to break it down further:

• What if we want to progressively check the username field to make sure it matches an email format if we are using emails for usernames?
• What if we want to validate whether each field has been filled (either for format or if the values have been filled) as we move through each of the fields, displaying a red box around input fields that are blank or skipped as we move along?

At each step, we are introducing new and increasingly complex levels of interaction between different UI elements and the collective state of each component.

Now, let's break the state of each component into:

• Their visual state (how the field is displayed to the user)
• Their data state (what is entered into the field)
• Their state in relation to other UI elements (how the login form knows about the data state of the username and password fields)
• Their interaction state (can the button be clicked if either the username or password fields are blank?)

Suddenly, you will realize that a few lines of HTML just will not cut it anymore. Now you need more complex blocks of JavaScript code, with state management both for visual and data states for each component, and a way to tie them all together.

You need to represent all of it in a way that won't require it to be rewritten every time someone needs to implement a similar form, and in a way that does not make a developer groan every time they have to touch the code. Let's see where React fits into all of this and how it addresses this problem.