Home Page Icon
Home Page
Table of Contents for
React and React Native
Close
React and React Native
by Adam Boduch
React and React Native
React and React Native
React and React Native
Credits
About the Author
About the Reviewer
www.PacktPub.com
Why subscribe?
Customer Feedback
Dedication
Preface
About the book
What this book covers
Part I: React
Part II: React Native
Part III: React Architecture
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Downloading the color images of this book
Errata
Piracy
Questions
1. Why React?
What is React?
React is just the view
Simplicity is good
Declarative UI structure
Time and data
Performance matters
The right level of abstraction
Summary
2. Rendering with JSX
What is JSX?
Hello JSX
Declarative UI structure
Just like HTML
Built-in HTML tags
HTML tag conventions
Describing UI structures
Creating your own JSX elements
Encapsulating HTML
Nested elements
Namespaced components
Using JavaScript expressions
Dynamic property values and text
Mapping collections to elements
Summary
3. Understanding Properties and State
What is component state?
What are component properties?
Setting component state
Initial component state
Setting component state
Merging component state
Passing property values
Default property values
Setting property values
Stateless components
Pure functional components
Defaults in functional components
Container components
Summary
4. Event Handling – The React Way
Declaring event handlers
Declaring handler functions
Multiple event handlers
Importing generic handlers
Event handler context and parameters
Auto-binding context
Getting component data
Inline event handlers
Binding handlers to elements
Synthetic event objects
Event pooling
Summary
5. Crafting Reusable Components
Reusable HTML elements
The difficulty with monolithic components
The JSX markup
Initial state and state helpers
Event handler implementation
Refactoring component structures
Start with the JSX
Implementing an article list component
Implementing an article item component
Implementing an add article component
Making components functional
Rendering component trees
Feature components and utility components
Summary
6. The React Component Lifecycle
Why components need a lifecycle
Initializing properties and state
Fetching component data
Initializing state with properties
Updating state with properties
Optimize rendering efficiency
To render or not to render
Using metadata to optimize rendering
Rendering imperative components
Rendering jQuery UI widgets
Cleaning up after components
Cleaning up asynchronous calls
Summary
7. Validating Component Properties
Knowing what to expect
Promoting portable components
Simple property validators
Basic type validation
Requiring values
Any property value
Type and value validators
Things that can be rendered
Requiring specific types
Requiring specific values
Writing custom property validators
Summary
8. Extending Components
Component inheritance
Inheriting state
Inheriting properties
Inheriting JSX and event handlers
Composition with higher-order components
Conditional component rendering
Providing data sources
Summary
9. Handling Navigation with Routes
Declaring routes
Hello route
Decoupling route declarations
Parent and child routes
Handling route parameters
Resource IDs in routes
Optional parameters
Using link components
Basic linking
URL and query parameters
Lazy routing
Summary
10. Server-Side React Components
What is isomorphic JavaScript?
The server is a render target
Initial load performance
Sharing code between the backend and frontend
Rendering to strings
Backend routing
Frontend reconciliation
Fetching data
Summary
11. Mobile-First React Components
The rationale behind mobile-first design
Using react-bootstrap components
Implementing navigation
Lists
Forms
Summary
12. Why React Native?
What is React Native?
React and JSX are familiar
The mobile browser experience
Android and iOS, different yet the same
The case for mobile web apps
Summary
13. Kickstarting React Native Projects
Using the React Native command-line tool
iOS and Android simulators
Xcode
Genymotion
Running the project
Running iOS apps
Running Android apps
Summary
14. Building Responsive Layouts with Flexbox
Flexbox is the new layout standard
Introducing React Native styles
Building flexbox layouts
Simple three column layout
Improved three column layout
Flexible rows
Flexible grids
Flexible rows and columns
Summary
15. Navigating Between Screens
Screen organization
Navigators, scenes, routes, and stacks
Responding to routes
Navigation bar
Dynamic scenes
Jumping back and forth
Summary
16. Rendering Item Lists
Rendering data collections
Sorting and filtering lists
Fetching list data
Lazy list loading
Summary
17. Showing Progress
Progress and usability
Indicating progress
Measuring progress
Navigation indicators
Step progress
Summary
18. Geolocation and Maps
Where am I?
What's around me?
Annotating points of interest
Plotting points
Plotting overlays
Summary
19. Collecting User Input
Collecting text input
Selecting from a list of options
Toggling between off and on
Collecting date/time input
Summary
20. Alerts, Notifications, and Confirmation
Important information
Getting user confirmation
Success confirmation
Error confirmation
Passive notifications
Activity modals
Summary
21. Responding to User Gestures
Scrolling with our fingers
Giving touch feedback
Swipeable and cancellable
Summary
22. Controlling Image Display
Loading images
Resizing images
Lazy image loading
Rendering icons
Summary
23. Going Offline
Detecting the state of the network
Storing application data
Synchronizing application data
Summary
24. Handling Application State
Information architecture and Flux
Unidirectionality
Synchronous update rounds
Predictable state transformations
Unified information architecture
Implementing Redux
Initial application state
Creating the store
Store provider and routes
The App component
The Home component
State in mobile apps
Scaling the architecture
Summary
25. Why Relay and GraphQL?
Yet another approach?
Verbose vernacular
Declarative data dependencies
Mutating application state
The GraphQL backend and microservices
Summary
26. Building a Relay React App
TodoMVC and Relay
The GraphQL schema
Bootstrapping Relay
Adding todo items
Rendering todo items
Completing todo items
Summary
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Prev
Previous Chapter
Table of Contents
Next
Next Chapter
React and React Native
React and React Native
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset