Mastering React: A Beginner's Guide

Cover
Half Title
Series Page
Title Page
Copyright Page
Table of Contents
Mastering Computer Science Series Preface
About the Editor
Chapter 1 Introduction to React
What Is React?
Let Us Comprehend This with a Practical Example
Why We Should Learn ReactJS?
DOM
Updating DOM
What Are the Foremost Features of React?
History of React: From 2010–2017
2010: The First Cyphers of React
2011: An Initial Standard of React
2012: Something New Had on Track at Facebook
2013: The Year of the Big Inauguration
2014: The Year of Expansion
2015: React Is Stable
2016: React Gets Mainstream
2017: The Year of Further Enhancements
Advantages and Disadvantages
Advantages
Disadvantages
Benefits over Other JS Frameworks
Chapter 2 Basics of React: JSX (JavaScript XML)
In This Chapter
What Is JSX?
Characteristics of JSX
Why Use JSX in React?
Creating React Nodes Using JSX
Rendering JSX to DOM
Notes
Using JavaScript Expressions in JSX
JSX for Loop
JSX vs. HTML
Use of className in Its Place of the Class Attribute
JSX
HTML
Self-closing tags
JSX
HTML
Event Listeners
Installation or Setup
ReactJS | Setting up the Development Environment
Using react​-dom​​.js and react​.​js in an HTML Page
Using JSX via Babel
Converting JSX via Babel in the Browser
With the use of browser​.​js (Babel 5.8.23) to Convert JSX in the Browser
By Using JSX
Using ES6 and ES* with React
Writing React with JSFiddle
What Is a React Component?
Creating React Components
Notes
What Are Component Props?
Notes
Sending Component Props
Notes
What Is Component State?
Working with Component State
State vs. Props
Props
State
Creating Stateless Function Components
Chapter 3 React Components
React.Component
The Component Lifecycle
Mounting
Updating
Unmounting
React Elements
Arrays and Fragments
Rarely Used Lifecycle Methods
Error Boundaries
Legacy Lifecycle Methods
Other APIs
Class Properties
defaultProps
Instance Properties
Props
State
Conditional Rendering
Element Variables
Inline If with Logical && Operator
What Are Styled Components
Advantages of Using Styled Components
Creating and Styling: A Common Web Page Using Styled Components
Installing Styled Components
Starting the Development Server
Creating Our Component
Routing a Component into the Main App
Onto Some Styling Now
Styling the Container
Styling the Content Area
Styling the Background Image
Styling the Call to Action (CTA) Area
Styling LogoOne
Styling the Sign Up Button
Styling the Description
Styling LogoTwo
Styling the nav Function
Summary
Return the Falsy Expression
Preventing Component from Rendering
Styling Components in React
What Does “Styling” in React Apps Even Mean? #
Major Styling Strategies in React #
Chapter 4 Handling Images
Importing Images
Inside Public Folder
Notes
Using the Public Folder
index​.ht​ml
App​.​js
Inside the Folder “src”
Notes
How to Use
App​.​js
Example Code
Conclusion
Chapter 5 React Routers
Need for React Router
React Router Installation
Components in React Router
Routers
History
Routes
Component Prop
Render Prop
Children Prop
Switch
Link
Nested Routing
Protected Routes
Custom Routes
Router and Query Parameters
How to Get Query String Values in the JavaScript JS with URLSearchParams
Getting Parameters from URL in the React Application
How Do You Pass the Parameter in a Query?
Dealing with the Router and Query Params
Chapter 6 Programmatic Navigation
What Is Programmatic Navigation?
How Do You Route Programmatically in the React?
Using Redirect Component
Using history​.pu​sh() Method
Using withRouter Method
Using the useHistory Hook
Conclusion
Build-in Progress
Lazy Loading
Why Is Lazy Loading (and Suspense) Important
Advantages of Lazy Loading
Disadvantages of Lazy Loading
How to Install Lazy Loading Components in the React
Strategies or Approaches to Split Your JavaScript JS Codes
React​.la​zy
react-loadable
react-loadable-visibility
Prerequisites
npm install -g create-react-app
npm create-react-app my-app
npm start
Without React Suspense
Chapter 7 Advanced Tools
Context API
What Is React’s Context API (Application Programming Interface)?
React Context API: How Does It Work?
Context API Will Replace Redux?
How to Use Context API?
Example using React Hooks
Example using React Hooks
Building/Designing an App Using Provider Pattern and Context API
API (Application Programming Interface)
The syntax to create “React.createContext”const UserContext = React.createContext(default Value);Creating a Context Object
Context.Provider
Class.contextType
Context.displayName
Introduction to Hooks
State Hook
Declaring Multiple State Variables
Effect Hook
Rules of Hooks
Building Your Own(custom) Hooks
React​.​js Render Props
Creating a React App and Downloading a Module
For cross-cutting issues, use Render Props.
Other Than Rendering Props
Caveats
Chapter 8 Testing Your Code
Trade-offs
Recommended Tools
A Brief Introduction to Testing #
Why Test? #
Unit Test #
Component Test #
Snapshot Test #
Advantages and Disadvantages of Testing #
Advantages #
Disadvantages #
Introduction to Jest #
Process of Running a Test with Jest #
Creating a Test File #
Run the Code
Skipping or Isolating a Test #
Mocking Function #
Testing React Components #
Snapshot Testing #
What Is Nock?
Adding Nock
Using “Nock”
Using 'nock​.ba​ck'
Final Thoughts
How to Use React Testing Library
Installing React Testing Library and Jest
Create a New React App with CRA
Default CRA Test Code
Debug the Element Rendered by React Testing Libraries
React Testing Library Methods for the Finding Elements
How to Test User Designed Events with React Testing Library
Chapter 9 Redux
Explicitly Passing the Store
State
Actions
Action Type Naming Conventions
Action Payload Data
Reducers
The Sort Reducer
The Store
Subscribing to Stores
Adding Redux to React
Explicitly Passing the Store
Passing the Store via Context
Sagas, Side-Effects
Making Asynchronous Calls
Time for the Explanations
Create Another File Sagas​.spec​​.js
Chapter 10 Forms
Referencing Forms
Submitting the Form
Login Form
SignUp Form
Event Bubbling and Capturing in JavaScript
Example of Event Bubbling
The Output of the above Code
Explanation of the above Code
Stopping Bubbling
Event Capturing
Example of Event Capturing
Explanation of Code
State
Actions
Action Payload Data
Changing HTML Style
Using Events
Automatic HTML Form Authentication
Data Validation
HTML Constraint Validation
Attribute Description
Constraint Validation CSS Pseudo Selectors
Learn to Create HTML Animations Using JavaScript
A Basic Web Page
Create an Animation Container
Style the Elements
Animation Code
Create the Full Animation Using JavaScript JS
Form Validation
Style the Elements
Animation Code
Design the Full Animation Using JavaScript
Syntax
Add the Event Handler to an Element
DOM Nodes
DOM HTML Tree
Node Relationships
Node Tree
Navigating between Nodes
Child Nodes and Node Values
DOM Root Nodes
The nodeName Property
Property of nodeValue
The nodeType Property
Add Several Event Handlers to the Same Element
Add the Event Handler to the Window Object
Passing Parameters
Event Bubbling or Event Capturing?
Different Approach to Place Form the Validation Logic
Server-Side Form Validation Logic
Client-Side Form Validation
Form Validation Using HTML
Client-Side Form Validation using HTML for Java Web Apps
Client-Side Form Validation in Marriage App input​.ht​ml Form Page Using JavaScript
The Simple JavaScript JS Codes (validation​.​js) for the Form Validation
JavaScript with getElementById - Form Validation in Java Web Application
JavaScript with getElementById Solution - Form Authentication in Java Web Application
From Validation Logic in the Client and Server Side
Form Validation Logic in Client and Server Side but Validate at the Server Side Only if Client-Side Authentication Not Done
JavaScript Form Validation Example
JavaScript Retype Password Authentication
Test It Now
Test It Now
Code Explanation
Bibliography
Index