Beginning React E-Book

Andrea Chiarelli

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 78

Veröffentlichungsjahr: 2018

Beschreibung

Take your web applications to a whole new level with efficient, component-based UIs that deliver cutting-edge interactivity and performance.

Key Features

• 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

Book 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

Who this book is for

If you are a frontend developer who wants to create truly reactive user interfaces in JavaScript, then this is 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.

Leseprobe

Beginning React

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

Andrea Chiarelli

BIRMINGHAM - MUMBAI

Beginning React

Copyright © 2018 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.

Acquisitions Editor: Koushik SenContent Development Editors: Tanmayee Patil, Taabish KhanProduction Coordinator:  Ratan Pote

First published: July 2018

Production reference: 1250718

Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK.

ISBN 978-1-78953-052-0

www.packtpub.com

 

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

PacktPub.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.PacktPub.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.PacktPub.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

Andrea Chiarelli has over 20 years of experience as a software engineer and technical writer. In his professional career, he has used various technologies for his projects: from C# to JavaScript, from Angular to React, and ASP.NET to PhoneGap/Cordova. He has contributed to many online and offline magazines and is the author of several books published by Wrox Press and Packt. Currently, he is a software architect at the Italian office of Apparound, Inc. and a regular contributor to HTML.it, an Italian online magazine focused on web technologies.

I wish to thank my family for their support, patience, and love.

About the Reviewer

Graeme Wolfendale is a software engineer. He has used a range of tools in his line of work, mostly focusing on frontend web technologies such as JavaScript, HTML, and CSS, alongside backend PHP/C#. He enjoys writing code on both the frontend and backend, as well as interacting with third-party APIs. Currently, he works as a software engineer at n-Coders Limited, a software company that specializes in bespoke web app development.

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

Beginning React

Packt Upsell

Why Subscribe?

PacktPub.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 React and UI Design

What is React?

How to Set up a React-Based Application

Installing create-react-app

Creating Your First React Application

Activity: Creating an Application with create-react-app

Exploring the Generated Content

The create-react-app Commands

The npm start Command

Changing File Content and Viewing the Result

Activity: Starting and Changing the Application

The npm test Command

The npm run build Command

The npm run eject Command

How to Design a UI

Everything Is a Component

Decompose a User Interface

Container and Presentational Components

Activity: Detecting Components in a Web User Interface

Summary

Creating Components

Definition of a Component

Building Our First React Component

Managing Styles

Adding CSS

Activity: Defining a Shopping Cart

Using JSX

Activity: Translating HTML into JSX

Composing Components

Combining Components

Activity: Defining a Composed Cart

Data Propagation

Activity: Creating a Cart Item Component

Managing the Internal State

Activity: Adding State Management to the Cart Component

Summary

Managing User Interactivity

Managing User Interaction

HTML Events versus React Events

Event Handlers and the this Keyword

Changing the State

Activity: Adding Items to the Shopping Cart

Component Lifecycle Events

Activity: Showing the Quantity of Items Added to the Cart

Managing Routing

Installing React Router

Using the Router

Defining Views

Some Notes About the Route Component

Nested Views

Path Parameters

Activity: Adding a View About Shipping Methods

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

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: