6. React Blog App Part 3 – Posts
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 contains all of the code necessary to create, edit, list, and view blog entries. It also includes integration with the Quill rich text editor. You can follow along with the code, including all of the necessary Less/CSS for this portion of the app, in ch8.zip.
The construction of the application is split into the following four parts:
- Part 1: Actions and common components
- Part 2: User account management
- Part 3: Blog post operations
- Part 4: Infinite scroll and search
The following is a manifest for all of the code in this chapter. You can follow along with code listings in ch8.zip.
There's just one store for posts.
- Posts store:
js/stores/posts.js
Post-related views covered, and their respective styles, include:
- Post create/edit view:
js/views/posts/edit.jsx,css/views/posts/edit.less - Post view:
js/views/posts/view.jsx,css/views/posts/view.less - Post list component:
js/components/posts/list.jsx,css/components/posts/list.less - Post list view:
js/views/posts/list.jsx,css/views/posts/list.less
Affected views:
- User view:
js/views/users/view.jsx(add user posts)
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.