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.

Publisher resources

Download Example Code

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

Product information

  • Title: React.js Essentials
  • Author(s): Artemij Fedosejev
  • Release date: August 2015
  • Publisher(s): Packt Publishing
  • ISBN: 9781783551620