5. React Blog App Part 2 – Users
by Tom Bray, Ethan Holmes, Ryan Vice, Adam Horton, Narayan Prusty, Artemij Fedoseje
React: Building Modern Web Applications
- React: Building Modern Web Applications
- Table of Contents
- React: Building Modern Web Applications
- Meet Your Course Guide
- Course Structure
- Course journey
- The Course Roadmap and Timeline
- 1. Course Module 1: Reactive Programming with JavaScript
- 1. Introduction and Installation
- 2. Core JavaScript
- 3. Reactive Programming – The Basic Theory
- 4. Demonstrating Nonfunctional Reactive Programming – A Live Example
- 5. Learning Functional Programming – The Basics
- 6. Functional Reactive Programming – The Basics
- 7. Not Reinventing the Wheel – Tools for Functional Reactive Programming
- 8. Demonstrating Functional Reactive Programming in JavaScript – A Live Example, Part I
- 9. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part II – A To-do List
- 10. Demonstrating Functional Reactive Programming in JavaScript: A Live Example Part III – A Calendar
- Play it again Sam – an interesting challenge
- Classical Hijaxing works well
- Built with usability in mind, but there's still room to grow
- Plain old JavaScript objects are all you need
- Progressive disclosure that starts simply
- A render() method can easily delegate
- Boring code is better than interesting code!
- A simple UI for simply non-recurring entries...
- The user can still opt-in for more
- Avoiding being clever
- Anonymous helper functions may lack pixie dust
- How far in the future should we show?
- Different stripes for different entry types
- Now we're ready to display!
- Let's be nice and sort each day in order
- Let them use Markdown!
- One thing at a time!
- The holidays that inspired this calendar
- 11. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part IV – Adding a Scratchpad and Putting It All Together
- 12. How It All Fits Together
- 2. Course Module 2: React.js Essentials
- 1. Installing Powerful Tools for Your Project
- 2. Create Your First React Element
- 3. Create Your First React Component
- 4. Make Your React Components Reactive
- 5. Use Your React Components with Another Library
- 6. Update Your React Components
- 7. Build Complex React Components
- 8. Test Your React Application with Jest
- 9. Supercharge Your React Architecture with Flux
- 10. Prepare 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
- Build and go beyond
- 3. Course Module 3: Learning ECMAScript 6
- 1. Playing with Syntax
- 2. Knowing Your Library
- Working with numbers
- Doing Math
- Working with strings
- Arrays
- Collections
- Object
- 3. Using Iterators
- 4. Asynchronous Programming
- 5. Implementing the Reflect API
- The Reflect object
- The Reflect.apply(function, this, args) method
- The Reflect.construct(constructor, args, prototype) method
- The Reflect.defineProperty(object, property, descriptor) method
- The Reflect.deleteProperty(object, property) method
- The Reflect.enumerate(object) method
- The Reflect.get(object, property, this) method
- The Reflect.set(object, property, value, this) method
- The Reflect.getOwnPropertyDescriptor(object, property) method
- The Reflect.getPrototypeOf(object) method
- The Reflect.setPrototypeOf(object, prototype) method
- The Reflect.has(object, property) method
- The Reflect.isExtensible(object) method
- The Reflect.preventExtensions(object) method
- The Reflect.ownKeys(object) method
- The Reflect object
- 6. Using Proxies
- Proxies in a nutshell
- The Proxy API
- Traps
- The get(target, property, receiver) method
- The set(target, property, value, receiver) method
- The has(target, property) method
- The isExtensible(target) method
- The getPrototypeOf(target) method
- The setPrototypeOf(target, prototype) method
- The preventExtensions(target) method
- The getOwnPropertyDescriptor(target, property) method
- The defineProperty(target, property, descriptor) method
- The deleteProperty(target, property) method
- The enumerate(target) method
- The ownKeys(target) method
- The apply(target, thisValue, arguments) method
- The construct(target, arguments) method
- The Proxy.revocable(target, handler) method
- Traps
- The uses of proxies
- 7. Walking You Through Classes
- Understanding the Object-oriented JavaScript
- Using classes
- Defining a class
- The prototype methods
- The static methods
- Implementing inheritance in classes
- The computed method names
- The attributes of properties
- Classes are not hoisted!
- Overriding the result of the constructor method
- The "Symbol.species" static accessor property
- The "new.target" implicit parameter
- Using "super" in the object literals
- 8. Modular Programming
- 4. Course Module 4: Mastering React
- 1. Dynamic Components, Mixins, Forms, and More JSX
- Dynamic components
- Mixins
- Forms
- Controlled components - the read-only input
- Controlled components - the read and write input
- Controlled components – a simple form
- Validation
- Validation types
- The react-validation-mixin example
- Getting the code
- Running the code
- Getting the code
- 2. Anatomy of a React Application
- 3. Starting a React Application
- 4. React Blog App Part 1 – Actions and Common Components
- 5. React Blog App Part 2 – Users
- 6. React Blog App Part 3 – Posts
- 7. React Blog App Part 4 – Infinite Scroll and Search
- 8. Animation in React
- 5. Course Module 5: Getting Started with React Native
- Index
- 1. Dynamic Components, Mixins, Forms, and More JSX
This chapter covers user session management as well as creating, viewing, and listing users (bloggers).
Our primary focus for the app is posts, but a post must be associated with a user identity. User account management is an often-underestimated and complex part of applications. One of the more difficult aspects of account management is security. Since we are making a mock application, we won't have much security. We are going to establish the user identity with a simple comparison during log in. If we moved beyond this prototype into a real, deployable, application, we'd replace most of this session management code with software that's suited specifically for user identity management.
This chapter comprises all of the code needed to get our user management in order. Since the application is already scaffolded, the code breakdown benefits from being organized by entity type (configurations, stores, and views). By the end of this chapter we'll be able to sign up, log in, log out, list, and view user accounts. The application throughout this chapter can be found in the ch7.zip code bundle.
The construction of the application is done in four parts:
- Part 1: Actions and common components
- Part 2: User account management
- Part 3: Blog post operations
- Part 4: Infinite scroll and search
Below is a manifest for all of the code in this chapter. You can follow along with code listings in the ch7.zip code bundle included with this book.
The user and session context stores are the first time the API endpoint will appear. The API URL root resides in the application configuration module:
- Application configuration:
js/appConfig.js
Getting user accounts fully up-and-running will introduce these dependencies. One is for managing cookies' client-side. The other is for form validation. Here are those dependencies:
- Cookie reader/writer:
js/vendor/cookie.js - Form utilities mixin:
js/mixins/utility.js
For our application, we are mocking user account management. So, there's a separate store for managing the session and another store for the user data:
- Session context store:
js/stores/sessionContext.js - Users store:
js/stores/users.js
User-related views, and their respective styles, include:
- Login view:
js/views/login.jsx - User edit view
: js/views/users/edit.jsx,css/views/user/edit.less - User view component:
js/components/users/view.jsx,css/components/users/view.less - User list view:
js/views/users/list.jsx,css/views/user/list.less - User view:
js/views/users/view.jsx,css/views/user/view.less
Another affected view, which we have already defined and will need to update, is the application header:
- Application header:
js/views/appHeader.jsx(add session awareness, welcome, logout)
-
No Comment