book

React: Building Modern Web Applications

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

A 10,000-foot overviewAn easier way to handle user interface programmingProgramming paradigms
Installing Node.jsInstalling the Starter Kit for ReactJSInstalling Git

The strict mode
CommentsFlow control
FunctionsExplanationLoopsTaking a look at ECMAScript 6
Declarative programming
The history of a game with multiple ports
Using a content distribution network wherever we canSome simple stylingA fairly minimal page body
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
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
Information hiding with JavaScript closures
A trip down computer folklore's memory laneAdvanced prerequisites for Hello, World!
ClojureScript
What we will be attempting in this chapter
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
Play it again Sam – an interesting challenge
Adding a WYSIWYG scratchpad, courtesy CKeditorBringing all things together into one web pageThis book is about ReactJS, so why use CKeditor?
Including CKeditor in our page
One detail – persisting the CKeditor state
A review of the terrain covered
Approaching our project
Understanding the virtual DOM
The type parameterThe props parameterThe children parameter
Stateless versus stateful
Solving a problem using React
Using another library in your React component
Mounting methodsThe getInitialState methodThe componentWillMount methodThe componentDidMount methodUnmounting methodsThe componentWillUnmount method
Understanding component lifecycle's updating methodsThe componentWillReceiveProps methodThe shouldComponentUpdate methodThe componentWillUpdate methodThe componentDidUpdate method
Creating the TweetList component
Why write unit tests?
Analyzing your web application's architecture
Decoupling concerns with Flux
The let keywordDeclaring function scoped variablesDeclaring block scoped variablesRe-declaring variables
The scope of constant variablesReferencing the objects using constant variables
Other usages of the spread operatorMaking array values a part of another arrayPushing the values of an array into another arraySpreading multiple arrays
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 value of "this" in an arrow functionOther differences between the arrow and traditional functions
Defining propertiesDefining methodsThe computed property names
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
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
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
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
Array buffersTyped arraysSetWeakSetMapWeakMap
The __proto__ propertyThe Object.is(value1, value2) methodThe Object.setPrototypeOf(object, prototype) methodThe Object.assign(targetObj, sourceObjs…) method
The ES6 symbolsThe "typeof" operatorThe "new" operatorUsing symbols as property keysThe Object.getOwnPropertySymbols() methodThe Symbol.for(string) methodThe well-known symbols
The iterator protocolThe iterable protocol
The return(value) methodThe throw(exception) methodThe "yield*" keyword
Converting the non-tail calls into the tail calls
The JavaScript execution model
The asynchronous code involving eventsThe asynchronous code involving callbacks
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 Battery Status APIThe Web Cryptography 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
Proxies in a nutshellTerminology
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
Understanding the Object-oriented JavaScriptThe JavaScript data typesCreating objectsUnderstanding inheritanceThe constructors of primitive data types
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
The JavaScript modules in a nutshell
The Immediately-Invoked Function ExpressionAsynchronous Module DefinitionCommonJSUniversal Module Definition
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
Dynamic componentsHow it works
How it works
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
What is a single-page application?
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
Application designCreating wireframesUser-related viewsPost-related viewsData entitiesMain views and the sitemap
Installing and configuring WebpackThe Webpack configurationEntry and output sectionsThe plugins sectionThe resolve sectionThe module section
React and renderingBrowser supportForm validation
The directory structureThe mock databaseindex.htmljs/app.jsxMain viewsLinking views with React Routerjs/views/appHeader.jsxjs/views/login.jsx
Reflux actions
Base stylesInputs and loading indicatorThe BasicInput componentThe loader componentThe application header
Code manifest
Reading and writing cookiesThe form utilities mixin
The session context storeThe user store
The log in viewThe create user viewMixins and lifecycle methodsThe user profile imageForm validation and submissionThe user view componentThe user list viewThe user view
The app header
Code manifest
Post create/editMixins and lifecycle methodsForm submissionThe post viewThe post list componentThe post list view
The user view
Infinite scroll loadingInfinite scroll code manifestModifying the posts storeModifying the post list component
Search feature code manifestThe search storeModifying the posts storeModifying the application headerModifying the post list component
Suggested improvementsLevel up the blog app
Animation terms
JavaScript codeCSS source
Popover menusJavaScript sourceCSS sourceList filteringJavaScript sourceCSS source
How React-Motion worksClock animationJavaScript sourceCSS source
Installing Xcode
A sneak peek at the sample application
Generating the projectsXcode and the iOS simulatorThe Android SDK and emulatorModifying the React Native starter template
Creating the SimpleButton component
The Navigator componentNavigator.NavigationBarThe NoteScreen – first pass
React CSSStyle SheetStyling the SimpleButton component
Flex containerFlex itemsHorizontal and vertical centeringAbsolute positioning
Changing the Android Material Theme
ListsUnderstanding propsUsing statePassing callbacks in propsCreating new notesUsing AsyncStorageDeleting notes
Introducing the Geolocation APIThe location permission in iOS
MapView
Adding images to notes
Searching for Native ModulesUsing the camera component
The image componentDeleting images
Generating the static bundle in iOS
Module 1: Reactive Programming with JavaScript

Content preview from React: Building Modern Web Applications

Implementing modules – the old way

Before ES6, JavaScript had never supported modules natively. Developers used other techniques and third-party libraries to implement modules in JavaScript.

Using Immediately-invoked function expression (IIFE), Asynchronous Module Definition (AMD), CommonJS, and Universal Module Definition (UMD) are various popular ways of implementing modules in ES5. As these ways were not native to JavaScript, they had several problems. Let's see an overview of each of these old ways of implementing modules.