31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
- Veröffentlichungsjahr: 2016
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.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 152
Ähnliche
Table of Contents
React Components
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? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Preface
React is a fascinating new take on traditional frontend development. It has taken the JavaScript community by storm and has inspired sweeping changes in a number of existing JavaScript application frameworks and architectures.
Unfortunately, there still aren't many examples of great architecture. Most tutorials and books focus on small components and examples, leaving the question of larger applications and component hierarchies unanswered. That is what this book seeks to change.
What this book covers
Chapter 1, Thinking in Components, looks at the need to think of entire interfaces as a composition of small components and how to build them using modern ES6 JavaScript.
Chapter 2, Working with Properties and State, takes a comprehensive look at many aspects of property and state management, sharing a few more ES6 tricks along the way.
Chapter 3, Saving and Communicating Data, looks at reactive programming using event emitters and unidirectional flow of data.
Chapter 4, Styling and Animating Components, takes a look at how components can be styled and animated both inline and using stylesheets.
Chapter 5, Going Material!, explores material design and applies what you learn to our set of components.
Chapter 6, Changing Views, looks at ways of transitioning between different views with routing and animation.
Chapter 7, Rendering on the Server, takes a look at the process of rendering components through nodes and some ways of structuring server-side application code.
Chapter 8, React Design Patterns, explores different architectures such as Flux and Redux.
Chapter 9, Thinking of Plugins, looks at how to build components with dependency injection and extension points.
Chapter 10, Testing Components, explores various ways of ensuring that components are error-free and that changes to parts of an application don't have cascading effects on other parts.
What you need for this book
The following hardware is recommended for maximum enjoyment:
All software mentioned in this book are free of charge and can be downloaded from the Internet.
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 build a wide range of components as well as develop component-driven UIs.
Conventions
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We need to register a default set of tasks, which we set to browserify and uglify."
A block of code is set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
Any command-line input or output is written as follows:
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "To get the most out of JSBin, be sure to set the JavaScript dropdown to ES6/Babel and include the ReactJS scripts from CDNJS."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this book from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
Chapter 1. Thinking in Components
React was the first interface library that got me thinking about component-based design. React promotes many good patterns and habits, but this one stands out for me. To understand why, we need to think about how React works under the hood. React is primarily a rendering engine. It was created (and is used) for generating user interfaces.
How interfaces used to work (and indeed still work apart from React) was that someone would come up with a design. That image file would then be split up into assets for each interactive part of the interface. A library such as jQuery would manage user interactions and connect different interface components, often with an assortment of plugins.
Individual interface components can be quite clean and complete individually. However, when they are combined, interactions between components and shared, mutable component state often make a messy codebase. One of the main reasons why React was created was to simplify the interactions between components, so they can remain clean and easy to understand.
Why components?
Component-based design is powerful, especially when we use immutable data and unidirectional data flow. It forces me to stop thinking about how different technologies or tools interact. It gets me thinking about the single most important function of each interface element.
When we start building an application, it's tempting to think of every piece as part of the whole. All interface elements blend into the same big picture, until it becomes so big that separating parts of it out seems impossible.
Imagine you had to build a space ship. What a huge task! You'd need some rocket boosters, a couple of wings, life support, and so on. Now consider how you would approach it if one of the constraints was that each moving part of the space ship would need to be individually tested.
Testing is the great divide between designing systems as a whole and designing systems as large collections of small pieces. Component-based design is fantastic because it makes sure that every part is testable.
