28,14 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 213
Veröffentlichungsjahr: 2019
Ähnliche
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 RamchandaniContent Development Editor: Mohammed Yusuf ImaratwaleTechnical Editor: Aishwarya MoreCopy Editor: Safis EditingProject Coordinator: Kinjal BariProofreader: Safis EditingIndexer: Manju ArasanGraphics: Alishon MendonsaProduction 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
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.
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.packt.com/submit-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.
Introducing Create React App 2
This book will be a guide on how to effectively use Create React App 2 (CRA) to create a new React project and build the web project of your dreams! We will cover many topics, including how to install Create React App, the project structure you get by default, and how to add code and libraries to your project. We will explore everything you'll need to be able to build complex, modern web applications using the latest and greatest of the most common React project configurations and compilations.
To be able to do this however, we first need to take a little time to talk about the project itself, its humble beginnings, and what problems it is ultimately attempting to solve. By understanding the history and the intention, we can better understand how to take full advantage of the toolset we are provided and also understand where and why limitations exist.
In this chapter, we'll discuss what Create React App is and what it brings to the table. By the time you're done with this chapter, you'll understand why Create React App is so important and how it helps the developer get more done in less time overall. We'll also discuss what topics the book will cover, the format itself, and how to best follow along.
In this chapter we will be looking at the following topics:
Starting a new Create React App project
The commands for starting and stopping your server
The commands for running tests
The commands for creating production-ready builds
The commands for exiting the Create React App confines to further tune and configure your project
What is Create React App?
A lot of different programming languages, tools, and frameworks have a number of different ways to jumpstart development for their particular toolset. Sometimes this requires downloading a bunch of libraries, or getting started with a pre-built binary file or compressed archive for the right architecture, operating system, or other configurations. Sometimes it has a nice pre-built pathway to get started in a way that minimizes frustration but potentially limits available options.
The trouble, however, is that with a lot of JavaScript frameworks, there was not a similar option. Getting started using any particular framework or technology was actually a markedly difficult problem to solve, due to differing combinations of every person's skill set, operating system, and task.
Create React App is JavaScript 's answer to the getting started toolset that did not exist in any particularly approachable way. Generally speaking, to get started with a project, you'd have to learn a large number of supporting technologies and techniques before you could really get moving. You'd have to know a configuration framework, such as Babel, Webpack, Brunch, or Gulp. As well, you would have to know how to get a project structure going in JavaScript. After you've figured everything else out, you'd have to learn how to set up a development server that auto-reloads changes on the fly. After all of that, you still have to figure out how to set up your testing framework, React, and any additional libraries you want. This ends up being a huge amount of effort, and that's just to get started. It's compounded by the fact that every single piece of framework and configuration that you're developing expertise with might not transfer into your next job! Instead, Create React App aims to do something different: make configuration and setup a one-step process. This allows you to focus on getting started and building your application earlier, and worry about the more in-depth portions of work later. You can focus more time on writing your code and less time on configuring a great development environment. Your environment in a Create React App application will already be a great development environment, and that's a fantastic removal of barriers and obstacles for developers, both new and seasoned!
The Command-line interface (CLI) tool provides a great development environment that encourages rapid iteration and test-driven techniques. We have a lot of the configuration and specific libraries figured out for us so we don't have to do that legwork. Moreover, you're never locked in to any choices you make. The Create React App team included an eject option that pulls the entirety of the application you've been developing and turns it into a standard webpack or babel build, for example, that can be plugged into anything compatible with Node Package Manager (NPM). You don't have to be worried about having to duplicate a huge amount of effort to transfer your code from Create React App to your own project or a specific environment configuration and setup at your job; you can just make something that transfers nicely, safely, and cleanly. You can even tweak the configuration at this step (after ejection) and further make this application your own!
What is the history of Create React App?
To better understand where Create React App succeeds, we have to understand where the JavaScript development world started. We need to see the warts of the system to know why certain things were fixed and how they were fixed. Let's talk a little bit about the history of JavaScript development and some of the main issues that developers were running into frequently!
The early days of JavaScript development
To start, you need to dive back into the past of dealing with JavaScript code in the frontend. For a long time, you would end up with these JavaScript files that you'd just download off of a content delivery network (CDN) somewhere, throw into your frontend code, write a bunch of extra JavaScript code in front of that, and call it a day.
This was nice in the sense that you had your dependencies locked down to whatever version you downloaded and stuck on the server, and whatever you deployed was pretty easy to develop against because all of the dependencies were already there and ready to go. Unfortunately, it introduced a ton of problems in many other ways. For one, you would run into issues constantly where one of the libraries you downloaded was completely incompatible with a specific version of one of the specific versions of another library, and often that was a complex and difficult process. The way most people solved that problem was divided into a few camps:
Going through and finding all of the incompatibilities and fixing them
Writing complex glue code that would make the libraries behave together by wrapping one of the libraries and providing a means for the two libraries to work together
Downloading a different version of the library just for another library and storing them separately, resulting in giant JavaScript bundles when you load the web page because you're probably downloading two to three different versions of something, such as jQuery
The bundle era
To solve this problem, it was important to solve the dependency problem in general. The move toward Node.js-based tools, such as npm, helped significantly, because now your dependencies would be pulled from a centralized location and versioning became a first-class citizen of JavaScript development, which was fantastic!
What was less fantastic, however, was when you needed to apply this problem to browser code and rich web applications. Often, this meant an intricate dance of understanding what libraries were required for which projects. If you wanted to use React with JSX (we'll talk more about this later), as well as the latest JavaScript syntax, you needed to know exactly what versions of React and Babel to include. You'd also need to understand which Babel plugins you'd need to have to support your use of whatever draft of JavaScript syntax.
Do you want to use some CSS transformers or any other language help, such as TypeScript or Flow, in your React project? If so, building and configuring your project becomes markedly more difficult, and we haven't even gotten to the problem of getting this code put together to be used on the browser! Now you needed to have a wide breadth of knowledge just to get your project started, and a wide depth of knowledge for knowing how to set up and configure something such as Webpack, Bundler, Grunt, Gulp, or Brunch!
This is the point of development that we were in before the prevalence of command-line tools and configuration utilities, so let's dive into that by talking about what problems Create React App solves!
