React and React Native
eBook - ePub

React and React Native

A complete hands-on guide to modern web and mobile development with React.js, 3rd Edition

Adam Boduch, Roy Derks

  1. 526 páginas
  2. English
  3. ePUB (apto para móviles)
  4. Disponible en iOS y Android
eBook - ePub

React and React Native

A complete hands-on guide to modern web and mobile development with React.js, 3rd Edition

Adam Boduch, Roy Derks

Detalles del libro
Vista previa del libro

Información del libro

Get up to speed with React, React Native, GraphQL and Apollo for building cross-platform native apps with the help of practical examples

Key Features

  • Covers the latest features of React such as Hooks, Suspense, NativeBase, and Apollo in this updated third edition
  • Get to grips with the React architecture for writing easy-to-manage web and mobile applications
  • Understand GraphQL and Apollo for building a scalable backend for your cross-platform apps

Book Description

React and React Native, Facebook's innovative User Interface (UI) libraries, are designed to help you build robust cross-platform web and mobile applications. This updated third edition is improved and updated to cover the latest version of React. The book particularly focuses on the latest developments in the React ecosystem, such as modern Hook implementations, code splitting using lazy components and Suspense, user interface framework components using Material-UI, and Apollo. In terms of React Native, the book has been updated to version 0.62 and demonstrates how to apply native UI components for your existing mobile apps using NativeBase.

You will begin by learning about the essential building blocks of React components. Next, you'll progress to working with higher-level functionalities in application development, before putting this knowledge to use by developing user interface components for the web and for native platforms. In the concluding chapters, you'll learn how to bring your application together with a robust data architecture.

By the end of this book, you'll be able to build React applications for the web and React Native applications for multiple mobile platforms.

What you will learn

  • Delve into the React architecture, component properties, state, and context
  • Get to grips with React Hooks for handling functions and components
  • Implement code splitting in React using lazy components and Suspense
  • Build robust user interfaces for mobile and desktop apps using Material-UI
  • Write shared components for Android and iOS mobile apps using React Native
  • Simplify layout design for React Native apps using NativeBase
  • Write GraphQL schemas to power web and mobile apps
  • Implement web and mobile components that are driven by Apollo

Who this book is for

This book is for any JavaScript developer who wants to start learning how to use Facebook's UI libraries, React and React Native, for mobile and web application development. Although no prior knowledge of React is needed, working knowledge of JavaScript programming will help you understand the concepts covered in the book more effectively.

Preguntas frecuentes

¿Cómo cancelo mi suscripción?
Simplemente, dirígete a la sección ajustes de la cuenta y haz clic en «Cancelar suscripción». Así de sencillo. Después de cancelar tu suscripción, esta permanecerá activa el tiempo restante que hayas pagado. Obtén más información aquí.
¿Cómo descargo los libros?
Por el momento, todos nuestros libros ePub adaptables a dispositivos móviles se pueden descargar a través de la aplicación. La mayor parte de nuestros PDF también se puede descargar y ya estamos trabajando para que el resto también sea descargable. Obtén más información aquí.
¿En qué se diferencian los planes de precios?
Ambos planes te permiten acceder por completo a la biblioteca y a todas las funciones de Perlego. Las únicas diferencias son el precio y el período de suscripción: con el plan anual ahorrarás en torno a un 30 % en comparación con 12 meses de un plan mensual.
¿Qué es Perlego?
Somos un servicio de suscripción de libros de texto en línea que te permite acceder a toda una biblioteca en línea por menos de lo que cuesta un libro al mes. Con más de un millón de libros sobre más de 1000 categorías, ¡tenemos todo lo que necesitas! Obtén más información aquí.
¿Perlego ofrece la función de texto a voz?
Busca el símbolo de lectura en voz alta en tu próximo libro para ver si puedes escucharlo. La herramienta de lectura en voz alta lee el texto en voz alta por ti, resaltando el texto a medida que se lee. Puedes pausarla, acelerarla y ralentizarla. Obtén más información aquí.
¿Es React and React Native un PDF/ePUB en línea?
Sí, puedes acceder a React and React Native de Adam Boduch, Roy Derks en formato PDF o ePUB, así como a otros libros populares de Computer Science y Web Development. Tenemos más de un millón de libros disponibles en nuestro catálogo para que explores.


Computer Science
Web Development
Section 1: React
In this section, we will cover the following chapters:
  • Chapter 1, Why React?
  • Chapter 2, Rendering with JSX
  • Chapter 3, Component Properties, State, and Context
  • Chapter 4, Getting Started with Hooks
  • Chapter 5, Event Handling – the React Way
  • Chapter 6, Crafting Reusable Components
  • Chapter 7, The React Component Life Cycle
  • Chapter 8, Validating Component Properties
  • Chapter 9, Handling Navigation with Routes
  • Chapter 10, Code Splitting Using Lazy Components and Suspense
  • Chapter 11, Server-Side React Components
  • Chapter 12, User Interface Framework Components
Why React?
If you're reading this book, you probably know what React is. If not, don't worry. I'll do my best to keep philosophical definitions to a minimum. However, this is a long book with a lot of content, so I feel that setting the tone is an appropriate first step. Yes, the goal is to learn React and React Native. But it's also to put together a lasting architecture that can handle everything we want to build with React today and in the future.
This chapter starts with a brief explanation of why React exists. Then, we'll think about the simplicity of React and how React is able to handle many of the typical performance issues faced by web developers. Next, we'll go over the declarative philosophy of React and the level of abstraction that React programmers can expect to work with. Finally, we'll touch on some of the major features of React.
Once you have a conceptual understanding of React and how it solves problems with UI development, you'll be better equipped to tackle the remainder of the book.
This chapter will cover the following topics:
  • What is React?
  • React Features
  • What's new in React?

What is React?

I think the one-line description of React on its home page ( is concise and accurate:
"A JavaScript library for building user interfaces."
It's a library for building user interfaces (UIs). This is perfect because, as it turns out, this is all we want most of the time. I think the best part about this description is everything that it leaves out. It's not a mega framework. It's not a full-stack solution that's going to handle everything from the database to real-time updates over WebSocket connections. We might not actually want most of these prepackaged solutions.
If React isn't a framework, then what is it exactly?

React is just the view layer

React is generally thought of as the view layer in an application. You might have used a library such as Handlebars or jQuery in the past. Just like jQuery manipulates UI elements and Handlebars templates are inserted into the page, React components change what the user sees. The following diagram illustrates where React fits in our frontend code:
This is all there is to React—the core concept. Of course, there will be subtle variations to this theme as we make our way through the book, but the flow is more or less the same. We have some application logic that generates some Data. We want to render this Data to the UI, so we pass it to a React Component, which handles the job of getting the HTML into the page.
You may wonder what the big deal is; React appears to be yet another rendering technology. We'll touch on some of the key areas where React can simplify application development in the remaining sections of the chapter.

Simplicity is good

React doesn't have many moving parts to learn about and understand. Internally, there's a lot going on, and we'll touch on these things throughout the book. The advantage of having a small API to work with is that you can spend more time familiarizing yourself with it, experimenting with it, and so on. The opposite is true of large frameworks, where all of your time is devoted to figuring out how everything works. The following diagram gives you a rough idea of the APIs that we have to think about when programming with React:
React is divided into two major APIs:
  • The React Component API: These are the parts of the page that are actually rendered by React DOM.
  • React DOM: This is the API that's used to perform the actual rendering on a web page.
Within a React component, we have the following areas to think about:
  • Data: This is data that comes from somewhere (the component doesn't care where), and is rendered by the component.
  • Lifecycle: This consists of methods or Hooks that we implement to respond to the component's entering and exiting phases of the React rendering process as they happen over time. For example, one phase of the lifecycle is when the component is about to be rendered.
  • Events: These are the code that we write for responding to user interactions.
  • JSX: This is the syntax of React components used to describe UI structures.
Don't fixate on what these different areas of the React API represent just yet. The takeaway here is that React, by nature, is simple. Just look at how little there is to figure out! This means that we don't have to spend a ton of time going through API details here. Instead, once you pick up on the basics, we can spend more time on nuanced React usage patterns that fit in nicely with declarative UI structures.

Declarative UI structures

React newcomers have a hard time coming to grips with the idea that components mix markup in with their JavaScript in order to declare UI structures. If you've looked at React examples and had the same adverse reaction, don't worry. Initially, we're all skeptical of this approach, and I think the reason is that we've been conditioned for decades by the separation of concerns principle. This principle states that different concerns, such as logic and presentation, should be separate from one another. Now, whenever we see things mixed together, we automatically assume that this is bad and shouldn't happen.
The syntax used by React components is called JSX (JavaScript XML). A component renders content by returning some JSX. The JSX itself is usually HTML markup, mixed with custom tags for React components. The specifics don't matter at this point; we'll go into detail in the coming chapters. What's groundbreaking about the declarative JSX approach is that we don't have to perform little micro-operations to change the content of a component.
Although I won't be following the convention in this book, some React developers prefer the .jsx extension instead of .js for their components.
For example, think about using something like jQuery to build your application. You have a page with some content on it, and you want to add a class to a paragraph when a button is clicked. Performing these steps is easy enough. This is called imperative programming, and it's problematic for UI development. While this example of changing the class of an element is simple, real applications tend to involve more than three or four steps to make something happen.
React components don't require executing steps in an imperative way. This is why JSX is central to React components. The XML-style syntax makes it easy to describe what the UI should look like. That is, what are the HTML elements that this component is going to render? This is called declarative programming and is very well suited for UI development. Once you've declared your UI structure, you need to specify how it changes over time.

Time and data

Another area that's difficult for React newcomers to grasp is the idea that JSX is like a static string, representing a chunk of rendered output. This is where time and data come into play. React components rely on data being passed into them. This data represents the dynamic parts of the UI. For example, a UI element that's rendered based on a Boolean value could chang...


  1. Title Page
  2. Copyright and Credits
  3. About Packt
  4. Contributors
  5. Preface
  6. Section 1: React
  7. Why React?
  8. Rendering with JSX
  9. Component Properties, State, and Context
  10. Getting Started with Hooks
  11. Event Handling - The React Way
  12. Crafting Reusable Components
  13. The React Component Life Cycle
  14. Validating Component Properties
  15. Handling Navigation with Routes
  16. Code Splitting Using Lazy Components and Suspense
  17. Server-Side React Components
  18. User Interface Framework Components
  19. Section 2: React Native
  20. Why React Native?
  21. Kick-Starting React Native Projects
  22. Building Responsive Layouts with Flexbox
  23. Navigating Between Screens
  24. Rendering Item Lists
  25. Showing Progress
  26. Geolocation and Maps
  27. Collecting User Input
  28. Displaying Modal Screens
  29. Responding to User Gestures
  30. Controlling Image Display
  31. Going Offline
  32. Section 3: React Architecture
  33. Native UI Components Using NativeBase
  34. Handling Application State
  35. Why Apollo?
  36. Building an Apollo React App
  37. Other Books You May Enjoy