Discover millions of ebooks, audiobooks, and so much more with a free trial

From $11.99/month after trial. Cancel anytime.

Create React App 2 Quick Start Guide: Build React applications faster with Create React App
Create React App 2 Quick Start Guide: Build React applications faster with Create React App
Create React App 2 Quick Start Guide: Build React applications faster with Create React App
Ebook325 pages2 hours

Create React App 2 Quick Start Guide: Build React applications faster with Create React App

Rating: 0 out of 5 stars

()

Read preview

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.

LanguageEnglish
Release dateFeb 27, 2019
ISBN9781789955668
Create React App 2 Quick Start Guide: Build React applications faster with Create React App

Related to Create React App 2 Quick Start Guide

Related ebooks

Internet & Web For You

View More

Related articles

Reviews for Create React App 2 Quick Start Guide

Rating: 0 out of 5 stars
0 ratings

0 ratings0 reviews

What did you think?

Tap to rate

Review must be at least 10 words

    Book preview

    Create React App 2 Quick Start Guide - Brandon Richey

    Create React App 2.0 Quick Start Guide

    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

    App>Homepage!
    ;

    };

    Any command-line input or output is written as

    Enjoying the preview?
    Page 1 of 1