React Quickly: Painless web apps with React, JSX, Redux, and GraphQL

Previous Chapter

React Cheatsheet

List of Figures

Index

[SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X][Z]

SYMBOL

_ (underscore) character ... operator {} (curly braces), 2^nd, 3^rd * (asterisk) character # (hash) symbol

A

about variable abstractions, powerful accountsData property accumulator value action argument action creators overview passing into component properties actions dispatching overview, 2^nd activeClassName attribute add-ons addOption() function, 2^nd addToCart() function, 2^nd ancestors Angular, 2^nd animation events Apache Tomcat API (application program interface) querying saving responses into stores App component, 2^nd app.get() function app.jsx files creating route mapping in writing App component Index component app.listen() function app.NAME() function app.set() function, 2^nd apps, running in Express arbitrary code Array class Array.find() function Array.reduce() function arrow class arrow functions in ES6 overview assert module assertions asset hashing asterisk character attributes, passing with spread operators autobinding Autocomplete component code for implementing adding browser scripts Autocomplete component web servers rendering on server side from tests for automocking axios library, 2^nd

B

Babel compiler compiling ES6 JSX Node.js standalone browser using with ES6 babel property, 2^nd Babel tool, setting up JSX transpiler using babel-core babel-loader babel-preset-react babel-register, 2^nd Backbone framework overview routing with backticks baseModel class BDD (behavior-driven development), 2^nd before statement beforeEach statement binary operator bind() function, 2^nd, 3^rd block-scoped constructs const let body-parser, 2^nd bookstore, building with React Router creating components Host HTML files project structure Webpack configuration Boolean attribute values, in JSX booting servers Bootstrap framework, installing bootup browser scripts, adding Browserify tool installing overview browsers history standalone, in Babel btn-group class btn-primarydisabled class bubbling phases, in DOM events build tool Button component, Timer component and Button form element buttonLabel property buttons, integrating

C

Cancel button capture phases, in DOM events capturing changes, of uncontrolled elements form changes Cart component CartItems object CD (continuous deployment) CDN (content-delivery network) change() method cheatsheet for Express.js basic usage connect middleware generator handler signatures HTTP verbs installing Jade middleware request-header shortcuts requests resources response routes Stylus for MongoDB database for Mongoose document methods installing model methods schema for React add-ons components, 2nd installing lifecycle events methods properties propTypes Checkbox element checkboxGroup state checked attribute checked property Checkout component children distinguishing from their parents rendering children property, 2^nd, 3^rd CI (continuous integration) class attribute classes, in ES6 className clean-tagged-string library clearInterval() function click event click() method ClickCounterButton, 2^nd client-side code client-specific queries clipboard events cloning Cloudflare code for Autocomplete component for Password component for password modules maintainability of modularizing with Webpack build tool reusing with higher-order components using displayName using spread operator splitting code generators CodeBuild CodeDeploy CodePipeline combineReducers() function comments, in JSX community compiling ES6 JSX Node.js component classes, creating component lifecycle events categories of example executing all events together implementing mounting componentDidMount() componentWillMount() overview unmounting updating componentDidUpdate() componentWillReceive-Props(newProps) componentWillUpdate() shouldComponentUpdate() component-based architecture, using pure JavaScript componentDidMount() function, 2^nd, 3^rd, 4^th, 5^th, 6^th, 7^th componentDidUpdate() function, 2^nd components composing on servers connecting to stores creating writing app.jsx files default properties in distinguishing children from their parents ES5, options exchanging data between higher-order for code reuse withRouter in JSX layout, creating passing action creators into presentational vs. container rendering on server side from HTML pages simple text scaling property types rendering children validation. See Button component; Menu component; Timer component; TimerWrapper component; Tooltip component. componentWillMount() function, 2^nd, 3^rd, 4^th, 5^th componentWillReceiveProps() function, 2^nd componentWillUnmount() function, 2^nd, 3^rd componentWillUpdate() function, 2^nd compression, 2^nd concurrently tool, Node configurations configuring Express HMR Redux data library servers Webpack, 2^nd, 3^rd connect-cors connect-multiparty connect-redis connect-timeout connect() function, 2^nd, 3^rd, 4^th, 5^th, 6^th consoles, in MongoDB database const construct const variables constructor() function, 2^nd, 3^rd, 4^th container components, vs. presentational Content class Content component content-delivery network.. See CDN. contextType continuous integration. See CD; ; CI. controlled components cookie-parser cookie-session cookies count method counter property cover property create method create-react-app createClass() function, 2^nd, 3^rd createElement() function, 2^nd, 3^rd, 4^th, 5^th createFactory() function createStore() function, 2^nd cross-site scripting attack. See XSS. csurf curly braces, 2^nd, 3^rd current value currentDate property currentTarget custom validation

D

dangerouslySetInnerHTML, 2^nd dashes data exchanging between components Flux, architecture of routes unidirectional flow of, support for using GraphQL adding servers to Netflix clone overview using Redux action creators actions combining reducers configuration connecting components to stores dependencies dispatching an action enabling Redux Netflix clone passing action creators into component properties React support for unidirectional data flow reducer for movies routes running Netflix clone understanding Flux data architecture data structure, in GraphQL data- attributes, in JSX data-NAME attribute data-react-checksum attribute, 2^nd data-reactid attribute data-reactroot attribute, 2^nd, 3^rd Datepicker declarative style default parameters, in ES6 default properties, in components defaultProps attribute, 2^nd, 3^rd defaultValue attribute DELETE method requests dependencies, in Redux data library describe statement destructuring in ES6 overview devDependencies property, 2^nd, 3^rd developer experience. See DX. development mode devtool property, 2^nd DevTools directory flag disabled attribute disadvantages of React dispatch() function, 2^nd, 3^rd, 4^th dispatching actions Display component displayName, distinguishing child components from their parents distribution div element, 2^nd document element document methods, in Mongoose DOM (document object model), events bubbling phases capture phases exchanging data between components not supported by React, responding to overview passing event handlers as properties SyntheticEvent event objects using states with DOMEventTarget DoneLink dontMock() function double quotes DRY (don’t repeat yourself) principle, 2^nd DX (developer experience)

E

ECMAScript 5. See ES5 language specification. ECMAScript 6. See ES6 language specification. ecosystem elements creating with JSX finding with TestUtils nesting of forms <input> element <option> element <select> element <textarea> element uncontrolled with change capturing uncontrolled without capturing changes else statement emailStaticMarkup Ember empty array, 2^nd enabling Redux endpoints enhanced object literals, in ES6 Enter keystroke entry point environment variables Enzyme library errors, handling, 2^nd, 3^rd, 4^th ES5 language specification ES6 language specification arrow functions classes compiling default parameters destructuring enhanced object literals features of modules multiline strings promises template literals using with Babel ESLint event handlers, passing as properties event objects, with SyntheticEvent , 14^th. See component lifecycle events. DOM bubbling phases capture phases exchanging data between components not supported by React, responding to overview passing event handlers as properties SyntheticEvent event objects using states with in forms integrating with jQuery UI integrating buttons integrating labels exchanging data between components Expect syntax expect() function expect(OBJECT).toBe(value) expect(OBJECT).toBeDefined() expect(OBJECT).toBeFalsy() expect(OBJECT).toBeNull() expect(OBJECT).toBeTruthy() expect(OBJECT).toBe-Undefined() expect(OBJECT).toEqual(value) expect(OBJECT).toMatch (regexp) Express framework cheatsheet basics connect middleware generator handler signatures HTTP verbs installing Jade middleware request-header shortcuts requests resources response routes Stylus implementing Autocomplete component code for tests for implementing autocomplete with adding browser scripts creating server templates implementing web servers installing Node and, rendering on the server side from components with Universal JavaScript client-side React code composing React components on the server running apps server-side layout templates with Handlebars setting up servers setting up Webpack express-graphql package express-react-views library, 2^nd express-session express-validator, 2^nd, 3^rd express.static() function extract-text-webpack-plugin

F

fat arrows fat-arrow functions, 2^nd features, of ES6 fetch() function, 2^nd, 3^rd fetchMovieActionCreator() function fileSplitArray filter() function, 2^nd filteredOptions find method findAndModify method findById method findByIdAndRemove method findByIdAndUpdate method findOne method findOneAndUpdate method findRenderedComponentWithType() function findRenderedDOMComponent-WithClass() function, 2^nd findRenderedDOMComponent-WithTag() function Flatly, 2^nd, 3^rd flow-bin tool flux module, Facebook Flux, data architecture of focus events Footer component for attribute forceUpdate() function form events forms capturing changes default values defining defining elements of <input> element <option> element <select> element <textarea> element defining its events uncontrolled elements with change capturing uncontrolled elements without capturing changes using references to access values fragment identifier

G

Generate Password module generate() method generatePassword() function generator, in Express.js GET endpoint get method GET method requests getAccounts() method getAttribute() method getElementById() function getEventListeners() method getStyle() function Glyphicons Google Webmaster Central Blog GraphQL installing on servers schema of working with data adding servers to Netflix clone overview graphqlHTTP library

H

handleActions Handlebars templating engine layouts with server-side layout templates with handleCheckbox() method handleClick() method, 2^nd, 3^rd handleMouseOver() method handler property handler signatures, in Express.js handleSlide handleStartTimer() method handleSubmit() method hash symbol hash token hash, history hbs template Header component headless browsers Hello World program helmet hierarchical queries higher-order components for code reuse, 2^nd using displayName using spread operator withRouter, accessing routers with history library HMR (hot module replacement), 2^nd, 3^rd, 4^th HOC (higher-order component) hoisted function Host HTML files, 2^nd href attribute html attribute HTML pages, rendering booting up servers configuration handling errors layout with Handlebars middleware routes HTTP verbs, in Express.js hydrating data

I

idempotent if statement if/else condition, in JSX IFrame ig (case insensitive and global) image events immutable state implementing routers creating route mapping in app.jsx creating Router component in router.jsx imports incoming property transition Index component, 2^nd index template indexing pages IndexRoute innerHTML value <input> element inputValue installing Bootstrap Browserify Express Express.js GraphQL on servers MongoDB Mongoose Node.js React React DOM Webpack build tool interactive properties isActive() method isDefaultPrevented() method isModal condition isModified() method isPersistent isPropagationStopped() method isRequired property isVisible IT (information technology) it statement

J

Jade templating engine, Express.js and JavaScript XML. See JSX. JavaScript, component-based architecture using Jest assertions checking passwords with Host HTML files implementing Password component implementing password modules implementing Autocomplete component implementing autocomplete with adding browser scripts creating server templates implementing web servers UI testing with finding elements with TestUtils shallow rendering UI-testing password widget unit testing with advantages of Jest assertions types of UI testing with writing tests jest.autoMockOff() function jQuery Slider jQuery UI (user interface) integrating with events integrating buttons integrating labels JS.Coach JSX (JavaScript XML) attributes not accepted by Boolean attribute values building Menu component in refactoring Link component refactoring Menu component running JSX projects building Menu component without comments creating elements with data-attributes if/else condition in components outputting variables in overview properties React component methods, creating running projects in special characters in style attribute tags, compiling transpiler, setting up using Babel with React Router

K

key attribute key property, 2^nd keyboard events keyCode Khan Academy

L

label property labels, integrating launchClock() method layout components, creating layouts server-side templates with Handlebars with Handlebars LESS files let construct libraries lifecycle events, 2^nd Link component overview refactoring listen() function, 2^nd loaders loading times LoadWebsite local Logo component logUpperCase() function

M

maintainability map() function, 2^nd, 3^rd, 4^th mapping object mapping routes in app.jsx mapStateToProps() function Markdown Material-UI Math.random() function Menu component building in JSX refactoring Link component refactoring Menu component running JSX projects building without JSX refactoring scaffolding structure menuOptions property menus array, 2^nd MessageBoard, 2^nd MessageList messages array messages property method requests method-override methods middleware, 2^nd, 3^rd, 4^th, 5^th mocking Modal component model methods, in Mongoose modularizing code with Webpack build tool module.export global module.exports module.hot.accept() function modules, in ES6 mongo command, 2^nd mongod command, 2^nd MongoDB database cheatsheet implementing Autocomplete component code tests implementing autocomplete with adding browser scripts creating server templates implementing web servers installing Mongoose library, cheatsheet document methods installing model methods schema morgan, 2^nd mounting component lifecycle events componentDidMount() componentWillMount() mounting events mouse events mouseOver event Mozilla Developer Network multiline strings, in ES6 multiple attribute mutable state, 2^nd myUtil module

N

nativeEvent nave navigating programmatically nesting elements Netflix clone adding servers to data structure GraphQL schema installing GraphQL on servers querying API and saving responses into stores showing list of movies Redux with running new Data() method NewMessage Node Express and, rendering on the server side from components React on Universal JavaScript with node command, 2^nd Node Patterns course Node platform compiling installing node value node-dev node-static nodemon tool, 2^nd Note element notEmpty() function npm command npm install, 2^nd, 3^rd, 4^th npm run build, 2^nd, 3^rd, 4^th nullified nvm (Node Version Manager)

O

object literals, enhanced Object.assign() function Object.create() method offsetLeft onChange() method, 2^nd, 3^rd onClick event, 2^nd one-way binding, 2^nd onInput event onKeyUp() method, 2^nd onMouseOver onMouseOverCapture onResize onSubmit event opacity state, 2^nd <option> element option-name class options property orphaned event handlers

P

parentheses passport Password component, implementing code render () function tests Password element password field password modules, implementing password variable, 2^nd, 3^rd Password widget PasswordGenerate, 2^nd PasswordInfo, 2^nd PasswordInput, 2^nd passwords checking with Jest Host HTML files implementing Password component implementing password modules UI-testing widgets PasswordVisibility, 2^nd Pause/Resume button performance, improving persist() method pick() function placeholder property play() method populate() method post hook POST method requests postlearn-react posts array pre hook prelearn-react presentational components, vs. container preventDefault() method processedRules object Product component --production flag promises, in ES6 prop-types package properties, 2^nd default in components in JSX passing event handlers as passing in React Router states and types of props propTypes property, 2^nd, 3^rd proto property prototyping Provider component, 2^nd publicPath pushState PUT method requests PWD variable

Q

query strings querying API queryKey

R

radio buttons radioGroup raw-body React advantages of using better code maintainability better performance faster loading times proper page indexing benefits of ecosystem and community simplicity speed and testability cheatsheet add-ons components, 2nd installing lifecycle events methods properties propTypes disadvantages of installing, 2^nd overview problem solved by rendering on servers web applications and React libraries and rendering targets React stack single-page applications React component methods, creating in JSX React DOM (document object model) React Rocks React Router browser history building bookstores with project structure Webpack configuration creating components Cart component Checkout component Modal component Product component writing app.jsx files creating layout components development setup with Webpack features of accessing routers with withRouter higher-order component navigating programmatically route data URL parameters hash history Host HTML files JSX style passing properties in React stack react-addons-test-utils package react-dom react-hot-loader react-redux package react-router react-test-renderer package React.Component() function React.createClass() function React.createElement() function ReactDOM.findDOMNode() function ReactDOM.render() function, 2^nd, 3^rd, 4^th, 5^th ReactDOMServer ReactJSX.com readOnly reduce method reducers combining for movies Redux container enabling working with data React support for unidirectional data flow understanding Flux data architecture working with data library action creators actions combining reducers configuration connecting components to stores dependencies dispatching an action enabling Redux Netflix clone passing action creators into component properties reducer for movies routes running Netflix clone redux-actions library, 2^nd, 3^rd redux-netflix ref attribute ref property refactoring Link component Menu component references, using to access values regular-expression pattern remove method render() function, of Password component rendering children HTML pages booting up servers configuration handling errors layout with Handlebars middleware routes on the server side from components HTML pages simple text React on servers shallow text renderIntoDocument() function, 2^nd renderToStaticMarkup() function renderToString() function replace() method replaceState() method representational components req.message.find() function request-header, shortcuts in Express.js request.accepts(type) shortcut request.acceptsCharset(charset) shortcut request.acceptsLanguage(language) shortcut request.body shortcut request.cookies shortcut request.fresh shortcut request.get(headerKey) shortcut request.host shortcut request.ip shortcut request.ips shortcut request.is(type) shortcut request.originalUrl shortcut request.params shortcut request.path shortcut request.protocol shortcut request.query shortcut request.route shortcut request.secure shortcut request.signedCookies shortcut request.stale shortcut request.subdomains shortcut request.xhr shortcut request/param requests, in Express.js require() function, 2^nd required properties res.render() function Reset button resize event resolve key resources, in Express.js response-time response.render() function response.send() function responses, in Express.js RESTful APIs (application program interfaces) rooms array route property Router class Router component, creating in router.jsx router.jsx, creating Router component in router.push(URL) RouterContext routers accessing with withRouter higher-order component implementing creating route mapping in app.jsx creating Router component in router.jsx routes data in Express.js in Redux data library mapping in app.jsx server-side routing, with Backbone row-fluid class rules array

S

SaaS (software-as-a-service) save method save operation SaveButton scaffolding of Menu component of Timer component of Tooltip component scaling components property types rendering children validation schema, of Mongoose scripts block scryRenderedComponentsWithType() function scryRenderedDOMComponents-WithClass() function scryRenderedDOM-ComponentsWithTag() function seed command <select> element selected property selection events sendData() method sendFile() function SEO (search engine optimization), 2^nd serve-favicon serve-index serve-static server templates, creating server-side layout templates, with Handlebars server-side rendering, from components HTML pages simple text server-side routes servers adding to Netflix clone data structure GraphQL schema installing GraphQL on servers querying API and saving responses into stores showing list of movies booting composing components on installing GraphQL on rendering React on setting up configuration middleware server-side routes. See web servers. service testing serviceBase set method SET_VISIBILITY_FILTER action setInterval() function, 2^nd setState() function, 2^nd, 3^rd, 4^th, 5^th setTimeout() function shallow rendering shouldComponentUpdate() lifecycle event shuffle() method signatures. See handler signatures. simplicity component-based architecture using pure JavaScript declarative over imperative style powerful abstractions skinny arrows slider button slider control element SliderButtons sliderValue state SOAP protocol software-as-a-service. See SaaS. SPA (single-page application), 2^nd, 3^rd special characters, in JSX speed spread operators, passing attributes with standalone browser, in Babel startTimer() method, 2^nd state argument states accessing overview properties and setting initial state stateless components general discussion stateful vs. updating using with events static assets static files static middleware stopPropagation() method store property store.dispatch() function stores connecting components to saving API responses into strength variable strings, multiline strong typing strong-password module style attribute, in JSX style property style-loader Stylus stylesheet language, Express.js and super() method switch/case statement, 2^nd SyntheticEvent, event objects

T

tagged strings target property TDD (test-driven development) template literals, in ES6 test cases testability testing for Autocomplete component of Password component of password modules UI with Jest finding elements with TestUtils shallow rendering UI-testing password widget UI with TestUtils finding elements with shallow rendering UI-testing password widget UI-password widgets units with Jest advantages of Jest assertions types of UI testing with UI testing with TestUtils writing unit tests in Jest Webpack builds TestUtils finding elements with UI testing with finding elements with shallow rendering UI-testing password widget TestUtils.findRenderedDOMComponentWithClass() function TestUtils.scryRenderedDOMComponentsWithTag() function text field text, rendering <textarea> element then property this.isMounted property this.props property this.props,children this.props.dispatch()function this.refs property this.setState() function, 2^nd this.state property time property, 2^nd timeLeft variable Timer component Button component and scaffolding structure TimerWrapper component and TimerWrapper component title property, 2^nd toBe() function toEqual() function toggle() function toJSON() method toLocaleString() method toLowerCase() method tooltip Tooltip component render( ) function scaffolding structure toggle( ) function tooltipNode toString() function touch events transform-react-jsx transition events transpiler, JSX trim() method triple curly braces two-way binding, 2^nd type attribute type property

U

UI (acceptance) testing UI (user interface) testing password widgets testing with Jest finding elements with TestUtils shallow rendering UI-testing password widget testing with TestUtils finding elements with shallow rendering UI-testing password widget uncontrolled elements, of forms with change capturing without capturing changes underscore character unidirectional data flow, support for unit testing units, testing with Jest advantages of Jest assertions types of UI testing with UI testing with TestUtils writing tests Universal JavaScript Express with client-side React code composing React components on the server running apps server-side layout templates with Handlebars setting up servers setting up Webpack with Node with React unmounting events, 2^nd update method updating component lifecycle events componentDidUpdate( ) componentWillReceive-Props(newProps) componentWillUpdate( ) shouldComponent-Update( ) states upperCase property url function URL parameters, 2^nd URL path url property URL routing urlencoded data format user interface. See UI.

V

-V option v property validate method validation value attribute value property, 2^nd values default using references to access variables, outputting in JSX vhost visibilityFilter value visible variable

W

wds script wds-cli script web applications React libraries and rendering targets React stack single-page applications web servers, implementing defining RESTful APIs rendering React on servers webpack -w command Webpack build tool configuring, 2^nd, 3^rd development setup with HMR installing installing dependencies of modularizing code with overview running testing builds webpack-dev-server, 2^nd, 3^rd wheel events withRouter component, accessing routers with

X

XSS (cross-site scripting) attack

Z

Previous Chapter

React Cheatsheet

List of Figures