From b5677735b09b162776307a5197d0ae6be7b7db98 Mon Sep 17 00:00:00 2001
From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com>
Date: Sat, 27 Jul 2024 08:21:24 +0530
Subject: [PATCH 1/4] Add 255 lc solution
---
...Preorder-Sequence-in-Binary-Search-Tree.md | 367 ++++++++++++++++++
1 file changed, 367 insertions(+)
create mode 100644 dsa-solutions/lc-solutions/0200-0299/0255-Verify-Preorder-Sequence-in-Binary-Search-Tree.md
diff --git a/dsa-solutions/lc-solutions/0200-0299/0255-Verify-Preorder-Sequence-in-Binary-Search-Tree.md b/dsa-solutions/lc-solutions/0200-0299/0255-Verify-Preorder-Sequence-in-Binary-Search-Tree.md
new file mode 100644
index 000000000..a53382081
--- /dev/null
+++ b/dsa-solutions/lc-solutions/0200-0299/0255-Verify-Preorder-Sequence-in-Binary-Search-Tree.md
@@ -0,0 +1,367 @@
+---
+id: verify-preorder-sequence-in-binary-search-tree
+title: Verify Preorder Sequence in Binary Search Tree
+sidebar_label: 0255-Verify Preorder Sequence in Binary Search Tree
+tags: [Hash Map, Two Pointers,Binary Search Tree]
+description: Solution to finding and Verify Preorder Sequence in Binary Search Tree.
+---
+
+### Description
+
+Given an array of numbers, verify whether it is the correct preorder traversal sequence of a binary search tree.
+
+You may assume each number in the sequence is unique.
+
+Consider the following binary search tree:
+
+```bash
+ 5
+ / \
+ 2 6
+ / \
+ 1 3
+```
+
+### Example:
+
+**Example 1:**
+```bash
+Input: [5,2,6,1,3]
+Output: false
+```
+
+
+**Example 2:**
+```bash
+Input: [5,2,1,3,6]
+Output: true
+```
+### Solution
+
+#### **Approach**
+
+- Use a stack to simulate the traversal.
+- Maintain a variable `low` which represents the lowest value that the next node can take. Initially, set `low` to negative infinity.
+- Iterate through the array:
+ - If we encounter a value less than `low`, it means the sequence is invalid.
+ - If the current value is greater than the top of the stack, keep popping from the stack and update `low` to the value of the last popped element. This ensures that we are correctly moving to the right subtree.
+ - Push the current value onto the stack.
+
+
+
+
+
+
+```javascript
+function verifyPreorder(preorder) {
+ let stack = [];
+ let low = -Infinity;
+
+ for (let value of preorder) {
+ if (value < low) {
+ return false;
+ }
+ while (stack.length > 0 && value > stack[stack.length - 1]) {
+ low = stack.pop();
+ }
+ stack.push(value);
+ }
+ return true;
+}
+
+// Example usage:
+const preorder1 = [5, 2, 6, 1, 3];
+console.log(verifyPreorder(preorder1)); // Output: false
+
+const preorder2 = [5, 2, 1, 3, 6];
+console.log(verifyPreorder(preorder2)); // Output: true
+```
+
+
+
+
+
+
+```typescript
+function verifyPreorder(preorder: number[]): boolean {
+ let stack: number[] = [];
+ let low: number = -Infinity;
+
+ for (let value of preorder) {
+ if (value < low) {
+ return false;
+ }
+ while (stack.length > 0 && value > stack[stack.length - 1]) {
+ low = stack.pop()!;
+ }
+ stack.push(value);
+ }
+ return true;
+}
+
+// Example usage:
+const preorder1: number[] = [5, 2, 6, 1, 3];
+console.log(verifyPreorder(preorder1)); // Output: false
+
+const preorder2: number[] = [5, 2, 1, 3, 6];
+console.log(verifyPreorder(preorder2)); // Output: true
+```
+
+
+
+
+
+
+```python
+def verifyPreorder(preorder):
+ stack = []
+ low = float('-inf')
+
+ for value in preorder:
+ if value < low:
+ return False
+ while stack and value > stack[-1]:
+ low = stack.pop()
+ stack.append(value)
+
+ return True
+
+# Example usage:
+preorder1 = [5, 2, 6, 1, 3]
+print(verifyPreorder(preorder1)) # Output: False
+
+preorder2 = [5, 2, 1, 3, 6]
+print(verifyPreorder(preorder2)) # Output: True
+```
+
+
+
+
+
+```java
+import java.util.Stack;
+
+public class Solution {
+ public boolean verifyPreorder(int[] preorder) {
+ Stack stack = new Stack<>();
+ int low = Integer.MIN_VALUE;
+
+ for (int value : preorder) {
+ if (value < low) {
+ return false;
+ }
+ while (!stack.isEmpty() && value > stack.peek()) {
+ low = stack.pop();
+ }
+ stack.push(value);
+ }
+ return true;
+ }
+
+ public static void main(String[] args) {
+ Solution solution = new Solution();
+
+ int[] preorder1 = {5, 2, 6, 1, 3};
+ System.out.println(solution.verifyPreorder(preorder1)); // Output: false
+
+ int[] preorder2 = {5, 2, 1, 3, 6};
+ System.out.println(solution.verifyPreorder(preorder2)); // Output: true
+ }
+}
+```
+
+
+
+
+```cpp
+#include
+#include
+#include
+#include
+
+using namespace std;
+
+class Solution {
+public:
+ bool verifyPreorder(vector& preorder) {
+ stack stk;
+ int low = INT_MIN;
+
+ for (int value : preorder) {
+ if (value < low) {
+ return false;
+ }
+ while (!stk.empty() && value > stk.top()) {
+ low = stk.top();
+ stk.pop();
+ }
+ stk.push(value);
+ }
+
+ return true;
+ }
+};
+
+int main() {
+ Solution solution;
+
+ vector preorder1 = {5, 2, 6, 1, 3};
+ cout << (solution.verifyPreorder(preorder1) ? "true" : "false") << endl; // Output: false
+
+ vector preorder2 = {5, 2, 1, 3, 6};
+ cout << (solution.verifyPreorder(preorder2) ? "true" : "false") << endl; // Output: true
+
+ return 0;
+}
+```
+
+
+
+
+
+### Explanation:
+
+
+
+
+
+
+1. **Initialization**:
+ - A stack is used to keep track of the nodes.
+ - `low` is initialized to `-Infinity` to represent the smallest possible value initially.
+
+2. **Iteration**:
+ - For each value in the `preorder` array:
+ - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `false`.
+ - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
+ - Push the current value onto the stack.
+
+3. **Return**:
+ - If we successfully iterate through the entire array without finding any violations, return `true`.
+
+
+
+
+
+
+1. **Initialization**:
+ - A stack is used to keep track of the nodes.
+ - `low` is initialized to `-Infinity` to represent the smallest possible value initially.
+
+2. **Iteration**:
+ - For each value in the `preorder` array:
+ - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `false`.
+ - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
+ - Push the current value onto the stack.
+
+3. **Return**:
+ - If we successfully iterate through the entire array without finding any violations, return `true`.
+
+
+
+
+
+1. **Initialization**:
+ - A stack is used to keep track of the nodes.
+ - `low` is initialized to negative infinity to represent the smallest possible value initially.
+
+2. **Iteration**:
+ - For each value in the `preorder` array:
+ - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `False`.
+ - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
+ - Push the current value onto the stack.
+
+3. **Return**:
+ - If we successfully iterate through the entire array without finding any violations, return `True`.
+
+
+
+
+
+1. **Initialization**:
+ - A stack is used to keep track of the nodes.
+ - `low` is initialized to `Integer.MIN_VALUE` to represent the smallest possible value initially.
+
+2. **Iteration**:
+ - For each value in the `preorder` array:
+ - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `false`.
+ - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
+ - Push the current value onto the stack.
+
+3. **Return**:
+ - If we successfully iterate through the entire array without finding any violations, return `true`.
+
+
+
+
+
+1. **Initialization**:
+ - A stack is used to keep track of the nodes.
+ - `low` is initialized to `INT_MIN` to represent the smallest possible value initially.
+
+2. **Iteration**:
+ - For each value in the `preorder` array:
+ - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `false`.
+ - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
+ - Push the current value onto the stack.
+
+3. **Return**:
+ - If we successfully iterate through the entire array without finding any violations, return `true`.
+
+
+
+
+
+### Complexity:
+
+
+
+
+
+
+- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
+- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
+
+
+
+
+
+- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
+- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
+
+
+
+
+
+
+- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
+- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
+
+
+
+
+
+- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
+- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
+
+
+
+- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
+- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
+
+
+
+
+
+
+## References
+
+- **LeetCode Problem:** [Binary Search Tree](https://leetcode.com/problems/verify-preorder-sequence-in-binary-search-tree/)
+
+
Author:
+
+
+{['sivaprasath2004'].map(username => (
+
+))}
+
From 16a0988c98535b721e900a399659cf1e6d308150 Mon Sep 17 00:00:00 2001
From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com>
Date: Sat, 27 Jul 2024 08:22:11 +0530
Subject: [PATCH 2/4] wrong Attempt
---
...Preorder-Sequence-in-Binary-Search-Tree.md | 367 ------------------
1 file changed, 367 deletions(-)
delete mode 100644 dsa-solutions/lc-solutions/0200-0299/0255-Verify-Preorder-Sequence-in-Binary-Search-Tree.md
diff --git a/dsa-solutions/lc-solutions/0200-0299/0255-Verify-Preorder-Sequence-in-Binary-Search-Tree.md b/dsa-solutions/lc-solutions/0200-0299/0255-Verify-Preorder-Sequence-in-Binary-Search-Tree.md
deleted file mode 100644
index a53382081..000000000
--- a/dsa-solutions/lc-solutions/0200-0299/0255-Verify-Preorder-Sequence-in-Binary-Search-Tree.md
+++ /dev/null
@@ -1,367 +0,0 @@
----
-id: verify-preorder-sequence-in-binary-search-tree
-title: Verify Preorder Sequence in Binary Search Tree
-sidebar_label: 0255-Verify Preorder Sequence in Binary Search Tree
-tags: [Hash Map, Two Pointers,Binary Search Tree]
-description: Solution to finding and Verify Preorder Sequence in Binary Search Tree.
----
-
-### Description
-
-Given an array of numbers, verify whether it is the correct preorder traversal sequence of a binary search tree.
-
-You may assume each number in the sequence is unique.
-
-Consider the following binary search tree:
-
-```bash
- 5
- / \
- 2 6
- / \
- 1 3
-```
-
-### Example:
-
-**Example 1:**
-```bash
-Input: [5,2,6,1,3]
-Output: false
-```
-
-
-**Example 2:**
-```bash
-Input: [5,2,1,3,6]
-Output: true
-```
-### Solution
-
-#### **Approach**
-
-- Use a stack to simulate the traversal.
-- Maintain a variable `low` which represents the lowest value that the next node can take. Initially, set `low` to negative infinity.
-- Iterate through the array:
- - If we encounter a value less than `low`, it means the sequence is invalid.
- - If the current value is greater than the top of the stack, keep popping from the stack and update `low` to the value of the last popped element. This ensures that we are correctly moving to the right subtree.
- - Push the current value onto the stack.
-
-
-
-
-
-
-```javascript
-function verifyPreorder(preorder) {
- let stack = [];
- let low = -Infinity;
-
- for (let value of preorder) {
- if (value < low) {
- return false;
- }
- while (stack.length > 0 && value > stack[stack.length - 1]) {
- low = stack.pop();
- }
- stack.push(value);
- }
- return true;
-}
-
-// Example usage:
-const preorder1 = [5, 2, 6, 1, 3];
-console.log(verifyPreorder(preorder1)); // Output: false
-
-const preorder2 = [5, 2, 1, 3, 6];
-console.log(verifyPreorder(preorder2)); // Output: true
-```
-
-
-
-
-
-
-```typescript
-function verifyPreorder(preorder: number[]): boolean {
- let stack: number[] = [];
- let low: number = -Infinity;
-
- for (let value of preorder) {
- if (value < low) {
- return false;
- }
- while (stack.length > 0 && value > stack[stack.length - 1]) {
- low = stack.pop()!;
- }
- stack.push(value);
- }
- return true;
-}
-
-// Example usage:
-const preorder1: number[] = [5, 2, 6, 1, 3];
-console.log(verifyPreorder(preorder1)); // Output: false
-
-const preorder2: number[] = [5, 2, 1, 3, 6];
-console.log(verifyPreorder(preorder2)); // Output: true
-```
-
-
-
-
-
-
-```python
-def verifyPreorder(preorder):
- stack = []
- low = float('-inf')
-
- for value in preorder:
- if value < low:
- return False
- while stack and value > stack[-1]:
- low = stack.pop()
- stack.append(value)
-
- return True
-
-# Example usage:
-preorder1 = [5, 2, 6, 1, 3]
-print(verifyPreorder(preorder1)) # Output: False
-
-preorder2 = [5, 2, 1, 3, 6]
-print(verifyPreorder(preorder2)) # Output: True
-```
-
-
-
-
-
-```java
-import java.util.Stack;
-
-public class Solution {
- public boolean verifyPreorder(int[] preorder) {
- Stack stack = new Stack<>();
- int low = Integer.MIN_VALUE;
-
- for (int value : preorder) {
- if (value < low) {
- return false;
- }
- while (!stack.isEmpty() && value > stack.peek()) {
- low = stack.pop();
- }
- stack.push(value);
- }
- return true;
- }
-
- public static void main(String[] args) {
- Solution solution = new Solution();
-
- int[] preorder1 = {5, 2, 6, 1, 3};
- System.out.println(solution.verifyPreorder(preorder1)); // Output: false
-
- int[] preorder2 = {5, 2, 1, 3, 6};
- System.out.println(solution.verifyPreorder(preorder2)); // Output: true
- }
-}
-```
-
-
-
-
-```cpp
-#include
-#include
-#include
-#include
-
-using namespace std;
-
-class Solution {
-public:
- bool verifyPreorder(vector& preorder) {
- stack stk;
- int low = INT_MIN;
-
- for (int value : preorder) {
- if (value < low) {
- return false;
- }
- while (!stk.empty() && value > stk.top()) {
- low = stk.top();
- stk.pop();
- }
- stk.push(value);
- }
-
- return true;
- }
-};
-
-int main() {
- Solution solution;
-
- vector preorder1 = {5, 2, 6, 1, 3};
- cout << (solution.verifyPreorder(preorder1) ? "true" : "false") << endl; // Output: false
-
- vector preorder2 = {5, 2, 1, 3, 6};
- cout << (solution.verifyPreorder(preorder2) ? "true" : "false") << endl; // Output: true
-
- return 0;
-}
-```
-
-
-
-
-
-### Explanation:
-
-
-
-
-
-
-1. **Initialization**:
- - A stack is used to keep track of the nodes.
- - `low` is initialized to `-Infinity` to represent the smallest possible value initially.
-
-2. **Iteration**:
- - For each value in the `preorder` array:
- - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `false`.
- - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
- - Push the current value onto the stack.
-
-3. **Return**:
- - If we successfully iterate through the entire array without finding any violations, return `true`.
-
-
-
-
-
-
-1. **Initialization**:
- - A stack is used to keep track of the nodes.
- - `low` is initialized to `-Infinity` to represent the smallest possible value initially.
-
-2. **Iteration**:
- - For each value in the `preorder` array:
- - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `false`.
- - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
- - Push the current value onto the stack.
-
-3. **Return**:
- - If we successfully iterate through the entire array without finding any violations, return `true`.
-
-
-
-
-
-1. **Initialization**:
- - A stack is used to keep track of the nodes.
- - `low` is initialized to negative infinity to represent the smallest possible value initially.
-
-2. **Iteration**:
- - For each value in the `preorder` array:
- - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `False`.
- - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
- - Push the current value onto the stack.
-
-3. **Return**:
- - If we successfully iterate through the entire array without finding any violations, return `True`.
-
-
-
-
-
-1. **Initialization**:
- - A stack is used to keep track of the nodes.
- - `low` is initialized to `Integer.MIN_VALUE` to represent the smallest possible value initially.
-
-2. **Iteration**:
- - For each value in the `preorder` array:
- - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `false`.
- - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
- - Push the current value onto the stack.
-
-3. **Return**:
- - If we successfully iterate through the entire array without finding any violations, return `true`.
-
-
-
-
-
-1. **Initialization**:
- - A stack is used to keep track of the nodes.
- - `low` is initialized to `INT_MIN` to represent the smallest possible value initially.
-
-2. **Iteration**:
- - For each value in the `preorder` array:
- - If the value is less than `low`, it means we are visiting a node in the right subtree that violates the BST property, hence return `false`.
- - If the current value is greater than the top of the stack, it means we are transitioning from the left subtree to the right subtree. We keep popping the stack and update `low` to ensure that subsequent nodes in the right subtree are greater than this value.
- - Push the current value onto the stack.
-
-3. **Return**:
- - If we successfully iterate through the entire array without finding any violations, return `true`.
-
-
-
-
-
-### Complexity:
-
-
-
-
-
-
-- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
-- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
-
-
-
-
-
-- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
-- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
-
-
-
-
-
-
-- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
-- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
-
-
-
-
-
-- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
-- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
-
-
-
-- **Time Complexity**: `O(n)`, where `n` is the length of the preorder array. Each element is pushed and popped from the stack at most once.
-- **Space Complexity**: `O(n)`, where `n` is the length of the preorder array, which is the worst-case space complexity for the stack.
-
-
-
-
-
-
-## References
-
-- **LeetCode Problem:** [Binary Search Tree](https://leetcode.com/problems/verify-preorder-sequence-in-binary-search-tree/)
-
-
Author:
-
-
-{['sivaprasath2004'].map(username => (
-
-))}
-
From c4b6eb007d925f6a1b8e6717a405caf4fe152be3 Mon Sep 17 00:00:00 2001
From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com>
Date: Sat, 27 Jul 2024 13:33:00 +0530
Subject: [PATCH 3/4] remodify
---
docs/react/_category_.json | 8 -
docs/react/advanced-usage/_category_.json | 8 -
.../advanced-usage/advanced-configuration.md | 134 -------
.../alternatives-to-ejecting.md | 51 ---
.../advanced-usage/can-i-use-decorators.md | 151 --------
docs/react/advanced-usage/custom-templates.md | 301 ---------------
.../pre-rendering-into-static-html-files.md | 92 -----
docs/react/assets/Frontend-Roadmap.pdf | Bin 13765701 -> 0 bytes
docs/react/assets/ReactJS-Guide.pdf | Bin 29461530 -> 0 bytes
docs/react/assets/audio.mp3 | Bin 310169 -> 0 bytes
.../back-end-integration/DataFetcher.jsx | 32 --
.../FetchDataComponent.jsx | 38 --
.../back-end-integration/_category_.json | 8 -
.../fetching-data-with-ajax-requests.md | 189 ---------
.../integrating-with-an-api-backend.md | 154 --------
.../proxying-api-requests-in-development.md | 236 ------------
.../title-and-meta-tags.md | 67 ----
docs/react/building-your-app/_category_.json | 8 -
.../building-your-app/adding-a-router.md | 102 -----
.../building-your-app/adding-bootstrap.md | 195 ----------
.../adding-custom-environment-variables.md | 132 -------
docs/react/building-your-app/adding-flow.md | 197 ----------
docs/react/building-your-app/adding-relay.md | 211 ----------
.../building-your-app/adding-typescript.md | 72 ----
.../importing-a-component.md | 96 -----
.../installing-a-dependency.md | 106 -----
.../making-a-progressive-web-app.md | 120 ------
.../measuring-performance.md | 138 -------
.../building-your-app/production-build.md | 127 ------
docs/react/building-your-app/style.css | 136 -------
.../using-global-variables.md | 225 -----------
docs/react/create-react-app.md | 65 ----
docs/react/css/style.css | 20 -
docs/react/deployment/_category_.json | 8 -
docs/react/deployment/deployment.md | 103 -----
docs/react/development/_category_.json | 8 -
.../development/analyzing-the-bundle-size.md | 63 ---
.../developing-components-in-isolation.md | 83 ----
.../development/setting-up-your-editor.md | 166 --------
.../development/using-https-in-development.md | 82 ----
docs/react/getting-started/_category_.json | 8 -
.../getting-started/available-scripts.md | 45 ---
.../react/getting-started/folder-structure.md | 70 ----
docs/react/getting-started/forms-in-react.md | 362 ------------------
docs/react/getting-started/getting-started.md | 194 ----------
.../supported-browsers-features.md | 47 ---
.../updating-to-new-releases.md | 44 ---
docs/react/hooks/_category_.json | 8 -
docs/react/hooks/useCallback.md | 37 --
docs/react/hooks/useContext.md | 31 --
docs/react/hooks/useEffect-hook.md | 42 --
docs/react/hooks/useMemo.md | 42 --
docs/react/hooks/useReducer.md | 50 ---
docs/react/hooks/useRef.md | 42 --
docs/react/hooks/useState-hook.md | 37 --
docs/react/img/getting-started-react.svg | 1 -
docs/react/img/local-host-2.gif | Bin 4434146 -> 0 bytes
docs/react/img/logo.svg | 1 -
docs/react/img/react.svg | 1 -
docs/react/intro-react.md | 52 ---
docs/react/styles-and-assets/_category_.json | 8 -
.../adding-a-css-modules-stylesheet.md | 202 ----------
.../adding-a-sass-stylesheet.md | 132 -------
.../styles-and-assets/adding-a-stylesheet.md | 113 ------
.../styles-and-assets/adding-css-reset.md | 77 ----
.../adding-images-fonts-and-files.md | 198 ----------
.../react/styles-and-assets/code-splitting.md | 74 ----
.../loading-graphql-files.md | 130 -------
.../styles-and-assets/post-processing-css.md | 152 --------
.../using-the-public-folder.md | 63 ---
docs/react/support/troubleshooting.md | 56 ---
docs/react/testing/_category_.json | 8 -
docs/react/testing/debugging-tests.md | 114 ------
docs/react/testing/running-tests.md | 134 -------
74 files changed, 6507 deletions(-)
delete mode 100644 docs/react/_category_.json
delete mode 100644 docs/react/advanced-usage/_category_.json
delete mode 100644 docs/react/advanced-usage/advanced-configuration.md
delete mode 100644 docs/react/advanced-usage/alternatives-to-ejecting.md
delete mode 100644 docs/react/advanced-usage/can-i-use-decorators.md
delete mode 100644 docs/react/advanced-usage/custom-templates.md
delete mode 100644 docs/react/advanced-usage/pre-rendering-into-static-html-files.md
delete mode 100644 docs/react/assets/Frontend-Roadmap.pdf
delete mode 100644 docs/react/assets/ReactJS-Guide.pdf
delete mode 100644 docs/react/assets/audio.mp3
delete mode 100644 docs/react/back-end-integration/DataFetcher.jsx
delete mode 100644 docs/react/back-end-integration/FetchDataComponent.jsx
delete mode 100644 docs/react/back-end-integration/_category_.json
delete mode 100644 docs/react/back-end-integration/fetching-data-with-ajax-requests.md
delete mode 100644 docs/react/back-end-integration/integrating-with-an-api-backend.md
delete mode 100644 docs/react/back-end-integration/proxying-api-requests-in-development.md
delete mode 100644 docs/react/back-end-integration/title-and-meta-tags.md
delete mode 100644 docs/react/building-your-app/_category_.json
delete mode 100644 docs/react/building-your-app/adding-a-router.md
delete mode 100644 docs/react/building-your-app/adding-bootstrap.md
delete mode 100644 docs/react/building-your-app/adding-custom-environment-variables.md
delete mode 100644 docs/react/building-your-app/adding-flow.md
delete mode 100644 docs/react/building-your-app/adding-relay.md
delete mode 100644 docs/react/building-your-app/adding-typescript.md
delete mode 100644 docs/react/building-your-app/importing-a-component.md
delete mode 100644 docs/react/building-your-app/installing-a-dependency.md
delete mode 100644 docs/react/building-your-app/making-a-progressive-web-app.md
delete mode 100644 docs/react/building-your-app/measuring-performance.md
delete mode 100644 docs/react/building-your-app/production-build.md
delete mode 100644 docs/react/building-your-app/style.css
delete mode 100644 docs/react/building-your-app/using-global-variables.md
delete mode 100644 docs/react/create-react-app.md
delete mode 100644 docs/react/css/style.css
delete mode 100644 docs/react/deployment/_category_.json
delete mode 100644 docs/react/deployment/deployment.md
delete mode 100644 docs/react/development/_category_.json
delete mode 100644 docs/react/development/analyzing-the-bundle-size.md
delete mode 100644 docs/react/development/developing-components-in-isolation.md
delete mode 100644 docs/react/development/setting-up-your-editor.md
delete mode 100644 docs/react/development/using-https-in-development.md
delete mode 100644 docs/react/getting-started/_category_.json
delete mode 100644 docs/react/getting-started/available-scripts.md
delete mode 100644 docs/react/getting-started/folder-structure.md
delete mode 100644 docs/react/getting-started/forms-in-react.md
delete mode 100644 docs/react/getting-started/getting-started.md
delete mode 100644 docs/react/getting-started/supported-browsers-features.md
delete mode 100644 docs/react/getting-started/updating-to-new-releases.md
delete mode 100644 docs/react/hooks/_category_.json
delete mode 100644 docs/react/hooks/useCallback.md
delete mode 100644 docs/react/hooks/useContext.md
delete mode 100644 docs/react/hooks/useEffect-hook.md
delete mode 100644 docs/react/hooks/useMemo.md
delete mode 100644 docs/react/hooks/useReducer.md
delete mode 100644 docs/react/hooks/useRef.md
delete mode 100644 docs/react/hooks/useState-hook.md
delete mode 100644 docs/react/img/getting-started-react.svg
delete mode 100644 docs/react/img/local-host-2.gif
delete mode 100644 docs/react/img/logo.svg
delete mode 100644 docs/react/img/react.svg
delete mode 100644 docs/react/intro-react.md
delete mode 100644 docs/react/styles-and-assets/_category_.json
delete mode 100644 docs/react/styles-and-assets/adding-a-css-modules-stylesheet.md
delete mode 100644 docs/react/styles-and-assets/adding-a-sass-stylesheet.md
delete mode 100644 docs/react/styles-and-assets/adding-a-stylesheet.md
delete mode 100644 docs/react/styles-and-assets/adding-css-reset.md
delete mode 100644 docs/react/styles-and-assets/adding-images-fonts-and-files.md
delete mode 100644 docs/react/styles-and-assets/code-splitting.md
delete mode 100644 docs/react/styles-and-assets/loading-graphql-files.md
delete mode 100644 docs/react/styles-and-assets/post-processing-css.md
delete mode 100644 docs/react/styles-and-assets/using-the-public-folder.md
delete mode 100644 docs/react/support/troubleshooting.md
delete mode 100644 docs/react/testing/_category_.json
delete mode 100644 docs/react/testing/debugging-tests.md
delete mode 100644 docs/react/testing/running-tests.md
diff --git a/docs/react/_category_.json b/docs/react/_category_.json
deleted file mode 100644
index 6f7bf7453..000000000
--- a/docs/react/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "React",
- "position": 22,
- "link": {
- "type": "generated-index",
- "description": "React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies."
- }
- }
\ No newline at end of file
diff --git a/docs/react/advanced-usage/_category_.json b/docs/react/advanced-usage/_category_.json
deleted file mode 100644
index 3628975e8..000000000
--- a/docs/react/advanced-usage/_category_.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "label": "Advanced Usage",
- "position": 10,
- "link": {
- "type": "generated-index",
- "description": "5 minutes to learn the most important RoadMap for React Mastery."
- }
- }
\ No newline at end of file
diff --git a/docs/react/advanced-usage/advanced-configuration.md b/docs/react/advanced-usage/advanced-configuration.md
deleted file mode 100644
index f15ab9223..000000000
--- a/docs/react/advanced-usage/advanced-configuration.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-id: advanced-configuration
-title: Advanced Configuration
-sidebar_label: Advanced Configuration
-sidebar_position: 4
-tags: [Create React App, Advanced Configuration, Environment Variables, Webpack, Babel, CRACO, react-scripts, Custom Scripts, Ejectify, Custom Templates]
-keywords: [create react app, advanced configuration, environment variables, webpack, babel, craco, react-scripts, custom scripts, ejectify, custom templates]
-description: Learn how to customize and fine-tune your React projects with advanced configuration options in Create React App. Discover powerful features and alternatives to ejecting that will help you take control of your development environment.
----
-In Create React App, you have the power to customize various development and production settings using environment variables. These options allow you to control the behavior of your React application without diving into complex configurations. Let's take a closer look at each setting in a handy table format:
-
-| Variable | Development | Production | Usage |
-| :------------------------ | :---------: | :--------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| BROWSER | ✅ Used | 🚫 Ignored | Override the default system browser that Create React App opens during development. You can specify a specific browser or set it to `none` to disable browser opening. You can even use a custom Node.js script for launching the browser with additional arguments from `npm start`. |
-| BROWSER_ARGS | ✅ Used | 🚫 Ignored | Pass additional arguments to the browser instance when `BROWSER` is specified. Multiple arguments are supported, separated by spaces. |
-| HOST | ✅ Used | 🚫 Ignored | Specify a custom host for the development web server. By default, it binds to all available hostnames on the device. |
-| PORT | ✅ Used | 🚫 Ignored | Set a custom port for the development web server. By default, it listens on port 3000 or finds the next available port if 3000 is in use. |
-| HTTPS | ✅ Used | 🚫 Ignored | Run the development server in `https` mode by setting this variable to `true`. |
-| WDS_SOCKET_HOST | ✅ Used | 🚫 Ignored | Specify a custom WebSocket hostname for hot module reloading in the development server. Useful when working on multiple Create React App projects simultaneously. |
-| WDS_SOCKET_PATH | ✅ Used | 🚫 Ignored | Set a custom WebSocket path for hot module reloading in the development server. Helpful when working on multiple Create React App projects simultaneously. |
-| WDS_SOCKET_PORT | ✅ Used | 🚫 Ignored | Use a custom WebSocket port for hot module reloading in the development server. Useful for working on multiple Create React App projects simultaneously. |
-| PUBLIC_URL | ✅ Used | ✅ Used | Force assets to be referenced verbatim to the provided URL (including hostname). Useful when using a CDN to host your application. This variable overrides the default assumption of your app's hosting location specified in `package.json` (`homepage`). |
-| BUILD_PATH | 🚫 Ignored | ✅ Used | Specify a new path for Create React App to output compiled assets during the production build. By default, assets are output to `/build` directory adjacent to your `/src`. |
-| CI | ✅ Used | ✅ Used | Treat warnings as build failures and make the test runner non-watching when `true`. Most Continuous Integration (CI) environments set this flag by default. |
-| REACT_EDITOR | ✅ Used | 🚫 Ignored | Override the automatic editor detection in development. When your app crashes, you'll see an error overlay with a clickable stack trace. Clicking it opens the relevant source file based on running processes. You can set this variable to your editor's bin folder's path or `none` to disable it. |
-| CHOKIDAR_USEPOLLING | ✅ Used | 🚫 Ignored | Run the watcher in polling mode (`true`) if `npm start` isn't detecting changes. Useful inside virtual machines (VMs). |
-| GENERATE_SOURCEMAP | 🚫 Ignored | ✅ Used | Enable (`true`) or disable (`false`) source maps generation during production build. Disabling source maps can resolve Out of Memory (OOM) issues on some smaller machines. |
-| INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | Embed (`true`) or import as usual (`false`) the runtime script into `index.html` during production build. Use this when dealing with Content Security Policy (CSP) restrictions. |
-| IMAGE_INLINE_SIZE_LIMIT | ✅ Used | ✅ Used | Control the size limit (in bytes) for images that will be inlined in the CSS or JS build artifact as data URI in base64. Set to `0` to disable image inlining. |
-| FAST_REFRESH | ✅ Used | 🚫 Ignored | Enable (`true`) or disable (`false`) experimental Fast Refresh support. Fast Refresh allows tweaking components in real-time without reloading the page. |
-| TSC_COMPILE_ON_ERROR | ✅ Used | ✅ Used | Allow running and building TypeScript projects even with TypeScript type check errors. Errors are displayed as warnings in the terminal and/or browser console. |
-| ESLINT_NO_DEV_ERRORS | ✅ Used | 🚫 Ignored | Convert ESLint errors to warnings during development, hiding them from the error overlay. |
-| DISABLE_ESLINT_PLUGIN | ✅ Used | ✅ Used | Completely disable the [eslint-webpack-plugin](https://github.com/webpack-contrib/eslint-webpack-plugin). |
-| DISABLE_NEW_JSX_TRANSFORM | ✅ Used | ✅ Used | Disable (`true`) the new JSX transform introduced in React 17 and backported to React 16.14.0, 15.7.0, and 0.14.10. New projects have this enabled by default, but you may need to disable it in existing projects if you can't upgrade React. |
-
-Remember to experiment with these configurations, as it allows you to tailor your React application according to your specific requirements.
-
-## Advanced Configuration in Create React App
-
-Welcome to the world of advanced configurations in Create React App! 🚀 In this guide, we'll dive deeper into the powerful features and options available to fine-tune your React projects. Don't worry; we'll make sure it's easy to understand, even for beginners!
-
-## What is Create React App?
-
-For those who are new to Create React App (CRA), it's a fantastic tool that helps you kickstart your React projects without getting bogged down in complex setup processes. CRA abstracts away the configuration, allowing you to focus on building amazing React applications right from the get-go.
-
-## Customizing the Configuration
-
-CRA provides a way to customize its configuration without ejecting your project. Ejecting means you'd have to deal with all the build tools and configurations yourself, which can be overwhelming for beginners. So, let's look at how to customize the configuration while staying within the comfort zone of CRA.
-
-### Environment Variables
-
-Environment variables are super handy for managing various settings in your app. By default, CRA supports `.env` files, but you can create environment-specific files like `.env.development`, `.env.production`, etc.
-
-```bash
-# .env.development
-REACT_APP_API_URL="https://api.dev.example.com"
-```
-
-Now, you can access the variable like this:
-
-```javascript
-const apiUrl = process.env.REACT_APP_API_URL;
-```
-
-### Adding Webpack Plugins
-
-Webpack is the magic behind CRA, and you can extend it with plugins. For example, let's add the "Bundle Analyzer" plugin to visualize your bundle's size:
-
-```javascript
-// In your react-scripts version 5.0.0+ or higher, you can use the following syntax in the 'webpack.config.js'
-const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
-
-// Inside your 'webpack.config.js' module.exports object, add this plugin to the 'plugins' array
-module.exports = {
- // ... other config options ...
- plugins: [
- // ... other plugins ...
- new BundleAnalyzerPlugin(),
- ],
-};
-```
-
-### Rewriting the Webpack Config
-
-Need more control over the Webpack configuration? CRA offers a simple way to extend the config directly:
-
-```javascript
-// In your react-scripts version 4.0.0+ or higher, you can use the following syntax in the 'craco.config.js'
-module.exports = {
- webpack: {
- configure: (webpackConfig) => {
- // Add your custom webpack config here
- webpackConfig.optimization.minimize = true;
- return webpackConfig;
- },
- },
-};
-```
-
-### Adding Babel Plugins
-
-To further enhance your app's capabilities, you can add Babel plugins to transform your code. For example, let's add the "transform-class-properties" plugin:
-
-```bash
-npm install --save-dev @babel/plugin-proposal-class-properties
-```
-
-Then, create a `.babelrc` file in the root of your project:
-
-```json
-{
- "plugins": ["@babel/plugin-proposal-class-properties"]
-}
-```
-
-Now you can use class properties in your components:
-
-```javascript
-class MyClassComponent extends React.Component {
- state = {
- count: 0,
- };
-
- handleClick = () => {
- this.setState((prevState) => ({ count: prevState.count + 1 }));
- };
-}
-```
-
-## Conclusion
-
-Congratulations! You've taken your first steps into the exciting world of advanced configuration in Create React App. Now you can customize your projects, add plugins, and take control of your development environment with confidence.
-
-Remember, the power of customization comes with great responsibility. Always experiment with caution and keep an eye on the official documentation for the latest updates and best practices. Happy coding! 🎉
\ No newline at end of file
diff --git a/docs/react/advanced-usage/alternatives-to-ejecting.md b/docs/react/advanced-usage/alternatives-to-ejecting.md
deleted file mode 100644
index dbc65760f..000000000
--- a/docs/react/advanced-usage/alternatives-to-ejecting.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-id: alternatives-to-ejecting
-title: Alternatives to Ejecting
-sidebar_label: Alternatives to Ejecting
-sidebar_position: 5
-tags: [React, Create React App, Advanced Usage]
-keywords: [alternatives to ejecting, create react app, react-scripts, craco, custom scripts, package.json, ejectify, custom templates, boilerplates]
-description: Learn about alternatives to ejecting from Create React App and how to customize your project without ejecting.
----
-
-## Introduction
-
-Create React App (CRA) is an awesome tool that provides a quick and easy way to set up a React project with no build configuration. However, sometimes you might find yourself needing more control over the build process or wanting to add custom configurations. The traditional way to achieve this is by ejecting from Create React App, but it can be a bit intimidating for beginners and can lead to maintenance headaches. Fear not, for there are some fantastic alternatives that will let you customize your project without the need to eject! 🚀
-
-## 1. **Customize with react-scripts**
-
-Instead of ejecting, you can use the `react-scripts` package that comes with Create React App under the hood. It offers hidden features that you can use to tweak your project's settings without ejecting. Create a file in the root of your project called `.env`, and you can add custom environment variables like this:
-
-```plaintext
-REACT_APP_MY_VARIABLE=hello-coders
-```
-
-Now you can access this variable in your code using `process.env.REACT_APP_MY_VARIABLE`.
-
-## 2. **CRACO - Create React App Configuration Override**
-
-CRACO is like magic for your Create React App projects. It stands for Create React App Configuration Override and lets you easily modify CRA's configuration without ejecting. You can add custom webpack configurations, Babel plugins, and much more, all from a single configuration file. It's like wielding a powerful wand to control your project's build process! 🧙♂️
-
-## 3. **Custom Scripts in `package.json`**
-
-For simpler customizations, you can add your own scripts directly to the `package.json` file. For example, you can create a script to run a pre-build task or automate some setup steps. Just add something like this:
-
-```json
-"scripts": {
- "custom-script": "node scripts/customScript.js"
-}
-```
-
-Then, you can run your custom script using `npm run custom-script`.
-
-## 4. **Ejectify - The Un-Ejecting Tool**
-
-Ejectify is a fun and clever tool that reverses the eject process. Instead of ejecting, you can use Ejectify to "un-eject" your Create React App project. This means you can revert to a state similar to a pre-eject status while keeping all your customizations intact! It's like traveling back in time to undo a decision without any regrets! ⏰
-
-## 5. **Custom Templates and Boilerplates**
-
-If you have specific project requirements, you can create your own custom templates or boilerplates with all the necessary configurations pre-set. Tools like `degit` allow you to easily scaffold a new project based on your custom template, saving you time and effort. It's like having your own personalized React project starter kit! 🎁
-
-## Conclusion
-
-As you can see, there's no need to fear the eject button anymore! With these amazing alternatives, you can confidently customize your Create React App projects without the complexity and drawbacks of ejecting. So go ahead, unleash your creativity, and build incredible React applications while keeping the magic of Create React App alive! Happy coding! 😄🚀
diff --git a/docs/react/advanced-usage/can-i-use-decorators.md b/docs/react/advanced-usage/can-i-use-decorators.md
deleted file mode 100644
index 06538237d..000000000
--- a/docs/react/advanced-usage/can-i-use-decorators.md
+++ /dev/null
@@ -1,151 +0,0 @@
----
-id: can-i-use-decorators
-title: The Power of Decorators in CRA
-sidebar_label: Use Decorators
-sidebar_position: 2
-tags: [decorators, create react app, decorators in create react app, decorators in react, decorators in javascript, decorators in typescript]
-keywords: [decorators, create react app, decorators in create react app, decorators in react, decorators in javascript, decorators in typescript]
-description: Learn how to use decorators in Create React App to enhance and extend the functionality of your components.
----
-
-
-## Introduction to Decorators
-
-Decorators are an amazing feature in JavaScript that allows us to enhance and extend the functionality of classes and their properties. They are essentially special functions that wrap around components and add magic to our code. Create React App (CRA) supports decorators out of the box, making it super easy for us to level up our React components! In this guide, we'll delve into decorators, how to set up CRA for using them, and explore some cool examples.
-
-## Understanding Decorators
-
-In simple terms, decorators are like cool stickers that you put on your React components to make them extra special. They start with the `@` symbol, and you can think of them as powerful modifiers that can change the behavior of classes, methods, or properties.
-
-## Setting Up CRA for Decorators
-
-Before we can start using decorators in our CRA project, we need to set up the right environment. Don't worry; it's a breeze! Here's what you need to do:
-
-1. First, let's create your CRA project:
-
- ```bash
- npx create-react-app my-app
- cd my-app
- ```
-
-2. Now, let's install the magical `babel-plugin-transform-decorators-legacy` package:
-
- ```bash
- npm install babel-plugin-transform-decorators-legacy --save-dev
- ```
-
-3. Finally, let's configure Babel to recognize decorators by adding the plugin in your `package.json` file:
-
- ```json title="package.json"
- {
- "name": "my-app",
- "version": "0.1.0",
- "babel": {
- "plugins": [
- "babel-plugin-transform-decorators-legacy"
- ]
- }
- }
- ```
-
-## Using Decorators in CRA
-
-Now comes the fun part! Let's see how we can use decorators to make our components shine:
-
-### Class Decorators
-
-Imagine class decorators as superhero capes you put on your entire component class. They can change the class's behavior or even add cool superpowers! Check this out:
-
-```jsx title="MyComponent.jsx"
-import React from 'react';
-
-function withHoverStyle(WrappedComponent) {
- return class extends React.Component {
- state = { isHovered: false };
-
- handleMouseEnter = () => this.setState({ isHovered: true });
- handleMouseLeave = () => this.setState({ isHovered: false });
-
- render() {
- return (
-
- );
- }
-}
-```
-
-In this example, the `withHoverStyle` decorator adds a nice hover effect to our component, all without modifying the original component code!
-
-### Method Decorators
-
-Method decorators are like little wizards that cast spells on specific methods in your component. Let's create a decorator to throttle an expensive method:
-
-```jsx title="MyComponent.jsx"
-function throttle(wait) {
- return function (target, key, descriptor) {
- let timeout;
-
- descriptor.value = function (...args) {
- clearTimeout(timeout);
- timeout = setTimeout(() => {
- target.apply(this, args);
- }, wait);
- };
-
- return descriptor;
- };
-}
-
-class MyComponent extends React.Component {
- @throttle(500)
- handleScroll() {
- // Expensive operation
- }
-}
-```
-
-Here, the `throttle` decorator makes sure that the `handleScroll` method is only called every 500 milliseconds, preventing performance bottlenecks!
-
-### Property Decorators
-
-Property decorators are like the secret agents that guard your component properties. They can enforce rules or do other behind-the-scenes stuff. Let's make a property read-only:
-
-```jsx title="MyComponent.jsx"
-function readonly(target, key, descriptor) {
- descriptor.writable = false;
- return descriptor;
-}
-
-class MyComponent extends React.Component {
- @readonly
- title = 'My Component';
-}
-```
-
-Now, the `title` property cannot be changed from outside the component, keeping your data safe and sound.
-
-## Conclusion
-
-Decorators are a superpower in Create React App, and now you know how to use them to make your components even more awesome! By leveraging class, method, and property decorators, you can add exciting features, enhance behavior, and make your codebase cleaner and more organized.
-
-Remember, with great power comes great responsibility. Use decorators wisely and sparingly, and you'll become a true React pro in no time! Happy coding!
\ No newline at end of file
diff --git a/docs/react/advanced-usage/custom-templates.md b/docs/react/advanced-usage/custom-templates.md
deleted file mode 100644
index c3c0a2031..000000000
--- a/docs/react/advanced-usage/custom-templates.md
+++ /dev/null
@@ -1,301 +0,0 @@
----
-id: custom-templates
-title: Custom Templates
-sidebar_label: Importing a Component
-sidebar_position: 1
-tags: [create react app, custom templates, custom template, react project, project setup, project configuration, project dependencies, project folder structure, react app, react project setup, react project configuration, react project dependencies, react project folder structure, react project template, react project scaffolding, react project boilerplate, react project starter kit, react project setup template, react project configuration template, react project dependencies template, react project folder structure template, react project scaffolding template, react project boilerplate template, react project starter kit template, react project setup boilerplate, react project configuration boilerplate, react project dependencies boilerplate, react project folder structure boilerplate, react project scaffolding boilerplate, react project starter kit boilerplate]
-keywords: [create react app, custom templates, custom template, react project, project setup, project configuration, project dependencies, project folder structure, react app, react project setup, react project configuration, react project dependencies, react project folder structure, react project template, react project scaffolding, react project boilerplate, react project starter kit, react project setup template, react project configuration template, react project dependencies template, react project folder structure template, react project scaffolding template, react project boilerplate template, react project starter kit template, react project setup boilerplate, react project configuration boilerplate, react project dependencies boilerplate, react project folder structure boilerplate, react project scaffolding boilerplate, react project starter kit boilerplate]
-description: Learn how to create and use custom templates in Create React App to quickly start new projects with specific configurations, dependencies, and folder structures.
----
-
-## Introduction to Custom Templates
-
-Custom templates in Create React App (CRA) are pre-configured project setups that allow developers to scaffold new projects with specific configurations, dependencies, and folder structures. They enable you to avoid repetitive manual setup and quickly start your projects with your preferred settings. In this guide, we'll create a custom template that includes a popular UI library, sets up a state management system, and adds some custom scripts for building an engaging React app.
-
-:::note
-This feature is available with `react-scripts@3.3.0` and higher.
-:::
-
-Custom Templates in Create React App empower you to select a specialized project template while retaining all the benefits of Create React App's features.
-
-Custom Templates follow the naming convention `cra-template-[template-name]`, but you only need to provide `[template-name]` when creating a new project.
-
-Scoped templates are also supported using the format `@[scope-name]/cra-template` or `@[scope-name]/cra-template-[template-name]`, which can be installed via `@[scope]` and `@[scope]/[template-name]` respectively.
-
-To create a new project using a custom template, use the following command:
-
-```sh
-npx create-react-app my-app --template [template-name]
-```
-
-## Finding Custom Templates
-
-Create React App ships with two default templates:
-
-- [`cra-template`](https://github.com/facebook/create-react-app/tree/main/packages/cra-template)
-- [`cra-template-typescript`](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript)
-
-However, the community offers a wide range of great custom templates. You can find them by searching for ["cra-template-\*"](https://www.npmjs.com/search?q=cra-template-*) on npm.
-
-## Building a Custom Template
-
-If you're interested in creating your custom template, start by exploring how the default [`cra-template`](https://github.com/facebook/create-react-app/tree/main/packages/cra-template) is built.
-
-A custom template must adhere to the following structure:
-
-```
-cra-template-[template-name]
- ├── README.md (for npm)
- ├── template.json
- ├── package.json
- ├── template
- | ├──README.md (for projects created from this template)
- | ├──gitignore
- | ├──public
- | | ├──index.html
- | | └── ...
- | ├──src
- | ├── index.js (or index.tsx)
- | └── ...
- └── ...
-```
-
-### Testing a Custom Template
-
-To test a custom template locally, use the `file:` prefix followed by the file path to your template source.
-
-```sh
-npx create-react-app my-app --template file:../path/to/your/template/cra-template-[template-name]
-```
-
-### The `template` Folder
-
-The `template` folder is copied to the user's app directory when Create React App installs. During this process, the file `gitignore` is renamed to `.gitignore`.
-
-Feel free to add any additional files you want in this folder, but ensure you have at least the files specified above.
-
-### The `template.json` File
-
-The `template.json` file is the configuration file for your custom template. As this feature evolves, more options will be added. For now, only the `package` key is supported.
-
-The `package` key allows you to provide any keys/values you want to add to the new project's `package.json`. You can include dependencies and any custom scripts your template relies on.
-
-Below is an example `template.json` file:
-
-```json title="template.json"
-{
- "package": {
- "dependencies": {
- "eslint-plugin-jsx-a11y": "^6.2.3",
- "serve": "^11.2.0"
- },
- "scripts": {
- "serve": "serve -s build",
- "build-and-serve": "npm run build && npm run serve"
- },
- "eslintConfig": {
- "extends": ["react-app", "plugin:jsx-a11y/recommended"],
- "plugins": ["jsx-a11y"]
- }
- }
-}
-```
-
-Any values you add for `"dependencies"` and `"scripts"` will merge with the Create React App defaults. For other keys, the values will be used as-is, replacing any matching Create React App defaults.
-
-As a convenience, we automatically replace `npm run` with `yarn` in your custom `"scripts"`, as well as in your `README` when projects are initialized with yarn.
-
-
-## Step-by-Step Guide to Creating Custom Templates in Create React App
-
-### Step 1: Setting Up the Initial CRA Project
-
-Before creating our custom template, we need to set up a basic Create React App project. If you haven't installed CRA, do it using npm (Node Package Manager):
-
-```bash
-npm install -g create-react-app
-```
-
-Once installed, create a new React app with the following command:
-
-```bash
-npx create-react-app my-custom-template-app
-```
-
-Replace `my-custom-template-app` with your preferred project name.
-
-### Step 2: Customize Your CRA Project
-
-In the newly created `my-custom-template-app` directory, you'll find the basic CRA project structure. We'll now add some customizations to our template.
-
-#### Example Customization 1: Adding a UI Library
-
-For our example, let's use the popular UI library `Material-UI`. Install it using npm:
-
-```bash
-npm install @mui/material @emotion/react @emotion/styled
-```
-
-Next, create a new file `CustomButton.js` in the `src` folder with the following code:
-
-```jsx title="CustomButton.js"
-// CustomButton.js
-import React from 'react';
-import Button from '@mui/material/Button';
-
-const CustomButton = ({ text }) => {
- return ;
-};
-
-export default CustomButton;
-```
-
-In the `src/App.js` file, import and use the `CustomButton` component:
-
-```jsx title="App.js"
-// App.js
-import React from 'react';
-import CustomButton from './CustomButton';
-
-function App() {
- return (
-