Table of Contents
Preface
Part I Background Skills
Chapter 1 Introduction and Setup
	1.1 What is a Modern Web Application?
	1.2 What is React?
	1.3 What do we use React for?
	1.4 What is HTTP used for?
	1.5 What background skills do we need to learn React?
	1.6 What IDE tool do we need?
		1.6.1 Installation of Visual Studio Code
		1.6.2 Installation of Node.js
		1.6.3 Download the Sample Code
Chapter 2 HyperText Markup Language
	2.1 What is HTML used for?
	2.2 What does an HTML document contain?
	2.3 An Experiment of A Web Application Development Environment
		2.3.1 Prepare a Web Page
		2.3.2 Prepare a Web Server
		2.3.3 Organize a File Structure and Complete the Experiment
		2.3.4 Execution Result
	2.4 Review Questions
	2.5 Exercises
	2.6 Additional Resources
Chapter 3 Cascading Style Sheets & Bootstrap
	3.1 What is a Style Sheet?
	3.2 What is the Box Model?
		3.2.1 How can we specify CSS styles?
	3.3 Three Methods to Specify Styles
		3.3.1 In-Line Styles
		3.3.2 Internal Style Sheet
		3.3.3 External Style Sheet
		3.3.4 Example with the Internal CSS Style
		3.3.5 Execution Result
	3.4 Bootstrap
		3.4.1 Basics about Bootstrap
		3.4.2 How does the Bootstrap Online Web Document Describe Bootstrap Styles?
		3.4.2.1 Colors
		3.4.2.2 Utility: Sizes – Padding and Margin
		3.4.2.3 HTML Table Tag
		3.4.2.4 HTML Input and Text Area
		3.4.2.5 More HTML Tags
		3.4.4 Execution Result
	3.5 React-Bootstrap
		3.5.1 When do we use React-Bootstrap?
		3.5.2 Setup for testing React-Bootstrap
		3.5.3 Execution Result
	3.6 Review Questions
	3.7 Exercises
	3.8 Additional Resources
Chapter 4 JavaScript & JSX
	4.1 JavaScript
		4.1.1 Data Types –Variable Scope
		4.1.2 Data Types –Variable Name Hoisting
		4.1.3 Operators – Triple Equal Sign
		4.1.4 Operator – Tick vs. Quotes
		4.1.5 Control Flows – If then Else, Switch,
		4.1.6 Iterative Controls – While Loops and For Loops
		4.1.7 Iterative Controls – For Loops with “in”
		4.1.8 Iterative Controls – For Loops with “of”
		4.1.9 Array Functions – push, pop, map, filter
		4.1.10 Functions – Named Functions, Anonymous Functions, and Arrow Functions
		4.1.11 Functions – with Spread Syntax
		4.1.12 Functions – Immediately Executed Functions
		4.1.13 Passing Data Back – Multiple Values in an Array
		4.1.14 Generating Callable Modules
		4.1.15 Exercises
		4.1.16 Additional References about JavaScript
	4.2 JSX (JavaScript XML)
		4.2.1 What is JSX?
		4.2.2 Fundamental JSX Syntax Rules for Developers
		4.2.3 Two Execution Issues Regarding JSX
		4.2.4 What is Webpack?
		4.2.5 How Does Babel Work?
		4.2.6 A Modern Web Application Backend using Node.js/Express.js
		4.2.7 Browser Screen
	4.3 Additional References
Part II Fundamental Concepts
Chapter 5 React Components
	5.1 Scaffolding a React Application Project
		5.1.1 Create a React App
		5.1.2 How does Webpack work?
		5.1.3 Where is the server?
	5.2 Define Components
		5.2.1 Define a Function Component
		5.2.2 Example of Defining a Function Component
		5.2.3 Add Several Instances of the Same Component
	5.3 Define a Class Component
		5.3.1 More Exercises of Defining Class Components
		5.3.2 Putting Things All Together
	5.4 Rendering a Component
		5.4.1 Child Components and Parent Components
		5.4.2 The Syntax for Rendering a Component
	5.5 Summary of the Rules about Defining React Components
	5.6 How can a React element be rendered into a DOM tree?
		5.6.1 Using React Version 18
		5.6.2 HTML Element versus React Element
		5.6.3 What is a Virtual DOM?
	5.7 Summary
	5.8 Review Questions
	5.9 Exercises
	5.10 Additional Resources
Chapter 6 Properties (Props)
	6.1 What are properties in a React component?
		6.1.1 Why do we need Properties?
		6.1.2 Defining Properties in the Example Component
		6.1.3 Defining NameList Component
		6.1.4 Defining App
		6.1.5 Execution Result
	6.2 Define Properties for Function Components and Class Components
		6.2.1 Composing Properties in Child Components
	6.3 Passing the Values of Properties to Child Components
	6.4 Examples
		6.4.1 Example 1 - Passing Number via a Property
		6.4.2 Example 2 - Passing an Array
		6.4.3 Example 3 - Display a Table
		6.4.4 Example 5 - A Bug Regarding Props
	6.5 Properties are Immutable
		6.5.1 Define App
		6.5.2 Define the Component NumberList
		6.5.3 Execution Result
	6.6 Summary
	6.7 Exercises
	6.8 Additional Resources
Chapter 7 State
	7.1 The Purpose of Defining State in a Component
	7.2 What is the State of a Component?
	7.3 Defining State in a Class Component
	7.4 Defining State Variables in a Function Component
	7.5 State with Multiple State Variables
	7.6 The Scope and an Incorrect Way to Define a State
		7.6.1 State is Local
		7.6.2 Passing a Function Name as the Value of a Property
	7.7 Review Questions
	7.8 Exercises
	7.9 Additional Resources
Chapter 8 Events
	8.1 React Synthetic Events
	8.2 Syntax for Defining Event Handling Functions
	8.3 State with Events
		8.3.1 Example of Using Two Buttons
		8.3.2 Example of Using One Button
	8.4 Types of Synthetic Events and Attributes
		8.4.1 
		8.4.2 <button>
		8.4.3 
	8.5 Example - Display Courses with an Option
		8.5.1 App.js
		8.5.2 Search.js
		8.5.3 FilterTable.js
		8.5.4 CourseTable
		8.5.5 CourseRow
		8.5.6 CourseTookRow
		8.5.7 Execution Result
	8.6 Review Questions
	8.7 Additional Resources
Chapter 9 Component Lifecycle and Reconciliation
	9.1 What is the Lifecycle of a Component?
	9.2 What is Reconciliation?
	9.3 What do we need to know about Lifecycle API Functions
	9.4 Example
		9.4.1 App.js
		9.4.2 TextInput
		9.4.3 TextDisplay
		9.4.4 TextMain
		9.4.5 Execution Result
	9.5 Exercise
	9.6 Additional Resources
Part III Rendering of UI Components
Chapter 10 Conditional Rendering
	10.1 Example - If-statement
		10.1.1 Decide if Editing or Displaying
		10.1.2 Example: Conditional Push
		10.1.3 Execution Result
	10.2 Example Posted on Reactjs.org - Logical AND with an HTML tag
		10.2.1 Mailbox
		10.2.2 Execution Result
	10.3 Conditional Styling
		10.3.1 CourseRow.js
		10.3.2 Execution Result
Chapter 11 Lists
	11.1 Displaying a List of Numbers
	11.2 NumberList
	11.3 Define a table Component
	11.4 Exercises
Chapter 12 Forms
	12.1 What is a React Form?
	12.2 Examples of React Forms
		12.2.1 Example of Controlled Components with a Text Field and a Button
		12.2.2 Execution Result
		12.2.3 An A Dropdown Box Example of Using 
		12.2.4 App.js
		12.2.5 MyDisplay
		12.2.6 Execution Result
	12.3 Examples of an Uncontrolled Form Component
		12.3.1 Input with useRef()
		12.3.2 Example of Forward Referencing
	12.4 Exercises
Part IV Design Issues with ReactJS
Chapter 13 Lifting Up State
	13.1 An Example of Lifting Up State Data
		13.1.1 Define State in TextMain
		13.1.2 Avoiding Recursive Rendering
	13.2 Debugging
		13.2.1 Another Example
		13.2.2 Do Not Change the State Directly
		13.2.3 Execution Result
	13.3 Define State Variables with Hooks in Function Components
		13.3.1 TextMain
		13.3.2 Execution Result
	13.4 Exercise
Chapter 14 Think in React
	14.1 How do we start?
		14.1.1 Application Requirements
		14.1.2 Conditional Rendering
	14.2 Design Phase
		14.2.1 Stage I – Implement the table for Writing Emphasis Courses
		14.2.2 Stage II – Implement the Table for Speaking Emphasis Courses
	14.3 Development Phase for the Writing Emphasis Table
	14.4 Adding Experimental Components
		14.4.1 Add User Input Fields
		14.4.2 Add a Table
		14.4.3 Putting Things Together
		14.4.4 Execute the Final Experiment
	14.5 Moving towards the Goal
		14.5.1 Application Structure
		14.5.2 Execution Result
	14.6 Implementation
		14.6.1 Implementation of the Input Fields
		14.6.2 Implementation of the InfoBar Component
		14.6.3 Implementation of the Writing Emphasis with Editing
		14.6.4 Implementation of the CourseTable Component
		14.6.5 Implementation of the CourseRow Component
		14.6.6 Implementation of the CourseEditor Component
		14.6.7 Implementation of the GenEdCourseTable Component
	14.7 Adding the Editing Function
	14.8 Development Phase for Speaking Emphasis Course Table
		14.8.1 Wrong Approach 1
		14.8.2 Wrong Approach 2
		14.8.3 Toward the Right track
	14.9 Execution Steps
	14.10 Exercise
Chapter 15 React Routing
	15.1 Why React Routing?
	15.2 React Router Version 6
		15.2.1 Use React-Router-Dom module
		15.2.2 Example of Gen Ed Course Table
		15.2.3 Routing without Using a Data Store
		15.2.4 File Structure
		15.2.5 Execution Result
	15.3 Exercises
	15.4 Additional Resources
Chapter 16 Redux State Management
	16.1 Introduction to Redux
	16.2 Detailed Concepts
	16.3 Software Dependencies
	16.4 Example - Redux Toolkit
		16.4.1 Procedure
		16.4.2 Source Code
		16.4.2.1 Provide the Redux Store to React
		16.4.2.2 Create a Redux State Slice.
		16.4.2.3 Add Slice Reducers to the Store
		16.4.2.4 Use Redux State and Actions in React Components
		16.4.2.5 Execution Results
	16.5 Example – Define a Redux Store with Multiple State Variables
		16.5.1 Create a Redux Store
		16.5.2 Create a Reducer
		16.5.3 Use a Class Component to Access the Data Store
		16.5.4 Execution Result
	16.6 Managing State Using Hooks
		16.6.1 Define the TextMain Component
		16.6.1.1 Declare the State Variables
		16.6.1.2 Declaring the Reducer Function
		16.6.1.3 Define the Event Handlers
		16.6.1.4 Complete the Rendering Statement with a Return
		16.6.2 Define the InputText Component
		16.6.2.1 Declare the Function Component
		16.6.2.2 Complete the Rendering
		16.6.3 Define the TextDisplay Component
		16.6.4 Execution Result
Epilogue: Where do we go from here?
Acknowledgement
Appendix: Selected Figure Descriptions
	Figure 4-1 project 3-jsx file structure-1
	Figure 14-1 Writing Emphasis Table
	Figure 16-1 Redux Data Flow and Concepts
Index
Bibliography