Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

React.js Essentials

By : Artemij Fedosejev

3 (2)

React.js Essentials

3 (2)

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. What's New in React 16

1. What's New in React 16

Rethinking rendering

Summary

2. Installing Powerful Tools for Your Project

2. 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 Webpack

Creating a web page

Summary

3. Creating Your First React Element

3. Creating Your First React Element

Understanding the virtual DOM

Installing React

Creating React elements with JavaScript

Rendering React elements

Creating React elements with JSX

Summary

4. Creating Your First React Component

4. Creating Your First React Component

Stateless versus stateful

Creating your first stateless React component

Creating your first stateful React component

Summary

5. Making Your React Components Reactive

5. Making Your React Components Reactive

Solving a problem using React

Planning your React application

Creating a container React component

Summary

6. Using Your React Components with Another Library

6. Using Your React Components with Another Library

Using another library in your React component

Understanding React component's lifecycle methods

Summary

7. Updating Your React Components

7. Updating Your React Components

Understanding component lifecycle updating methods

Setting default React component properties

Validating React component properties

Creating a Collection component

Summary

8. Building Complex React Components

8. Building Complex React Components

Creating the TweetList component

Creating the CollectionControls component

Creating the CollectionRenameForm component

Creating the Button component

Creating the CollectionExportForm component

Summary

9. Testing Your React Application with Jest

9. Testing Your React Application with Jest

Why write unit tests?

Creating test suites, specs, and expectations

Installing and running Jest

Creating multiple tests and expectations

Testing React components

Summary

10. Supercharging Your React Architecture with Flux

10. Supercharging Your React Architecture with Flux

Analyzing your web application's architecture

Understanding Flux

Creating a dispatcher

Creating an action creator

Creating a store

Summary

11. Preparing Your React Application for Painless Maintenance with Flux

11. Preparing 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

Building and going beyond

Summary

12. Refining Your Flux Apps with Redux

12. Refining Your Flux Apps with Redux

Why Redux?

Controlling state with reducers

Connecting components to an application state

Summary

Index

Index

Customer Reviews

3 (2)

5 star

46.9%

4 star

25%

3 star

15.6%

2 star

9.4%

1 star

3.1%

Understanding component lifecycle's updating methods

A React component has five lifecycle methods that belong to a component's updating phase:

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

See the following figure for a better view:

Understanding component lifecycle's updating methods

We're already familiar with the render() method. Now let's discuss the other four methods.

The componentWillReceiveProps method

We'll start with the componentWillReceiveProps() method in the StreamTweet component. Add the following code after the componentDidMount() method in the StreamTweet.react.js file:

componentWillReceiveProps: function (nextProps) {
  console.log('[Snapterest] StreamTweet: 4. Running componentWillReceiveProps()');

  var currentTweetLength = this.props.tweet.text.length;
  var nextTweetLength = nextProps.tweet.text.length;
  var isNumberOfCharactersIncreasing = (nextTweetLength > currentTweetLength);
  var headerText;

  this.setState({
    numberOfCharactersIsIncreasing...

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