The React Workshop

Get started with building web applications using practical tips and examples from React use cases

Brandon Richey, Ryan Yu, Endre Vegh, Theofanis Despoudis, Anton Punith, Florian Sloot

• Publisher: Packt Publishing
• Year: 2020
• ISBN:
  9781838821661
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Programming
• Index: Computer Science

Work through engaging exercises and activities and gain practical skills to make your web applications function effortlessly with the help of React

Key Features

• Explore the React environment by creating live projects
• Solve real-world problems relating to building modern web applications
• Gain a thorough understanding of how data moves through different React components

Book Description

Are you interested in how React takes command of the view layer for web and mobile apps and changes the data of large web applications without needing to reload the page? This workshop will help you learn how and show you how to develop and enhance web apps using the features of the React framework with interesting examples and exercises.

The workshop starts by demonstrating how to create your first React project. You'll tap into React's popular feature JSX to develop templates and use DOM events to make your project interactive. Next, you'll focus on the lifecycle of the React component and understand how components are created, mounted, unmounted, and destroyed. Later, you'll create and customize components to understand the data flow in React and how props and state communicate between components. You'll also use Formik to create forms in React to explore the concept of controlled and uncontrolled components and even play with React Router to navigate between React components. The chapters that follow will help you build an interesting image-search app to fetch data from the outside world and populate the data to the React app. Finally, you'll understand what ref API is and how it is used to manipulate DOM in an imperative way.

By the end of this React book, you'll have the skills you need to set up and create web apps using React.

What you will learn

• Use JSX to include logic in the view layer of applications
• Get familiar with the important methods and events in the React lifecycle
• Distinguish between class and functional component syntaxes
• Create forms with Formik and handle errors
• Understand the React Hooks API and the problems it can solve
• Fetch outside data using the Axios library and populate the data to the app

Who this book is for

The React Workshop is for web developers and programmers who are looking to learn React and use it for creating and enhancing web applications. Although the workshop is for beginners, prior knowledge of JavaScript programming and HTML and CSS is necessary to easily understand the concepts that are covered.

1. Getting Started with React

Overview

This chapter will explain the context and the reasons for using React framework and Create React App by utilizing the different options and scripts available for Create React App. The Create React App CLI tool will enable you to bootstrap a React project quickly. You will learn how to build a React component entirely with functional and class syntax using basic JSX. You will also be able to use components together to better structure your code. In this chapter, you will learn about the context and history of the React JS framework and be able to bootstrap your first React project.

Introduction

React is a frontend JavaScript framework. Its design principles take into consideration a lot of the common problems that developers used to face while building the user-facing components in their web projects. React doesn't exist to fix server problems or database problems, but rather to fix the common design and development problems of the frontend that exist in more complex and stateful web applications.

React is a framework that was created during the frenzy of frontend JavaScript frameworks. React by itself isn't just JavaScript that you can use to build elements on a page. After all, the problem of adding Document Object Model(DOM) elements to a web page has had solutions since the early days of Prototype and jQuery (or even further back than that). Instead, it is helpful to think of React as existing in a world that bridges the gap between JavaScript and HTML or, more specifically, the code and the browser.

Let's look at the problems that existed before the React JavaScript framework came into the picture.

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 individually. 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.

Introducing React

While the example in the previous section is a complex problem, the good news is that with React, the solution isn't terribly complex.

Instead of thinking about each element your browser sees and displays for the user as separate from your HTML code and JavaScript code (and thus separate from the states that each exhibits at any given point in time), React allows you to think of all of the code as part of the same data structure, all intertwined and working together:

• The component
• The state
• The display (or render)

This reduces a lot of the complexity and overhead while trying to amalgamate component state and component display with a mixture of CSS and JavaScript along the way. React represents a more elegant way to allow the developer to think holistically about what is on the browser and what the user is interacting with, and how that state changes along the way.

By itself, all of that is a great help to us as developers but React also introduces a full scaffold for setting things up quickly and easily in a way that lets us get to development faster and fiddle less with configuration along the way.

React introduces a way for us to set up how to represent the states and display of components, but additional tools make the setup and configuration process even easier. We can further optimize the process for getting started by introducing a special command-line tool for React projects called Create React App.

This tool minimizes the amount of time a developer needs to spend getting everything set up and allows developers to instead focus on the most important part of building your web application: the development.

Getting Started with Create React App

Create React App introduces a scaffold to...