1. Component Architecture

1. Break down your UI into reusable components.
2. Follow the Single Responsibility Principle: each component should do one thing well.

2. Setting Up Project Structure

1. Organize your project with a clear folder structure:

   src/
     components/
     pages/
     services/
     styles/
     utils/

3. Using Material-UI

1. Import and use Material-UI components in your project:
   1. Example: button
      1. The `import Button from '@mui/material/Button’;` line allows you to use the Button component
      2. This button can be used in the return statement as <Button />

   import Button from '@mui/material/Button';
   function App() {
     return (
       <div>
         <Button variant="contained">Hello World</Button>
       </div>
     );
   }

4. Version Control with Git

1. Open GitHub Desktop
2. Log in to your GutHub account
3. Select your repository the top left
4. Open your code by clicking ‘Open in VSCode'
5. Create branches for each new feature
6. Regularly commit your changes
7. For more information: GitHub Documentation

5. Using React

1. Create a New React Project
   1. In your terminal, navigate to the directory where you want to create your project.
   2. Run the following command to create a new React application. Replace my-first-react-app with your preferred project name.

  npx create-react-app my-first-react-app

1. Navigate to Your Project Directory
2. Move into your project directory

  cd my-first-react-app
  
 - Start the Development Server
   - In the project directory, start the development server by running. This command will open a new browser window/tab with your React app running at http://localhost:3000.

  npm start

1. Understand the Project Structure
   1. Public Folder: Contains the index.html file. This is the entry point for your app.
   2. Src Folder: Contains the React components and styles.
   3. App.js: The main component.
   4. index.js: The entry point for the React application.
2. Create Your First React Component
3. Open Your Project in a Code Editor
4. Use a code editor like VSCode and open the project directory.
5. Edit the App Component
6. Open src/App.js and replace the code with the following:

  import React from 'react';
  import './App.css';
  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Hello, React!</h1>
          <p>This is my first React app.</p>
        </header>
      </div>
    );
  }

  export default App;

1. Save and View Changes
   1. Save App.js after making changes.
   2. View Changes in Browser
   3. The development server automatically reloads and you should see “Hello, React!” and “This is my first React app.” in your browser.
2. Add a New Component
   1. Create a New Component File
   2. In the src folder, create a new file named MyComponent.js.
   3. Define the New Component
   4. Add the following code to MyComponent.js:

  import React from 'react';
  function MyComponent() {
    return (
      <div>
        <h2>This is a new component!</h2>
      </div>
    );
  }
  export default MyComponent;
  
 - Import and Use the New Component in App.js
 - Open src/App.js and modify it to include MyComponent:

  import React from 'react';
  import './App.css';
  import MyComponent from './MyComponent';
  function App() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Hello, React!</h1>
          <p>This is my first React app.</p>
          <MyComponent />
        </header>
      </div>
    );
  }
  export default App;

1. Save and View Changes
   1. Save both App.js and MyComponent.js.
   2. View Changes in Browser
   3. The browser will reload, and you should see the new component's content below the original text.