luciaaldana

DATE FNS

Extract date:

https://date-fns.org/v2.29.3/docs/lightFormat

import { parseISO, lightFormat } from 'date-fns';

const date = New Date(); 

luciaaldana

Absolute path in Vite project React TS (alias)

1) You need to install these packages:

npm i path
yarn add path

npm i @types/node
yarn add @types/node

luciaaldana

Mapbox with React JS >= 18

Docs: https://docs.mapbox.com/mapbox-gl-js/guides/install/

Install the npm package:

npm install --save mapbox-gl

luciaaldana

i18next React

Install

npm install react-i18next i18next i18next-browser-languagedetector --save

yarn react-i18next i18next i18next-browser-languagedetector --save

luciaaldana

React Redux & Redux Toolkit

React Redux

React Redux is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state.

Redux toolkit

The Redux Toolkit package is intended to be the standard way to write Redux logic.

npm install @reduxjs/toolkit react-redux

luciaaldana

REACT ROUTER DOM V6 - Public and private routes

AppRouter.js:

import React from "react";
import { Routes, Route } from "react-router-dom";
import PrivateRoute from "routes/PrivateRoute";
import PublicRoute from 'routes/PublicRoute';
import { DashboardRoutes } from './DashboardRoutes';
import { PUBLIC_ROUTES, PRIVATE_ROUTES } from 'constants';

luciaaldana

// HTML

<div>
	<header>I'm a header</header>
	<main>I'm a main</main>
	<footer>I'm a footer</footer>
</div>

luciaaldana

Instalación y configuracion de Jest + React Testing Library

En proyectos de React + Vite

1. Instalaciones:

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react 
yarn add --dev @testing-library/react @types/jest jest-environment-jsdom

2. Opcional: Si usamos Fetch API en el proyecto: