Skip to main content

Basic App Architecture

Remember that the structure of the app is tree-like. There will always be an index.html which is going to load an index.js which is going to start loading all the code.

In the index.js|ts|tsx file you are going to find all the main providers. Root components are going to stay in memory and provide for the children.

index.tsx -> App.tsx -> BrowserRouter -> Components

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { defineCustomElements } from '@one/ui/dist/custom-elements';
import 'index.css'; // <-- Loading styles
import App from 'app/components/App';
import { Provider } from 'react-redux';
import store from 'app/store';
import 'config/i18n'; // <-- Loading translations config

defineCustomElements();

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}> {/* <-- Loading */}
            <App />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

Main Concepts​

  • The bootstrap, components in Memory, The Browser and the DOM.
  • The browser routing, route system and how components are called.
  • The component life cycle. The Component structure.
  • Redux: Immutable Single Source of Truth with an Observer pattern.
  • How data is fetched, stored in memory, accessed and reflected in the components.
  • Typescript, or how to type.

Functional Components and React's Virtual DOM​

React's functional components have become the preferred way to build UI elements. They are lightweight, easier to read, and maintain, thanks to the use of hooks such as useState, useEffect, and useContext. These hooks enable components to handle state, side effects, and context with simplicity. Additionally, React's virtual DOM efficiently handles updates, comparing the virtual DOM with the real DOM and applying only the necessary changes, resulting in optimal performance.

Browser Routing and React Router​

Single-page applications often require client-side routing to enable seamless navigation. React Router is still the go-to library for handling routing in React applications, even with functional components. It allows developers to define routes and associate them with specific components. When a user navigates to a route, the corresponding component is called, ensuring a smooth user experience without page refreshes.

Component Lifecycle with Functional Components​

While class components have a lifecycle, functional components use hooks for similar functionalities. By understanding hooks like useEffect, useMemo, and useReducer, developers can manage component lifecycle events and perform side effects with ease. The functional approach eliminates the need for lifecycle methods, resulting in cleaner and more concise code.

Redux: State Management Made Easy​

Although functional components and hooks handle local state effectively, complex state management across components can be challenging. Redux comes to the rescue with its predictable state container. Even in a functional component-based architecture, Redux can be used effectively by leveraging hooks like useSelector and useDispatch. This enables developers to maintain a single source of truth and manage global state effortlessly.

TypeScript for Type Safety​

TypeScript seamlessly integrates with React's functional components. By adding type annotations to variables, function parameters, and return types, developers can catch type-related errors during development, reducing bugs and improving code quality. TypeScript offers powerful tooling and IDE support, making it easier to collaborate within teams and ensure a more stable codebase.