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

Alternative resources

Before we wrap up, I want to share a few resources that you might find helpful.

Font Squirrel

In this chapter, we used Roboto. More accurately, The MDL instructions told us how to embed a link to Roboto on Google Webfonts. If you would prefer to use your own custom fonts, then you may need to convert them.

You can convert font files at Font Squirrel:

Head over to http://www.fontsquirrel.com/tools/webfont-generator and upload your font files. You'll start to download the converted files with helpful CSS files to get you started. We don't have time to cover all the intricacies of custom fonts, but the example files you download should set you on the right path.

Material UI

We created a bit of a mash-up between the MDL CSS/JavaScript and React. This might not always work or be as elegant as you would like. In such instances, check out http://www.material-ui.com.

Material UI has a huge range of components to choose from, as we can see in the following screenshot:

It's a catalogue...

Previous Section
End of Section 5
Next Section