fix login and register conflict with components

resources/js/components/App.js

@@ -3,32 +3,11 @@ import ReactDOM from "react-dom";
 import AboutUs from "./aboutUs/AboutUs.js";
 import UserProfiles from "./userProfiles/UserProfiles.js";
 import UserCard from "./userCard/UserCard.js";
-import Example from "./Example";
 import Course from "./course/Course";
 import Registerbuyform from "./registerbuyform/Registerbuyform";
 import Cart from "./cart/Cart";
 import Hero from "./hero/Hero";
 import Footer from "./footer/Footer";
 import UserProfile from "./user-profile/UserProfile";
 
-function App() {
-    return (
-        <div className="container">
-            <AboutUs />
-            <UserProfiles />
-            <UserCard />
-            <Course />
-            <Registerbuyform />
-            <Cart />
-            <Hero />
-            <UserProfile />
-            <Footer />
-        </div>
-    );
-}
 
-export default App;
-
-if (document.getElementById("app")) {
-    ReactDOM.render(<App />, document.getElementById("app"));
-}

resources/js/components/aboutUs/AboutUs.js

@@ -16,3 +16,8 @@ function AboutUs() {
 };
 
 export default AboutUs;
+
+
+if (document.getElementById("about-us")) {
+    ReactDOM.render(<AboutUs />, document.getElementById("about-us"));
+}

resources/js/components/course/Course.js

@@ -58,3 +58,8 @@ function Course() {
 }
 
 export default Course;
+
+if (document.getElementById("course")) {
+    ReactDOM.render(<Course />, document.getElementById("course"));
+}
+

resources/js/components/footer/Footer.js

@@ -11,3 +11,7 @@ function Footer() {
 }
 
 export default Footer;
+
+if (document.getElementById("footer")) {
+    ReactDOM.render(<Footer />, document.getElementById("footer"));
+}

resources/js/components/hero/Hero.js

@@ -16,6 +16,6 @@ function Hero() {
 
 export default Hero;
 
-// if (document.getElementById("welcome")) {
-//     ReactDOM.render(<Welcome />, document.getElementById("welcome"));
-// }
+if (document.getElementById("hero")) {
+    ReactDOM.render(<Hero />, document.getElementById("hero"));
+}

resources/js/components/userProfiles/UserProfiles.js

@@ -22,12 +22,17 @@ function UserProfiles() {
                 <div className="userCards">
                     <img src="../assets/vanessa.png"/>
                     <h3>Vanessa Poppe</h3>
-                    <p>Front-End developer, CSS, Ract y JavaScript</p>
+                    <p>Front-End developer, CSS, React y JavaScript</p>
                 </div>
             </div>
 
         </div>
     );
 };
 
-export default UserProfiles;
+export default UserProfiles;
+
+
+if (document.getElementById("user-profiles")) {
+    ReactDOM.render(<UserProfiles />, document.getElementById("user-profiles"));
+}

resources/views/layouts/app.blade.php

@@ -79,6 +79,7 @@
 
         <main class="py-4">
             @yield('content')
+
         </main>
     </div>
 </body>

resources/views/welcome.blade.php

@@ -36,8 +36,16 @@
                 </div>
             @endif
 
+            <div>
 
-            <div id="app"></div>
+                <div id="hero"></div>
+                <div id="about-us"></div>
+                <div id="course"></div>
+                <div id="user-profiles"></div>
+                <div id="footer"></div>
+
+            </div>
+
         </div>
 
 

routes/web.php

@@ -17,6 +17,10 @@
     return view('welcome');
 });
 
+// Route::get('/', function () {
+//     return view('welcome');
+// });
+
 Auth::routes();
 
 Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');