Chapter 1, Thinking in Components, looks at the need to think of entire interfaces as a composition of small components and how to build them using modern ES6 JavaScript.

Chapter 2, Working with Properties and State, takes a comprehensive look at many aspects of property and state management, sharing a few more ES6 tricks along the way.

Chapter 3, Saving and Communicating Data, looks at reactive programming using event emitters and unidirectional flow of data.

Chapter 4, Styling and Animating Components, takes a look at how components can be styled and animated both inline and using stylesheets.

Chapter 5, Going Material!, explores material design and applies what you learn to our set of components.

Chapter 6, Changing Views, looks at ways of transitioning between different views with routing and animation.

Chapter 7, Rendering on the Server, takes a look at the process of rendering components through nodes and some ways of structuring server-side application code.

Chapter 8, React Design Patterns, explores different architectures such as Flux and Redux.

Chapter 9, Thinking of Plugins, looks at how to build components with dependency injection and extension points.

Chapter 10, Testing Components, explores various ways of ensuring that components are error-free and that changes to parts of an application don't have cascading effects on other parts.

The following hardware is recommended for maximum enjoyment:

All software mentioned in this book are free of charge and can be downloaded from the Internet.

This book is ideal for developers who are familiar with the basics of React and are looking for a guide to build a wide range of components as well as develop component-driven UIs.

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "We need to register a default set of tasks, which we set to browserify and uglify."

A block of code is set as follows:

"scripts": {
    "bundle": "browserify -t babelify main.js -o main.dist.js",
    "minify": "..."
}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

render() {
    if (this.state.isEditing) {
        return <PageEditor {...this.props} />;
    }

    return <PageView {...this.props} />;
}

Any command-line input or output is written as follows:

$ npm install --save-dev grunt
$ npm install --save-dev grunt-browserify
$ npm install --save-dev grunt-contrib-uglify
$ npm install --save-dev grunt-contrib-watch

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "To get the most out of JSBin, be sure to set the JavaScript dropdown to ES6/Babel and include the ReactJS scripts from CDNJS."

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.