7. Build Complex React Components | React.js Essentials

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

React.js Essentials

By : Artemij Fedosejev

4 (32)

React.js Essentials

4 (32)

By: Artemij Fedosejev

Overview of this book

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Installing Powerful Tools for Your Project

1. Installing Powerful Tools for Your Project

Approaching our project

Installing Node.js and npm

Installing Git

Getting data from the Twitter Streaming API

Filtering data with Snapkite Engine

Creating the project structure

Creating package.json

Reusing Node.js modules

Building with Gulp.js

Creating a web page

Summary

2. Create Your First React Element

2. Create Your First React Element

Understanding the virtual DOM

Installing React

Creating React Elements with JavaScript

Rendering React Elements

Creating React Elements with JSX

Summary

3. Create Your First React Component

3. Create Your First React Component

Stateless versus stateful

Creating your first stateless React component

Creating your first stateful React component

Summary

4. Make Your React Components Reactive

4. Make Your React Components Reactive

Solving a problem using React

Planning your React application

Creating a container React component

Summary

5. Use Your React Components with Another Library

5. Use Your React Components with Another Library

Using another library in your React component

Understanding React component's lifecycle methods

Summary

6. Update Your React Components

6. Update Your React Components

Understanding component lifecycle's updating methods

Setting default React component properties

Validating React component properties

Creating a Collection component

Summary

7. Build Complex React Components

7. Build Complex React Components

Creating the TweetList component

Creating the CollectionControls component

Creating the CollectionRenameForm component

Creating the Button component

Creating the CollectionExportForm component

Summary

8. Test Your React Application with Jest

8. Test Your React Application with Jest

Why write unit tests?

Creating test suits, specs, and expectations

Installing and running Jest

Creating multiple specs and expectations

Testing React components

Summary

9. Supercharge Your React Architecture with Flux

9. Supercharge Your React Architecture with Flux

Analyzing your web application's architecture

Understanding Flux

Creating a dispatcher

Creating an action creator

Creating a store

Summary

10. Prepare Your React Application for Painless Maintenance with Flux

10. Prepare Your React Application for Painless Maintenance with Flux

Decoupling concerns with Flux

Refactoring the Stream component

Creating CollectionStore

Creating CollectionActionCreators

Refactoring the Application component

Refactoring the Collection component

Refactoring the CollectionControls component

Refactoring the CollectionRenameForm component

Refactoring the TweetList component

Refactoring the StreamTweet component

Build and go beyond

Index

Index

Creating the Button component

Create the following ~/snapterest/source/components/Button.react.js file:

var React = require('react');

var buttonStyle = {
  margin: '10px 10px 10px 0'
};

var Button = React.createClass({
  render: function () {
    return (
      <button
        className="btn btn-default"
        style={buttonStyle}
        onClick={this.props.handleClick}>{this.props.label}</button>
    );
  }
});

module.exports = Button;

The Button component renders a button. You might be wondering what's the benefit of creating a dedicated component for a button if you could just use the <button> element? Think of a component as a wrapper for a <button> element and something else that comes with it. In our case, most <button> elements come with the same style, so it makes sense to encapsulate both the <button> and style objects inside a component, and reuse that component. Hence, the Button component. It expects to receive two properties from a parent...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

React.js Essentials

Search

Your notes and bookmarks