React Projects

Build 12 real-world applications from scratch using React, React Native, and React 360

Roy Derks

• Publisher: Packt Publishing
• Year: 2019
• ISBN:
  9781789953398
• Edition: 1
• Topic: Computer Science
• Subtopic: Web Services & APIs
• Index: Computer Science

Build cross-platform applications of varying complexity for the web, mobile, and VR devices using React tooling

Key Features

• Build React applications at scale using effective React patterns and best practices
• Explore React features such as Hooks, the Context API, and the Suspense API
• Extend React's integration with React Native for building cross-platform mobile apps and games

Book Description

Developed by Facebook, React is a popular library for building impressive user interfaces. React extends its capabilities to the mobile platform using the React Native framework and integrates with popular web and mobile tools to build scalable applications.

React Projects is your guide to learning React development by using modern development patterns and integrating React with powerful web tools such as GraphQL, Expo, and React 360. You'll start building a real-world project right from the first chapter and get hands on with developing scalable applications as you advance to building more complex projects. Throughout the book, you'll use the latest versions of React and React Native to explore features such as Higher Order Components (HOC), Context, and Hooks on multiple platforms, which will help you build full stack web and mobile applications efficiently. Finally, you'll delve into unit testing with Jest to build test-driven apps.

By the end of this React book, you'll have developed the skills necessary to start building scalable React apps across web and mobile platforms.

What you will learn

• Create a wide range of applications using various modern React tools and frameworks
• Discover how React Hooks modernize state management for React apps
• Develop progressive web applications using React components
• Build test-driven React applications using the Jest and Enzyme frameworks
• Understand full stack development using React, Apollo, and GraphQL
• Perform server-side rendering using React and React Router
• Design gestures and animations for a cross-platform game using React Native

Who this book is for

The book is for JavaScript developers who want to explore React tooling and frameworks for building cross-platform applications. Basic knowledge of web development, ECMAScript, and React will assist with understanding key concepts covered in this book.

Creating a Real-Time Messaging Application with React Native and Expo

Having a real-time connection with a server is crucial when you're developing a real-time messaging application as you want your users to receive their messages as soon as they are sent. What you might have experienced in the previous two chapters is that mobile applications are more intuitive to use than web applications. When you want users to send messages back-and-forth, this is best done by building a mobile application, which you'll do in this chapter.

In this chapter, you'll create a real-time mobile messaging application using React Native and Expo that connects with a GraphQL server. By using WebSockets, you can create real-time connections with a server for web and mobile applications and have a two-way data flow between your application and a GraphQL server. This connection can also be used for authentication by using OAuth and JWT tokens, which is what you did in the Chapter 7, Build a Full Stack E-Commerce Application with React Native and GraphQL.

The following topics will be covered in this chapter:

• GraphQL with React Native using Apollo
• Authentication flows in React Native
• GraphQL subscriptions

Project overview

In this chapter, we will create a mobile messaging application build with React Native and Expo that uses a GraphQL server for authentication and to send and receive messages. Messages can be received in real-time as GraphQL subscriptions are used through a WebSocket that was created with Apollo. Users need to be logged in to send messages through the application, for which an authentication flow was built using React Navigation and AsyncStorage to store authentication details in persistent storage.

The build time is 2 hours.

Getting started

The project that we'll create in this chapter builds upon an initial version that you can find on GitHub: https://github.com/PacktPublishing/React-Projects/tree/ch10-initial. The complete source code can also be found on GitHub: https://github.com/PacktPublishing/React-Projects/tree/ch10.

You need to have the application Expo Client installed on a mobile iOS or Android device to run the project on a physical device. Alternatively, you can install either Xcode or Android Studio on your computer to run the application on a virtual device:

• For iOS: Information on how to set up your local machine to run the iOS simulator can be found here: https://docs.expo.io/versions/v36.0.0/workflow/ios-simulator/.
• For Android: Information on how to set up your local machine to run the emulator from Android Studio can be found here: https://docs.expo.io/versions/v36.0.0/workflow/android-studio-emulator/. There's a known issue when running the emulator, which can be prevented by ensuring that the following lines are present in your ~/.bash_profile or ~/.bash_rc file:

export ANDROID_SDK=ANDROID_SDK_LOCATION
export PATH=ANDROID_SDK_LOCATION/platform-tools:$PATH
export PATH=ANDROID_SDK_LOCATION/tools:$PATH

The value for ANDROID_SDK_LOCATION is the path to the Android SDK on your local machine and can be found by opening Andr...