32,36 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 491
Veröffentlichungsjahr: 2019
Ähnliche
React Projects
Copyright © 2019 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Commissioning Editor: Pavan RamchandaniAcquisition Editor: Ashitosh GuptaContent Development Editor: Akhil NairSenior Editor: Martin WhittemoreTechnical Editor: Suwarna PatilCopy Editor: Safis EditingProject Coordinator:Kinjal BariProofreader: Safis EditingIndexer: Pratik ShirodkarProduction Designer: Arvindkumar Gupta
First published: December 2019
Production reference: 1191219
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.
ISBN 978-1-78995-493-7
www.packt.com
Packt.com
Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.
Why subscribe?
Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Fully searchable for easy access to vital information
Copy and paste, print, and bookmark content
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.packt.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up for a range of free newsletters, and receive exclusive discounts and offers on Packt books and eBooks.
Contributors
About the author
Roy Derks is a serial start-up CTO, conference speaker, and developer from Amsterdam. He has been actively programming since he was a teenager, starting as a self-taught programmer using online tutorials and books. At the age of 14, he founded his first start-up, a peer-to-peer platform where users could trade DVDs with other users for free. This marked the start of his career in web development, which back then primarily consisted of creating web applications using an MVC architecture with the LAMP stack.In 2015, he was introduced to React and GraphQL at a hackathon in Berlin, and after winning a prize for his project, he started to use these technologies professionally. Over the next few years, he helped multiple start-ups create cross-platform applications using React and React Native, including a start-up he co-founded. He also started giving workshops and talks at conferences around the globe. In 2019, he gave over 20 conference talks about React, React Native, and GraphQL, inspiring over 10,000 developers worldwide.
About the reviewers
Kirill Ezhemenskii is an experienced software engineer, frontend and mobile developer, solution architect, and a CTO at a healthcare company. He is also a functional programming advocate and an expert in React stack, GraphQL, and TypeScript. He is a React Native mentor.
Emmanuel Demey works with the JavaScript ecosystem on a daily basis. He spends his time sharing his knowledge with anyone and everyone. His first goal at work is to help the people he works with. He has spoken at French conferences (such as Devfest Nantes, Devfest Toulouse, Sunny Tech, and Devoxx France) about topics related to the web platform, such as JavaScript frameworks (Angular, React.js, Vue.js), accessibility, and Nest.js. He has been a trainer for 10 years at Worldline and Zenika (two French consulting companies). He also the co-leader of the Google Developer Group de Lille and the co-organizer of the Devfest Lille conference.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.packtpub.com and apply today. We have worked with thousands of developers and tech professionals, just like you, to help them share their insight with the global tech community. You can make a general application, apply for a specific hot topic that we are recruiting an author for, or submit your own idea.
Table of Contents
Title Page
Copyright and Credits
React Projects
About Packt
Why subscribe?
Contributors
About the author
About the reviewers
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Set up your machine
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
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
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
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
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
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
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
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
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
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
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
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
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
Leave a review - let other readers know what you think
Preface
This book will help you take your React knowledge to the next level by showing how to apply both basic and advanced React patterns to create cross-platform applications. The concepts of React are described in a way that's understandable to both new and experienced developers; no prior experience of React is required, although it would help.
In each of the 12 chapters of this book, you'll create a project with React, React Native, or React 360. The projects created in these chapters implement popular React features such as Higher-Order Components (HOCs) for re-using logic, the context API for state-management, and Hooks for life cycle. Popular libraries, such as React Router and React Navigation, are used for routing, while the JavaScript testing framework Jest is used to write unit tests for the applications. Also, some more advanced chapters involve a GraphQL server, and Expo is used to help you create React Native applications.
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 in understanding key concepts covered in this book.
The supported React versions for this book are:
React - v16.10.2
React Native - v0.59
React 360 - v1.1.0
What this book covers
Chapter 1, Creating a Movie List Application in React, will explore the foundation of building React projects that can scale. Best practices of how to structure your files, packages to use, and tools will be discussed and practiced. The best way to architect a React project will be shown by building a list of movies. Also, webpack and Babel are used to compile code.
Chapter 2, Creating a Progressive Web Application with Reusable React Components, will explain how to set up and re-use styling in React components throughout your entire application. We will build a GitHub Card application to see how to use CSS in JavaScript and re-use components and styling in your application.
Chapter 3, Build a Dynamic Project Management Board with React and Suspense, will cover how to create components that determine the dataflow between other components, so called HOCs. We will build a project management board to see the flow of data throughout an application.
Chapter 4, Build a SSR-Based Community Feed Using React Router, will discuss routing, ranging from setting up basic routes, dynamic route handling, and how to set up routes for server-side rendering.
Chapter 5, Build a Personal Shopping List Application Using Context API and Hooks, will show you how to use the React context API with Hooks to handle the data flow throughout the application. We will create a personal shopping list to see how data can be accessed and changed from parent to child components and vice versa with Hooks and the context API.
Chapter 6, Build an Application Exploring TDD Using Jest and Enzyme, will focus on unit testing with assertions and snapshots. Also, test coverage will be discussed. We will build a hotel review application to see how to test components and data flows.
Chapter 7, Build a Full Stack E-Commerce Application with React Native and GraphQL, will use GraphQL to supply a backend to the application. This chapter will show you how to set up a basic GraphQL server and access the data on this server. We will build an e-commerce application to see how to create a server and send requests to it.
Chapter 8, Build a House Listing Application with React Native and Expo, will cover scaling and structuring React Native applications, which is slightly different from web applications created with React. This chapter will outline the differences in the development environment and tools such as Expo. We will build a house listing application to examine the best practices.
Chapter 9, Build an Animated Game Using React Native and Expo, will discuss animations and gestures, which are what truly distinguishes a mobile application from a web application. This chapter will explain how to implement them. Also, the differences in gestures between iOS and Android will be shown by building a card game application that has animations and that responds to gestures.
Chapter 10, Creating a Real-Time Messaging Application with React Native and Expo, will cover notifications, which are important for keeping the users of the application up to date. This chapter will show how to add notifications and send them from the GraphQL server using Expo. We will learn how to implement all this by building a message application.
Chapter 11, Build a Full Stack Social Media Application with React Native and GraphQL, will cover building a full-stack application with React Native and GraphQL. The flow of data between the server and the application will be demonstrated, along with how data are fetched from the GraphQL server.
Chapter 12, Creating a Virtual Reality Application with React 360, will discuss how to get started with React 360 by creating a panorama viewer that gives the user the ability to look around in the virtual world and create components inside it.
To get the most out of this book
All the projects in this book are created with React, React Native, or React 360 and require you to have prior knowledge of JavaScript. Although all the concepts of React and related technologies are described in this book, we advise you to refer to React docs if you want to find out more about a feature. In the following section, you can find some information about setting up your machine for this book and how to download the code for each chapter.
Set up your machine
For the applications that are created in this book, you'll need to have at least Node.js v10.16.3 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 (should be v10.16.3 or higher):
node -v
For
npm
(should be v6.9.0 or higher):
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 Addons (https://addons.mozilla.org).
Download the example code files
You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.
You can download the code files by following these steps:
Log in or register at
www.packt.com
.
Select the
Support
tab.
Click on
Code Downloads
.
Enter the name of the book in the
Search
box and follow the onscreen instructions.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR/7-Zip for Windows
Zipeg/iZip/UnRarX for Mac
7-Zip/PeaZip for Linux
The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/React-Projects. In case there's an update to the code, it will be updated on the existing GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781789954937_ColorImages.pdf.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.
Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Reviews
Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!
For more information about Packt, please visit packt.com.
Creating a Movie List Application in React
When you bought this book, you'd probably heard of React before and probably 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. When you reach the end of this book, you will know how to work with React and its stable features, up until version 16.11, and you will also have experience with React Native and React 360.
This first chapter kicks off with us learning how to build a simple movie list application and provides you with an overview of popular movies 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 project with webpack and React
Structuring a React project
Let's dive in!
Project overview
In this chapter, we will create a movie list application in React that retrieves data from a local JSON file and runs in the browser with webpack and Babel. Styling will be done using Bootstrap. The application that you'll build will return a list of the highest-grossing movies as of 2019, along with some more details and a poster for every movie.
The build time is 1 hour.
Getting started
The application for this chapter will be built from scratch and uses assets that can be found on GitHub at https://github.com/PacktPublishing/React-Projects/tree/ch1-assets. These assets should be downloaded to your computer so that you can use them later on in this chapter. The complete code for this chapter can be found on GitHub as well: https://github.com/PacktPublishing/React-Projects/tree/ch1.
For applications that are created in this book, you'll need to have at least Node.js v10.16.3 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 (should be v10.16.3 or higher):
node -v
For
npm
(should be v6.9.0 or higher):
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 Addons (https://addons.mozilla.org).
Creating a movie list application
In this section, we will create a new 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 you're going to build a movie list application in this chapter, name this directory movieList.
Inside this new directory, execute the following from the command line:
npm init -y
Running this command will create a package.json file with the bare minimum of information that npm needs about this 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:
{ "name": "movieList", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}
As you can see, there are no dependencies for npm packages since we haven't installed any yet. The first package we'll be installing and configuring is webpack, which we'll do in the next part of this section.
Setting up webpack
To run the React application, we need to install webpack 4 (while writing this book, the current stable version of webpack is version 4) and webpack CLI as devDependencies. Let's get started:
Install these packages from
npm
using the following command:
npm install --save-dev webpack webpack-cli
The next step is to include these packages inside the
package.json
file and have them run in our start and build scripts. To do this, add the
start
and
build
scripts to our
package.json
file:
{ "name": "movieList", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {
_ "start": "webpack --mode development",
+ "build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}
The preceding configuration will add start and build scripts to our application using webpack. As you can see, npm start will run webpack in development mode and npm build will run webpack in production mode. The biggest difference is that running webpack in production mode will minimize our code to decrease the size of the project bundle.
Create a new directory inside our project called
src
and create a new file inside this directory called
index.js
. Later on, we'll configure webpack so that this file is the starting point for our application. Place the following line of code inside this newly created file:
console.log("movieList")
If we now run the npm start or npm build command at our command line, webpack will start up and create a new directory called dist. Inside this directory, there will be a file called main.js that includes our project code. Depending on whether we've run webpack in development or production mode, the code will be minimized in this file. You can check whether your code is working by running the following command:
node dist/main.js
This command runs the bundled version of our application and should return the movieList string as output in the command line. Now, we're able to run JavaScript code from the command line. In the next part of this section, we will learn how to configure webpack so that it works with React.
Creating a development server
While working in development mode, every time we make changes to the files in our application, we need to rerun the npm start command. Since this is a bit tedious, we will install another package called webpack-dev-server. This package adds the option to force webpack to restart every time we make changes to our project files and manages our application files in memory instead of by building the dist directory. The webpack-dev-server package can also be installed with npm:
npm install --save-dev webpack-dev-server
Also, we need to edit the start script in the package.json file so that it uses webpack-dev-server instead of webpack directly when running the start script:
{ "name": "movieList", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {
- "start": "webpack --mode development",
+ "start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC" ...}
The preceding configuration replaces webpack in the start scripts with webpack-dev-server, which runs webpack in development mode. This will create a local server that runs the application with the --open flag, which makes sure webpack is restarted every time an update is made to any of your project files.
Now, we've created the basic development environment for our React application, which you'll develop and structure further in the next section of this chapter.
Structuring a project
With the development environment set up, it's time to start creating the movie list application. First let's have a look at the current structure of the project, where two of the directories within our project's root directory are important:
The first directory is called
dist
and is where the output from webpack's bundled version of your application can be found
The second one is called
src
and includes the source code of our application:
movieList|-- dist |-- index.html |-- main.js|-- node_modules|-- src |-- index.js |-- index.html.babelrcpackage.jsonwebpack.config.js
In the following subsections, we will learn how to structure our React projects. This structure will be used in the rest of the chapters in this book as well.
Summary
In this chapter, you've created a movie list application for React from scratch and learned about core React concepts. This chapter started with you creating a new project with webpack and Babel. These libraries help you compile and run your JavaScript and React code in the browser with minimal setup. Then, we described how to structure a React application. This structure will be used throughout this book. The principles that were applied provided you with the basics from which to create React applications from nothing and structure them in a scalable way.
If you've been working with React before, then these concepts probably weren't that hard to grasp. If you haven't, then don't worry if some concepts felt strange to you. The upcoming chapters will build upon the features that you used in this chapter, giving you enough time to fully understand them.
The project you'll build in the next chapter will focus on creating reusable React components with more advanced styling. This will be available offline since it will be set up as a Progressive Web Application (PWA).
Further reading
Thinking in React
https://reactjs.org/docs/thinking-in-react.html
Bootstrap
https://getbootstrap.com/docs/4.3/getting-started/introduction/
ESLint
https://eslint.org/docs/user-guide/getting-started
Creating a Progressive Web Application with Reusable React Components
Do you already feel familiar with React's core concepts after completing the first chapter? Great! This chapter will be no problem for you! If not, don't worry – most of the concepts you came across in the previous chapter will be repeated. However, if you want to get more experience with webpack and Babel, it's recommended that you try creating the project in Chapter 1, Creating a Movie List Application in React, again since this chapter won't be covering those topics.
In this chapter, you'll work with Create React App, a starter kit (created by the React core team to get you started with React quickly) that can be used as a Progressive Web App (PWA) – a web application that behaves like a mobile application. It will make the configuration of module bundlers and compilers such as webpack and Babel unnecessary as this will be taken care of in the Create React App package. This means you can focus on building your GitHub portfolio application as a PWA that reuses React components and styling.
Alongside setting up Create React App, the following topics will be covered in this chapter:
Creating a Progressive Web App
Building reusable React components
Styling in React with
styled-components
Can't wait? Let's continue!
Project overview
In this chapter, we will create a PWA that has reusable React components and styling using Create React App and styled-components. The application will use data fetched from the public GitHub API.
The build time is 1.5-2 hours.
Getting started
The project you'll create in this chapter will use the public API from GitHub, which you can find at https://developer.github.com/v3/. To be able to use this API, you need to have a GitHub account, since you'll want to retrieve information from a GitHub user account. If you don't have a GitHub account yet, you can create one by registering on its website. Also, you need to download the GitHub logo pack from here: https://github-media-downloads.s3.amazonaws.com/GitHub-Mark.zip. The complete source code for this application can also be found on GitHub: https://github.com/PacktPublishing/React-Projects/tree/ch2.
GitHub portfolio application
In this section, we will learn how to create a new React project using Create React App and set it up as a PWA that reuses React components and styling with styled-components.
Creating a PWA with Create React App
Having to configure webpack and Babel every time we create a new React project can be quite time-consuming. Also, the settings for every project can change and it becomes hard to manage all of these configurations when we want to add new features to our project.
Therefore, the React core team introduced a starter kit known as Create React App and released a stable version of it, 2.0, in 2018. By using Create React App, we no longer have to worry about managing compile and build configurations, even when newer versions of React are released, which means we can focus on coding instead of configurations. Also, it has features we can use to easily create a PWA.
A PWA is usually faster and more reliable than regular web applications as it focuses on an offline/cache-first approach. This makes it possible for users to still open our application when they have no or a slow internet connection due to its focus on caching. Also, users can add our application to the home screen of their smartphone or tablet and open it like a native application.
