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

✍ Scribed by Roy Derks

• Publisher: Packt Publishing
• Year: 2019
• Tongue: English
• Leaves: 465
• Category: Library

✦ Synopsis

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.

Table of Contents

1. Creating a Movie List Application in React
2. Creating a Progressive Web Application with Reusable React Components
3. Build a Dynamic Project Management Board with React and Suspense
4. Build a SSR-Based Community Feed Using React Router
5. Build a Personal Shopping List Application Using Context API and Hooks
6. Build an Application Exploring TDD Using Jest and Enzyme
7. Build a Full Stack E-Commerce Application with React Native and GraphQL
8. Build a House Listing Application with React Native and Expo
9. Build an Animated Game Using React Native and Expo
10. Creating a Real-Time Messaging Application with React Native and Expo
11. Build a Full Stack Social Media Application with React Native and GraphQL
12. Creating a Virtual Reality Application with React 360

✦ Table of Contents

Cover
Title Page
Copyright and Credits
About Packt
Contributors
Table of Contents
Preface
Chapter 1: Creating a Movie List Application in React
Project overview
Getting started
Creating a movie list application
Setting up a project
Setting up webpack
Configuring webpack to work with React
Rendering a React project
Creating a development server
Structuring a project
Creating new components
Retrieving data
Adding styling
Adding ESLint
Summary
Further reading
Chapter 2: Creating a Progressive Web Application with Reusable React Components
Project overview
Getting started
GitHub portfolio application
Creating a PWA with Create React App
Installing Create React App
Creating a PWA
Serving the PWA
Building reusable React components
Structuring our application
Reusing components in React
Styling in React with styled-components
Summary
Further reading
Chapter 3: Build a Dynamic Project Management Board with React and Suspense
Project overview
Getting started
Creating a project management board application
Handling the data flow
Loading and displaying the data
Getting started with HOC
Creating HOC
Using the HOC
Making the board dynamic
Summary
Further reading
Chapter 4: Build a SSR-Based Community Feed Using React Router
Project overview
Getting started
Community feed application
Declarative routing
Routes with parameters
Handling query strings
Enable SSR
Creating an express server with react-router
Adding head tags using React Helmet
Summary
Further reading
Chapter 5: Build a Personal Shopping List Application Using Context API and Hooks
Project overview
Getting started
Personal shopping list
Using the context API for state management
Creating Context
Nesting Context
Mutating context with Hooks
Using life cycles in functional components
Updating the Provider with a Flux pattern
Mutating data in the Provider
Creating a global Context
Summary
Further reading
Chapter 6: Build an Application Exploring TDD Using Jest and Enzyme
Project overview
Getting started
Hotel review application
Unit testing with Jest
Creating a unit test
Rendering a React component for testing
Testing components with assertions
Using Enzyme for testing React
Shallow rendering with Enzyme
Testing assertions with shallow rendering
Integration testing with Enzyme
Summary
Further reading
Chapter 7: Build a Full Stack E-Commerce Application with React Native and GraphQL
Project overview
Getting started
Getting started with the initial React application
Getting started with the GraphQL server
Building a full stack e-commerce application with React, Apollo, and GraphQL
Adding GraphQL to a React application
Sending GraphQL queries with React
Handling mutations with Apollo Client
Managing local state
Using authentication with React and GraphQL
React Router and authentication
Receiving JWT from the GraphQL server
Passing JWT to the GraphQL server
Summary
Further reading
Chapter 8: Build a House Listing Application with React Native and Expo
Project overview
Getting started
Building a house listing application with React Native and Expo 
Create a React Native project
Setting up routing in React Native
Creating routes with React Navigation
Transitioning between screens
Using multiple navigators together
Using life cycles in React Native
Styling React Native applications
Differences in styling for iOS and Android
Summary
Further reading
Chapter 9: Build an Animated Game Using React Native and Expo
Project overview
Getting started
Checking out the initial project
Creating an animated Tic-Tac-Toe game application with React Native and Expo
Using the React Native Animated API
Creating a basic animation
Combining animations with the Animated API
Advanced animations with Lottie
Handling gestures with Expo
Handling tap gestures
Customizing tap gestures
Summary
Further reading
Chapter 10: Creating a Real-Time Messaging Application with React Native and Expo
Project overview
Getting started
Checking out the initial project
Creating a real-time messaging application with React Native and Expo
Using GraphQL in React Native with Apollo
Setting up Apollo in React Native
Using Apollo in React Native
Authentication in React Native
Authentication with React Navigation
Sending authentication details to the GraphQL server
Handling subscriptions in React Native with Apollo
Setting up Apollo Client for GraphQL subscriptions
Adding subscriptions to React Native
Using mutations with subscriptions
Summary
Further reading
Chapter 11: Build a Full Stack Social Media Application with React Native and GraphQL
Project overview
Getting started
Checking out the initial project
Building a full stack social media application with React Native, Apollo, and GraphQL
Using the camera with React Native and Expo
Retrieving near real-time data using GraphQL
Sending notifications with Expo
Handling foreground notifications
Summary
Further reading
Chapter 12: Creating a Virtual Reality Application with React 360
Project overview
Getting started
Creating a VR application with React 360
Getting started with React 360
Setting up React 360
React 360 UI components
Interactions in React 360
Using local state and VrButton
Dynamically changing scenes
Animations and 3D
Animations
Rendering 3D objects
Summary
Further reading
Other Books You May Enjoy
Index