Book Image

Beginning React

By : Andrea Chiarelli
Book Image

Beginning React

By: Andrea Chiarelli

Overview of this book

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.
Table of Contents (9 chapters)

Preface

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. The book 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.

After completing this book, you will be able to:

  • 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

Who This Book Is For

If you are a frontend developer who wants to create truly reactive user interfaces in JavaScript, then this the book for you. For React, you'll need a solid foundation in the essentials of the JavaScript language, including new OOP features that were introduced in ES2015. An understanding of HTML and CSS is assumed, and a basic knowledge of Node.js will be useful in the context of managing a development workflow, but is not essential.

What This Book Covers

Chapter 1, Introducing React and UI Design, introduces React and helps us to 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.

Chapter 2, Creating Components, teaches us how to implement React components, how to assemble multiple components into one, and how to manage their internal states. We will explore React component implementation by building a simple application.

Chapter 3, Managing User Interactivity, teaches us how to manage the events generated by a user's interaction with the components of a React-based user interface. We will explore the events that are triggered during the lifecycle of a React component, and will learn how to exploit them in order to create efficient components.

 

To Get the Most out of This Book

This book will require a system with the following minimum hardware requirements:

  • Processor: Pentium 4 (or equivalent)
  • 4 GB RAM
  • Hard disk space: 10 GB
  • An internet connection

The following software should also be installed:

  • Any modern operating system (preferably, Windows 10 version 1507)
  • The latest version of Node.js (https://nodejs.org/en/)
  • The latest version of any modern browser (preferably, Chrome)

Download the Example Code Files

You can download the example code files for this book from your account at www.packtpub.com. If you purchased this book elsewhere, you can visit www.packtpub.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

  1. Log in or register at www.packtpub.com.
  2. Select the SUPPORT tab.
  3. Click on Code Downloads & Errata.
  4. 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/TrainingByPackt/Beginning-React. 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/BeginningReact_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: "By wrapping the App component, the BrowserRouter component enriches it with routing capabilities."

A block of code is set as follows:

class Catalog extends React.Component {
  constructor() {
    super();

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
  , document.getElementById('root'));

Any command-line input or output is written as follows:

create-react-app --version

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Now we need to create a view to display the Catalog component or the About page."

Activity: These are scenario-based activities that will let you practically apply what you've learned over the course of a complete section. They are typically in the context of a real-world problem or situation.

Note

Warnings or important notes appear like this.

Get in Touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/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 packtpub.com.