🌌 arthurs.dev

Recent Notes

Temporary React Notes

4 min read

This was accidentally generated by copilot when trying to dive into a new codebase. I think it’s good to have these foundational react ideas down—so READTHISLATER.

1. HTML Template (index.html)

  • Purpose: Acts as the entry point for the React application. It provides the basic structure of the webpage and includes a <div> element with an id (in this case, root) where the React app will be mounted.
  • Key Elements:
    • <title>: Sets the title of the webpage (e.g., “Tree Visualizer”).
    • <noscript>: Displays a message if JavaScript is disabled in the browser.
    • <div id="root">: This is the container where React renders the entire application. React dynamically updates this element based on user interactions and state changes.
  • Build Process: During the build step (npm run build or yarn build), the React app’s JavaScript bundle is injected into this file, typically at the end of the <body> tag.

2. React Components

  • Purpose: React applications are built using components, which are reusable pieces of UI. Components can be functional or class-based, and they manage their own state and behavior.
  • Key Components:
    • App Component: The root React component that is typically rendered into the #root div. It acts as the entry point for the React app and often contains routing logic and global layout elements.
    • Child Components: These are smaller, reusable components that make up the app’s UI. For example:
      • TreeVisualizer Component: Likely the main feature of your app, responsible for rendering and interacting with tree structures.
      • Header/Footer Components: Provide navigation or branding elements.
      • Utility Components: Handle specific tasks, such as buttons, modals, or forms.

3. React Router

  • Purpose: Enables client-side routing, allowing the app to navigate between different views or pages without reloading the browser. This is essential for SPAs.
  • Key Features:
    • Routes: Define paths (e.g., /home, /tree) and associate them with specific components.
    • Links: Replace traditional <a> tags to navigate between routes without triggering a full page reload.

4. State Management

  • Purpose: Manages the app’s data and ensures that components update dynamically when the state changes.
  • Options:
    • React’s useState/useReducer: For local component state.
    • Context API: For global state shared across components.
    • Third-party Libraries: Tools like Redux or Zustand may be used for more complex state management.

5. TypeScript

  • Purpose: Adds static typing to JavaScript, helping catch errors during development and improving code maintainability.
  • Key Features:
    • Interfaces/Types: Define the shape of props, state, and other data structures.
    • Type Safety: Ensures that components and functions receive the correct types of data.

6. Styling

  • Purpose: Defines the visual appearance of the app.
  • Options:
    • CSS/SCSS Files: Traditional stylesheets.
    • CSS-in-JS Libraries: Tools like styled-components or Emotion for styling directly within JavaScript/TypeScript files.

7. Build Tools

  • Purpose: Automate tasks like bundling, transpiling, and optimizing the app for production.
  • Key Tools:
    • Webpack: Bundles JavaScript files and assets.
    • Babel: Transpiles modern JavaScript/TypeScript into browser-compatible code.
    • npm/yarn scripts:
      • npm start or yarn start: Starts the development server.
      • npm run build or yarn build: Creates a production-ready bundle.

8. Public Folder

  • Purpose: Contains static assets like the index.html file, images, and other resources that don’t change dynamically.
  • Key Files:
    • index.html: The template file for the app.
    • favicon.ico: The icon displayed in the browser tab.

9. Source Folder (src)

  • Purpose: Contains the application’s core logic and components.
  • Key Files:
    • index.tsx: The entry point for the React app. It typically renders the App component into the #root div.
    • App.tsx: The main component that organizes the app’s structure and routing.
    • Other files: Components, utilities, hooks, and styles.

10. Package Manager (npm/yarn)

  • Purpose: Manages dependencies and scripts for the project.
  • Key Commands:
    • npm install or yarn install: Installs dependencies.
    • npm start or yarn start: Starts the development server.
    • npm run build or yarn build: Builds the app for production.

How It Works Together:

  1. Initialization: The browser loads index.html, which includes the #root div.
  2. React Mounting: The index.tsx file mounts the App component into the #root div.
  3. Component Rendering: The App component and its child components render the UI dynamically based on state and routing.
  4. Client-Side Interaction: React handles user interactions, updates the state, and re-renders components without reloading the page.

What’s a react project?

  1. A index.html file that serves as a mounting point to insert generated javascript
    1. Use <noscript>
    2. Use <title>

Graph View