Mastering React

Mastering React

by Adam Horton, Ryan Vice
Released February 2016
Publisher(s): Packt Publishing
ISBN: 9781783558568

Explore a preview version of Mastering React right now.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from 200+ publishers.

Start your free trial

Book description

Master the art of building modern web applications using React

About This Book

  • Write a complete application in React using an array of supporting libraries, both specifically React-related and general purpose
  • Understand what makes React stand apart from the vast majority of JS frameworks available through detailed explanations and concise examples
  • Explore the React ecosystem and how to integrate React with other modern web technologies

Who This Book Is For

This book is ideal for web developers possessing strong core JavaScript fundamentals who are also interested in learning what React brings to the architectural table. Previous experience with React or other web frameworks isn't required, but may help.

What You Will Learn

  • Understand the React component lifecycle and core concepts such as props and states
  • Craft forms and implement form validation patterns using React
  • Explore the anatomy of a modern single-page web application
  • Develop an approach for choosing and combining web technologies without being paralyzed by the options available
  • Create a complete single-page application
  • Start coding with a plan using an application design process
  • Add to your arsenal of prototyping techniques and tools
  • Make your React application feel great using animations

In Detail

React stands out in the web framework crowd through its approach to composition. This approach yields blazingly fast rendering capabilities. This book will help you understand what makes React special. It starts with the fundamentals and uses a pragmatic approach, focusing on clear development goals. You'll learn how to combine many web technologies surrounding React into a complete set for constructing a modern web application.

With this text, you'll blitz the basics then swiftly move on to advanced topics such as form validation and complete application construction. You'll also explore several design activities which will help you develop your web applications with a thoughtful plan. Finally, you'll learn several methods for implementing slick animations using React.

Style and approach

This is a comprehensive, hands-on guide that helps you get a solid understanding of the ins and outs of React development.

For application development, you will get a high view of the anatomy where you will zoom into each part and make decisions by moving through the application's anatomy; selecting a solution that fits the problem and lines up with your goals.

Publisher resources

Download Example Code

Table of contents

  1. Mastering React
    1. Table of Contents
    2. Mastering React
    3. Credits
    4. Foreword
    5. About the Authors
    6. About the Reviewer
    7. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    8. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. About the code samples
        1. Where to get the code samples
        2. How to run the code
      6. Reader feedback
      7. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    9. 1. Introduction to React
      1. Hello React
      2. JSX
        1. How it works
        2. Decompiling JSX
        3. Structure of render result
      3. props
        1. How it works
        2. propTypes
        3. getDefaultProps
      4. state
        1. How it works
      5. Summary
    10. 2. Component Composition and Lifecycle
      1. How to compose simple components
      2. Composing components with behavior
        1. How it works
      3. Accessing a component's children
      4. Component lifecycle - mounting and unmounting
      5. Component lifecycle – updating events
        1. How it works
      6. Summary
    11. 3. Dynamic Components, Mixins, Forms, and More JSX
      1. Dynamic components
        1. How it works
      2. Mixins
        1. How it works
      3. Forms
        1. Controlled components - the read-only input
          1. How it works
        2. Controlled components - the read and write input
          1. How it works
          2. Isn't that harder than it needs to be?
        3. Controlled components – a simple form
          1. How it works
          2. But what about the best practices?
          3. Refactoring the form to be data driven
          4. How it works
        4. Validation
          1. Validation types
            1. Field-level validation
            2. Form-level validation
          2. The react-validation-mixin example
            1. Getting the code
            2. Running the code
            3. Getting the code
      4. Summary
    12. 4. Anatomy of a React Application
      1. What is a single-page application?
      2. Three aspects of a SPA design
        1. Build systems
          1. Choosing a build system
          2. Module systems
            1. CommonJS
            2. AMD
            3. Our module choice
        2. CSS preprocessors
        3. Compiling the modern JS syntax and JSX templates
        4. Front-end architecture components
          1. The front-end router
          2. Front-end models
          3. Views, view models, and view controllers
          4. Messaging and eventing
          5. Other utility needs
        5. The application design
          1. Creating wireframes
          2. Main data entities and the API
          3. Main views, site map, and routes
      3. Summary
    13. 5. Starting a React Application
      1. Application design
        1. Creating wireframes
          1. User-related views
          2. Post-related views
        2. Data entities
        3. Main views and the sitemap
      2. Preparing the development environment
        1. Installing Node and its dependencies
        2. Installing and configuring Webpack
          1. The Webpack configuration
            1. Entry and output sections
            2. The plugins section
            3. The resolve section
            4. The module section
      3. Considerations before starting
        1. React and rendering
          1. Browser support
          2. Form validation
      4. Starting the app
        1. The directory structure
        2. The mock database
        3. index.html
        4. js/app.jsx
        5. Main views
        6. Linking views with React Router
          1. js/views/appHeader.jsx
          2. js/views/login.jsx
      5. Summary
    14. 6. React Blog App Part 1 – Actions and Common Components
      1. Reflux actions
      2. Reusable components and base styles
        1. Base styles
        2. Inputs and loading indicator
          1. The BasicInput component
          2. The loader component
        3. The application header
      3. Summary
    15. 7. React Blog App Part 2 – Users
      1. Code manifest
      2. Application runtime configuration
      3. Mixins and dependencies
        1. Reading and writing cookies
        2. The form utilities mixin
      4. User-related stores
        1. The session context store
        2. The user store
      5. User views
        1. The log in view
        2. The create user view
          1. Mixins and lifecycle methods
          2. The user profile image
          3. Form validation and submission
        3. The user view component
        4. The user list view
        5. The user view
      6. Other affected views
        1. The app header
      7. Summary
    16. 8. React Blog App Part 3 – Posts
      1. Code manifest
      2. The posts store
      3. Post views
        1. Post create/edit
          1. Mixins and lifecycle methods
          2. Form submission
        2. The post view
        3. The post list component
        4. The post list view
      4. Other affected views
        1. The user view
      5. Summary
    17. 9. React Blog App Part 4 – Infinite Scroll and Search
      1. Infinite scroll loading
        1. Infinite scroll code manifest
        2. Modifying the posts store
        3. Modifying the post list component
      2. Searching posts
        1. Search feature code manifest
        2. The search store
        3. Modifying the posts store
        4. Modifying the application header
        5. Modifying the post list component
      3. Final thoughts
        1. Suggested improvements
          1. Level up the blog app
        2. Moving forward
    18. 10. Animation in React
      1. Animation terms
      2. CSS transitions using class switching
        1. JavaScript code
        2. CSS source
      3. Animating DOM enter and exit
        1. Popover menus
        2. JavaScript source
        3. CSS source
        4. List filtering
        5. JavaScript source
        6. CSS source
      4. Using the React-Motion animation library
        1. How React-Motion works
        2. Clock animation
        3. JavaScript source
        4. CSS source
      5. Summary
    19. Index

Product information

  • Title: Mastering React
  • Author(s): Adam Horton, Ryan Vice
  • Release date: February 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781783558568