React Projects - Second Edition

React Projects - Second Edition

by Roy Derks
Released April 2022
Publisher(s): Packt Publishing
ISBN: 9781801070638

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

Learn how to develop real-world applications of varying complexity for the web, mobile, and VR devices using React, React Native, React 360, and more

Key Features

  • Build React applications at scale using 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 mobile platforms 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 routing, Context, and Hooks on multiple platforms, which will help you build full-stack web and mobile applications efficiently. Finally, you'll get to grips with unit testing with Jest and end-to-end testing with Cypress 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 web applications using styled and reusable React components
  • Build test-driven React applications using Jest, React Testing Library, and Cypress
  • Understand full-stack development using GraphQL, Apollo, and React
  • Perform server-side rendering using React and Next.js
  • Create animated games using React Native and Expo
  • 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. React Projects Second Edition
  2. Contributors
  3. About the author
  4. About the reviewers
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  6. Chapter 1: Creating a Single-Page Application in React
    1. Project overview
    2. Getting started
    3. Creating a single-page application
      1. Setting up a project
    4. Structuring a project
      1. Creating new components
    5. Summary
    6. Further reading
  7. Chapter 2: Creating a Portfolio in React with Reusable Components and Routing
    1. Project overview
    2. Getting started
    3. Creating a portfolio in React
      1. Creating a portfolio with Create React App
      2. Installing Create React App
      3. Building reusable React components
      4. Structuring our application
      5. Reusing components in React
      6. Routing with react-router
    4. Summary
    5. Further reading
  8. Chapter 3: Building a Dynamic Project Management Board
    1. Project overview
    2. Getting started
    3. Creating a project management board application
      1. Handling the data flow
      2. Loading and displaying the data
    4. Working with custom Hooks
      1. Creating custom Hooks
      2. Reusing a custom Hook
      3. Making the board dynamic
    5. Styling in React with styled-components
    6. Summary
    7. Further reading
  9. Chapter 4: Building a Server-Side-Rendered Community Feed Using Next.js
    1. Project overview
    2. Getting started
    3. Community feed application
    4. Setting up Next.js
      1. Installing Next.js
      2. Adding styled-components
    5. Routing with Next.js
      1. Handling query strings
    6. Enabling SSR
      1. Fetching data server side with Next.js
      2. Adding head tags for SEO
    7. Summary
    8. Further reading
  10. Chapter 5: Building a Personal Shopping List Application Using Context and Hooks
    1. Project overview
    2. Getting started
    3. Personal shopping list
      1. Using the Context API for state management
      2. Creating Context
      3. Nesting Context
    4. Mutating Context with Hooks
      1. Using life cycles in functional components
      2. Using advanced state with useReducer
    5. Mutating data in the Provider
    6. Creating an application Context
    7. Code splitting with React Suspense
    8. Summary
    9. Further reading
  11. Chapter 6: Building an Application Exploring TDD Using the React Testing Library and Cypress
    1. Project overview
    2. Getting started
    3. The hotel review application
      1. Unit testing components
      2. Testing React state and Hooks
      3. End-to-end testing with Cypress
    4. Summary
    5. Further reading
  12. Chapter 7: Building a Full-Stack E-Commerce Application with Next.js and GraphQL
    1. Project overview
    2. Getting started
      1. Getting started with the initial React application
    3. Building a full stack e-commerce application with React, Apollo, and GraphQL
      1. Creating a GraphQL server with Next.js
      2. Consuming GraphQL with Apollo Client
    4. Summary
    5. Further reading
  13. Chapter 8: Building an Animated Game Using React Native and Expo
    1. Project overview
    2. Getting started
    3. Creating an animated game application with React Native and Expo
      1. Setting up React Native with Expo
      2. Adding gestures and animations in React Native
      3. Advanced animations with Lottie
    4. Summary
    5. Further reading
  14. Chapter 9: Building a Full-Stack Social Media Application with React Native and Expo
    1. Project overview
    2. Getting started
      1. Checking out the initial project
    3. Building a full-stack social media application with React Native and Expo
      1. Advanced routing with authentication
      2. Using the camera with React Native and Expo
      3. Differences in styling for iOS and Android
    4. Summary
    5. Further reading
  15. Chapter 10: Creating a Virtual Reality Application with React and Three.js
    1. Project overview
    2. Getting started
    3. Creating a VR application with React and Three.js
      1. Getting started with Three.js
      2. Creating 3D objects with Three.js
      3. Rendering 360-degree panorama images
      4. Animating 3D objects
    4. Summary
    5. Further reading
    6. Why subscribe?
  16. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts

Product information

  • Title: React Projects - Second Edition
  • Author(s): Roy Derks
  • Release date: April 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781801070638