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 Components

Book Description

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.

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 Components
    1. Table of Contents
    2. React Components
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    7. 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. Errata
        3. Piracy
        4. Questions
    8. 1. Thinking in Components
      1. Why components?
      2. Using modern JavaScript
      3. Compiling modern JavaScript
      4. Debugging in the browser
      5. Managing common tasks
      6. Testing in JSBin
      7. Summary
    9. 2. Working with Properties and State
      1. Nesting components
      2. Shared component actions
      3. Component life cycle methods
      4. Summary
    10. 3. Saving and Communicating Data
      1. Validating properties
      2. Storing cookies
      3. Using local storage
      4. Using event emitters
      5. Summary
    11. 4. Styling and Animating Components
      1. Adding new pages
      2. Adding styles to components
      3. Changing and reverting
      4. Animating new components
      5. Working with CSS transitions
      6. Organizing styles with Sass
      7. Alternatives
        1. CSS modules
        2. React style
      8. Summary
    12. 5. Going Material!
      1. Understanding material design
      2. Surfaces
        1. Interactions
        2. Motion
        3. Typography and iconography
      3. Keeping your head above water
        1. Material design lite
        2. Creating a login page
        3. Updating page admin
      4. Alternative resources
        1. Font Squirrel
        2. Material UI
      5. Summary
    13. 6. Changing Views
      1. Location, location, location!
        1. A bit of history
        2. Using browser history
      2. Using a router
      3. Creating public pages
      4. Summary
    14. 7. Rendering on the Server
      1. Rendering components to strings
      2. Creating a simple server
      3. Creating a server backend
      4. Communicating through Ajax requests
      5. Communicating through web sockets
      6. Structuring server-side applications
      7. Summary
    15. 8. React Design Patterns
      1. Where we are
      2. Flux
        1. Benefits of using Flux
      3. Redux
        1. Using context
        2. Benefits of Redux
      4. Summary
    16. 9. Thinking of Plugins
      1. Dependency injection and service location
        1. Dependency injection
        2. Factories and service locators
        3. Fold
        4. Why this matters
      2. Extending with callbacks
      3. Stores, reducers, and components
      4. Summary
    17. 10. Testing Components
      1. Eat your vegetables
        1. Design by testing
        2. Documentation by testing
        3. Sleep by testing
      2. Types of tests
        1. Unit tests
        2. Functional tests
      3. Testing with assertions
        1. Testing for immutability and idempotence
        2. Connecting to Travis
        3. End-to-end testing
      4. Summary
    18. Index