[add] a draft for react gantt with firebase integration guide

Author: mafanya23

data/desktop/howtostart_guides.md

@@ -7,7 +7,7 @@ How to Start with dhtmlxGantt
 Here's the overview of guides which tell you about basic Gantt initialization with popular front-end frameworks.<br><br>
 
 <table style='border-left:none !important;' cellspacing="0" cellpadding="5" border="0">
-	<tbody>
+  <tbody>
     <tr>
         <td>
 		    <span style="font-size:15px;">desktop/initializing_gantt_chart.md</span>
@@ -28,16 +28,6 @@ Here's the overview of guides which tell you about basic Gantt initialization wi
         	<a href="desktop/howtostart_angular.md"><img src="howtostart_frontend_frameworks/gantt_angular.png"></a>
         </td>
     </tr>
-    <tr>
-        <td>
-		    <span style="font-size:15px;">desktop/howtostart_react.md</span>  
-            <br>
-            A detailed tutorial which dwells on Gantt chart implementation with React. 
-        </td>
-        <td>
-        	<a href="desktop/howtostart_react.md"><img src="howtostart_frontend_frameworks/gantt_react.png"></a>
-        </td>
-    </tr>
     <tr>
     	<td>
     		<span style="font-size:15px;">desktop/howtostart_vue.md</span>
@@ -47,7 +37,7 @@ Here's the overview of guides which tell you about basic Gantt initialization wi
         <td>
             <a href="desktop/howtostart_vue.md"><img src="howtostart_frontend_frameworks/gantt_vue.png"></a>
         </td>
-        </tr>
+    </tr>
     <tr>
     	<td>
     		<span style="font-size:15px;">desktop/howtostart_svelte.md</span>
@@ -57,10 +47,36 @@ Here's the overview of guides which tell you about basic Gantt initialization wi
         <td>
             <a href="desktop/howtostart_svelte.md"><img src="howtostart_frontend_frameworks/gantt_svelte.png"></a>
         </td>
-        </tr>
-    </tbody>
+    </tr>
+  </tbody>
 </table>
 
+<h2>How to Start with React Gantt</h2>
+
+<table style='border-left:none !important;' cellspacing="0" cellpadding="5" border="0">
+	<tbody>
+     <tr>
+        <td>
+            <span style="font-size:15px;">desktop/howtostart_react.md</span>  
+            <br>
+            A detailed tutorial which dwells on Gantt chart implementation with React. 
+        </td>
+        <td>
+            <a href="desktop/howtostart_react.md"><img src="howtostart_frontend_frameworks/gantt_react.png"></a>
+        </td>
+    </tr>
+    <tr>
+    	<td>
+    		<span style="font-size:15px;">desktop/react_gantt_firebase_integration.md</span>
+            <br>            
+            An extensive tutorial that describes how to provide real-time updates in React Gantt using Firebase Firestore. 
+        </td>
+        <td>
+            <a href="desktop/howtostart_vue.md"><img src="howtostart_frontend_frameworks/gantt_react.png"></a>
+        </td>
+    </tr>
+   </tbody>
+</table>
 
 
 <h2>How to Start with Gantt on Server Side</h2>
@@ -74,7 +90,7 @@ You can watch the video guide that shows how to create a Gantt chart on the page
 Below you will find a brief overview of the guides which tell you about basic Gantt initialization on different server-side platforms to suit all tastes and preferences.<br>
 
 <table style='border-left:none !important;' cellspacing="0" cellpadding="5" border="0">
-	<tbody>
+  <tbody>
     <tr>
         <td>
 		    <span style="font-size:15px;">desktop/howtostart_dotnet_core.md</span>
@@ -114,7 +130,7 @@ Below you will find a brief overview of the guides which tell you about basic Ga
         <td>
             <a href="desktop/howtostart_php_laravel.md"><img src="desktop/how_to_start_laravel.png"></a>
         </td>
-        </tr>
+    </tr>
     <tr>
     	<td>
     		<span style="font-size:15px;">desktop/howtostart_php_slim4.md</span>
@@ -124,7 +140,7 @@ Below you will find a brief overview of the guides which tell you about basic Ga
         <td>
             <a href="desktop/howtostart_php_slim4.md"><img src="desktop/php_tutorial.png"></a>
         </td>
-        </tr>
+    </tr>
     <tr>
     	<td>
     		<span style="font-size:15px;">desktop/howtostart_python.md</span>
@@ -134,7 +150,7 @@ Below you will find a brief overview of the guides which tell you about basic Ga
         <td>
             <a href="desktop/howtostart_python.md"><img src="desktop/how_to_start_python.png"></a>
         </td>
-        </tr>
+    </tr>
     <tr>
         <td>
 		    <span style="font-size:15px;">desktop/howtostart_salesforce.md</span>
@@ -155,15 +171,16 @@ Below you will find a brief overview of the guides which tell you about basic Ga
         	<a href="desktop/howtostart_ruby.md"><img src="desktop/ruby_tutorial.png"></a>
         </td>
     </tr>
-    </tbody>
+  </tbody>
 </table>
 
 
 @index:
 - desktop/howtostart_angular.md
-- desktop/howtostart_react.md
 - desktop/howtostart_vue.md
 - desktop/howtostart_svelte.md
+- desktop/howtostart_react.md
+- desktop/react_gantt_firebase_integration.md
 - desktop/howtostart_dotnet_core.md
 - desktop/howtostart_dotnet.md
 - desktop/howtostart_nodejs.md