React: Building Modern Web Applications

Master the art of building dynamic, modern web applications with React

React: Building Modern Web Applications

This ebook is included in a Mapt subscription
Jonathan Hayward et al.

5 customer reviews
Master the art of building dynamic, modern web applications with React
$0.00
$59.99
$29.99p/m after trial
RRP $59.99
Subscription
eBook
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Book Details

ISBN 139781786462268
Paperback910 pages

Book Description

ReactJS has helped to transform the web as we know it. Designed by Facebook to help developers build rapid, responsive UI that can deal with data-intensive usage, it’s an essential component in any web developer’s skillset. This ReactJS course, in five connected modules, provides you with a fast, engaging and practical route into ReactJS—so you can build powerful, elegant, and modern web applications.

Beginning with the Reactive Programming with JavaScript module, you will learn how to take advantage of a reactive and functional programming paradigm to rethink how you approach your JavaScript code. It’s built to help you understand the concepts, relevant and applicable for any frontend developer.

You’ll then dive a little deeper into ReactJS. The second module gives you a rapid look through the fundamentals of ReactJS, showing you how to build a basic application and demonstrating how to implement the Flux architecture.

In the third module you will get to grips with ES6—this will make you a more fluent JavaScript developer, giving you control over ReactJS. You can put your old JavaScript hacks aside and instead explore how to create ES6 custom iterators.

In the final two modules you’ll learn how to fully master ReactJS, exploring its wider ecosystem of tools that have helped to make it one of the most important tools in web development today. Ending with insights and guidance on React Native, the tool built for today’s demand for native, intuitive user experiences and interfaces, with this course you can be confident in building dynamic and modern apps with React.

Table of Contents

Chapter 1: Introduction and Installation
A 10,000-foot overview
Installing the tools required
Chapter 2: Core JavaScript
The strict mode
Variables and assignment
A note on values and NaN
Chapter 3: Reactive Programming – The Basic Theory
Declarative programming
The war on Heisenbugs
The Flux Architecture
Complete UI teardown and rebuild
JavaScript as a Domain-specific Language
The Big-Coffee Notation
Chapter 4: Demonstrating Nonfunctional Reactive Programming – A Live Example
The history of a game with multiple ports
The HTML for the web page
The JavaScript that animates that page
Chapter 5: Learning Functional Programming – The Basics
Custom sort functions – the first example of functional JavaScript and first-class functions
An overview of information hiding in JavaScript
Chapter 6: Functional Reactive Programming – The Basics
A trip down computer folklore's memory lane
Distinguishing the features of functional reactive programming
If you learn just one thing...
Learn what you can!
JavaScript as the new bare metal
Chapter 7: Not Reinventing the Wheel – Tools for Functional Reactive Programming
ClojureScript
Om
Bacon.js
Brython – a Python browser implementation
Immutable.js – permanent protection from change
Jest – BDD unit testing from Facebook
Implementing the Flux Architecture using Fluxxor
Chapter 8: Demonstrating Functional Reactive Programming in JavaScript – A Live Example, Part I
What we will be attempting in this chapter
This project's first complete component
The render() method
Triggering the actual display for what we have created
Chapter 9: Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part II – A To-do List
Adding a to-do list to our application
Chapter 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
Chapter 11: Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part IV – Adding a Scratchpad and Putting It All Together
Adding a WYSIWYG scratchpad, courtesy CKeditor
CKeditor – small free offerings, and small is beautiful
Integrating all four subcomponents into one page
Persistence
Chapter 12: How It All Fits Together
A review of the terrain covered
Could the Mythical Man-Month have been avoided?
ReactJS is just a view, but what a view!
Programming is fun again!
Chapter 13: Installing Powerful Tools for Your Project
Approaching our project
Getting data from the Twitter Streaming API
Filtering data with Snapkite Engine
Creating the project structure
Creating package.json
Reusing Node.js modules
Building with Gulp.js
Creating a web page
Chapter 14: Create Your First React Element
Understanding the virtual DOM
Pending
Creating React Elements with JavaScript
Rendering React Elements
Creating React Elements with JSX
Chapter 15: Create Your First React Component
Stateless versus stateful
Creating your first stateless React component
Creating your first stateful React component
Chapter 16: Make Your React Components Reactive
Solving a problem using React
Planning your React application
Creating a container React component
Chapter 17: Use Your React Components with Another Library
Using another library in your React component
Understanding React component's lifecycle methods
Chapter 18: Update Your React Components
Understanding component lifecycle's updating methods
Setting default React component properties
Validating React component properties
Creating a Collection component
Chapter 19: Build Complex React Components
Creating the TweetList component
Creating the CollectionControls component
Creating the CollectionRenameForm component
Creating the Button component
Creating the CollectionExportForm component
Chapter 20: Test Your React Application with Jest
Why write unit tests?
Creating test suits, specs, and expectations
Installing and running Jest
Creating multiple specs and expectations
Testing React components
Chapter 21: Supercharge Your React Architecture with Flux
Analyzing your web application's architecture
Creating a dispatcher
Creating an action creator
Creating a store
Chapter 22: 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
Chapter 23: Playing with Syntax
The let keyword
The const keyword
Default parameter values
The spread operator
The rest parameter
The destructuring assignment
The arrow functions
The enhanced object literals
Chapter 24: Knowing Your Library
Working with numbers
Doing Math
Working with strings
Arrays
Collections
Object
Chapter 25: Using Iterators
The ES6 symbols
The iteration protocols
Generators
The "for…of" loop
The tail call optimization
Chapter 26: Asynchronous Programming
The JavaScript execution model
Writing asynchronous code
Promises to the rescue
The JavaScript APIs based on Promises
Chapter 27: Implementing the Reflect API
The Reflect object
Chapter 28: Using Proxies
Proxies in a nutshell
The Proxy API
The uses of proxies
Chapter 29: Walking You Through Classes
Understanding the Object-oriented JavaScript
Using classes
Using "super" in the object literals
Chapter 30: Modular Programming
The JavaScript modules in a nutshell
Implementing modules – the old way
Implementing modules – the new way
Chapter 31: Dynamic Components, Mixins, Forms, and More JSX
Dynamic components
Mixins
Forms
Chapter 32: Anatomy of a React Application
What is a single-page application?
Three aspects of a SPA design
Chapter 33: Starting a React Application
Application design
Preparing the development environment
Considerations before starting
Starting the app
Chapter 34: React Blog App Part 1 – Actions and Common Components
Reflux actions
Reusable components and base styles
Chapter 35: React Blog App Part 2 – Users
Code manifest
Application runtime configuration
Mixins and dependencies
User-related stores
User views
Other affected views
Chapter 36: React Blog App Part 3 – Posts
Code manifest
The posts store
Post views
Other affected views
Chapter 37: React Blog App Part 4 – Infinite Scroll and Search
Infinite scroll loading
Searching posts
Final thoughts
Chapter 38: Animation in React
Animation terms
CSS transitions using class switching
Animating DOM enter and exit
Using the React-Motion animation library
Chapter 39: Exploring the Sample Application
Installing Xcode
Running the sample application
Experimenting with the sample application
Chapter 40: Beginning with the Example Application
Generating the projects
Structuring the application
Navigation
Chapter 41: Working with Styles and Layout
React CSS
Layout and Flexbox
Styling the NavigationBar component
Styling the NoteScreen
Chapter 42: Displaying and Saving Data
Lists
Chapter 43: Working with Geolocation and Maps
Introducing the Geolocation API
Tagging notes with geolocation
NoteLocationScreen
Chapter 44: Integrating Native Modules
Adding images to notes
Installing react-native-camera on iOS
Viewing images
Connecting the final pieces
Chapter 45: Releasing the Application
Generating the static bundle in iOS
Testing the static bundle in iOS
Creating an iOS release in Xcode
Generating the Android APK

What You Will Learn

  • Take control of the front end with reactive JavaScript programming
  • Discover what ReactJS offers your development - before mastering it
  • Create React elements with properties and children
  • Use JSX to speed up your React development process
  • Test your React components with the Jest test framework
  • Learn the latest syntax of ES6
  • Execute ES6 in a non-supported ES6 environment
  • Learn the principles of object-oriented programming
  • Create a complete single-page application
  • Use an application design plan to write smarter, more meaningful code
  • Learn how to use animations to give extra style to your application
  • Get to grips with the React Native environment
  • Write your own custom native UI components
  • Integrate native modules in Objective-C and Java that interact with JavaScript

Authors

Table of Contents

Chapter 1: Introduction and Installation
A 10,000-foot overview
Installing the tools required
Chapter 2: Core JavaScript
The strict mode
Variables and assignment
A note on values and NaN
Chapter 3: Reactive Programming – The Basic Theory
Declarative programming
The war on Heisenbugs
The Flux Architecture
Complete UI teardown and rebuild
JavaScript as a Domain-specific Language
The Big-Coffee Notation
Chapter 4: Demonstrating Nonfunctional Reactive Programming – A Live Example
The history of a game with multiple ports
The HTML for the web page
The JavaScript that animates that page
Chapter 5: Learning Functional Programming – The Basics
Custom sort functions – the first example of functional JavaScript and first-class functions
An overview of information hiding in JavaScript
Chapter 6: Functional Reactive Programming – The Basics
A trip down computer folklore's memory lane
Distinguishing the features of functional reactive programming
If you learn just one thing...
Learn what you can!
JavaScript as the new bare metal
Chapter 7: Not Reinventing the Wheel – Tools for Functional Reactive Programming
ClojureScript
Om
Bacon.js
Brython – a Python browser implementation
Immutable.js – permanent protection from change
Jest – BDD unit testing from Facebook
Implementing the Flux Architecture using Fluxxor
Chapter 8: Demonstrating Functional Reactive Programming in JavaScript – A Live Example, Part I
What we will be attempting in this chapter
This project's first complete component
The render() method
Triggering the actual display for what we have created
Chapter 9: Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part II – A To-do List
Adding a to-do list to our application
Chapter 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
Chapter 11: Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part IV – Adding a Scratchpad and Putting It All Together
Adding a WYSIWYG scratchpad, courtesy CKeditor
CKeditor – small free offerings, and small is beautiful
Integrating all four subcomponents into one page
Persistence
Chapter 12: How It All Fits Together
A review of the terrain covered
Could the Mythical Man-Month have been avoided?
ReactJS is just a view, but what a view!
Programming is fun again!
Chapter 13: Installing Powerful Tools for Your Project
Approaching our project
Getting data from the Twitter Streaming API
Filtering data with Snapkite Engine
Creating the project structure
Creating package.json
Reusing Node.js modules
Building with Gulp.js
Creating a web page
Chapter 14: Create Your First React Element
Understanding the virtual DOM
Pending
Creating React Elements with JavaScript
Rendering React Elements
Creating React Elements with JSX
Chapter 15: Create Your First React Component
Stateless versus stateful
Creating your first stateless React component
Creating your first stateful React component
Chapter 16: Make Your React Components Reactive
Solving a problem using React
Planning your React application
Creating a container React component
Chapter 17: Use Your React Components with Another Library
Using another library in your React component
Understanding React component's lifecycle methods
Chapter 18: Update Your React Components
Understanding component lifecycle's updating methods
Setting default React component properties
Validating React component properties
Creating a Collection component
Chapter 19: Build Complex React Components
Creating the TweetList component
Creating the CollectionControls component
Creating the CollectionRenameForm component
Creating the Button component
Creating the CollectionExportForm component
Chapter 20: Test Your React Application with Jest
Why write unit tests?
Creating test suits, specs, and expectations
Installing and running Jest
Creating multiple specs and expectations
Testing React components
Chapter 21: Supercharge Your React Architecture with Flux
Analyzing your web application's architecture
Creating a dispatcher
Creating an action creator
Creating a store
Chapter 22: 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
Chapter 23: Playing with Syntax
The let keyword
The const keyword
Default parameter values
The spread operator
The rest parameter
The destructuring assignment
The arrow functions
The enhanced object literals
Chapter 24: Knowing Your Library
Working with numbers
Doing Math
Working with strings
Arrays
Collections
Object
Chapter 25: Using Iterators
The ES6 symbols
The iteration protocols
Generators
The "for…of" loop
The tail call optimization
Chapter 26: Asynchronous Programming
The JavaScript execution model
Writing asynchronous code
Promises to the rescue
The JavaScript APIs based on Promises
Chapter 27: Implementing the Reflect API
The Reflect object
Chapter 28: Using Proxies
Proxies in a nutshell
The Proxy API
The uses of proxies
Chapter 29: Walking You Through Classes
Understanding the Object-oriented JavaScript
Using classes
Using "super" in the object literals
Chapter 30: Modular Programming
The JavaScript modules in a nutshell
Implementing modules – the old way
Implementing modules – the new way
Chapter 31: Dynamic Components, Mixins, Forms, and More JSX
Dynamic components
Mixins
Forms
Chapter 32: Anatomy of a React Application
What is a single-page application?
Three aspects of a SPA design
Chapter 33: Starting a React Application
Application design
Preparing the development environment
Considerations before starting
Starting the app
Chapter 34: React Blog App Part 1 – Actions and Common Components
Reflux actions
Reusable components and base styles
Chapter 35: React Blog App Part 2 – Users
Code manifest
Application runtime configuration
Mixins and dependencies
User-related stores
User views
Other affected views
Chapter 36: React Blog App Part 3 – Posts
Code manifest
The posts store
Post views
Other affected views
Chapter 37: React Blog App Part 4 – Infinite Scroll and Search
Infinite scroll loading
Searching posts
Final thoughts
Chapter 38: Animation in React
Animation terms
CSS transitions using class switching
Animating DOM enter and exit
Using the React-Motion animation library
Chapter 39: Exploring the Sample Application
Installing Xcode
Running the sample application
Experimenting with the sample application
Chapter 40: Beginning with the Example Application
Generating the projects
Structuring the application
Navigation
Chapter 41: Working with Styles and Layout
React CSS
Layout and Flexbox
Styling the NavigationBar component
Styling the NoteScreen
Chapter 42: Displaying and Saving Data
Lists
Chapter 43: Working with Geolocation and Maps
Introducing the Geolocation API
Tagging notes with geolocation
NoteLocationScreen
Chapter 44: Integrating Native Modules
Adding images to notes
Installing react-native-camera on iOS
Viewing images
Connecting the final pieces
Chapter 45: Releasing the Application
Generating the static bundle in iOS
Testing the static bundle in iOS
Creating an iOS release in Xcode
Generating the Android APK

Book Details

ISBN 139781786462268
Paperback910 pages
Read More
From 5 reviews

Read More Reviews