Toevoegen content / code van vorig project (html)

lisavanmansom commented 1 month ago

Toevoegen content / code van vorig project

lisavanmansom commented 1 month ago

Code Splitting / components

Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand. Code-splitting your app can help you “lazy-load” just the things that are currently needed by the user, which can dramatically improve the performance of your app. While you haven’t reduced the overall amount of code in your app, you’ve avoided loading code that the user may never need, and reduced the amount of code needed during the initial load.

Route-based code splitting

A good place to start is with routes. Most people on the web are used to page transitions taking some amount of time to load. You also tend to be re-rendering the entire page at once so your users are unlikely to be interacting with other elements on the page at the same time.

Here’s an example of how to setup route-based code splitting into your app using libraries like React Router with React.lazy.

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

React.lazy

The React.lazy function lets you render a dynamic import as a regular component. React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component. The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

https://legacy.reactjs.org/docs/code-splitting.html#route-based-code-splitting

lisavanmansom commented 1 month ago

Uitwerking code w. inner component

Van de inhoud heb ik een 'inner component' gemaakt, hierdoor kan eigen inhoud dynamisch inladen. De 'outer component' is de header van de pagina. Later komt er nog een svg/png van een gradient bij, daar ga ik React lazy toepassen.

import './task.css';
import React from 'react';
import { Link } from 'react-router-dom';

const MyComponent = () => {
  const rt = "rouwtaak"
  const sub2 = "Het verlies aanvaarden";
  const d2 = "Ontdek hoe je de realiteit van het verlies kunt omarmen.";

  // Inner component
  const Task1 = () => {
    return (
      <article>
        <h2>{rt}</h2>
        <h3>{sub2}</h3>
        <p>{d2}</p>
        <Link to="/task2">Go to Task 2</Link>
      </article>
    );
  };

  // Return outer component's structure, w. inner component
  return (
    <section>
      <h1>Introductie rouwtaken</h1>
      <Task1 /> {/* Rendering inner component */}
    </section >
  );
};

export default MyComponent;

lisavanmansom / dropandheal-react