book

React: Building Modern Web Applications

Name: React: Building Modern Web Applications
ISBN: 9781786462268

by Jonathan Hayward, Artemij Fedosejev, Narayan Prusty, Adam Horton, Ryan Vice, Ethan Holmes, Tom Bray

June 2016

Intermediate to advanced

910 pages

18h 59m

English

Packt Publishing

Read now

Unlock full access

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
A 10,000-foot overviewAn easier way to handle user interface programmingProgramming paradigms
Installing the tools required
Installing Node.jsInstalling the Starter Kit for ReactJSInstalling Git

2. Core JavaScript
The strict mode
Variables and assignment
CommentsFlow control
A note on values and NaN
FunctionsExplanationLoopsTaking a look at ECMAScript 6
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
4. Demonstrating Nonfunctional Reactive Programming – A Live Example
The history of a game with multiple ports
The HTML for the web page
Using a content distribution network wherever we canSome simple stylingA fairly minimal page body
The JavaScript that animates that page
A brief syntax note – Immediately Invoked Function ExpressionVariable declaration and initializationThe function used to start or restart the gameThe function that creates game levelsGetting our hands dirty with ReactJS classesTick-tock, tick-tock – the game's clock ticksGAME OVER
5. Learning Functional Programming – The Basics
Custom sort functions – the first example of functional JavaScript and first-class functionsThis leads us to array.filter()Illusionism, map, reduce, and filterFool's gold – extending Array.prototypeAvoiding global pollutionThe map, reduce, and filter toolbox – mapThe reduce functionThe last core tool – filter
An overview of information hiding in JavaScript
Information hiding with JavaScript closures
6. Functional Reactive Programming – The Basics
A trip down computer folklore's memory laneAdvanced prerequisites for Hello, World!
Distinguishing the features of functional reactive programming
If you learn just one thing...
Learn what you can!
JavaScript as the new bare metal
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
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
9. Demonstrating Functional Reactive Programming in JavaScript with a Live Example Part II – A To-do List
Adding a to-do list to our applicationIncluding ReactJS add-ons in our projectSetting the appropriate initial stateMaking text editableHeavy lifting with render()Inner functions used to renderBuilding the result tableRendering our resultDifferentiating columns visually
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
Adding a WYSIWYG scratchpad, courtesy CKeditorBringing all things together into one web pageThis book is about ReactJS, so why use CKeditor?
CKeditor – small free offerings, and small is beautiful
Including CKeditor in our page
Integrating all four subcomponents into one page
Persistence
One detail – persisting the CKeditor state
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!
2. Course Module 2: React.js Essentials
1. 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
2. Create Your First React Element
Understanding the virtual DOM
Pending
Creating React Elements with JavaScript
The type parameterThe props parameterThe children parameter
Rendering React Elements
Creating React Elements with JSX
3. Create Your First React Component
Stateless versus stateful
Creating your first stateless React component
Creating your first stateful React component
4. Make Your React Components Reactive
Solving a problem using React
Planning your React application
Creating a container React component
5. Use Your React Components with Another Library
Using another library in your React component
Understanding React component's lifecycle methods
Mounting methodsThe getInitialState methodThe componentWillMount methodThe componentDidMount methodUnmounting methodsThe componentWillUnmount method
6. Update Your React Components
Understanding component lifecycle's updating methodsThe componentWillReceiveProps methodThe shouldComponentUpdate methodThe componentWillUpdate methodThe componentDidUpdate method
Setting default React component properties
Validating React component properties
Creating a Collection component
7. Build Complex React Components
Creating the TweetList component
Creating the CollectionControls component
Creating the CollectionRenameForm component
Creating the Button component
Creating the CollectionExportForm component
8. 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
9. Supercharge Your React Architecture with Flux
Analyzing your web application's architecture
Creating a dispatcher
Creating an action creator
Creating a store
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
The let keywordDeclaring function scoped variablesDeclaring block scoped variablesRe-declaring variables
The const keyword
The scope of constant variablesReferencing the objects using constant variables
Default parameter values
The spread operator
Other usages of the spread operatorMaking array values a part of another arrayPushing the values of an array into another arraySpreading multiple arrays
The rest parameter
The destructuring assignment
The array destructuring assignmentIgnoring valuesUsing the rest operator in the array destructuring assignmentDefault values for variablesNested array destructuringUsing the destructuring assignment as a parameterThe object destructuring assignmentDefault values for the variablesDestructuring computed property namesDestructuring nested objectsUsing the object destructuring assignment as a parameter
The arrow functions
The value of "this" in an arrow functionOther differences between the arrow and traditional functions
The enhanced object literals
Defining propertiesDefining methodsThe computed property names
2. Knowing Your Library
Working with numbersThe binary notationThe octal notationThe Number.isInteger(number) methodThe Number.isNaN(value) methodThe Number.isFinite(number) methodThe Number.isSafeInteger(number) methodThe Number.EPSILON property
Doing Math
Trigonometry related operationsArithmetic related operationsMiscellaneous methodsThe Math.imul(number1, number2) functionThe Math.clz32(number) functionThe Math.sign(number) functionThe Math.trunc(number) functionThe Math.fround(number) function
Working with strings
Escaping larger code pointsThe codePointAt(index) methodThe String.fromCodePoint(number1, …, number 2) methodThe repeat(count) methodThe includes(string, index) methodThe startsWith(string, index) methodThe endsWith(string, index) functionNormalizationA case studyTemplate stringsExpressionsMultiline stringsRaw strings
Arrays
The Array.from(iterable, mapFunc, this) methodThe Array.of(values…) methodThe fill(value, startIndex, endIndex) methodThe find(testingFunc, this) methodThe findIndex(testingFunc, this) methodThe copyWithin(targetIndex, startIndex, endIndex) functionThe entries(), keys(), and values() method
Collections
Array buffersTyped arraysSetWeakSetMapWeakMap
Object
The __proto__ propertyThe Object.is(value1, value2) methodThe Object.setPrototypeOf(object, prototype) methodThe Object.assign(targetObj, sourceObjs…) method
3. Using Iterators
The ES6 symbolsThe "typeof" operatorThe "new" operatorUsing symbols as property keysThe Object.getOwnPropertySymbols() methodThe Symbol.for(string) methodThe well-known symbols
The iteration protocols
The iterator protocolThe iterable protocol
Generators
The return(value) methodThe throw(exception) methodThe "yield*" keyword
The "for…of" loop
The tail call optimization
Converting the non-tail calls into the tail calls
4. Asynchronous Programming
The JavaScript execution model
Writing asynchronous code
The asynchronous code involving eventsThe asynchronous code involving callbacks
Promises to the rescue
The Promise constructorThe fulfillment valueThe then(onFulfilled, onRejected) methodThe catch(onRejected) methodThe Promise.resolve(value) methodThe Promise.reject(value) methodThe Promise.all(iterable) methodThe Promise.race(iterable) method
The JavaScript APIs based on Promises
The Battery Status APIThe Web Cryptography API
5. Implementing the Reflect API
The Reflect objectThe Reflect.apply(function, this, args) methodThe Reflect.construct(constructor, args, prototype) methodThe Reflect.defineProperty(object, property, descriptor) methodUnderstanding the data properties and accessor propertiesThe Reflect.deleteProperty(object, property) methodThe Reflect.enumerate(object) methodThe Reflect.get(object, property, this) methodThe Reflect.set(object, property, value, this) methodThe Reflect.getOwnPropertyDescriptor(object, property) methodThe Reflect.getPrototypeOf(object) methodThe Reflect.setPrototypeOf(object, prototype) methodThe Reflect.has(object, property) methodThe Reflect.isExtensible(object) methodThe Reflect.preventExtensions(object) methodThe Reflect.ownKeys(object) method
6. Using Proxies
Proxies in a nutshellTerminology
The Proxy API
TrapsThe get(target, property, receiver) methodRulesThe set(target, property, value, receiver) methodRulesThe has(target, property) methodRulesThe isExtensible(target) methodRulesThe getPrototypeOf(target) methodRulesThe setPrototypeOf(target, prototype) methodRulesThe preventExtensions(target) methodRulesThe getOwnPropertyDescriptor(target, property) methodRulesThe defineProperty(target, property, descriptor) methodRulesThe deleteProperty(target, property) methodRulesThe enumerate(target) methodRulesThe ownKeys(target) methodRulesThe apply(target, thisValue, arguments) methodThe construct(target, arguments) methodThe Proxy.revocable(target, handler) methodUse Case
The uses of proxies
7. Walking You Through Classes
Understanding the Object-oriented JavaScriptThe JavaScript data typesCreating objectsUnderstanding inheritanceThe constructors of primitive data types
Using classes
Defining a classThe class declarationThe class expressionThe prototype methodsThe get and set methodsThe generator methodThe static methodsImplementing inheritance in classesThe computed method namesThe attributes of propertiesClasses are not hoisted!Overriding the result of the constructor methodThe "Symbol.species" static accessor propertyThe "new.target" implicit parameter
Using "super" in the object literals
8. Modular Programming
The JavaScript modules in a nutshell
Implementing modules – the old way
The Immediately-Invoked Function ExpressionAsynchronous Module DefinitionCommonJSUniversal Module Definition
Implementing modules – the new way
Creating the ES6 modulesImporting the ES6 modulesThe module loaderUsing modules in browsersUsing modules in the eval() functionThe default exports vs. the named exportsDiving into an example
4. Course Module 4: Mastering React
1. Dynamic Components, Mixins, Forms, and More JSX
Dynamic componentsHow it works
Mixins
How it works
Forms
Controlled components - the read-only inputHow it worksControlled components - the read and write inputHow it worksIsn't that harder than it needs to be?Controlled components – a simple formHow it worksBut what about the best practices?Refactoring the form to be data drivenHow it worksValidationValidation typesField-level validationForm-level validationThe react-validation-mixin exampleGetting the codeRunning the codeGetting the code
2. Anatomy of a React Application
What is a single-page application?
Three aspects of a SPA design
Build systemsChoosing a build systemModule systemsCommonJSAMDOur module choiceCSS preprocessorsCompiling the modern JS syntax and JSX templatesFront-end architecture componentsThe front-end routerFront-end modelsViews, view models, and view controllersMessaging and eventingOther utility needsThe application designCreating wireframesMain data entities and the APIMain views, site map, and routes
3. Starting a React Application
Application designCreating wireframesUser-related viewsPost-related viewsData entitiesMain views and the sitemap
Preparing the development environment
Installing and configuring WebpackThe Webpack configurationEntry and output sectionsThe plugins sectionThe resolve sectionThe module section
Considerations before starting
React and renderingBrowser supportForm validation
Starting the app
The directory structureThe mock databaseindex.htmljs/app.jsxMain viewsLinking views with React Routerjs/views/appHeader.jsxjs/views/login.jsx
4. React Blog App Part 1 – Actions and Common Components
Reflux actions
Reusable components and base styles
Base stylesInputs and loading indicatorThe BasicInput componentThe loader componentThe application header
5. React Blog App Part 2 – Users
Code manifest
Application runtime configuration
Mixins and dependencies
Reading and writing cookiesThe form utilities mixin
User-related stores
The session context storeThe user store
User views
The log in viewThe create user viewMixins and lifecycle methodsThe user profile imageForm validation and submissionThe user view componentThe user list viewThe user view
Other affected views
The app header
6. React Blog App Part 3 – Posts
Code manifest
The posts store
Post views
Post create/editMixins and lifecycle methodsForm submissionThe post viewThe post list componentThe post list view
Other affected views
The user view
7. React Blog App Part 4 – Infinite Scroll and Search
Infinite scroll loadingInfinite scroll code manifestModifying the posts storeModifying the post list component
Searching posts
Search feature code manifestThe search storeModifying the posts storeModifying the application headerModifying the post list component
Final thoughts
Suggested improvementsLevel up the blog app
8. Animation in React
Animation terms
CSS transitions using class switching
JavaScript codeCSS source
Animating DOM enter and exit
Popover menusJavaScript sourceCSS sourceList filteringJavaScript sourceCSS source
Using the React-Motion animation library
How React-Motion worksClock animationJavaScript sourceCSS source
5. Course Module 5: Getting Started with React Native
1. Exploring the Sample Application
Installing Xcode
Running the sample application
A sneak peek at the sample application
Experimenting with the sample application
2. Beginning with the Example Application
Generating the projectsXcode and the iOS simulatorThe Android SDK and emulatorModifying the React Native starter template
Structuring the application
Creating the SimpleButton component
Navigation
The Navigator componentNavigator.NavigationBarThe NoteScreen – first pass
3. Working with Styles and Layout
React CSSStyle SheetStyling the SimpleButton component
Layout and Flexbox
Flex containerFlex itemsHorizontal and vertical centeringAbsolute positioning
Styling the NavigationBar component
Changing the Android Material Theme
Styling the NoteScreen
4. Displaying and Saving Data
ListsUnderstanding propsUsing statePassing callbacks in propsCreating new notesUsing AsyncStorageDeleting notes
5. Working with Geolocation and Maps
Introducing the Geolocation APIThe location permission in iOS
Tagging notes with geolocation
NoteLocationScreen
MapView
6. Integrating Native Modules
Adding images to notes
Installing react-native-camera on iOS
Searching for Native ModulesUsing the camera component
Viewing images
The image componentDeleting images
Connecting the final pieces
7. 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
Reflect and Test Yourself Answers
Module 1: Reactive Programming with JavaScript
Module 2: React.js Essentials
Module 3: Learning ECMAScript 6
Module 4: Mastering React
Module 5: Getting Started with React Native
Index

Content preview from React: Building Modern Web Applications

Testing React components

Just like with utility modules, creating tests for React components starts with creating the __tests__ directory. Navigate to ~/snapterest/source/components/ and create the __tests__ directory.

The first React component that we'll test will be our Header component. Create Header-test.js in the ~/snapterest/source/components/__tests__ directory:

jest.dontMock('../Header.react'); describe('Header component', function () { it('renders provided header text', function () { var React = require('react'); var ReactDOM = require('react-dom'); var TestUtils = require('react-addons-test-utils'); var Header = require('../Header.react'); var header = TestUtils.renderIntoDocument( <Header text="Testing..." /> ); var actualHeaderText = ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.