Create React App 2 Quick Start Guide: Build React applications faster with Create React App
()
About this ebook
Integrate your React applications with React to build efficient web services.
Key Features
- Learn React by building applications with Create React App
- Create interactive UIs exploring the latest feature of CRA 2.0
- Build Progressive Web Applications for a more seamless web
Book Description
If you're a power user and you aren't happy always reusing default configurations, from previous applications with each new application, then all you need is Create React App (CRA), a tool in the React ecosystem designed to help you create boilerplate code for building a web frontend.
This book will help you use CRA to write React programs without significant configuration-related difficulties. With this quick start guide, you will integrate your applications with React to build efficient professional web services.You will learn to design UIs with the features of CRA and template your React applications.
By the end of the book, you will be sufficiently skilled to be able to build faster and effective React apps using CRA.
What you will learn
- Become familiar with React by building applications with Create React App
- Make your frontend development hassle free
- Create interactive UIs exploring the latest features of CRA 2
- Build modern, React projects with, SASS,and progressive web applications
- Develop proxy backend servers and simulate interaction with a full backend
- Keep your application fully tested and maintain confidence in your project
Who this book is for
The book is intended for the web developers who want to jump into building great frontend with React using easy templating solutions.
Related to Create React App 2 Quick Start Guide
Related ebooks
Hands-On Full Stack Development with Spring Boot 2.0 and React: Build modern and scalable full stack applications using the Java-based Spring Framework 5.0 and React Rating: 0 out of 5 stars0 ratingsReact 16 Tooling: Master essential cutting-edge tools, such as create-react-app, Jest, and Flow Rating: 0 out of 5 stars0 ratingsBeginning React: Simplify your frontend development workflow and enhance the user experience of your applications with React Rating: 0 out of 5 stars0 ratingsReact Projects: Build 12 real-world applications from scratch using React, React Native, and React 360 Rating: 0 out of 5 stars0 ratingsWebpack 5 Up and Running: A quick and practical introduction to the JavaScript application bundler Rating: 0 out of 5 stars0 ratingsReact and React Native: Complete guide to web and native mobile development with React, 2nd Edition Rating: 0 out of 5 stars0 ratingsMastering Flask Web Development: Build enterprise-grade, scalable Python web applications, 2nd Edition Rating: 0 out of 5 stars0 ratingsNext.js Quick Start Guide: Server-side rendering done right Rating: 0 out of 5 stars0 ratingsHands-On Design Patterns with React Native: Proven techniques and patterns for efficient native mobile development with JavaScript Rating: 0 out of 5 stars0 ratingsASP.NET Core 3 and React: Hands-On full stack web development using ASP.NET Core, React, and TypeScript 3 Rating: 0 out of 5 stars0 ratingsBeginning GraphQL: Fetch data faster and more efficiently whilst improving the overall performance of your web application Rating: 0 out of 5 stars0 ratingsMastering Spring 5: An effective guide to build enterprise applications using Java Spring and Spring Boot framework, 2nd Edition Rating: 0 out of 5 stars0 ratingsIsomorphic JavaScript Web Development: Universal JavaScript with React and Node Rating: 0 out of 5 stars0 ratingsReact.js Design Patterns: Learn how to build scalable React apps with ease (English Edition) Rating: 0 out of 5 stars0 ratingsReact Application Architecture for Production: Learn best practices and expert tips to deliver enterprise-ready React web apps Rating: 0 out of 5 stars0 ratingsASP.NET Core 5 and React: Full-stack web development using .NET 5, React 17, and TypeScript 4 Rating: 0 out of 5 stars0 ratingsReact Design Patterns and Best Practices Rating: 0 out of 5 stars0 ratingsProgressive Web Application Development by Example: Develop fast, reliable, and engaging user experiences for the web Rating: 0 out of 5 stars0 ratingsMastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, 2nd Edition Rating: 0 out of 5 stars0 ratingsReactJS for Jobseekers: The Only Guide You Need to Learn React and Crack Interviews (English Edition) Rating: 0 out of 5 stars0 ratingsSpring 5.0 By Example: Grasp the fundamentals of Spring 5.0 to build modern, robust, and scalable Java applications Rating: 0 out of 5 stars0 ratingsHands-On Reactive Programming with Reactor: Build reactive and scalable microservices using the Reactor framework Rating: 0 out of 5 stars0 ratings
Internet & Web For You
Coding For Dummies Rating: 5 out of 5 stars5/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5Wireless Hacking 101 Rating: 5 out of 5 stars5/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsTor and the Dark Art of Anonymity Rating: 5 out of 5 stars5/5The $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 4 out of 5 stars4/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5No Place to Hide: Edward Snowden, the NSA, and the U.S. Surveillance State Rating: 4 out of 5 stars4/5JavaScript All-in-One For Dummies Rating: 5 out of 5 stars5/5How to Be Invisible: Protect Your Home, Your Children, Your Assets, and Your Life Rating: 4 out of 5 stars4/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5Get Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsPodcasting For Dummies Rating: 4 out of 5 stars4/5Cybersecurity All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsContent Chemistry: The Illustrated Handbook for Content Marketing Rating: 5 out of 5 stars5/5The Hacker Crackdown: Law and Disorder on the Electronic Frontier Rating: 4 out of 5 stars4/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5Surveillance and Surveillance Detection: A CIA Insider's Guide Rating: 3 out of 5 stars3/5HTML in 30 Pages Rating: 5 out of 5 stars5/5The Gothic Novel Collection Rating: 5 out of 5 stars5/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5Cybersecurity For Dummies Rating: 5 out of 5 stars5/5The Mega Box: The Ultimate Guide to the Best Free Resources on the Internet Rating: 4 out of 5 stars4/5An Ultimate Guide to Kali Linux for Beginners Rating: 3 out of 5 stars3/5The Cyber Attack Survival Manual: Tools for Surviving Everything from Identity Theft to the Digital Apocalypse Rating: 0 out of 5 stars0 ratingsGrokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5
Reviews for Create React App 2 Quick Start Guide
0 ratings0 reviews
Book preview
Create React App 2 Quick Start Guide - Brandon Richey
Create React App 2 Quick Start Guide
Build React applications faster with Create React App
Brandon Richey
BIRMINGHAM - MUMBAI
Create React App 2 Quick Start Guide
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 Ramchandani
Content Development Editor: Mohammed Yusuf Imaratwale
Technical Editor: Aishwarya More
Copy Editor: Safis Editing
Project Coordinator: Kinjal Bari
Proofreader: Safis Editing
Indexer: Manju Arasan
Graphics: Alishon Mendonsa
Production Coordinator: Shraddha Falebhai
First published: February 2019
Production reference: 1250219
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-78995-276-6
www.packtpub.com
To my wonderful wife, Nicole, for supporting me throughout the process of writing this book, and to my lovely daughters, Elaine and Amelia, who remain a constant light in my life. This is all for you!
– Brandon Richey
mapt.io
Mapt is an online digital library that gives you full access to over 5,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
Mapt is fully searchable
Copy and paste, print, and bookmark content
Packt.com
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
Brandon Richey is software engineer and React enthusiast who has written a large number of popular React tutorials. He has been making professional and hobby programming projects spanning healthcare, personal sites, recruiting, and game development for nearly 20 years! When not programming, Brandon enjoys spending time with his family, playing (and making) video games, and working on his drawings and paintings.
About the reviewer
John Tucker has a broad development and soft-skills background. His recent focus has been all things JavaScript. He is an active writer on Medium.
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
Create React App 2 Quick Start Guide
Dedication
About Packt
Why subscribe?
Packt.com
Contributors
About the author
About the reviewer
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
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
Introducing Create React App 2
What is Create React App?
What is the history of Create React App?
The early days of JavaScript development
The bundle era
What problems does CRA solve?
Installing prerequisites for Create React App
Creating our first Create React App project
A quick look at the options of CRA
The yarn start command
The yarn build command
The yarn test command
The yarn eject command
Let's explore the created project
Adding code to our project
Creating our first component
Wait, what is JSX?
Embedding style sheets in our component
Looking forward – what will we do?
The project plan
Summary
Creating Our First Create React App Application
Creating our first major project
Designing our application
Building the baseline functionality for our application
Creating our project
Initializing our components to build on top off
Building separate components in separate files
Introducing props
Writing a class-based component
Bringing state into our component
Adding interactivity via state modifications
Indicating our state with CSS
Iterating our project further
Building a List component
Adding the TodoList to our App
Adding state to TodoList
Creating and using a helper render() function
Creating a new Todo component
Passing a function as a prop
Removing items is important too
Summary
Create React App and Babel
Babel and the latest JavaScript syntax
What is Babel?
Understanding the history
Where does Babel fit into the puzzle?
Exploring modern JavaScript with Babel
JSX
Function syntax
Destructuring
Optional arguments
The spread operator
React Fragments
A quick recap
Summary
Keep Your App Healthy with Tests and Jest
The why and when of testing
The history of testing React
About Jest
Analyzing the structure of Jest tests
Exploring the test output
A development test workflow with the F key
It's time to add some new tests!
Writing a generic snapshot test
Writing tests for content
What’s a shallow render?
Testing interactions
Completing our interactivity tests
Returning to our mocked function
Adding tests for TodoList
Adding tests for NewTodo
Summary
Applying Modern CSS to Create React App Projects
What tools are available?
CSS conflicts can ruin your application
A quick example of CSS conflicts
Introducing CSS Modules
Better project organization
How to use CSS Modules
Introducing CSS Modules to our application
Composability with CSS Modules
Introducing SASS to our project
What is SASS?
Installing and configuring SASS
Mixing SASS and CSS Modules
Adding CSS frameworks
Cleaning up our design, starting with the header
Cleaning up the NewTodo component
Cleaning up our Todo component
Making our tests pass again
Summary
Simulate Your Backend with a Proxy API
Simulating a backend server with the proxy API
Setting up the backend API
Figuring out our backend requests
Building the Todos index API request
Building the add Todo API request
Building the remove Todo API request
The React component life cycle for mounting
Where to put API requests
Communicating with your proxy server with React
Working with Async/Await
Introducing Fetch
Getting our list of Todos from the server
Creating a new Todo on the server
Deleting a Todo
Getting back to passing tests
Fixing the Todo test
Fixing our last failing test suite through refactoring
Building service libraries
Implementing our service library in TodoList
Finally fixing our last failing test suite
Summary
Building Progressive Web Applications
Understanding and building PWAs
What is a PWA?
How do we define a PWA?
Building a PWA in Create React App
Starting with our manifest file
Viewing our manifest file in action with Chrome
Exploring the manifest file options
name and short_name
icons
start_url
background_color
display
orientation
scope
theme_color
Customizing our manifest file
Hooking up Service Workers
What is a Service Worker?
The Service Worker life cycle
How can we use a Service Worker in our app?
Summary
Getting Your App Ready for Production
Adding other libraries
Other popular React libraries
React Router
React Final Form
Adding Redux for state management
Creating a production build
How to create a production build
Thoughts on the deployment process
Ejecting our project
How to eject
Drawbacks of using eject
Summary
Other Books You May Enjoy
Leave a review - let other readers know what you think
Preface
Create React App is, in my mind, the ultimate example of a proper bootstrapping tool. Instead of the multiple hours of tedium getting everything tweaked and configured to be just right and hoping that you haven't missed anything along the way, you are instead given a tool and a project that is built and ready to go from the first minute you want to start embarking on your project. Now, the start up time to get moving on a project that is fully-featured goes from hours, or maybe even days, to minutes, and nothing is stopping you from building the React project of your dreams!
This book is intended for those that want to get intimately familiar with the Create React App tool. We'll cover all of the commands, all of the new additions in version 2, and we'll cover actually building a project from scratch and touching on all of the key concepts along the way to make sure you're able to take advantage of this tool to the absolute fullest!
Who this book is for
This book is designed for anyone with some JavaScript knowledge who is looking to take better advantage of the Create React App bootstrap tool to get started building their own amazing React projects. If you're looking to get better at JavaScript and building projects with best practices in mind, this book will also be for you! Even if you're a React veteran who has just never or rarely used Create React App to get started with their projects, this book will still give you plenty to learn from and work with!
What this book covers
Chapter 1, Introducing Create React App 2, gets you started with Create React App and helps you to understand the prerequisites and commands you'll need in order to get moving!
Chapter 2, Creating Our First Create React App Application, establishes the foundations of the project that we'll use for the remainder of the book. This will cover the basics of setting up a Create React App project.
Chapter 3, Create React App and Babel, explains the latest changes that Babel supports and how to write superior modern JavaScript using the latest features.
Chapter 4, Keep Your App Healthy with Tests and Jest, delves into how to maintain a healthy software development life cycle by covering testing in detail.
Chapter 5, Applying Modern CSS to Create React App Projects, is where we'll learn modern techniques to make our projects look beautiful and keep our style sheets organized in a sane way.
Chapter 6, Simulate Your Backend with a Proxy API, experiments with building a pseudo backend to our project and introduces techniques for pulling live data from servers using Fetch.
Chapter 7, Building Progressive Web Applications, experiments with using service workers built into Create React App 2 in order to build a progressive web application.
Chapter 8, Getting Your App Ready for Production, is where we'll finish putting the application together, making it production ready, and creating a build that can be deployed to a production environment.
To get the most out of this book
You'll need to have some experience of setting up Node.js on your computer and of programming, and you'll also require a compatible code editor, preferably one that will show you the directory structure of your projects.
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.packt.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 & Errata
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/Create-React-App-2.0-Quick-Start-Guide. 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://www.packtpub.com/sites/default/files/downloads/9781789952766_ColorImages.pdf.
Conventions used
There are a number of text conventions used throughout this book.
CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: At the very top of the App.js file, we're going to add our import statement.
A block of code is set as follows:
const App = () => {
return
};
Any command-line input or output is written as