Book Image

React Components

By : Christopher Pitt
Book Image

React Components

By: Christopher Pitt

Overview of this book

The reader will learn how to use React and its component-based architecture in order to develop modern user interfaces. A new holistic way of thinking about UI development will establish throughout this book and the reader will discover the power of React components with many examples. After reading the book and following the example application, the reader has built a small to a mid-size application with React using a component based UI architecture. The book will take the reader through a journey to discover the benefits of component-based user interfaces over the classical MVC architecture. Throughout the book, the reader will develop a wide range of components and then bring them together to build a component-based UI. By the end of this book, readers would have learned several techniques to build powerful components and how the component-based development is beneficial over regular web development.

Related Content you might be interested in

Current Title:

Small book image
React Components
Christopher Pitt
Apr, 2016 | 182 pages
No titles found
Table of Contents (17 chapters)
React Components
React Components
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Thinking in Components
Thinking in Components
Why components?
Using modern JavaScript
Compiling modern JavaScript
Debugging in the browser
Managing common tasks
Testing in JSBin
Summary
2
Working with Properties and State
Working with Properties and State
Nesting components
Shared component actions
Component life cycle methods
Summary
3
Saving and Communicating Data
Saving and Communicating Data
Validating properties
Storing cookies
Using local storage
Using event emitters
Summary
4
Styling and Animating Components
Styling and Animating Components
Adding new pages
Adding styles to components
Changing and reverting
Animating new components
Working with CSS transitions
Organizing styles with Sass
Alternatives
Summary
5
Going Material!
Going Material!
Understanding material design
Surfaces
Keeping your head above water
Alternative resources
Summary
6
Changing Views
Changing Views
Location, location, location!
Using a router
Creating public pages
Summary
7
Rendering on the Server
Rendering on the Server
Rendering components to strings
Creating a simple server
Creating a server backend
Communicating through Ajax requests
Communicating through web sockets
Structuring server-side applications
Summary
8
React Design Patterns
React Design Patterns
Where we are
Flux
Redux
Summary
9
Thinking of Plugins
Thinking of Plugins
Dependency injection and service location
Extending with callbacks
Stores, reducers, and components
Summary
10
Testing Components
Testing Components
Eat your vegetables
Types of tests
Testing with assertions
Summary
Index
Index

Summary

In this chapter, we blasted through some of the concepts in material design. You learned to think of it as an ever-changing language that we must learn over time. We implemented a global navigation component using a new form of React component (a function). We also implemented a login page, which is in need of a server-side validation, and we made our PageAdmin component look heaps better!

In the next chapter, we'll look at how to change views without page reloads and some of the neat things we can do to make that experience beautiful.

Previous Section
End of Chapter 5
Next Chapter