React Projects

Build advanced cross-platform projects with React and React Native to become a professional developer, 2nd Edition

Roy Derks

• Publisher: Packt Publishing
• Year: 2022
• ISBN:
  9781801078115
• Edition: 2
• Topic: Design
• Subtopic: Web Design

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.

Chapter 1: Creating a Single-Page Application in React

When you bought this book, you'd probably heard of React before and maybe even tried out some of the code examples that can be found online. This book is constructed in such a way that the code examples in each chapter gradually increase in complexity, so even if you feel your experience with React is limited, each chapter should be understandable if you've read the previous one. By the end of this book, you will know how to work with React and its stable features, up until version 18, and you will also have experience with GraphQL and React Native.

This first chapter kicks off with us learning how to build a single-page application based on the popular TV show Rick and Morty; the application will provide us with information about its characters that we'll fetch from an external source. The core concepts for getting started with React will be applied to this project, which should be understandable if you've got some prior experience in building applications with React. If you haven't worked with React before, that's no problem either; this book describes the React features that are used in the code examples along the way.

In this chapter, we'll cover the following topics:

• Setting up a new React project
• Structuring a project

Let's dive in!

Project overview

In this chapter, we will create a single-page application in React that retrieves data from an API and runs in the browser with Webpack and Babel. Styling will be done using Bootstrap. The application that you'll build will show information about the popular TV show Rick and Morty, along with images.

The build time is 1 hour.

Getting started

The complete code for this chapter can be found on GitHub: https://github.com/PacktPublishing/React-Projects-Second-Edition/tree/main/Chapter01.

For the applications created in this book, you'll need to have at least Node.js v14.17.0 installed on your machine so that you can run npm commands. If you haven't installed Node.js on your machine, please go to https://nodejs.org/en/download/, where you can find the download instructions for macOS, Windows, and Linux.

After installing Node.js, run the following commands in your command line to check the installed versions:

• For Node.js (which should be v14.17.0 or higher), use this:
  node -v
• For npm (which should be v6.14.3 or higher), use this:
  npm -v

Also, you should have installed the React Developer Tools plugin (for Chrome and Firefox) and added it to your browser. This plugin can be installed from the Chrome Web Store (https://chrome.google.com/webstore) or Firefox Add-ons (https://addons.mozilla.org).

Creating a single-page application

In this section, we will create a new single-page React application from scratch, starting with setting up a new project with Webpack and Babel. Setting up a React project from scratch will help you understand the basic needs of a project, which is crucial for any project you create.

Setting up a project

Every time you create a new React project, the first step is to create a new directory on your local machine. Since this is the first chapter for which you're going to build a single-page application, name this directory chapter-1.

Inside this new directory, execute the following from the command line:

npm init -y

Running this command will create a fresh package.json file with the bare minimum of information needed to run a JavaScript/React project. By adding the -y flag to the command, we can automatically skip the steps where we set information such as the name, version, and description.

After running this command, the following package.json file will be created for the project:

{

"name": "chapter-1",...