This book covers the following three sections:
- React: Chapters 1 to 12
- React Native: Chapters 13 to 24
- React Architecture: Chapters 25 to 28
Section 1 – React
Chapter 1, Why React?, covers the basics of what React really is, and why you want to use it.
Chapter 2, Rendering with JSX, explains that JSX is the syntax used by React to render content. HTML is the most common output, but JSX can be used to render many things, such as native UI components.
Chapter 3, Component Properties, State, and Context, shows how properties are passed to components, how state re-renders components when it changes, and the role of context in components.
Chapter 4, Getting Started with Hooks, gets you moving with the new Hooks React API that replaces many legacy React APIs.
Chapter 5, Event Handling – The React Way, explains that events in React are specified in JSX. There are subtleties associated with how React processes events, and how your code should respond to them.
Chapter 6, Crafting Reusable Components, shows that components are often composed using smaller components. This means that you have to properly pass data and behavior to child components.
Chapter 7, The React Component Life Cycle, explains how React components are created and destroyed all the time. There are several other life cycle events that take place in between, where you do things such as fetch data from the network.
Chapter 8, Validating Component Properties, shows that React has a mechanism that allows you to validate the types of properties that are passed to components. This ensures that there are no unexpected values passed to your component.
Chapter 9, Handling Navigation with Routes, explains that navigation is an essential part of any web application. React handles routes declaratively using the react-router package.
Chapter 10, Code Splitting Using Lazy Components and Suspense, shows you how to structure your components so that only code that's needed is loaded into the browser.
Chapter 11, Server-Side React Components, discusses how React renders components to the DOM when rendered in the browser. It can also render components to strings, which is useful for rendering pages on the server and sending static content to the browser.
Chapter 12, User Interface Framework Components, introduces you to the popular Material-UI React framework for building responsive UIs.
Section 2 – React Native
Chapter 13, Why React Native?, shows that React Native is React for mobile apps. If you've already invested in React for web applications, then why not leverage the same technology to provide a better mobile experience?
Chapter 14, Kick-Starting React Native Projects, discusses how nobody likes writing boilerplate code or setting up project directories. React Native has tools to automate these mundane tasks.
Chapter 15, Building Responsive Layouts with Flexbox, explains why the Flexbox layout model is popular with web UI layouts using CSS. React Native uses the same mechanism to lay out screens.
Chapter 16, Navigating Between Screens, discusses the fact that while navigation is an important part of web applications, mobile applications also need tools to handle how a user moves from one screen to the next.
Chapter 17, Rendering Item Lists, demonstrates that React Native has a list view component that's perfect for rendering lists of items. You simply provide it with a data source, and it handles the rest.
Chapter 18, Showing Progress, explains that progress bars are great for showing a specified amount of progress. When you don't know how long something will take, you use a progress indicator. React Native has both of these components.
Chapter 19, Geolocation and Maps, shows that the react-native-maps package provides React Native with mapping capabilities. The Geolocation API that's used in web applications is provided directly by React Native.
Chapter 20, Collecting User Input, shows that most applications need to collect input from the user. Mobile applications are no different, and React Native provides a variety of controls that are not unlike HTML form elements.
Chapter 21, Displaying Modal Screens, explains that alerts are designed to interrupt the user to let them know something important has happened, while notifications are unobtrusive updates, and confirmation is used to get an immediate answer.
Chapter 22, Responding to User Gestures, discusses how gestures on mobile devices are something that's difficult to get right in the browser. Native apps, on the other hand, provide a much better experience for swiping, touching, and so on. React Native handles a lot of the details for you.
Chapter 23, Controlling Image Display, shows how images play a big role in most applications, either as icons, logos, or photographs of things. React Native has tools for loading images, scaling them, and placing them appropriately.
Chapter 24, Going Offline, explains that mobile devices tend to have volatile network connectivity. Therefore, mobile apps need to be able to handle temporary offline conditions. For this, React Native has local storage APIs.
Section 3 – React Architecture
Chapter 25, Native UI Components Using NativeBase, shows you how to build native user interfaces using pre-built, platform-agnostic UI components.
Chapter 26, Handling Application State, discusses how application state is important for any React application, web or mobile. This is why understanding libraries such as Redux and Immutable.js is important.
Chapter 27, Why Apollo?, explains that Apollo and GraphQL, used together, represent a novel approach to handling state at scale. It is a query and mutation language, plus a library for wrapping React components.
Chapter 28, Building an Apollo React App, shows that the real advantage of Apollo and GraphQL lies in the fact that your state schema is shared between web and native versions of your application.