You're reading from React and React Native Build cross-platform JavaScript applications with native power for the web, desktop, and mobile

Product type Paperback

Published in May 2022

Publisher Packt

ISBN-13 9781803231280

Length 606 pages

Edition 4th Edition

Languages

JavaScript

Tools

React

Concepts

Front End Web Development

Authors (3):

Roy Derks

Mikhail Sakhniuk

Adam Boduch

View More author details

Table of Contents (36) Chapters

Preface

1. Part 1 – React

2. Chapter 1: Why React? FREE CHAPTER

3. Chapter 2: Rendering with JSX

4. Chapter 3: Component Properties, State, and Context

5. Chapter 4: Getting Started with Hooks

6. Chapter 5: Event Handling, the React Way

7. Chapter 6: Crafting Reusable Components

8. Chapter 7: The React Component Life Cycle

9. Chapter 8: Validating Component Properties

10. Chapter 9: Handling Navigation with Routes

11. Chapter 10: Code Splitting Using Lazy Components and Suspense

12. Chapter 11: Server-Side React Components

13. Chapter 12: User Interface Framework Components

14. Chapter 13: High-Performance State Updates

15. Part 2 – React Native

16. Chapter 14: Why React Native?

17. Chapter 15: React Native under the Hood

18. Chapter 16: Kick-Starting React Native Projects

19. Chapter 17: Building Responsive Layouts with Flexbox

20. Chapter 18: Navigating Between Screens

21. Chapter 19: Rendering Item Lists

22. Chapter 20: Showing Progress

23. Chapter 21: Geolocation and Maps

24. Chapter 22: Collecting User Input

25. Chapter 23: Displaying Modal Screens

26. Chapter 24: Responding to User Gestures

27. Chapter 25: Using Animations

28. Chapter 26: Controlling Image Display

29. Chapter 27: Going Offline

30. Chapter 28: Selecting Native UI Components Using NativeBase

31. Part 3 – React Architecture

32. Chapter 29: Handling Application State

33. Chapter 30: Why GraphQL?

34. Chapter 31: Building a GraphQL React App

35. Other Books You May Enjoy

Packt is searching for authors like you

Creating a Todo app

In this chapter, we'll build a Todo example for React that uses GraphQL to handle its data. This example is based on a popular open source library (https://todomvc.com/examples/react/), which is a robust, yet concise, starting point for creating the Todo application for this chapter.

I'm going to walk you through an example React implementation of a Todo app. Also, you can find a React Native implementation of this same web app in the GitHub repository for this chapter. The key is that the mobile version will use the same GraphQL backend as the web UI. I think this is a win for React developers who want to build both web and native versions of their apps as they can share the same schema!

The code for this chapter contains both a web version build with React and a native version with React Native. If you've worked on frontend development in the past 5 years, you've probably come across a sample Todo app. Here's what the web version...