Learn React Fast (React.js)
$8.99
Minimum price
$9.99
Suggested price
Learn React Fast (React.js)
Over 250 pages of technical info and examples.
About the Book
This is a guide that helps developers get up to speed quickly on React and its accompanying technologies.
Chapters include: Acknowledgements and Revisions, Introduction to React, Exercises with JSBin.com, Introduction to Components, Introduction to JSX, Creation Component Rendering, Component Styling, Introduction to Component Properties, Introduction to Component States, Introduction to Component Events, Component Forms, Component Lifecycle Functions, Component Elements and More, Component Properties & Callbacks, Component States, Component Composition, Component Contexts, Component Code Reusability, AJAX, Component Design - Thinking in React, Introduction to The React Trails Project, Node, Gulp, Babel, Browserify and Babelify, Editors and Visual Studio Code, React Router, Change Detection and Performance, Testing, Introduction to Webpack, Appendix – Server & Client Side Web Applications and AJAX, Appendix – Versions of JavaScript, Appendix – JavaScript Techniques, Appendix – Cross-Site Scripting Attacks, Appendix – Prevention of Cross-Site Scripting Attacks, Appendix - Source Maps, Resources.
About the Author
Table of Contents
-
<span id=”_Toc454096416” class=”anchor”><span id=”_Toc461815841” class=”anchor”></span></span>Acknowledgements and Revisions
- <span id=”_Toc454096417” class=”anchor”><span id=”_Toc461815842” class=”anchor”></span></span>Acknowledgements
- <span id=”_Toc454096418” class=”anchor”><span id=”_Toc461815843” class=”anchor”></span></span>Revisions
-
<span id=”_Ref445753181” class=”anchor”><span id=”_Toc454096419” class=”anchor”><span id=”_Toc461815844” class=”anchor”></span></span></span>Introduction to React
- What’s So Special about React?
- So What Does React Do?
- Other Libraries
- React ES5 & React ES6
-
Exercises with JSBin.com
- Introduction
- Pre-ES6
- Example - Introduction
- Example - Instructions
- Tip - Use Line Numbers
- Tip - Use Syntax Highlighting By Copying and Pasting
-
Introduction to Components
- Introduction
- Facts about Components
- Creating React Components
-
<span id=”_–done–_Introduction_to” class=”anchor”><span id=”_Introduction_to_JSX” class=”anchor”></span></span>\
- Introduction
- Compilation
- JSX Attribute Expressions
- Child Component Elements
- JavaScript Expressions – Whitespace
- HTML Attributes
- HTML Attributes and JavaScript Reserved Words
- HTML Style Attribute
- <span id=”_Escaping_and_Unescaping” class=”anchor”><span id=”_Toc461815869” class=”anchor”></span></span>Escaping and Unescaping Content
-
Component Creation
- Naming
- Factors that Affect Component Creation
- Stateful Components
- Stateless Components
-
<span id=”_Component_Rendering” class=”anchor”><span id=”_Component_Rendering_1” class=”anchor”><span id=”_Component_Rendering_2” class=”anchor”><span id=”_Toc461815875” class=”anchor”></span></span></span></span>Component Rendering
- Introduction
- The Component’s Render Function
- Example (Pre-ES6)
- Example (Post-ES6)
- When the Data inside Your Component Changes, it Re-Renders
- React’s Rendering Function
- Rendering Nothing
-
<span id=”_Component_Styling” class=”anchor”><span id=”_Toc461815883” class=”anchor”></span></span>Component Styling
- Introduction
- Using Inline Styling
- Using External Styling
-
<span id=”_Introduction_to_Component_1” class=”anchor”><span id=”_Toc461815887” class=”anchor”></span></span>Introduction to Component Properties
- Introduction
- Property Data is Immutable
- Accessing Property Data
- Setting Default Property Data Values
- Specifying Property Types
- Spread Attribute (…)
-
<span id=”_Introduction_to_Component” class=”anchor”><span id=”_Toc461815894” class=”anchor”></span></span>Introduction to Component States
- Introduction
- State Data is Mutable
- Accessing State Data
- Modifying State Data with ‘setState’
- Setting Default State Data Values
- Setting Field Focus
-
Introduction to Component Events
- Introduction
- React Events
- Event Markup Syntax - Camel Case
- Event Handlers
- Event Handler Argument and Event Object
- Event Propagation and Cancelation
- Event Callbacks
- Using Events to Implement Two Way Data Binding
- Event List
- Touch Events
-
Component Forms
- Introduction
- ES5/ES6
- Form Fields
- Uncontrolled Fields
- Controlled Fields and Properties
- Controlled Fields vs Uncontrolled Fields
- Form Submission
- Form Submission, Validation and CSS
-
Component Lifecycle Functions
- Introduction
- When a Component Initializes
- When a Component Updates Because of Property Changes
- When a Component Updates Because of State Changes
- When a Component Unmounts
-
<span id=”_Component_Elements_and” class=”anchor”><span id=”_Toc461815927” class=”anchor”></span></span>Component Elements and More
- React Elements
- React DOM Elements
- React Component Elements
- The Difference Between DOM Elements and Component Elements
- Element Tree
- Mounting
- Component Backing Instance
- Component Element Refs
-
<span id=”Component_Properties&” class=”anchor”><span id=”Component_Properties&_1” class=”anchor”><span id=”_Toc461815936” class=”anchor”></span></span></span>Component Properties & Callbacks
- Parent Component Callbacks
-
Component States
- State Best Practices
- Combining Properties and States
- Setting State
- Mounting Status
-
Component Composition
- Introduction
- Rendering of Child Components
- Pre-ES6 and Post-ES6
- Composition with HTML Parent Elements
- Composition with Custom React Component Parent Elements
- this.props.children
- React.Children
-
Component Contexts
- Introduction to Data Flows
- Passing Data from Higher-Components to Lower-Level Components
- How to Use Contexts
-
Component Code Reusability
- Mixins
- Common Mixins
- Harmful Mixins
- Higher Order Components
-
AJAX
- Introduction
- React Does Not Include Code for AJAX
- JQuery AJAX
- XMLHttpRequest
- Fetch Polyfill
- Isomorphic Fetch
- Superagent
- Axios
- ReqWest
- React Trails Project (ES6)
-
<span id=”–done–Component_Design-“ class=”anchor”><span id=”Component_Design-“ class=”anchor”><span id=”Component_Design-1” class=”anchor”><span id=”_Component_Design-_2” class=”anchor”><span id=”_Toc461815971” class=”anchor”></span></span></span></span></span>Component Design - Thinking in React
- Introduction
- Step 1: Break Down the Structure Of The UI Into Logical Components.
- Step 2: Write A Static Version of The UI in React First, Without Events Or Interactivity.
- Identify What Data May Change in The App.
- Identify In Which Component This State Data Should Reside.
- Add the data flow.
-
<span id=”_Introduction_to_The” class=”anchor”><span id=”_Introduction_to_The_1” class=”anchor”><span id=”_Toc461815978” class=”anchor”></span></span></span>Introduction to The React Trails Project
- Introduction
- Project Technologies
- Project Overview
- Welcome Page
- Search Page
- Details Page
- React Starter Projects
- React Startify Project
- Setting Up the React Startify Project
- Next Step
-
Node
- Introduction
- Installing Node
- Setting Up Node in Your Project Folder
- Running Code with the Node Command
- Node Modules and Dependencies
- Node Package Manager
- Node Module Installation Levels
- ‘package.json’ File
- Folder ‘node_modules’
- Npm - Installing Modules into Node
- <span id=”_Toc461816000” class=”anchor”><span id=”_Toc454096458” class=”anchor”></span></span>Updating Node Modules
- Uninstalling Node Modules
- React Trails Project
-
Gulp
- <span id=”_Toc454096508” class=”anchor”><span id=”_Toc461816004” class=”anchor”></span></span>Introduction
- Plugins
- Installing Gulp into Your Project as a Node Module
- Create The Project’s Gulp Script
- <span id=”_Toc461816008” class=”anchor”><span id=”_Toc454096509” class=”anchor”></span></span>Streams
- Tasks
- Gulp Uses Node Modules
- Gulp Uses Files
- Project Build
- React Trails Project
-
<span id=”_Babel” class=”anchor”><span id=”_Toc461816014” class=”anchor”></span></span>Babel
- Introduction
- Information
- Plugins
- Presets
- Command Line
- Module Formatters
- Configuration File
- Polyfills
- Source Maps
- React Trails Project
-
<span id=”_Browserify_and_Babelify” class=”anchor”><span id=”_Toc461816025” class=”anchor”></span></span>Browserify and Babelify
- Browserify
- Babelify
- React Trails Project
-
Editors and Visual Studio Code
- <span id=”_Toc454096465” class=”anchor”><span id=”_Toc461816030” class=”anchor”></span></span>Introduction
- <span id=”_Toc454096466” class=”anchor”><span id=”_Toc461816031” class=”anchor”></span></span>Visual Studio Code
- <span id=”_Toc454096467” class=”anchor”><span id=”_Toc461816032” class=”anchor”></span></span>Website
- <span id=”_Toc454096468” class=”anchor”><span id=”_Toc461816033” class=”anchor”></span></span>Opening Your Project in Visual Studio Code.
- <span id=”_Toc454096469” class=”anchor”><span id=”_Toc461816034” class=”anchor”></span></span>How to See the Available Commands and Hot Keys
- <span id=”_Toc454096470” class=”anchor”><span id=”_Toc461816035” class=”anchor”></span></span>How to Configure the Build
- <span id=”_Toc454096471” class=”anchor”><span id=”_Toc461816036” class=”anchor”></span></span>How to Build
- <span id=”_Toc454096472” class=”anchor”><span id=”_Toc461816037” class=”anchor”></span></span>To View Build Errors
- <span id=”_Toc454096473” class=”anchor”><span id=”_Toc461816038” class=”anchor”></span></span>Panel Modes
- <span id=”_Toc454096474” class=”anchor”><span id=”_Toc461816039” class=”anchor”></span></span>Extensions
- <span id=”_Toc454096475” class=”anchor”><span id=”_Toc461816040” class=”anchor”></span></span>Notes
-
React Router
- Introduction
- Hash Fragments
- Introduction to React Router
- What’s so Special About It?
- Including the React Router in a Project
- Not All Components Are Routed
- Declaring Routes
- Nested Routing
- Index Routes
- Index Redirects
- Default Routes
- NotFound Route
- Combining Index Routes and Default Routes
-
<span id=”_Change_Detection_and” class=”anchor”><span id=”_Change_Detection_and_1” class=”anchor”><span id=”_Change_Detection_and_2” class=”anchor”><span id=”_Toc461816055” class=”anchor”></span></span></span></span>Change Detection and Performance
- Introduction
- Know Your Enemy – Excessive DOM Updates
- React Component Rendering
- Change Detection
- Reconciliation
- Component Keys
- Making Your Code Run Faster (Defeating the Enemy)
- The ‘shouldComponentUpdate’ Function
-
<span id=”_Testing” class=”anchor”><span id=”_Testing_1” class=”anchor”><span id=”_Toc461816064” class=”anchor”></span></span></span>Testing
- <span id=”_Toc454096692” class=”anchor”><span id=”_Toc454097352” class=”anchor”><span id=”_Toc461816065” class=”anchor”></span></span></span>Introduction
- <span id=”_Toc454096693” class=”anchor”><span id=”_Toc454097353” class=”anchor”><span id=”_Toc461816066” class=”anchor”></span></span></span>Unit Testing
- <span id=”_Toc454096694” class=”anchor”><span id=”_Toc454097354” class=”anchor”><span id=”_Toc461816067” class=”anchor”></span></span></span>Continual Integration
- <span id=”_Toc454096695” class=”anchor”><span id=”_Toc454097355” class=”anchor”><span id=”_Toc461816068” class=”anchor”></span></span></span>Automated Unit Tests
- Coding Automated Unit Tests
- ReactTestUtils
- Jest
- Debugging Jest Unit Tests
- React Trails Project
-
<span id=”_Ref445753290” class=”anchor”><span id=”_Toc454096496” class=”anchor”><span id=”_Toc454097158” class=”anchor”><span id=”_Toc461816074” class=”anchor”></span></span></span></span>Introduction to Webpack
- <span id=”_Toc454096497” class=”anchor”><span id=”_Toc454097159” class=”anchor”><span id=”_Toc461816075” class=”anchor”></span></span></span>Introduction
- React Trails Project
- <span id=”_Toc454096498” class=”anchor”><span id=”_Toc454097160” class=”anchor”><span id=”_Toc461816077” class=”anchor”></span></span></span>What Does Webpack Do?
- <span id=”_Toc454096499” class=”anchor”><span id=”_Toc454097161” class=”anchor”><span id=”_Toc461816078” class=”anchor”></span></span></span>What about Your Modules and Dependencies?
- <span id=”_Toc454096500” class=”anchor”><span id=”_Toc454097162” class=”anchor”><span id=”_Toc461816079” class=”anchor”></span></span></span>Benefits
- Bundles
- <span id=”_Toc454096502” class=”anchor”><span id=”_Toc454097164” class=”anchor”><span id=”_Toc461816081” class=”anchor”></span></span></span>Development Process
- <span id=”_Toc454096503” class=”anchor”><span id=”_Toc454097165” class=”anchor”><span id=”_Toc461816082” class=”anchor”></span></span></span>Install Webpack
- Running Webpack
- <span id=”_Toc454096506” class=”anchor”><span id=”_Toc454097168” class=”anchor”><span id=”_Toc461816084” class=”anchor”></span></span></span>Configuring Webpack
-
<span id=”–done–Appendix–_Server” class=”anchor”><span id=”_Toc461816085” class=”anchor”></span></span>Appendix – Server & Client Side Web Applications and AJAX
- Introduction
- Server (Web Server)
- Client (Web Browser)
- Communication
- Server-Side Web Application
- Client-Side Web Application
- AJAX
- Callbacks
- Promises
- Encoding
- Debugging Tools
-
<span id=”Appendix–Versions” class=”anchor”><span id=”_Appendix–Versions_1” class=”anchor”><span id=”_Appendix–Versions_2” class=”anchor”><span id=”_Appendix–_Versions_3” class=”anchor”><span id=”_Toc461816098” class=”anchor”></span></span></span></span></span>Appendix – Versions of JavaScript
- <span id=”_Toc454096446” class=”anchor”><span id=”_Toc461816099” class=”anchor”></span></span>JavaScript History
- JavaScript Version Names
- <span id=”_Ref445752635” class=”anchor”><span id=”_Toc454096447” class=”anchor”><span id=”_Toc461816101” class=”anchor”></span></span></span>JavaScript Shortcomings (Pre-ES6)
- <span id=”_Toc454096448” class=”anchor”><span id=”_Toc461816102” class=”anchor”></span></span>JavaScript Strict Mode
- <span id=”_Toc454096449” class=”anchor”><span id=”_Toc461816103” class=”anchor”></span></span>JavaScript (Post-ES6)
- Shims
- Polyfills
-
<span id=”Appendix–JavaScript” class=”anchor”><span id=”_Appendix–JavaScript_1” class=”anchor”><span id=”_Appendix–_JavaScript_2” class=”anchor”><span id=”_Toc461816106” class=”anchor”></span></span></span></span>Appendix – JavaScript Techniques
- Introduction
- Know the ‘This’ Variable
- ‘Bind’ Function
- Arrow Functions
- Closures
- Map Function
- Object.assign
-
<span id=”Appendix–_Cross-Site” class=”anchor”><span id=”_Toc461816114” class=”anchor”></span></span>Appendix – Cross-Site Scripting Attacks.
- Introduction
- Example Code - Non-Persistent XSS Attacks
- Example Code – Persistent XSS Attacks
-
Appendix – Prevention of Cross-Site Scripting Attacks.
- How is it Prevented?
- Sanitization
- Escaping
- React and Escaping
-
<span id=”Appendix-_Source” class=”anchor”><span id=”_Toc461816123” class=”anchor”></span></span>Appendix - Source Maps
- Minification and Uglification
- Code Running In Your Brower
- What Do Source Maps Do?
- Source Map File Locations
- How to Change Your Project to Generate Map Files
- Enabling Map Files in Your Browser
- Enabling Map Files on Chrome
-
Resources
- Introduction
- Most Important
- <span style=”font-variant:small-caps;”>Other Resources</span>
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
Earn $8 on a $10 Purchase, and $16 on a $20 Purchase
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $14 millionwriting, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
