React Components

Christopher Pitt

• Publisher: Packt Publishing
• Year: 2016
• eBook ISBN: 9781785889288
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

Explore the power of React components for cutting-edge web development

About This Book

• Learn to build better websites by creating a variety of different components in React
• Conceptualize the design and build maintainable web apps with the help of components
• A fast-paced guide to help you learn about component-based development in React

Who This Book Is For

This book is ideal for developers who are familiar with the basics of React and are looking for a guide to building a wide range of components as well as develop component-driven UIs.

What You Will Learn

• How to structure an app into components Working with nested components
• Work with nested components
• Set up communication across components
• Style the existing components
• Work with Material Design as a component
• Render components on the server
• Make the best of design patterns
• Make the app pluggable

In Detail

The reader will learn how to use React and its component-based architecture in order to develop modern user interfaces. A new holistic way of thinking about UI development will establish throughout this book and the reader will discover the power of React components with many examples. After reading the book and following the example application, the reader has built a small to a mid-size application with React using a component based UI architecture. The book will take the reader through a journey to discover the benefits of component-based user interfaces over the classical MVC architecture. Throughout the book, the reader will develop a wide range of components and then bring them together to build a component-based UI. By the end of this book, readers would have learned several techniques to build powerful components and how the component-based development is beneficial over regular web development.

Style and approach

This book is a compact, example-driven guide that provides a step-by-step approach.

React Components

---

Table of Contents

React Components

Credits

About the Author

About the Reviewer

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Thinking in Components

Why components?

Using modern JavaScript

Compiling modern JavaScript

Debugging in the browser

Managing common tasks

Testing in JSBin

Summary

2. Working with Properties and State

Nesting components

Shared component actions

Component life cycle methods

Summary

3. Saving and Communicating Data

Validating properties

Storing cookies

Using local storage

Using event emitters

Summary

4. Styling and Animating Components

Adding new pages

Adding styles to components

Changing and reverting

Animating new components

Working with CSS transitions

Organizing styles with Sass

Alternatives

CSS modules

React style

Summary

5. Going Material!

Understanding material design

Surfaces

Interactions

Motion

Typography and iconography

Keeping your head above water

Material design lite

Creating a login page

Updating page admin

Alternative resources

Font Squirrel

Material UI

Summary

6. Changing Views

Location, location, location!

A bit of history

Using browser history

Using a router

Creating public pages

Summary

7. Rendering on the Server

Rendering components to strings

Creating a simple server

Creating a server backend

Communicating through Ajax requests

Communicating through web sockets

Structuring server-side applications

Summary

8. React Design Patterns

Where we are

Flux

Benefits of using Flux

Redux

Using context

Benefits of Redux

Summary

9. Thinking of Plugins

Dependency injection and service location

Dependency injection

Factories and service locators

Fold

Why this matters

Extending with callbacks

Stores, reducers, and components

Summary

10. Testing Components

Eat your vegetables

Design by testing

Documentation by testing

Sleep by testing

Types of tests

Unit tests

Functional tests

Testing with assertions

Testing for immutability and idempotence

Connecting to Travis

End-to-end testing

Summary

Index

React Components

Copyright © 2016 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, and its dealers and distributors will be held liable for any damages caused or alleged to be 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.

First published: April 2016

Production reference: 1180416

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78588-928-8

www.packtpub.com

Credits

Author

Christopher Pitt

Reviewer

Konstantin Tarkus

Commissioning Editor

Wilson D'souza

Acquisition Editor

Aaron Lazar

Content Development Editor

Parshva Sheth

Technical Editor

Madhunikita Sunil Chindarkar

Copy Editor

Pranjali Chury

Project Coordinator

Nikhil Nair

Proofreader

Safis Editing

Indexer

Tejal Daruwale Soni

Production Coordinator

Manu Joseph

Cover Work

Manu Joseph

About the Author

Christopher Pitt is a principal developer for SilverStripe in Wellington, New Zealand. He usually works on open source software, though sometimes you'll find him building compilers and robots.

I'd like to thank SilverStripe for supporting open source, in general, and for my growth as a developer, in particular. Many folks have helped me through the process of writing this book, especially the open source and platform teams at SilverStripe. Thanks to everyone who answered a question, gave me writing advice, and shared their excitement about React with me. They are the authors of this book as much as I am.

I'd also like to thank my family, especially my patient and loving wife.

About the Reviewer

Konstantin Tarkus is a long-time software developer and the founder and CTO of Kriasoft—a software development company specializing in building web and cloud applications. He is the author of React Starter Kit—a popular open source boilerplate project for building isomorphic web applications with Node.js and React, which is used by many tech start-ups around the globe. You can reach out to him on Twitter at @koistya.

www.PacktPub.com

eBooks, discount offers, and more

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.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktL...

Table of contents

• React Components