You are previewing React.js Essentials.
O'Reilly logo
React.js Essentials

Book Description

A fast-paced guide to designing and building scalable and maintainable web apps with React.js

About This Book

  • Build maintainable and performant user interfaces for your web applications using React.js

  • Create reusable React.js components to save time and effort in maintaining your user interfaces

  • Learn how to build a ready-to-deploy React.js web application, following our step-by-step tutorial

  • Who This Book Is For

    If you're a front-end developer with knowledge of jQuery and its libraries, along with frameworks, such as Angular.JS and Backbone.JS, or native JavaScript development, and you wish to use the fastest web user interface library there is, then this book is ideal for you.

    What You Will Learn

  • Install powerful React.js tools to make development much more efficient

  • Create React elements with properties and children

  • Get started with stateless and stateful React components

  • Use JSX to speed up your React.js development process

  • Add reactivity to your React components with lifecycle methods

  • Integrate your React components with other JavaScript libraries

  • Utilize the Flux application architecture with your React components

  • Test your React components with Jest test framework

  • In Detail

    Building web applications with maintainable and performant user interfaces is a challenge that many have faced for more than a decade, but no one has risen to this challenge quite like React.js. Today React.js is used by Facebook, Instagram, Khan Academy, and Imperial College London, to name a few. Many new users recognize the benefits of React.js and adopt it in their own projects, forming a fast-growing community. The speed at which React.js has evolved promises a bright future for those who invest in learning it today.

    React.js Essentials will take you on a fast-paced journey through building your own maintainable React.js application. Begin by exploring how you can create single and multiple user interface elements. Create stateless and stateful components and make them reactive, 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 Flux architecture and learn how to manage your application using stores. Finish by going that extra mile with the Jest test framework, running multiple tests on your application and find solutions to scale it further without complexity.

    Style and approach

    The book adopts a step-by-step, hands-on approach with ample codes to ensure you learn React.js at a fast pace.

    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 files e-mailed directly to you.

    Table of Contents

    1. React.js Essentials
      1. Table of Contents
      2. React.js Essentials
      3. Credits
      4. Foreword
      5. About the Author
      6. About the Reviewers
      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. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      9. 1. 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 Gulp.js
        10. Creating a web page
        11. Summary
      10. 2. Create 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
      11. 3. Create Your First React Component
        1. Stateless versus stateful
        2. Creating your first stateless React component
        3. Creating your first stateful React component
        4. Summary
      12. 4. Make Your React Components Reactive
        1. Solving a problem using React
        2. Planning your React application
        3. Creating a container React component
        4. Summary
      13. 5. Use 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 getInitialState method
            2. The componentWillMount method
            3. The componentDidMount method
          2. Unmounting methods
            1. The componentWillUnmount method
        3. Summary
      14. 6. Update Your React Components
        1. Understanding component lifecycle's 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
      15. 7. Build 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
      16. 8. Test Your React Application with Jest
        1. Why write unit tests?
        2. Creating test suits, specs, and expectations
        3. Installing and running Jest
        4. Creating multiple specs and expectations
        5. Testing React components
        6. Summary
      17. 9. Supercharge 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
      18. 10. Prepare 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. Build and go beyond
      19. Index