React 16 Essentials - Second Edition

Artemij Fedosejev, Adam Boduch

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781787126343
• Edition: 2
• Topic: Computer Science
• Subtopic: Programming
• Index: Computer Science

Everything you need to start working with React 16 and assess React FiberAbout This Book• Hands-on examples and tutorials for the latest React 16 release• Assess the impact of React Fiber for your future web development• Build maintainable and high performance React 16 web applicationsWho This Book Is ForIf you're a frontend developer with some knowledge of native JavaScript development and frontend frameworks, wishing to learn the fastest web user interface library there is, then this book is ideal for you.What You Will Learn• Learn to code React 16 with hands-on examples and clear tutorials• Install powerful React 16 tools to make development much more efficient• Understand the impact of React Fiber today and the future of your web development• Utilize the Redux application architecture with your React components• Create React 16 elements with properties and children• Get started with stateless and stateful React components• Use JSX to speed up your React 16 development process• Add reactivity to your React 16 components with lifecycle methods• Test your React 16 components with the Jest test frameworkIn DetailReact 16 Essentials, Second Edition, fully updated for React 16, takes you on a fast-paced journey through building your own maintainable React 16 applications. React experts Artemij Fedosejev and Adam Boduch give you all the essentials you need to know and start working with React 16, in this new edition of the best-selling React.js Essentials title. You'll find the latest React 16 code updates, assessment of React Fiber, new coverage of Redux, and how to work as a modern React developer.The authors offer you their current assessment of React Fiber, and you'll soon be exploring React 16 hands on, creating your own single and multiple user interface elements with React 16. You'll then see how to create stateless and stateful components and make them reactive. You'll also learn to interact between your components and lifecycle methods, and gauge how to effectively integrate your user interface components with other JavaScript libraries. Delve deep into the core elements of the Redux architecture and learn how to manage your application and data persistence. Then go the extra mile with the Jest test framework, and run multiple tests on your applications and find solutions to scale without complexity.Today React is used by Facebook, Instagram, Khan Academy, and Imperial College London, to name a few. Many new users recognize the benefits of React and adopt it in their own projects, forming a fast-growing community. The speed at which React has evolved promises a bright future for anyone who invests in learning it today. Let Artemij and Adam bring you a brand new look at React 16 and React Fiber, and move your web development into the future.Style and approachReact 16 Essentials, Second Edition, will take you on a fast-paced, hands-on journey through building your own maintainable React 16 applications.

React 16 Essentials Second Edition

---

Table of Contents

React 16 Essentials Second Edition

Credits

About the Authors

About the Reviewers

www.PacktPub.com

eBooks, discount offers, and more

Why subscribe?

Customer Feedback

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

Downloading the color images of this book

Errata

Piracy

Questions

1. What's New in React 16

Rethinking rendering

The status quo

Running to completion

What are fibers?

Async and the road ahead

Better component error handling

Rendering multiple elements and strings

Rendering to portals

Summary

2. Installing Powerful Tools for Your Project

Approaching our project

Installing Node.js and npm

Installing Git

Getting data from the Twitter Streaming API

Filtering data with Snapkite Engine

Creating the project structure

Creating package.json

Reusing Node.js modules

Building with Webpack

Creating a web page

Summary

3. Creating Your First React Element

Understanding the virtual DOM

Installing React

Creating React elements with JavaScript

The type parameter

The props parameter

The children parameter

Rendering React elements

Creating React elements with JSX

Summary

4. Creating Your First React Component

Stateless versus stateful

Creating your first stateless React component

Creating your first stateful React component

Summary

5. Making Your React Components Reactive

Solving a problem using React

Planning your React application

Creating a container React component

Summary

6. Using Your React Components with Another Library

Using another library in your React component

Understanding React component's lifecycle methods

Mounting methods

The componentWillMount method

The componentDidMount method

Unmounting methods

The componentWillUnmount method

Summary

7. Updating Your React Components

Understanding component lifecycle updating methods

The componentWillReceiveProps method

The shouldComponentUpdate method

The componentWillUpdate method

The componentDidUpdate method

Setting default React component properties

Validating React component properties

Creating a Collection component

Summary

8. Building Complex React Components

Creating the TweetList component

Creating the CollectionControls component

Creating the CollectionRenameForm component

Creating the Button component

Creating the CollectionExportForm component

Summary

9. Testing Your React Application with Jest

Why write unit tests?

Creating test suites, specs, and expectations

Installing and running Jest

Creating multiple tests and expectations

Testing React components

Summary

10. Supercharging Your React Architecture with Flux

Analyzing your web application's architecture

Understanding Flux

Creating a dispatcher

Creating an action creator

Creating a store

Summary

11. Preparing Your React Application for Painless Maintenance with Flux

Decoupling concerns with Flux

Refactoring the Stream component

Creating CollectionStore

Creating CollectionActionCreators

Refactoring the Application component

Refactoring the Collection component

Refactoring the CollectionControls component

Refactoring the CollectionRenameForm component

Refactoring the TweetList component

Refactoring the StreamTweet component

Building and going beyond

Summary

12. Refining Your Flux Apps with Redux

Why Redux?

One store to rule them all

Fewer moving parts

Uses the best parts of Flux

Controlling state with reducers

What are reducers?

Collection reducers

Adding tweets to collections

Removing tweets from collections

Setting the collection name

Editing collection names

Tweet reducers

Receiving tweets

Simplified action creators

Connecting components to an application state

Mapping state and action creators to props

Connecting the stream component

Connecting the StreamTweet component

Connecting the collection component

Connecting collection controls

Connecting the TweetList component

Creating stores and wiring your app

Summary

Index

React 16 Essentials Second Edition

Copyright © 2017 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 authors, 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: August 2015

Second Edition: November 2017

Production reference: 2291117

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78712-604-6

www.packtpub.com

Credits

Authors Artemij Fedosejev Adam Boduch Reviewers Christopher Pitt Konstantin Tarkus Commissioning Editor Ashwin Nair Acquisition Editor Dominic Shakeshaft Project Editor Radhika Atitkar Content Development Editor Radhika Atitkar Technical Editor Nidhisha Shetty

Copy Editor Tom Jacob Proofreader Safis Editing Indexer Aishwarya Gangawane Graphics Jason Monteiro Production Coordinator Nilesh Mohite Cover Work Nilesh Mohite

About the Authors

Artemij Fedosejev is a technical lead living in London, United Kingdom. He is a self-taught web developer who has been a web developer since the early 2000s. Artemij earned his BSc in computer science from University College Cork, Ireland. He participated in the IGNITE Graduate Business Innovation Programme, where he built and launched a website that received the Most Innovative Project award. Artemij has played a key role in creating frontend architecture using React.js and Flux for various websites. Artemij created a number of open source projects, including Snapkite Engine, Snapkite Stream Client, and other projects.

Adam Boduch has been involved with large-scale JavaScript development for nearly 10 years. Before moving to frontend, he worked on several large-scale cloud computing products, using Python and Linux. No stranger to complexity, Adam has practical experience with real-world software systems and the scaling challenges they pose. Adam is the author of several JavaScript books, including React and React Native and Mastering Immutable.js by Packt Publishing. Adam is passionate about innovative user experiences and high performance.

About the Reviewers

Christopher Pitt is an author, speaker, and developer. He spends most of his time learning new technologies and...

Table of contents

• React 16 Essentials Second Edition