mappen structuur / routes aanmaken

[lisavanmansom]

Mappen structuur / routes aanmaken

Folder structure

After creation, your project should look like this:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

For the project to build, these files must exist with exact filenames:

• public/index.html is the page template;
• src/index.js is the JavaScript entry point.

You can delete or rename the other files. You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.

[lisavanmansom]

Documentatie mappen structuur / routes

Best Practices

• Organize Your Routes: Keep your routing logic organized, especially as your application grows. Consider having a separate Routes component or file.
• Lazy Loading: For large applications, consider lazy loading components to improve performance.
• Error Handling: Implement proper error handling for undefined routes and other potential issues.
• Accessibility: Ensure that navigation is accessible, using semantic HTML and ARIA attributes where necessary.

Understanding the components

• BrowserRouter -> Manages the history stack and listens to changes in the browser's address bar. Usage: Wrap your entire application (usually in index.js) with BrowserRouter
• Routes and Route -> Routes: Replaces the older Switch component in react-router-dom v6. It looks through its children Route elements and renders the first one that matches the current URL. Route: Defines a mapping between a URL path and a component to render.
• Link -> Purpose: Provides declarative, accessible navigation around your application. Advantage: Prevents full page reloads, ensuring a smoother user experience.

Additional Features

• Programmatic Navigation with useNavigate -> Sometimes you might need to navigate programmatically, such as after form submission.

Conclusion

Using react-router-dom makes it straightforward to create multi-page React applications with dynamic routing capabilities. You can set up a robust navigation system that enhances the user experience without full page reloads.

Uitwerking mappen structuur / routes

npm install react-router-dom

package.json code:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.27.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

Index.js code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Setup pages

import React from 'react';

const introductionT1 = () => {
  return (
    <div>
      <h2>introduction1</h2>
    </div>
  );
};

export default introductionT1;