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

Creating a server backend

One of the things our CMS is still missing is public, persistent pages. So far, we stored them in local storage, and that's OK while we build up our CMS components. But a time will come when we would want to share our data with the world.

For this to work, we need some storage mechanism. Even if that storage is only in memory for as long as the server is running. Sure, we could use a relational database or an object store to persist our CMS pages. For now, let's keep things simple. An in-memory store (pages variable) should do for now.

So, how should we structure this data store? Whatever storage medium we choose, the interface will need to reach out to the server to store and retrieve data. There are two mainstream options I want to explore...

Previous Section
End of Section 4
Next Section