React Projects

React Projects

by Roy Derks
Released December 2019
Publisher(s): Packt Publishing
ISBN: 9781789954937

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

Product information

  • Title: React Projects
  • Author(s): Roy Derks
  • Release date: December 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781789954937