introduction to react done

Writerside/r.tree

@@ -12,12 +12,13 @@
         <toc-element topic="Overview-of-React.md"/>
         <toc-element topic="Benefits-of-using-React.md"/>
         <toc-element topic="Introduction-to-TypeScript-in-React.md"/>
+        <toc-element topic="React-Concepts.md"/>
         <toc-element topic="Setting-up-the-Development-Environment.md">
             <toc-element topic="Installing-Node-js-and-npm.md"/>
-            <toc-element topic="Configuring-TypeScript-in-a-React-Project.md"/>
-            <toc-element topic="Setting-up-a-React-project-with-Create-React-App-CRA-or-Vite.md"/>
+            <toc-element topic="PnPm-Cheatsheet.md"/>
         </toc-element>
     </toc-element>
+    <toc-element topic="Setting-up-a-React-project-with-Create-React-App-CRA-or-Vite.md"/>
     <toc-element topic="2-Core-Concepts.md">
         <toc-element topic="JSX-Props.md">
             <toc-element topic="What-is-JSX.md">
@@ -33,4 +34,101 @@
             <toc-element topic="Rendering-Components.md"/>
         </toc-element>
     </toc-element>
+    <toc-element topic="3-State-ManagementTopic.md">
+        <toc-element topic="useState-Hook.md">
+            <toc-element topic="Introduction-to-useState.md"/>
+            <toc-element topic="Managing-State-in-Functional-Components.md">
+            </toc-element>
+            <toc-element topic="Example-Managing-Form-Inputs.md"/>
+        </toc-element>
+        <toc-element topic="useReducer-Hook.md">
+            <toc-element topic="Introduction-to-useReducer.md"/>
+            <toc-element topic="Complex-State-Management.md"/>
+            <toc-element topic="Example-Building-a-Counter-with-useReducer.md"/>
+        </toc-element>
+    </toc-element>
+    <toc-element topic="4-Intermediate-React-Concepts.md">
+        <toc-element topic="Handling-Events.md">
+            <toc-element topic="Event-Handling-in-React.md"/>
+            <toc-element topic="Passing-Parameters-to-Event-Handlers.md"/>
+            <toc-element topic="Common-Event-Handlers-e-g-onClick-onChange-onSubmit.md"/>
+        </toc-element>
+        <toc-element topic="Rendering-Lists.md">
+            <toc-element topic="Mapping-Data-to-Components.md"/>
+            <toc-element topic="Understanding-Keys-in-React.md"/>
+            <toc-element topic="Handling-Dynamic-Lists.md"/>
+        </toc-element>
+        <toc-element topic="Conditional-Rendering.md">
+            <toc-element topic="Using-Ternary-Operators-for-Conditional-RenderingTopic.md"/>
+            <toc-element topic="Best-Practices-for-Conditional-Rendering.md"/>
+        </toc-element>
+    </toc-element>
+    <toc-element topic="5-Hooks-in-React.md">
+        <toc-element topic="Introduction-to-Hooks.md">
+            <toc-element topic="What-are-Hooks.md"/>
+            <toc-element topic="Rules-of-Hooks.md"/>
+        </toc-element>
+        <toc-element topic="useEffect-Hook.md">
+            <toc-element topic="Synchronizing-with-External-Systems.md"/>
+            <toc-element topic="Fetching-Data-with-useEffect.md"/>
+            <toc-element topic="Dependency-Arrays.md"/>
+        </toc-element>
+        <toc-element topic="useRef-Hook.md">
+            <toc-element topic="Managing-DOM-References.md"/>
+            <toc-element topic="Persisting-Values-Across-Renders.md"/>
+            <toc-element topic="Example-Counting-Renders.md"/>
+        </toc-element>
+    </toc-element>
+    <toc-element topic="6-Custom-Hooks.md">
+        <toc-element topic="Introduction-to-Custom-Hooks.md"/>
+        <toc-element topic="Creating-a-Custom-Hook.md">
+            <toc-element topic="Example-useLocalStorage-Hook.md">
+            </toc-element>
+            <toc-element topic="Example-useFetch-Hook.md"/>
+        </toc-element>
+    </toc-element>
+    <toc-element topic="7-Performance-Optimization.md">
+        <toc-element topic="Memoization-in-React.md">
+            <toc-element topic="What-is-Memoization.md"/>
+            <toc-element topic="useCallback-Hook.md"/>
+            <toc-element topic="useMemo-Hook.md"/>
+            <toc-element topic="React-memo-for-Component-Optimization.md"/>
+        </toc-element>
+        <toc-element topic="Avoiding-Prop-Drilling.md">
+            <toc-element topic="Issues-with-Prop-Drilling.md"/>
+            <toc-element topic="Solutions-Context-API-Redux-Component-Composition.md"/>
+        </toc-element>
+    </toc-element>
+    <toc-element topic="8-Routing-with-React-Router.md">
+        <toc-element topic="Setting-Up-React-Router.md"/>
+        <toc-element topic="Basic-Routing-Concepts.md"/>
+        <toc-element topic="Nested-Routes-and-URL-Parameters.md"/>
+        <toc-element topic="Route-Protection-with-Private-Routes.md">
+        </toc-element>
+        <toc-element topic="Handling-404-Pages.md"/>
+    </toc-element>
+    <toc-element topic="10-Form-Management-with-React-Hook-Form-Yup.md">
+        <toc-element topic="Why-Use-React-Hook-Form.md">
+        </toc-element>
+        <toc-element topic="Setting-Up-React-Hook-Form.md"/>
+        <toc-element topic="Handling-Form-Validation-with-Yup.md"/>
+    </toc-element>
+    <toc-element topic="10-React-Styling.md"/>
+    <toc-element topic="11-Best-Practices-and-Common-Pitfalls.md">
+        <toc-element topic="Code-Structuring.md">
+            <toc-element topic="Organizing-Files-and-Folders.md"/>
+            <toc-element topic="Naming-Conventions-and-Best-Practices.md"/>
+        </toc-element>
+        <toc-element topic="Avoiding-Common-Mistakes.md"/>
+    </toc-element>
+    <toc-element topic="12-Advanced-State-Management-with-Redux-Toolkit.md">
+        <toc-element topic="Introduction-to-Redux.md">
+            <toc-element topic="Centralized-State-Management.md"/>
+            <toc-element topic="Benefits-of-Redux.md"/>
+        </toc-element>
+        <toc-element topic="Setting-Up-Redux-Toolkit.md"/>
+        <toc-element topic="Handling-Asynchronous-Actions.md"/>
+        <toc-element topic="RTK-Query-for-Data-Fetching.md"/>
+    </toc-element>
+    <toc-element topic="all.md"/>
 </instance-profile>

Writerside/redirection-rules.xml

@@ -10,4 +10,9 @@
         <description>Created after removal of "Overview of React" from React-TypeScript</description>
         <accepts>Overview-of-React.html</accepts>
     </rule>
+    <rule id="1d42f6a3">
+        <description>Created after removal of "Configuring TypeScript in a React Project" from React-TypeScript
+        </description>
+        <accepts>Configuring-TypeScript-in-a-React-Project.html</accepts>
+    </rule>
 </rules>

Writerside/topics/10-Form-Management-with-React-Hook-Form-Yup.md

@@ -0,0 +1,3 @@
+# 9. Form Management with React Hook Form & Yup
+
+Start typing here...

Writerside/topics/10-React-Styling.md

@@ -0,0 +1,3 @@
+# 10. React Styling
+
+Start typing here...

Writerside/topics/11-Best-Practices-and-Common-Pitfalls.md

@@ -0,0 +1,3 @@
+# 11. Best Practices and Common Pitfalls
+
+Start typing here...

Writerside/topics/12-Advanced-State-Management-with-Redux-Toolkit.md

@@ -0,0 +1,3 @@
+# 12. Advanced State Management with Redux Toolkit
+
+Start typing here...

Writerside/topics/2-Core-Concepts.md

@@ -1,3 +1,3 @@
-# 2.Core Concepts
+# 2. Core Concepts
 
 Start typing here...

Writerside/topics/3-State-ManagementTopic.md

@@ -0,0 +1,3 @@
+# 3. Intro to State
+
+Start typing here...

Writerside/topics/4-Intermediate-React-Concepts.md

@@ -0,0 +1,3 @@
+# 4. Intermediate React Concepts
+
+Start typing here...

Writerside/topics/5-Hooks-in-React.md

@@ -0,0 +1,3 @@
+# 5. Hooks in React
+
+Start typing here...

Writerside/topics/6-Custom-Hooks.md

@@ -0,0 +1,3 @@
+# 6. Custom Hooks
+
+Start typing here...

Writerside/topics/7-Performance-Optimization.md

@@ -0,0 +1,3 @@
+# 7. Performance Optimization
+
+Start typing here...

Writerside/topics/8-Routing-with-React-Router.md

@@ -0,0 +1,3 @@
+# 8. Routing with React Router
+
+Start typing here...

Writerside/topics/Avoiding-Common-Mistakes.md

@@ -0,0 +1,3 @@
+# Avoiding Common Mistakes
+
+Start typing here...

Writerside/topics/Avoiding-Prop-Drilling.md

@@ -0,0 +1,3 @@
+# Avoiding Prop Drilling
+
+Start typing here...

Writerside/topics/Basic-Routing-Concepts.md

@@ -0,0 +1,3 @@
+# Basic Routing Concepts
+
+Start typing here...

Writerside/topics/Benefits-of-Redux.md

@@ -0,0 +1,3 @@
+# Benefits of Redux
+
+Start typing here...

Writerside/topics/Benefits-of-using-React.md

@@ -1,3 +1,143 @@
-# Benefits of using React
+# Thinking in React
 
-Start typing here...
+"Thinking in React" is a concept that describes the process of designing and building user interfaces with React.js. It emphasizes breaking down the UI into components, managing data flow, and structuring the application in a way that aligns with React's component-based architecture. Here’s a concise breakdown:
+
+
+### **1. Break Down the UI into Components**
+1. **Start with a Mockup:** Look at your UI and identify the different parts that can be broken down into components.
+  - Imagine that you already have a JSON API and a mockup from a designer.
+    - The JSON API returns some data that looks like this:
+      ```JSON
+      [
+        { category: "Fruits", price: "$1", stocked: true, name: "Apple" },
+        { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
+        { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
+        { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
+        { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
+        { category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
+      ]
+      ```
+  The mockup looks like this:
+
+![product page.png](product page.png)
+
+2. There are five components on this screen:
+ ![products page decoupled.png](products_page_decoupled.png)
+   - FilterableProductTable (grey) contains the entire app.
+   - SearchBar (blue) receives the user input.
+   - ProductTable (lavender) displays and filters the list according to the user input.
+   - ProductCategoryRow (green) displays a heading for each category.
+   - ProductRow (yellow) displays a row for each product.
+### **2. Build a Static Version in React**
+   - **Create Stateless Components:** Initially, build components that don’t manage their own state, simply taking in props and rendering UI.
+     - In the App.js add
+     ```Javascript
+       function ProductCategoryRow({ category }) {
+           return (
+             <tr>
+               <th colSpan="2">
+                 {category}
+               </th>
+             </tr>
+           );
+       }
+
+        function ProductRow({ product }) {
+            const name = product.stocked ? product.name :
+            <span style={{ color: 'red' }}>
+            {product.name}
+            </span>;        
+            return (
+                <tr>
+                    <td>{name}</td>
+                    <td>{product.price}</td>
+                </tr>
+            );
+        }
+
+        function ProductTable({ products }) {
+            const rows = [];
+            let lastCategory = null;
+
+            products.forEach((product) => {
+                if (product.category !== lastCategory) {
+                    rows.push(
+                        <ProductCategoryRow
+                            category={product.category}
+                            key={product.category}
+                         />
+                    );
+                }
+            rows.push(
+                <ProductRow
+                    product={product}
+                    key={product.name} 
+                />
+                );
+                lastCategory = product.category;
+            });
+
+            return (
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Price</th>
+                        </tr>
+                    </thead>
+                    <tbody>{rows}</tbody>
+                </table>
+            );
+        }
+
+        function SearchBar() {
+            return (
+                <form>
+                    <input type="text" placeholder="Search..." />
+                    <label>
+                        <input type="checkbox" />
+                        {' '}
+                        Only show products in stock
+                    </label>
+                </form>
+            );
+        }
+
+        function FilterableProductTable({ products }) {
+            return (
+                <div>
+                    <SearchBar />
+                    <ProductTable products={products} />
+                </div>
+            );
+        }
+
+        const PRODUCTS = [
+            {category: "Fruits", price: "$1", stocked: true, name: "Apple"},
+            {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
+            {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
+            {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
+            {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
+            {category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
+        ];
+
+        export default function App() {
+            return <FilterableProductTable products={PRODUCTS} />;
+        }
+     ```
+
+### **3. Identify the Minimal Representation of UI State**
+- **Determine What State Your UI Needs:** Consider what needs to change in your UI and represent it in the component's state.
+- **Single Source of Truth:** Identify where the state should live—often in the highest common ancestor component that needs to share the state.
+
+### **4. Identify Where Your State Should Live**
+- **Lift State Up:** When multiple components need to share state, lift it up to their closest common ancestor.
+- **Controlled Components:** Ensure components only control their own state or receive state from a parent component.
+
+### **5. Add Inverse Data Flow**
+- **Pass Callbacks to Update State:** Child components that need to modify the parent's state should do so via callbacks passed down as props.
+
+### **6. Implement the Final UI**
+- **Refine Components:** Continue to break down components, manage state efficiently, and ensure the data flows in a top-down manner.
+
+"Thinking in React" is about modularity, clarity, and a clear data flow, which together make building complex UIs more manageable.

Writerside/topics/Best-Practices-for-Conditional-Rendering.md

@@ -0,0 +1,3 @@
+# Best Practices for Conditional Rendering
+
+Start typing here...

Writerside/topics/Centralized-State-Management.md

@@ -0,0 +1,3 @@
+# Centralized State Management
+
+Start typing here...