Building a Dynamic Web Application: A Comprehensive Guide to Using React, Node.js, and Modern Tools - Day 1

Day 2: Project Structure and Basic Layout

Task 1: Organize the Project Structure

• Objective: Create a clean and organized folder structure for your React project.

• Steps:

  1. Create the Following Folders in the src Directory:
     • components/: For reusable UI components.
     • pages/: For different pages/views of your application.
     • assets/: For images, icons, and other static assets.
     • styles/: For global styles and CSS files.
     • utils/: For utility functions, constants, and helpers.

  • Here's a sample structure:

    
    src/
    ├── assets/
    ├── components/
    ├── pages/
    ├── styles/
    ├── utils/
    ├── App.tsx
    ├── index.tsx
    └── ...
    

Task 2: Set Up Basic Routing

• Objective: Implement routing to manage different pages in your app.
• Steps:

  1. Install React Router:

     • Run the following command to install React Router:
       yarn add react-router-dom yarn add @types/react-router-dom

  2. Update App.tsx:

     • Import BrowserRouter, Routes, and Route from react-router-dom.
     • Create basic routes for your application (e.g., Home, About, and Contact pages).

  3. Example App.tsx:

     
     import React from 'react';
     import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
     import Home from './pages/Home';
     import About from './pages/About';
     import Contact from './pages/Contact';
     
     function App() {
       return (
         <Router>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/about" element={<About />} />
             <Route path="/contact" element={<Contact />} />
           </Routes>
         </Router>
       );
     }
     
     export default App;
     

  4. Create Placeholder Pages:

  5. • In the pages/ directory, create simple placeholder components for Home, About, and Contact pages.

     Example Home.tsx:

     
     import React from 'react';
     
     const Home: React.FC = () => {
       return <h1>Home Page</h1>;
     };
     
     export default Home;
     

     Repeat similar steps for About.tsx and Contact.tsx.

Task 3: Implement Global Styles

• Objective: Set up global styles and a basic CSS reset.
• Steps:
  1. Install styled-components or Sass (if you prefer):
     • For styled-components:
       yarn add styled-components yarn add @types/styled-components
     • For Sass:
       yarn add sass
  2. Create a GlobalStyle Component (if using styled-components):
     • In the styles/ directory, create a GlobalStyle.ts file and define global styles.
  3. Example:

     
     import { createGlobalStyle } from 'styled-components';
     
     const GlobalStyle = createGlobalStyle`
       body {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         font-family: 'Arial', sans-serif;
       }
     `;
     
     export default GlobalStyle;
     

     • Then, import and use GlobalStyle in App.tsx:

       
       import GlobalStyle from './styles/GlobalStyle';
       
       function App() {
         return (
           <>
             <GlobalStyle />
             <Router>
               <Routes>
                 <Route path="/" element={<Home />} />
                 <Route path="/about" element={<About />} />
                 <Route path="/contact" element={<Contact />} />
               </Routes>
             </Router>
           </>
         );
       }
       

  4. Add Basic CSS/Sass Reset (if using CSS/Sass):
  5. • Create a reset.scss or reset.css file in the styles/ directory to include a CSS reset.

Task 4: Set Up a Navigation Bar

• Objective: Implement a basic navigation bar for easy page access.
• Steps:

  1. Create a NavBar Component in the components/ directory:

  • Example NavBar.tsx:

    import React from 'react';
    import { Link } from 'react-router-dom';
    
    const NavBar: React.FC = () => {
      return (
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>
      );
    };
    
    export default NavBar;

  • Include the NavBar Component in App.tsx:
  • Add the NavBar component above the Routes in your App.tsx:

  2. • 1. • 
            import NavBar from './components/NavBar';
            
            function App() {
              return (
                <>
                  <GlobalStyle />
                  <Router>
                    <NavBar />
                    <Routes>
                      <Route path="/" element={<Home />} />
                      <Route path="/about" element={<About />} />
                      <Route path="/contact" element={<Contact />} />
                    </Routes>
                  </Router>
                </>
              );
            }
            

Day 2 Summary

Today, you’ve:

• Organized your project structure with essential folders.
• Set up basic routing using React Router.
• Implemented global styles and a basic layout.
• Created placeholder pages for navigation.
• Built a simple navigation bar.

These steps provide a solid foundation for your app. Tomorrow, we'll focus on integrating a CMS to manage content dynamically.

Let me know when you're ready for Day 3!