Book Image

Getting Started with React

By : Doel Sengupta, Manu Singhal, Danillo Corvalan
Book Image

Getting Started with React

By: Doel Sengupta, Manu Singhal, Danillo Corvalan

Overview of this book

ReactJS, popularly known as the V (view) of the MVC architecture, was developed by the Facebook and Instagram developers. It follows a unidirectional data flow, virtual DOM, and DOM difference that are generously leveraged in order to increase the performance of the UI. Getting Started with React will help you implement the Reactive paradigm to build stateless and asynchronous apps with React. We will begin with an overview of ReactJS and its evolution over the years, followed by building a simple React component. We will then build the same react component with JSX syntax to demystify its usage. You will see how to configure the Facebook Graph API, get your likes list, and render it using React. Following this, we will break the UI into components and you’ll learn how to establish communication between them and respond to users input/events in order to have the UI reflect their state. You’ll also get to grips with the ES6 syntaxes. Moving ahead, we will delve into the FLUX and its architecture, which is used to build client-side web applications and complements React’s composable view components by utilizing a unidirectional data flow. Towards the end, you’ll find out how to make your components reusable, and test and deploy them into a production environment. Finally, we’ll briefly touch on other topics such as React on the server side, Redux and some advanced concepts.
Table of Contents (18 chapters)
Getting Started with React
Credits
About the Authors
Acknowledgments
About the Reviewers
www.PacktPub.com
Preface
Index

Index

A

  • access token
    • about / What it is and how to configure it
  • actions
    • defining / Actions
  • AJAX, in React
    • defining / AJAX in React
    • URL / AJAX in React
    • references / AJAX in React
  • API documentation
    • URL / What it is and how to configure it
  • Atom
    • URL / Text editors
    • about / Text editors

B

  • .babelrc file
    • URL / The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel
  • Bower
    • about / Downloading ReactJS
    • ReactJS, installing with / Installing ReactJS with Bower
    • URL / Installing ReactJS with Bower
  • Brackets
    • URL / Text editors
    • about / Text editors

C

  • CDN
    • URL / Open-Graph JavaScript SDK
  • code
    • revisiting / Revisiting the code
  • communities, on social media
    • references / References
  • component properties
    • defining / Component properties
    • data flow, with properties / Data flow with properties
  • component structure
    • defining / The structure of component
    • URL / The structure of component
  • component style, JSX and Gotchas
    • about / Component style
    • style / Style
    • CSS classes / CSS classes
  • Content Delivery Network
    • about / Open-Graph JavaScript SDK
  • Content Distribution Network (CDN)
    • about / Open-Graph JavaScript SDK
  • Controller-Views
    • and Views / Controller-Views and Views
  • CSS classes
    • references / CSS classes

D

  • data centers
    • URL / Open-Graph JavaScript SDK
  • declarative data fetching
    • about / Relay and GraphQL
  • dispatchers
    • defining / Dispatchers
  • DOM (Document Object Model)
    • about / Introducing ReactJS

E

  • ECMAScript7
    • URL / ES7
  • Emacs Editor
    • URL / Text editors
  • ES(ECMAScript) versions, React
    • ES6 / ES6
    • ES7 / ES7
  • ES6
    • about / Transferring properties
  • eventPhase event property
    • URL / nativeEvent
  • events
    • defining / Events
    • Form events / Form events
    • Mouse events / Mouse events, nativeEvent
    • event pooling / Event pooling
    • supported events / Supported events

F

  • Facebook developer plugin
    • URL / Introducing ReactJS
  • Facebook developer team
    • references / nativeEvent
  • Facebook documentation
    • URL / Supported events, Exploring Mixins by example, ReactDOMServer
  • Facebook Open-Graph API
    • configuring / Configuring Facebook Open-Graph API, What it is and how to configure it
    • defining / What it is and how to configure it
    • app-id, creating on Facebook developers site / Creating an app-id on the Facebook developers site
    • Open-Graph JavaScript SDK / Open-Graph JavaScript SDK
  • Facebook ReactJS development team documentation
    • URL / Validations
  • Flux
    • defining / An overview of Flux
    • components / An overview of Flux, Flux components
    • versus MVC architecture / Flux versus the MVC architecture
    • advantages / Flux advantages
  • Flux dispatchers
    • about / Dispatchers

G

  • GraphQL
    • and Relay / Relay and GraphQL
    • about / Relay and GraphQL
  • Grunt
    • URL / Tools for transforming JSX
  • Grunt React task
    • URL / Tools for transforming JSX
  • Gulp
    • URL / Tools for transforming JSX
    • defining / Introduction to Gulp
    • installing / Installing Gulp and creating Gulp file
  • Gulp documentation
    • URL / Installing Gulp and creating Gulp file
  • Gulp file
    • creating / Installing Gulp and creating Gulp file
  • Gulp React task
    • URL / Tools for transforming JSX

H

  • hot reloading
    • defining / Hot reloading
    • URL / Hot reloading
    • limitations / Hot reloading

I

  • Isomorphic applications
    • defining / Isomorphic applications

J

  • JavaScript
    • references / An example using the isRequired validator
    • testing, Chai used / Testing in JavaScript using Chai and Mocha
    • testing, Mocha used / Testing in JavaScript using Chai and Mocha
  • JavaScript SDK
    • URL / Open-Graph JavaScript SDK
    • references / Open-Graph JavaScript SDK
  • jestTypical example
    • with Mocha / The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel
    • with Expect / The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel
    • with ReactTestUtils / The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel
    • with Babel / The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel
  • JSX
    • configuring / Configuring JSX
    • defining / What is JSX?
    • need for / Why JSX?
    • transforming, tools used / Tools for transforming JSX
    • installing / Installing React and JSX
  • JSX and Gotchas
    • learning / Learning JSX and Gotchas
    • expressions / Expressions
    • properties/attributes / Properties/attributes
    • properties, transferring / Transferring properties
    • properties, mutating / Mutating properties
    • comments / Comments
    • component style / Component style
  • JSX syntax
    • React component, creating with / Creating a React component with the JSX syntax
  • JSX Transformer
    • reference / Tools for transforming JSX, Transferring properties
  • JSX transformer script
    • URL, for download / Downloading ReactJS

M

  • maximum number of roots, ReactJS
    • URL / Maximum number of roots
  • Mixins
    • defining / Understanding Mixins
    • defining, by example / Exploring Mixins by example
    • higher-order components / Higher-order components in Mixins
  • Model View Controller (MVC)
    • about / An overview of Flux
  • mounting category
    • method, defining / Mounting category
  • Mozilla Development Network site
    • URL / ES6
  • mutable state
    • defining / Supported events
  • mutation
    • about / Relay and GraphQL

N

  • Node Package Manager (NPM)
    • about / Downloading ReactJS
  • node packages
    • references / Installing ReactJS with NPM
  • NPM
    • ReactJS, installing with / Installing ReactJS with NPM
  • NPM packages
    • references / Installing ReactJS with Bower

O

  • OAuth
    • URL / What it is and how to configure it
  • online tool
    • reference / Tools for transforming JSX
  • ORM models
    • URL / Stores

P

  • Package.json
    • URL / Testing in JavaScript using Chai and Mocha
  • package manager
    • URL / Text editors
  • pool
    • about / Event pooling
  • properties
    • about / Properties versus states in ReactJS
  • Python
    • URL / Serving files through the web server

R

  • React
    • ES(ECMAScript) versions / Other ES (ECMAScript) versions in React
    • installing / Installing React and JSX
  • React component
    • creating / Creating your first React component
    • creating, with JSX syntax / Creating a React component with the JSX syntax
  • React component lifecycle
    • defining / React component lifecycle
    • URL / React component lifecycle
    • mounting category / React component lifecycle, Mounting category
    • updating category / React component lifecycle, Updating category
    • unmounting category / React component lifecycle, Unmounting category
  • React documentation
    • URL / What is JSX?, Setting a state
  • ReactJS
    • defining / Introducing ReactJS, Trying ReactJS, The ReactJS anatomy
    • about / Introducing ReactJS
    • references / Introducing ReactJS, Downloading ReactJS
    • using / Who uses ReactJS?
    • downloading / Downloading ReactJS
    • URL / Downloading ReactJS
    • installing, with NPM / Installing ReactJS with NPM
    • installing, with Bower / Installing ReactJS with Bower
    • configuring, in web page / Configuring ReactJS in a web page
    • files, serving through web server / Serving files through the web server
    • reference / Serving files through the web server
    • component, creating / Creating a component
    • component, rendering / Rendering a component
    • maximum number of roots / Maximum number of roots
    • children components / Children components
    • supported attributes / Supported attributes
    • supported elements / Supported elements
    • properties, versus states / Properties versus states in ReactJS
  • ReactJS, with JSX
    • references / Why JSX?
  • ReactJS component
    • data, rendering / Rendering data in a ReactJS component
  • React Native
    • defining / React Native
    • URL / React Native
  • React Router
    • defining / React Router
  • ReactTestUtils
    • used, for testing / Testing using ReactTestUtils
    • about / Testing using ReactTestUtils
    • URL / Testing using ReactTestUtils
  • React tools
    • URL / ES6
  • Redux React
    • defining / Redux React
  • references
    • defining / References
  • Relay
    • and GraphQL / Relay and GraphQL
    • about / Relay and GraphQL
  • Relay framework
    • references / Relay and GraphQL

S

  • search engine optimization (SEO)
    • about / ReactDOMServer
  • server-side rendering
    • defining / Server-side rendering
    • URL / Server-side rendering
    • ReactDOMServer / ReactDOMServer
  • shallow rendering
    • about / Testing with shallow rendering
  • Single Page Application (SPA)
    • about / Introducing ReactJS
  • stateful component
    • about / Exploring the state property
  • stateless components
    • about / Exploring the state property
  • state property
    • defining / Exploring the state property
    • state, initializing / Initializing a state
    • state, setting / Setting a state
    • state, replacing / Replacing a state
    • React state example, interactive form used / A React state example using an interactive form
  • states
    • about / Properties versus states in ReactJS, Exploring the state property
  • stores
    • defining / Stores
    • functionality / Stores
  • Sublime Text
    • URL / Text editors
    • about / Text editors
  • supported attributes
    • URL / Supported attributes
  • supported elements
    • references / Supported elements
    • HTML elements / HTML elements
    • SVG elements / SVG elements

T

  • test-driven development (TDD)
    • about / Installing React and JSX
  • testing
    • with shallow rendering / Testing with shallow rendering
  • text editors
    • about / Text editors
  • tools
    • about / Tools
    • text editors / Text editors
    • Chrome Extension / Chrome extension
    • used, for transforming JSX / Tools for transforming JSX
  • transpiler
    • reference / The jestTypical example of a Testsuite with Mocha, expect, ReactTestUtils and Babel
  • transpiling
    • about / ES6

V

  • validations
    • defining / Validations
    • example, isRequired validator used / An example using the isRequired validator
    • example, custom validator used / An example using custom validator
  • Views
    • and Controller-Views / Controller-Views and Views
  • Vim
    • URL / Text editors

W

  • Webpack
    • about / An introduction to Webpack
    • URL / An introduction to Webpack, Setting up Webpack
    • simple React application, building / Building a simple React application
    • setting up / Setting up Webpack
    • advantages / Advantages of Webpack
  • Webpack documentation
    • URL / Setting up Webpack