Build UI Components using React Hooks
Build UI Components using React Hooks
Frontend Engineering using React
About the Book
README FIRST PLEASE: This is a work in progress book and readers feedback will be taken into consideration in shaping the final output.
Also, this book will always be updated and kept in sync with respect to changes in React Library as much as possible.
If you always wanted to learn how to code medium to hard reusable components using React then this is the book to jump into.
? The pricing is early access pricing and the lowest. Once the book is complete the price will change.
The proposed table of content is shown below.
# Part 0 - Essential JavaScript For React
1. JavaScript Principles
2. Arrow Function
3. Let, Const, Var
4. Closure
5. Call, Apply and Bind
6. Scope and Context
# Part 1 - Foundational React
1. Introduction
2. JSX Basics
3. Thinking in React
4. Function Component
5. Nesting Component
6. Props and State
7. PropTypes
8. Event Handling
9. useState
10. useReducer
11. useEffect
12. useRef
13. useContext
14. useCallback
15. useMemo
16. Custom Hooks
# Part 2 - Building Forms
1. Adding CSS
2. Building forms
- one to one associations
- one to many associations
- many to many associations
3. Multistep/Wizard forms
4. Form Validations
5. Form submission
6. Dynamic forms
# Part 3 - Connecting with Server
1. React Routing
2. AJAX/Remote calls
3. Authentication
# Part 4 - Building components
1. Tag Input component
2. Calendar Component
3. Datatable Component
4. Tab Component
5. Autosuggest Component (with Debouncing)
6. Accordion Component
7. Modal Dialog Component
8. Multilevel Menu
9. Breadcrumb Menu Component
10. Star Rating Component
# Part 5 - Production Deployment
Create React Production Build
About the Author
Table of Contents
- Readme first please
- Hello React
- Pure JavaScript
-
Example 1 : React without JSX
- Let’s dissect how this works.
- Welcome JSX
-
Simple TextInput Component
- TextInput Component
- Component Usage
- <TextInput> Component
- Understanding TextInput component
- PropTypes
- Hooks Defined
- useState Hook
-
Example 1 : useState with simple value
- Let’s dissect how this works.
- What Do Square Brackets Mean?
- Example 2: Updating state using the updater function
- Example 3: Better Practice: Use the updater function with the functional parameter
- Example 4: Using multiple state variables
- Example 5: use multiple state attributes with single updater function (issues and tips)
-
Hook 2— useReducer
- Dispatching action
-
useEffect Hook
- Example 1: useEffect — Runs always (on all render) (componentDidMount and componentDidUpdate)
- Example 2: useEffect — On first mounting only (like componentDidMount)
- Example 3: useEffect — simulate componentDidUnmount
- Example 4: useEffect — Optimizing Performance by Skipping Effects
-
useRef Hook
- useRef DOM Example
- useRef Mutable example
-
Hook 4— useContext
- Steps to use context API
-
Custom Hook
- What makes a custom hook?
- Rules of Custom Hook
-
useFetch Custom Hook
- useFetch API Usage
- useFetch - The source code
- More useFetch examples coming soon.
-
useFormValidation Custom Hook
- useFormValidation Hook Usage
- Let’s build a Login component using the useFormValidation Hook
- Let’s create an entry poing App Component that uses the Login component
- Custom Hook 1 -> useBodyScrollPosition
-
Custom Hook 2 -> useLocalStorage
- Step 1 - Declare the function
- Step 2 - useState
- Step 3 - The updater function for local storage
- Step 4 - Return the current value and the updater function
- Step 5 - The useLocalStorage complete code
- Step 6 - Example App
-
Star Rating Component
- The Usage
- Step 0
- Exercise
- Demo Code
-
Compound Component
- The usage
- The output
- Tab Component Code Explanation
- TabList Component
- Tab Component
- TabDivider Component
- TabPanel Component
-
Input Tag Component
- Create Tags state variables
- The onKeyUp method
- The onDelete method
- Code Explanation
- onAddTag method
- onDeleteTag method
-
Autocomplete / AugtoSuggest Component (work-in-progress)
- The high level design of the component
- Some features of the component are listed below
- The usage (with static data)
- The usage (with dynamic/remote/ajax data)
- The output
- Usage Explanation
-
Code Explanation
- The basic structure
- State variables
- Refs
- onChange event (throttling)
- throttle function (this can be in separate file and imported as well)
- Render (function return)
- handleChange
- onClick
- onInputFocus
-
showResult function
- handleKeyDown - keyboard Events
- useEffect Hooks
- <List> Component
- The App component
- Essential JavaScript for React Developers
-
var, let and const
- var - Code Examples (Scope)
- var - Code Examples (Reassignment and Redeclaration)
- var - Code Examples (Hoisting)
- var - Code Examples (Loop behaviour)
- let - Code Examples (Scope)
- let - Code Examples (Reassignment and Redeclaration)
- let - Code Examples (Hoisting)
- let - Code Examples (Loop behaviour)
- const - Code Examples (scope)
- const - Code Examples (Reassignment and Redeclaration)
- const - Code Example (Hoisting)
- const - Code Example Objects
- const - Code Example - Arrays
-
Mastering working with JavaScript Array
- Adding items to an array
- Adding items to the beginning of an array (unshift)
- Adding items to the beginning of an array ES6 (spread operator)
- Adding items to the end of an array ES6 (spread operator)
- Remove first item from the array -> shift() method
- Remove portion of an array, slicing -> slice() method
- Remove /adding portion of an array -> splice() method
- Remove last item from the array -> pop() method
- Merging two arrays -> concat() method
- Merging two arrays -> es6 (spread operator)
- Joining arrays -> Join () method
- Array Custom Slice Helper function
- Looping through array
- Looping through an array - for in Loop
- Looping through array - map function ()
- Map () - Example 2- Simple Transformation
- Map () - Example 3 - Return a subset of data
- Looping through an array - filter function ()
- Looping through an array - reduce function ()
- Reduce - Simple Example - 1
- Using reduce to categorize data
- Using reduce to implement custom map() function
- Using reduce to implement custom filter() function
- Using reduce to implement custom forEach function
- Using reduce to implement custom pipe() function
- Holes in arrays
- Changing array length and holes
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 $13 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
