Book Image

React 16 Essentials - Second Edition

By : Christopher Pitt, Artemij Fedosejev, Adam Boduch
Book Image

React 16 Essentials - Second Edition

By: Christopher Pitt, Artemij Fedosejev, Adam Boduch

Overview of this book

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

Related Content you might be interested in

Current Title:

Small book image
React 16 Essentials - Second Edition
Christopher Pitt | Artemij Fedosejev | Adam Boduch
Nov, 2017 | 240 pages
Small book image
Redux Quick Start Guide
Tao Wei | James Lee | Suresh Kumar Mukhiya
Feb, 2019 | 204 pages
Small book image
Isomorphic JavaScript Web Development
Tomas Alabes | Konstantin Tarkus
Oct, 2017 | 226 pages
Small book image
React and React Native
Adam Boduch | Roy Derks
Apr, 2020 | 526 pages
Table of Contents (20 chapters)
React 16 Essentials Second Edition
React 16 Essentials Second Edition
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Customer Feedback
Customer Feedback
Preface
Preface
Free Chapter
1
What's New in React 16
What's New in React 16
Rethinking rendering
Summary
2
Installing Powerful Tools for Your Project
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
Creating Your First React Element
Understanding the virtual DOM
Installing React
Creating React elements with JavaScript
Rendering React elements
Creating React elements with JSX
Summary
4
Creating Your First React Component
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
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 Your React Components with Another Library
Using another library in your React component
Understanding React component's lifecycle methods
Summary
7
Updating Your React Components
Updating Your React Components
Understanding component lifecycle updating methods
Setting default React component properties
Validating React component properties
Creating a Collection component
Summary
8
Building Complex React Components
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
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
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
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
Refining Your Flux Apps with Redux
Why Redux?
Controlling state with reducers
Connecting components to an application state
Summary
Index
Index

Planning your React application

There are two simple guidelines we need to follow when planning your React application:

  • Each React component should represent a single user interface element in your web application. It should encapsulate the smallest element possible that can potentially be reused.

  • Multiple React components should be composed into a single React component. Ultimately, your entire user interface should be encapsulated in one React component.

Diagram of our React components hierarchy

We'll begin with our topmost React component, Application. It will encapsulate our entire React application, and it will have two child components: the Stream and Collection components. The Stream component will be responsible for connecting to a stream of tweets, receiving, and displaying the latest tweet. The Stream component will have two child components: StreamTweet and Header. The StreamTweet component will be responsible for displaying the latest tweet. It will be composed of the Header and...

Previous Section
End of Section 3
Next Section