Search icon CANCEL
Subscription
0
Cart icon
Cart
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Beginning React
Beginning React

Beginning React: Simplify your frontend development workflow and enhance the user experience of your applications with React

By Andrea Chiarelli
$16.99
Book Jul 2018 96 pages 1st Edition
eBook
$13.99 $8.99
Print
$16.99
Subscription
$15.99 Monthly
eBook
$13.99 $8.99
Print
$16.99
Subscription
$15.99 Monthly

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Black & white paperback book shipped to your address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now
Table of content icon View table of contents Preview book icon Preview Book

Beginning React

Chapter 1. Introducing React and UI Design

React is definitely one of the most talked about libraries on the web. It has become as popular as jQuery was in its prime, and more and more developers choose it to build the user interface of their web applications. Why has it become so popular? Why is this JavaScript library so innovative compared to others?

We will try to provide answers to these questions in this book by showing what the library offers, and by using it to build efficient web user interfaces.

In this chapter, we will introduce React and we will start building the basic infrastructure of a React-based application. Then, we will analyze how to design a user interface so that it can be easily mapped to React components, exploiting the best from React's internal architecture.

By the end of this chapter, you will be able to:

  • Describe what React is and where it fits in the development of your applications
  • Set up the infrastructure of a React-based application
  • Design the UI of your application, optimizing it for use in React

What is React?


To put it simply, React is a JavaScript library for building composable user interfaces. This means that we can build a user interface by composing items called components. A component is an element that contributes to building a user interface. It could be a textbox, a button, a whole form, a group of other components, and so on. Even the entire application's user interface is a component. So, React encourages the creation of components to build a user interface; it's even better if these components are reusable.

React components have the ability to present data that changes over time, and the visualization of that changing data is automatic when we follow a few guidelines.

Since the library deals with user interfaces, you may wonder which presentational design patterns React was inspired by: Model-View-Controller, Model-View-Presenter, Model-View-ViewModel, or something else. React is not bound to a specific presentational pattern. React implements the View part of the most common patterns, leaving developers free to choose the best approach to implement the model, the presenter, and everything else they need to build their application. This aspect is important, since it allows us to classify it as a library, not as a framework; therefore, comparisons with frameworks such as Angular may throw up some inconsistencies.

How to Set up a React-Based Application


React is a JavaScript library, so we should be able to make a reference to it through a <script> tag in our HTML page and start writing our web application. However, this approach would prevent us from exploiting some features that are provided by a modern JavaScript development environment—features that make our lives easier. For example, we wouldn't be able to use recent features from ECMAScript 2015+, such as classes, modules, arrow functions, let and const statements, and so on. Or, we could use those features, but only recent browsers would support them.

Note

The relationship of ECMAScript with JavaScript Using the latest ECMAScript features requires a true development environment, allowing us to transpile our code into ECMAScript 5 version JavaScript code, so that even older browsers will be able to run our application. Setting up a modern JavaScript development environment requires the installation and configuration of a few tools: a transpiler, a syntax checker, a module bundler, a task runner, and so on. Learning to use these tools properly requires a lot of time, even before starting to write a single line of code.

Installing create-react-app

Fortunately, we can use create-react-app, a command-line interface (CLI) tool that allows us to set up a React-based application without needing to configure any of the aforementioned tools. It is based on Node.js and provides commands to set up and modify a React application in an immediate way.

In order to install create-react-app, you need Node.js installed on your machine. You can install the CLI by typing the following command in a console window:

npm install -g create-react-app

After installation, you can verify whether it is properly installed by typing the following command:

create-react-app --version

If all is OK, the installed version of create-react-app will be shown.

Creating Your First React Application

Now that the development environment is installed, let's create our first React application. We can do this by typing the following command in a console window:

create-react-app hello-react

This command tells create-react-app to set up all of the prerequisites for a React-based application named hello-react. The creation process may take several minutes, since it has to download the npm packages needed for the project.

Note

npm is the standard package manager of the Node.js environment. When the process ends, you will find a list of the available commands that you can run to manage the project on the screen. We will return to this later. The result of the project creation will be a folder named hello-react, inside of which you will find the items composing a dummy—but working—React-based application.

Activity: Creating an Application with create-react-app

Scenario

We need to set up a development environment in order to create a product catalog application built with React.

Aim

The aim of the activity is to start becoming familiar with create-react-app and the content it creates.

Steps for Completion

  1. Use create-react-app to create the development environment
  2. Give the name my-shop to the sample application

Solution

There is no formal solution. You should focus on the content created by create-react-app, as we are going to analyze it in the following sections.

Exploring the Generated Content

Let's take a look at the files generated by create-react-app, so that we can get an understanding of the structure of a React-based application. We will find these files and folders inside of the HELLO-REACT folder as shown in the following screenshot:

In the root folder, we can see a README.md file, the package.json file, and the .gitignore file.

The README document contains references to all you need to start building a React-based application. It is written in Markdown format, and you can integrate or overwrite it with your own documentation.

Note

Markdown is a simple markup language, often used to create technical documentation for software libraries. It requires a simple text editor, and it is possible to convert a Markdown document into HTML.

The package.json file contains information about the project, such as the name, the version, and so on, and references to all the npm packages used by the current project. This is a Node.js asset that allows you to download the required packages when copying the project to another machine. It also contains the definitions of scripts that allow us to manage the project itself.

The following is an example of package.json file content:

{
  "name": "hello-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

As we can see, the file's content is a JSON object, with a few easy to recognize properties. In particular, we can identify the project's name, the version, and package dependencies. Apart from the name and version properties, usually, you don't need to manually change these settings.

The .gitignore file is a hidden file in Unix-based systems, and it allows us to track which file(s) to ignore when using Git as a version control system. The create-react-app tool added this file because nowadays, it is essential to have a project under version control. It suggests Git, since it is one of the most popular version control systems.

The public folder contains the static parts of our application:

  • favicon: This is the icon shown in the browser's address bar and is used for bookmarks
  • index.html: This is the HTML page containing the reference to our React code and providing a context to React rendering
  • manifest.json: This is a configuration file containing metadata according to the Progressive Web Apps (PWA) criteria

In particular, the index.html file is the starting point of our application. Let's take a look at it so that we can understand what's special about it:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
...
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
  <div id="root"></div>
...
</html>

As we can see, it is a standard HTML page; however, a few things should be noted. First of all, we see a link to the manifest.json file:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

This manifest contains metadata for configuring our app as a PWA.

Note

Progressive web apps are web applications that work for every browser and every platform, even offline. Their basic tenet is responsiveness and progressive enhancement.

The second thing we notice is the %PUBLIC_URL% placeholder in both link references:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

This placeholder will be replaced with the actual URL of the public folder during the build process.

The body of the HTML page contains an empty div with a root identifier. This is an important item for the correct setup of our React application, as we will soon see. Apart from the <noscript> tag, we do not see any other element in the body. However, we need a binding between the HTML page and the JavaScript. The build process will be responsible for adding the required scripts to the body.

Note

We can add any other required items to the HTML page, such as meta tags, web fonts, and so on. However, remember that files referenced inside the HTML markup should be put in the public folder. The node_modules folder contains the npm packages used by the project. Usually, you don't need to directly manage these files.

The most important folder for developing our application is the src folder. It contains the basic files, with the code that we can modify for our purposes.

In particular, we will find the following files:

  • index.js: Contains the starting point of our application
  • index.css: Stores the base styling for our application
  • App.js: Contains the definition of the main component of the sample application
  • App.css: Contains the styling of the App component
  • logo.svg: This is the React logo
  • App.test.js: Stores the basic unit test involving the App component
  • registerServiceWorker.js: Contains the code to register the service worker in order to allow offline behavior, as per the PWA requirements

Let's analyze the content of a couple of these files, since their code is fundamental to understanding how the startup of a React application works.

Let's start with the index.js file. Its content is shown as follows:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

It is an ECMAScript 2015 module, importing other modules. In particular, it imports the React and ReactDOM objects from the react and react-dom modules, respectively. Both modules are part of the React library and are stored inside the node_modules folder.

The react module provides functionality for component creation and state management. The react-dom module is the glue between React components and the HTML DOM. The React library has been split into two modules in order to separate the component management from the actual rendering. This separation may be useful when we want to target a rendering platform that is not the web; for example, if we want to target native mobile rendering.

Other modules are imported from the same folder as the index.js file. In particular, we import the App component from the App module. The App component is used by the render() method of the ReactDOM object in order to bind it to the div element in the HTML page. This magic is performed by the following statement:

ReactDOM.render(<App />, document.getElementById('root'));

For the moment, let's ignore the syntax used to render the App component. This will be covered in the next chapter. The meaning of this statement is to associate the React App component defined inside the App module with the HTML element identified by the root ID.

The registerServiceWorker() function import and invocation enables the support for offline behavior, in line with the PWA specification, while the import of index.css makes the CSS styling available to the application.

The App.js file contains the definition of the React component representing the application. Its content looks like the following:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
...
export default App;

Let's take a quick look at the code, since it will be covered in detail in the next chapter. For the moment, we only want to get a very basic idea of how a React component is defined. Here, we see a module importing a few items from other modules, defining the App class by inheriting from the Component class and exporting the App class itself as a default export. That's all, for the moment. We will cover this code in depth in the next chapter, understanding its meaning in detail.

The create-react-app Commands

The create-react-app CLI provides a few commands to manage our React project. These commands appear in the form npm <command>, since they are based on the npm.

Note

If you prefer to use YARN as a package manager, you should replace yarn wherever you find npm.

The npm start Command

The first command we will cover is npm start. This command starts a development web server accepting requests at http://localhost:3000.

So, after launching this command, we can open a browser and see the following result:

The development web server has a hot reloading system that allows us to change the code of our application and get the page refreshed in the browser after saving the file.

Changing File Content and Viewing the Result

This following steps show how changing the content of a file causes the application to reload in the browser:

  1. Open a console window.
  2. Go to the hello-react folder.
  3. Run npm start.
  4. Launch a browser and go to http://localhost:3000.
  5. Launch a text editor and open the App.js file.
  6. Search for the following line of code:
To get started, edit <code>src/App.js</code> and save to reload.
  1. Replace the code mentioned in step 6 with the following line of code:
Hello React!
  1. Save the file.
  2. Check the browser content. Now it should display the new text.
Activity: Starting and Changing the Application

Scenario

We want to change the title of the application that was created in the previous activity.

Aim

The aim of the activity is to become familiar with launching an application and appreciating the hot reloading feature.

Steps for Completion

  1. Start the application so that you can see it in a browser
  2. Edit the App.js file and set the title to My Shop

Solution

There is no formal solution. You should focus on getting the title correctly changed and the application running.

The npm test Command

create-react-app promotes the use of unit tests by generating a sample unit test file, as we have already seen, and by providing a set of tools to run such tests.

These tools are based on Jest, and we can run the tests written within our application by running the following command:

npm test

This command will start running our test and will show the results, as shown in the following screenshot:

The npm run build Command

When we are ready to move our application into the production environment, we need the artifacts to publish. We can produce these artifacts by running the following command:

npm run build

The result of running this command is a new BUILD folder where we will find all of the files that we need to move into a production environment. The command carries out some processing on the files of our development environment. Put simply, it translates all of the ES2015 code we wrote into ES5 compatible code, so that it is also available for older browsers. This process is called transpilation. In addition, it reduces the size of the code itself, allowing for faster downloading over the network. This process is called minification. Finally, it takes the files in our development environment and combines them into a few files, called bundles, in order to decrease network requests.

The following screenshot shows the content of the BUILD folder of the sample application:

To publish the production build of our application, we can just copy the content of the BUILD folder into the production server's folder.

Note

The result of the production build assumes that the artifact will be published into the web server root, that is, at a location where the application will be accessible through a URL such as http://www.myapplication.com. If we need to publish the application in a root's subfolder, that is, at a location where the application will be accessible through a URL such as http://www.myapplication.com/app, we need to make a slight change to the package.json file. In this case, we need to add a homepage key to the configuration JSON with the URL as its value, as shown here:"homepage": "http://www.myapplication.com/app".

The npm run eject Command

The last command we will cover is the eject command:

npm run eject

We can use this command when we are confident in using the tools underlying create-react-app and we need to customize the environment configuration. This command takes our application out of the CLI context and gives us the power and responsibility to manage it.

Note

This is a one-way process. If we leave the create-react-app context for our application, we cannot go back.

How to Design a UI


Now, we are going to see how we can design our application so that it fits well when implemented with React.

Everything Is a Component

The main concept introduced by React in user interface design and implementation is the component concept. A user interface is an aggregate of components, and the whole React application is an aggregate of components. We will now see in more detail what components are from a design point of view.

Note

From a design point of view, we can say that a component is a part of the user interface, having a specific role. A hierarchy of components is often called a component tree.

Consider a form in a web page. It can be treated as a component, since it has a specific role: to collect data and send it to the server. Also, a textbox inside the form can be considered a component. It has a specific role: to collect a single piece of data that will be sent to the server. So, a component may contain other components. And this is what usually happens: a user interface is a hierarchy of components, where some components contain other components.

Keep this concept in mind, since it will be useful to implement efficient and reusable user interfaces.

Decompose a User Interface

To better understand how to design a user interface and how to create components to implement them, we will try to decompose a well-known web user interface—the YouTube main page:

We can detect several items on this page, each having a specific role, starting with the page itself, whose role is to allow the user to interact with the system.

If we consider the header, the left sidebar, and the main area, all of these items are components of the page. You can see them highlighted in the following screenshot:

Of course, we can go ahead and detect other components. For example, we can consider each video preview box in the main area as a component. You can see them in the following screenshot:

This decomposition process allows us to focus on the specific role of each item in an interface, so that we can try to isolate each functionality and create reusable components, that is, components with just the dependencies that really matter.

Container and Presentational Components

We can classify the components in a user interface into container and presentational components.

The container components are components that do not have a relevant visual effect. Their main role is to group other components, that is, contain other components. For example, a form is usually a container component, since its main role is to contain other components, such as textboxes, labels, buttons, and so on.

The presentational components are components that display data in some graphical form. A textbox, a date picker, and a toolbar are examples of presentational components.

The distinction between container and presentational components is very important in order to create efficient user interfaces in React. We will exploit this distinction later, when we learn to manage the components' state and to propagate data through the components.

Activity: Detecting Components in a Web User Interface

Scenario

We need to convert the Wikipedia website's user interface (https://en.wikipedia.org) into React components.

Aim

The aim of the activity is to address the design process when implementing React-based user interfaces.

Steps for Completion

  1. Analyze the page's current structure and detect the items you can implement as components
  2. Indicate which would be container and which would be presentational components

Solution

Assume that the following is the current Wikipedia home page:

A possible solution could be as follows.

We can detect the following components:

  • The home page component contains the left sidebar component, the header component, and the main area component. All of these components are container components.
  • The left-side component contains the logo component (presentational) and a list of section components (presentational).
  • The header component contains a list of link components (presentational) to general pieces of functionality.
  • The main area component contains a list of tab components (container) and a search component (presentational).
  • The main tab component contains a banner component (presentational), a topic index component (presentational), and a list of block components (presentational).

Summary


In this chapter, we started to explore the React world. In particular, we:

  • Established that React is a user interface library, used to implement the View part of various MV* design patterns
  • Introduced the create-react-app tool, which helps us to set up a development environment to build React-based applications
  • Explored the items composing a typical React-based application
  • Analyzed the approach to designing user interfaces that best fits in the React world

In the next chapter, we will discover how to create React components to build user interfaces for our application.

Left arrow icon Right arrow icon

Key benefits

  • Elaborately explains basics before introducing advanced topics
  • Explains creating and managing the state of components across applications
  • Implement over 15 practical activities and exercises across 11 topics to reinforce your learning

Description

Projects like Angular and React are rapidly changing how development teams build and deploy web applications to production. In this book, you’ll learn the basics you need to get up and running with React and tackle real-world projects and challenges. It includes helpful guidance on how to consider key user requirements within the development process, and also shows you how to work with advanced concepts such as state management, data-binding, routing, and the popular component markup that is JSX. As you complete the included examples, you’ll find yourself well-equipped to move onto a real-world personal or professional frontend project.

What you will learn

Understand how React works within a wider application stack Analyze how you can break down a standard interface into specific components Successfully create your own increasingly complex React components with HTML or JSX Correctly handle multiple user events and their impact on overall application state Understand the component lifecycle to optimize the UX of your application Configure routing to allow effortless, intuitive navigation through your components
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details

Country selected

Publication date : Jul 25, 2018
Length 96 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781789530520
Vendor :
Facebook
Category :

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Black & white paperback book shipped to your address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now
Estimated delivery fee Deliver to United States

Economy delivery 10 - 13 business days

Free $6.95

Premium delivery 6 - 9 business days

$21.95
(Includes tracking information)

Product Details


Publication date : Jul 25, 2018
Length 96 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781789530520
Vendor :
Facebook
Category :

Table of Contents

9 Chapters
Title Page Chevron down icon Chevron up icon
Packt Upsell Chevron down icon Chevron up icon
Contributors Chevron down icon Chevron up icon
Preface Chevron down icon Chevron up icon
1. Introducing React and UI Design Chevron down icon Chevron up icon
2. Creating Components Chevron down icon Chevron up icon
3. Managing User Interactivity Chevron down icon Chevron up icon
1. Other Books You May Enjoy Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Top Reviews
No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela