Merge pull request #24 from codeharborhub/dev-1

resolve some bugs

Author: ajay-dhangar

docs/react/advanced-usage/can-i-use-decorators.md

@@ -5,6 +5,7 @@ sidebar_label: Use Decorators
 sidebar_position: 2
 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."
+hide_table_of_contents: true
 ---
 
 

docs/react/advanced-usage/custom-templates.md

@@ -3,7 +3,7 @@ id: custom-templates
 title: Custom Templates
 sidebar_label: Importing a Component
 sidebar_position: 1
-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]
+keywords: [create react app, custom templates, custom template, react project, project setup, project configuration, boilerplate, reusable template, npm, npx, cra-template, cra-template-typescript, degit]
 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."
 hide_table_of_contents: true
 ---

docs/react/advanced-usage/pre-rendering-into-static-html-files.md

@@ -5,6 +5,7 @@ sidebar_label: Pre-Rendering Static HTML
 sidebar_position: 3
 keywords: [pre-rendering, static html, react pre-rendering, react static html, pre-rendering in react, static html in react, react performance, react seo]
 description: "Learn how to pre-render your React application into static HTML files to improve performance and SEO."
+hide_table_of_contents: true
 ---
 
 If you're hosting your React application using a static hosting provider, you have a fantastic opportunity to enhance its performance and SEO by pre-rendering it into static HTML files. Pre-rendering involves generating HTML pages for each route or link in your application, making them readily available to users even before the JavaScript bundle loads. This seamless process not only improves loading times but also boosts your website's visibility on search engines.

docs/react/back-end-integration/fetching-data-with-ajax-requests.md

@@ -6,6 +6,7 @@ sidebar_position: 2
 tags: [React, AJAX, Data Fetching, API, Asynchronous]
 keywords: [fetching data in react, ajax requests in react, data fetching in react, react ajax, react fetch, react data fetching, react api]
 description: "Learn how to fetch data with AJAX requests in a React application using the `fetch()` API and the `axios` library."
+hide_table_of_contents: true
 ---
 
 import '../css/style.css';
@@ -39,7 +40,7 @@ The `fetch()` function is a powerful tool for making AJAX requests in modern web
 Here's a basic example of how the `fetch()` API works:
 
 ```js
-fetch('https://api.github.com/users/Ajay-Dhangar')
+fetch('https://api.github.com/users/ajay-dhangar')
   .then((response) => response.json())
   .then((data) => {
     // Process the data here
@@ -50,7 +51,7 @@ fetch('https://api.github.com/users/Ajay-Dhangar')
   });
 ```
 
-In this example, we use the `fetch()` function to make a GET request to the URL `https://api.github.com/users/Ajay-Dhangar`. We then use the `then()` method to handle the response. The `response.json()` method reads the response data and parses it as JSON. Finally, we handle the parsed data or catch any errors that occurred during the request.
+In this example, we use the `fetch()` function to make a GET request to the URL `https://api.github.com/users/ajay-dhangar`. We then use the `then()` method to handle the response. The `response.json()` method reads the response data and parses it as JSON. Finally, we handle the parsed data or catch any errors that occurred during the request.
 
 <AdsComponent />
 
@@ -63,7 +64,7 @@ While chaining `.then()` methods works well, it can lead to callback hell when d
 ```js title="Using async/await"
 async function fetchData() {
   try {
-    const response = await fetch('https://api.github.com/users/Ajay-Dhangar');
+    const response = await fetch('https://api.github.com/users/ajay-dhangar');
     const data = await response.json();
     // Process the data here
     console.log(data);
@@ -135,7 +136,7 @@ const DataFetcher = () => {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await axios.get('https://api.github.com/users/Ajay-Dhangar'); // Replace with your API endpoint
+        const response = await axios.get('https://api.github.com/users/ajay-dhangar'); // Replace with your API endpoint
         setData(response.data);
       } catch (error) {
         console.error('Error fetching data:', error);
@@ -167,22 +168,25 @@ export default DataFetcher;
      <ul id="u_l"></ul> 
      </div>
      <button onClick={()=>{
-      let display_output_4=documet.getElementById("display_output_4")
-      display_output_4.style.display="block"
-      let btn4=document.getElementById("btn4")
-      btn4.style.display="none"
-       setTimeout(()=>{
-              if(document.getElementById("load_ing")?.style){document.getElementById("load_ing").style.display="none";}
-              [{id:1,name:"John"},{id:2,name:"sam"},{id:3,name:"Arjun"},{id:4,name:"siva"},{id:5,name:"Anbhu"},{id:6,name:"Krishna"}].map(item=>{
-                let li=document.createElement("li")
-                li.textContent=item.name
-                let ul=document.getElementById("u_l")
-                if(ul){
-                ul.appendChild(li)
-                }
-              })
-              },1500) 
-     }} id="btn4">click to see output</button>
+       document.getElementById("display_output_4").style.display="block";
+       document.getElementById("load_ing").style.display="block";
+       document.getElementById("u_l").style.display="none";
+       fetch('https://api.github.com/users/ajay-dhangar')
+       .then((response) => response.json())
+       .then((data) => {
+         // Process the data here
+         console.log(data);
+         document.getElementById("load_ing").style.display="none";
+         document.getElementById("u_l").style.display="block";
+         let ul=document.getElementById("u_l");
+         let li=document.createElement("li");
+         li.appendChild(document.createTextNode(data.name));
+         ul.appendChild(li);
+       })
+       .catch((error) => {
+         console.error('Error fetching data:', error);
+       });
+     }} style={{marginTop:"20px",padding:"10px 20px",fontSize:"1rem",fontWeight:"600",cursor:"pointer",backgroundColor:"#61dafb",border:"none",borderRadius:"5px"}}>Fetch Data</button>
 </BrowserWindow>
 
 In this component, we use the `useEffect` hook to fetch data from the API when the component mounts. We store the fetched data in the `data` state variable using the `useState` hook.
@@ -229,6 +233,4 @@ Congratulations! You've successfully implemented AJAX requests in your React app
 
 Fetching data with AJAX requests is an integral part of building dynamic and interactive React applications. By using the `fetch()` API or libraries like axios, you can easily communicate with APIs and display data on your web pages. Additionally, leveraging `async / await` can improve the readability of your code and help manage multiple asynchronous requests more efficiently.
 
-Always keep compatibility in mind when using modern features like the `fetch()` API, and consider using polyfills for older browsers. With the knowledge of data fetching in React, you're equipped to create responsive and data-driven web applications.
-
-Happy coding and exploring the possibilities of data integration in your React journey!
+Always keep compatibility in mind when using modern features like the `fetch()` API, and consider using polyfills for older browsers. With the knowledge of data fetching in React, you're equipped to create responsive and data-driven web applications.

docs/react/back-end-integration/integrating-with-an-api-backend.md

@@ -4,12 +4,13 @@ title: Integrating with an API Backend
 sidebar_label: Integrating with an API
 sidebar_position: 3
 tags: [React, API, Backend, Integration]
-keywords: [react, api, backend, integration, axios, fetch, http, request, post, get, put, delete, data, communication, server, client, frontend, backend, fullstack, web development, javascript, node.js, express, rest, json, asynchronous, promise, async, await, state, useEffect, useState, form, submit, create, update, delete, fetch, send, receive, response, error, axios, library, package, npm, install, tool, postman, testing, endpoint, list, data, new, component, app, file, code, example, tutorial, guide, how-to, learn, step-by-step, beginner, basics, introduction, overview, explanation, example, code, source, snippet, tutorial, guide, learn, how-to, steps, react, javascript, web development, frontend, backend, fullstack, integration, api, axios, fetch, http, request, post, get, put, delete, data, communication, server, client, frontend, backend, fullstack, web development, javascript, node.js, express, rest, json, asynchronous, promise, async, await, state, useEffect, useState, form, submit, create, update, delete, fetch, send, receive, response, error, axios, library, package, npm, install, tool, postman, testing, endpoint, list, data, new, component, app, file, code, example, tutorial, guide, how-to, learn, step-by-step, beginner, basics, introduction, overview, explanation, example, code, source, snippet, tutorial, guide, learn, how-to, steps]
+keywords: [react, api, backend, integration, axios, fetch, http, request, post, get, put, delete, data fetching, data posting, rest api, restful api, graphql, authentication, authorization, cors, json, xml]
 description: "Learn how to integrate a React app with an API backend, enabling it to fetch and send data seamlessly."
+hide_table_of_contents: true
 ---
 
 
-Welcome to CodeMastermindHQ! In this tutorial, we will guide you through the process of integrating your React app with an API backend. By the end of this guide, you'll have a solid understanding of how to connect your frontend and backend, enabling your app to fetch and send data seamlessly.
+In this tutorial, we will guide you through the process of integrating your React app with an API backend. By the end of this guide, you'll have a solid understanding of how to connect your frontend and backend, enabling your app to fetch and send data seamlessly.
 
 <AdsComponent />
 

docs/react/back-end-integration/proxying-api-requests-in-development.md

@@ -4,8 +4,8 @@ title: Proxying API Requests in Development
 sidebar_label: Proxying API Requests
 sidebar_position: 1
 tags: [React, API, Backend, Integration, Proxy]
-keywords: [react, api, backend, integration, proxy, proxying, cors, development, server, client, frontend, backend, fullstack, web development, javascript, node.js, express, rest, json, asynchronous, promise, async, await, state, useEffect, useState, form, submit, create, update, delete, fetch, send, receive, response, error, axios, library, package, npm, install, tool, postman, testing, endpoint, list, data, new, component, app, file, code, example, tutorial, guide, how-to, learn, step-by-step, beginner, basics, introduction, overview, explanation, example, code, source, snippet, tutorial, guide, learn, how-to, steps]
 description: "Learn how to proxy API requests during development in a React app using Create React App, avoiding CORS issues and enabling seamless interaction with your backend server."
+hide_table_of_contents: true
 ---
 
 import '../css/style.css'
@@ -53,7 +53,7 @@ Now your app should be running at `http://localhost:3000/`.
 <BrowserWindow>
     <div style={{textAlign: 'center'}}>
       <header style={{minHeight: '80vh', display:' flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(10px + 2vmin)'}}>
-        <img src="/code-harbor-hub/img/docs/react/logo.svg" className="App-logo" alt="logo" />
+        <img src="/tutorial/img/logo.svg" className="App-logo" alt="logo" />
         <br/>
         <p>
           Edit src/App.js and save to reload.
@@ -287,6 +287,4 @@ Check out the [official documentation](https://create-react-app.dev/docs/proxyin
 
 Congratulations! You've successfully learned how to proxy API requests during development with Create React App. By using proxying, you've simplified your development environment and avoided troublesome CORS issues.
 
-Whether you choose the built-in `proxy` field or the more flexible manual setup, understanding how to handle API requests effectively will boost your productivity and make building React apps a delightful experience.
-
-Now that you've mastered proxying, you're ready to build amazing apps with seamless frontend-backend communication. Keep coding and have fun!
+Whether you choose the built-in `proxy` field or the more flexible manual setup, understanding how to handle API requests effectively will boost your productivity and make building React apps a delightful experience.

docs/react/back-end-integration/title-and-meta-tags.md

@@ -1,11 +1,12 @@
 ---
 id: title-and-meta-tags
-title: Title And Meta Tags
-sidebar_label: Title & Meta Tags
+title: "Title and Meta Tags"
+sidebar_label: "Title & Meta Tags"
 sidebar_position: 4
 tags: [title, meta, tags, react, create react app, seo, search engine optimization, server, server-side, back-end, integration]
 keywords: [title, meta, tags, react, create react app, seo, search engine optimization, server, server-side, back-end, integration]
 description: "Learn how to handle title and meta tags in your Create React App for back-end integration, making your website more appealing and discoverable."
+hide_table_of_contents: true
 ---
 
 import '../css/style.css'

docs/react/building-your-app/adding-a-router.md

@@ -5,6 +5,7 @@ sidebar_position: 8
 tags: [react, react router, routing, react app, single-page application, spa, create react app, navigation, links, components]
 keywords: [react, react router, routing, react app, single-page application, spa, create react app, navigation, links, components]
 description: "Learn how to add routing capabilities to your React app using React Router, enabling dynamic, multi-page applications without full-page refreshes."
+hide_table_of_contents: true
 ---
 
 In the world of web development, creating dynamic and interactive applications is a common requirement. React, being a popular JavaScript library for building user interfaces, provides a powerful way to create single-page applications (SPAs). However, to enhance the user experience and enable navigation between different views or pages within your React app, you need to implement routing.

docs/react/building-your-app/adding-bootstrap.md

@@ -3,8 +3,9 @@ id: adding-bootstrap
 title: Adding Bootstrap
 sidebar_position: 4
 tags: [react, create react app, bootstrap, css, styling, components, responsive, layout, design, ui, user interface, integration]
-keywords: [react, create react app, bootstrap, css, styling, components, responsive, layout, design, ui, user interface, integration, npm, install, package, library, framework, pre-designed, enchanting, styles, responsive, layouts, components, buttons, forms, grid, system, columns, rows, container, app, project, example, tutorial, guide, how-to, learn, step-by-step, beginner, basics, introduction, overview, explanation, example, code, source, snippet, tutorial, guide, learn, how-to, steps]
+keywords: [react, create react app, bootstrap, css, styling, components, responsive, layout, design, ui, user interface, integration]
 description: "Learn how to integrate Bootstrap into your Create React App, unlocking the power of pre-designed components, responsive layouts, and enchanting styles."
+hide_table_of_contents: true
 ---
 
 import './style.css'
@@ -186,7 +187,7 @@ export default MagicalApp;
       <p className="lead">Prepare to be enchanted by the wonders they create together.</p>
       <div className="row mt-5">
         <div className="col-sm-6">
-          <img src="/code-harbor-hub/img/svg/static_website.svg" alt="logo" className="img-fluid" />
+          <img src="/tutorial/img/svg/static_website.svg" alt="logo" className="img-fluid" />
         </div>
         <div className="col-sm-6">
           <h2>Discover Your Powers</h2>