react-app-starter-kit

Este proyecto contiene todo lo necesario para construir una aplicación con React y Redux.

Technology Stack

• React 18
• Redux
• react-router
• @redux-toolkit
• axios
• styled-components

Cómo instalarlo

Es necesario tener instalado node primero

abre la consóla de comandos y asegurate de estar en el directorio del proyecto react-app-starter-kit

instalar los paquetes:

npm install

correr el proyecto(modo desarrollo):

npm run start:dev

correr el proyecto(modo producción):

npm run start:prod

React

Crea interfaces de usuario a partir de componentes. React te permite construir interfaces de usuario a partir de piezas individuales llamadas componentes.

function MyComponent() {
  return <div>Hello World!</div>
}

Pasar Props a Componentes

Los componentes de React utilizan props para comunicarse entre sí. Cada componente padre puede enviar información a sus componentes hijos mediante el uso de props.

function MyComponent1() {
  return <MyComponent2 message="Hello World!" />
}

function MyComponent2(props) {
  return <span>{props.message}</span>
}

Redux

Redux es un contenedor predecible del estado de aplicaciones JavaScript.

Te ayuda a escribir aplicaciones que se comportan de manera consistente, corren en distintos ambientes (cliente, servidor y nativo), y son fáciles de probar.

Curso redux

Por qué usar Redux?

Redux te permite acceder al estado de una variable y modificar su estado desde cualquier parte.

Ejemplo de jerarquía de componentes

Solución del ejemplo usando Redux

Cómo funciona

Platform Structure

Para que los componentes sean reutilizados, no hay necesidad de llamarlos de nuevo, existen formas de hacer que un componente se renderice en múltiples componentes sin volverlos a llamar.

Un buen caso de uso es para la orientación de la aplicación:

App Layout

High Order Components

Son funciones que nos permiten encapsular nuestros componentes asignandole propiedades.

// El componente que recibirá propiedades a base de un encapsulamiento
function MyComponent(props) {
  return <span>{props.message}</span>
}

// HOC que encapsula MyComponet asignandole propiedades
function componentWrapper(Component) {
  const message = 'Hello World!'
  return <Component message={message} />
}

export default componentWrapper(MyComponent)

Utilizando HOC para manejo de propiedades

Manejo de los componentes y sus estilos

El módulo de styles puede ser manejado con archivos css o utilizando la librería styled-components.

styles.js

import styled from 'styled-components'

const Container = styled.div`
  background-color: red;
`

index.jsx

import React from 'react'
import * as styles from './styles'

function MyComponent() {
  return (
    <styles.Container>
      <span>Hello World!</span>
    </styles.Container>
  )
}

export default MyComponent