nach oben

2019 | Buch

Pro React 16

verfasst von: Adam Freeman

Verlag: Apress

Enthalten in: Springer Professional "Wirtschaft+Technik" , Springer Professional "Technik" , Springer Professional "Wirtschaft"

Einloggen, um Zugang zu erhalten

Über dieses Buch

Use the enormously popular React framework to build dynamic JavaScript applications that take advantage of the capabilities of modern browsers and devices. You will learn how React brings the power of strong architecture and responsive data to the client, providing the foundation for complex and rich user interfaces.

Best-selling author Adam Freeman explains how to get the most from React. He begins by describing the React architecture and the benefits it offers and then shows you how to use React and its associated tools and libraries in your projects, starting from the nuts and bolts and building up to the most advanced and sophisticated features, going in-depth to give you the knowledge you need.

Each topic is presented clearly and concisely. Chapters include common problems and how to avoid them.

What You’ll Learn

Gain a solid understanding of the React design

Create rich and dynamic web app clients using React

Create data stores using Redux

Consume data using REST and GraphQLTest your React projects

Who This Book Is For

JavaScript developers who want to use React to create dynamic client-side applications

Inhaltsverzeichnis

Frontmatter

Getting Started with React

Frontmatter

Chapter 1. Your First React Application

Abstract

The best way to get started with React is to dive in. In this chapter, I take you through a simple development process to create an application to keep track of to-do items. In Chapters 5–8, I show you how to create a more complex and realistic application, but, for now, a simple example will be enough to demonstrate how React applications are created and how the basic features work. Don’t worry if you don’t understand everything in this chapter—the idea is to get an overall sense of how React works. I explain everything in detail in later chapters.

Adam Freeman

Chapter 2. Understanding React

Abstract

React is a flexible and powerful open-source framework for developing client-side applications; it takes cues from the world of server-side development and applies them to HTML elements, and it creates a foundation that makes building rich web applications easier. In this book, I explain how React works and demonstrate the different features it provides.

Adam Freeman

Chapter 3. HTML, JSX, and CSS Primer

Abstract

In this chapter, I provide a brief overview of HTML and explain how HTML content can be mixed with JavaScript code when using JSX, which is the superset of JavaScript supported by the React development tools that allows HTML to be mixed with code. I also introduce the Bootstrap CSS framework, which I use to style the content in the examples throughout this book.

Adam Freeman

Chapter 4. JavaScript Primer

Abstract

In this chapter, I provide a quick tour of the most important features of the JavaScript language as they apply to React development. I don’t have the space to describe JavaScript completely, so I have focused on the essentials that you’ll need to get up to speed and follow the examples in this book.

Adam Freeman

Chapter 5. SportsStore: A Real Application

Abstract

In Chapter 2, I built a quick and simple React application. Small and focused examples allow me to demonstrate specific features, but they can lack context. To help overcome this problem, I am going to create a simple but realistic e-commerce application.

Adam Freeman

Chapter 6. SportsStore: REST and Checkout

Abstract

In this chapter, I continue adding features to the SportsStore application I created in Chapter 5. I add support for retrieving data from a web service, presenting larger amounts of data in pages and checking out and placing orders.

Adam Freeman

Chapter 7. SportsStore: Administration

Abstract

In this chapter, I add the administration features to the SportsStore application, providing the tools required to manage orders and products. I use GraphQL in this chapter rather than expanding the RESTful web service I used for the customer-facing part of SportsStore. GraphQL is an alternative to conventional web services that puts the client in control of the data it receives, although it requires more initial setup and can be more complex to use.

Adam Freeman

Chapter 8. SportsStore: Authentication and Deployment

Abstract

In this chapter, I add authentication to the SportsStore application to protect the administration features from unauthorized use. I also prepare the SportsStore application for deployment into a Docker container, which can be used on most hosting platforms.

Adam Freeman

Working with React

Frontmatter

Chapter 9. Understanding React Projects

Abstract

In Part 1 of this book, I created the SportsStore application to demonstrate how different React features can be combined with other packages to create a realistic application. In this part of the book, I dig into the detail of the built-in React features. In this chapter, I describe the structure of a React project and explain the tools that are provided for developers and the process by which code and content is compiled, packaged, and sent to the browser. Table 9-1 puts this chapter in context.

Adam Freeman

Chapter 10. Components and Props

Abstract

In this chapter, I describe the key building block in React applications: the component. I focus on the simplest type of component in this chapter, which is the stateless component. I describe the more complex alternative, stateful components, in Chapter 11. I also explain how the props feature works in this chapter, which allows one component to provide another with the data it requires to render its content and the functions it should invoke when something important happens. Table 10-1 puts stateless components and props in context.

Adam Freeman

Chapter 11. Stateful Components

Abstract

In this chapter, I introduce the stateful component, which builds on the features described in Chapter 10 and adds state data that is unique to each component and that can be used to alter the rendered output. Table 11-1 puts stateful components in context.

Adam Freeman

Chapter 12. Working with Events

Abstract

In this chapter, I describe the React support for events, which are generated by HTML elements, typically in response to user interaction. The React event features will be familiar if you have used the DOM event API features, but there are some important differences that can confuse the unwary developer. Table 12-1 puts the React event features in context.

Adam Freeman

Chapter 13. Reconciliation and Lifecycles

Abstract

In this chapter, I explain how React uses a process called reconciliation to efficiently deal with content produced by components. The reconciliation process is part of a larger lifecycle that React provides for components, and I describe the different lifecycle stages and show you how stateful components can implement methods to become active lifecycle participants. Table 13-1 puts reconciliation and the component lifecycle in context.

Adam Freeman

Chapter 14. Composing Applications

Abstract

In this chapter, I describe the different ways that components can be combined to create complex features. These composition patterns can be used together, and you will find that most problems can be tackled in several ways, which leaves you free to apply the approach with which you are most comfortable. Table 14-1 puts the chapter in context.

Adam Freeman

Chapter 15. Forms and Validation

Abstract

Forms allow applications to collect data from the user. In this chapter, I explain how React works with form elements, using state properties to set their value and event handlers to respond to user interactions. I show you how to work with different element types and show you how to validate the data that the user provides in a form so that the application receives data it can use. Table 15-1 puts forms and validation in context.

Adam Freeman

Chapter 16. Using Refs and Portals

Abstract

Under normal circumstances, a component doesn’t interact directly with the elements in the Document Object Model (DOM). Normal interaction is through props and event handlers, which make it possible to compose applications and for components to work together without knowledge of the content they deal with.

Adam Freeman

Chapter 17. Unit Testing

Abstract

In this chapter, I show you how to test React components. I introduce a package that makes testing easier and demonstrate how it can be used to test components in isolation and test their interactions with their children. Table 17-1 puts unit testing in context.

Adam Freeman

Creating Complete Applications

Frontmatter

Chapter 18. Creating Complete Applications

Abstract

React provides an excellent set of features for presenting HTML content to the user and relies on third-party packages to provide the supporting functionality required to develop complete web applications. There are countless packages available for use with React, and in this part of the book, I introduce those that are most widely used and most likely to be needed by readers of this book. These packages are all open-source and freely available, and there are paid-for support options in some cases.

Adam Freeman

Chapter 19. Using a Redux Data Store

Abstract

A data store moves the application’s data outside of the React component hierarchy. Using a data store means that the data doesn’t have to be lifted up to the top-level component and doesn’t have to thread props to ensure access to that data where it is needed. The result is a more natural application structure, which leaves the React components to focus on what they are good at, which is rendering content for the user.

Adam Freeman

Chapter 20. Using the Data Store APIs

Abstract

In Chapter 19, I showed you how to use the Redux and React-Redux packages to create a data store and connect it to the example application. In this chapter, I describe the APIs that both packages provide for advanced use, allowing direct access to the data store and managing the connection between a component and the data features it requires. Table 20-1 puts the data store APIs in context.

Adam Freeman

Chapter 21. Using URL Routing

Abstract

At the moment, the selection of content displayed to the user is controlled by the application’s state data. Some of that state data is specific to a single component, such as the Selector component, which manages the choice between products and supplier data. The rest of the data is in the Redux data store and is used by the connected components to decide whether the data table or editor components are required and to obtain the data to populate those components’ content.

Adam Freeman

Chapter 22. Advanced URL Routing

Abstract

In this chapter, I describe the advanced features that are available for URL routing with the React-Router package. I show you how to create components that can participate in the routing process, how to navigate programmatically, how to generate routes programmatically, and how to use URL routing in components that are connected to the data store. Table 22-1 puts the advanced URL routing features in context.

Adam Freeman

Chapter 23. Consuming a RESTful Web Service

Abstract

In this chapter, I address the example application’s lack of permanent data storage by creating a web service and using it to manage the application’s data. The application will send HTTP requests to the web service to retrieve data and to submit changes. I start this chapter by showing you how to consume a web service directly in a component and then demonstrate how a web service can be used with a data store. In Chapter 24, I explain how to use GraphQL, which is an alternative approach to dealing with web services. Table 23-1 puts this chapter in context.

Adam Freeman

Chapter 24. Understanding GraphQL

Abstract

GraphQL is an end-to-end system for creating and consuming APIs, providing a more flexible alternative to using traditional RESTful web services, such as the one created in Chapter 23. In this chapter, I explain how GraphQL services are defined and how queries are performed. In Chapter 25, I demonstrate the different ways that a GraphQL API can be consumed by a React application. Table 24-1 puts GraphQL in context.

Adam Freeman

Chapter 25. Consuming GraphQL

Abstract

In this chapter—the last in this book—I show you the different ways that a GraphQL service can be consumed by a React application. I show you how to work directly with HTTP requests, how to integrate GraphQL with a data store, and how to use a dedicated GraphQL client.

Adam Freeman

Backmatter

Titel: Pro React 16
verfasst von: Adam Freeman
Verlag: Apress
Electronic ISBN: 978-1-4842-4451-7
Print ISBN: 978-1-4842-4450-0
DOI: https://doi.org/10.1007/978-1-4842-4451-7