O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

React 16 Essentials - Second Edition

Book Description

Everything you need to start working with React 16 and assess React Fiber

About 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 applications

Who This Book Is For

If 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 framework

In Detail

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.

Style and approach

React 16 Essentials, Second Edition, will take you on a fast-paced, hands-on journey through building your own maintainable React 16 applications.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased 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 code file.

Table of Contents

  1. React 16 Essentials Second Edition
    1. Table of Contents
    2. React 16 Essentials Second Edition
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    7. Customer Feedback
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    9. 1. What's New in React 16
      1. Rethinking rendering
        1. The status quo
        2. Running to completion
        3. What are fibers?
        4. Async and the road ahead
        5. Better component error handling
        6. Rendering multiple elements and strings
        7. Rendering to portals
      2. Summary
    10. 2. Installing Powerful Tools for Your Project
      1. Approaching our project
      2. Installing Node.js and npm
      3. Installing Git
      4. Getting data from the Twitter Streaming API
      5. Filtering data with Snapkite Engine
      6. Creating the project structure
      7. Creating package.json
      8. Reusing Node.js modules
      9. Building with Webpack
      10. Creating a web page
      11. Summary
    11. 3. Creating Your First React Element
      1. Understanding the virtual DOM
      2. Installing React
      3. Creating React elements with JavaScript
        1. The type parameter
        2. The props parameter
        3. The children parameter
      4. Rendering React elements
      5. Creating React elements with JSX
      6. Summary
    12. 4. Creating Your First React Component
      1. Stateless versus stateful
      2. Creating your first stateless React component
      3. Creating your first stateful React component
      4. Summary
    13. 5. Making Your React Components Reactive
      1. Solving a problem using React
      2. Planning your React application
      3. Creating a container React component
      4. Summary
    14. 6. Using Your React Components with Another Library
      1. Using another library in your React component
      2. Understanding React component's lifecycle methods
        1. Mounting methods
          1. The componentWillMount method
          2. The componentDidMount method
        2. Unmounting methods
          1. The componentWillUnmount method
      3. Summary
    15. 7. Updating Your React Components
      1. Understanding component lifecycle updating methods
        1. The componentWillReceiveProps method
        2. The shouldComponentUpdate method
        3. The componentWillUpdate method
        4. The componentDidUpdate method
      2. Setting default React component properties
      3. Validating React component properties
      4. Creating a Collection component
      5. Summary
    16. 8. Building Complex React Components
      1. Creating the TweetList component
      2. Creating the CollectionControls component
      3. Creating the CollectionRenameForm component
      4. Creating the Button component
      5. Creating the CollectionExportForm component
      6. Summary
    17. 9. Testing Your React Application with Jest
      1. Why write unit tests?
      2. Creating test suites, specs, and expectations
      3. Installing and running Jest
      4. Creating multiple tests and expectations
      5. Testing React components
      6. Summary
    18. 10. Supercharging Your React Architecture with Flux
      1. Analyzing your web application's architecture
      2. Understanding Flux
      3. Creating a dispatcher
      4. Creating an action creator
      5. Creating a store
      6. Summary
    19. 11. Preparing Your React Application for Painless Maintenance with Flux
      1. Decoupling concerns with Flux
      2. Refactoring the Stream component
      3. Creating CollectionStore
      4. Creating CollectionActionCreators
      5. Refactoring the Application component
      6. Refactoring the Collection component
      7. Refactoring the CollectionControls component
      8. Refactoring the CollectionRenameForm component
      9. Refactoring the TweetList component
      10. Refactoring the StreamTweet component
      11. Building and going beyond
      12. Summary
    20. 12. Refining Your Flux Apps with Redux
      1. Why Redux?
        1. One store to rule them all
        2. Fewer moving parts
        3. Uses the best parts of Flux
      2. Controlling state with reducers
        1. What are reducers?
        2. Collection reducers
          1. Adding tweets to collections
          2. Removing tweets from collections
          3. Setting the collection name
          4. Editing collection names
        3. Tweet reducers
          1. Receiving tweets
          2. Simplified action creators
      3. Connecting components to an application state
        1. Mapping state and action creators to props
          1. Connecting the stream component
          2. Connecting the StreamTweet component
          3. Connecting the collection component
          4. Connecting collection controls
          5. Connecting the TweetList component
          6. Creating stores and wiring your app
      4. Summary
    21. Index