John Webster

John Webster - Blog

Proyectos · Aprendizaje · Organización

Ver en GitHub

Aplicación de recetas con React y TypeScript

Componentes organizados según Atomic Design. Las recetas se importan inicialmente desde un archivo JSON, y el usuario puede realizar operaciones CRUD en memoria con estos datos. La aplicación usa Context para las recetas y el tema. Otros elementos incluyen:

• Los formularios de añadir y editar usan Formik
• React router tiene cambios en la API para desarrolladores con Router V6
• Usa styled components
• Incluye material colors para el tema claro y oscuro
• Material icons y algunos componentes

visitar repositorio

Styled components proporciona CSS en JS. Aquí tienes un ejemplo muy básico.

import styled from 'styled-components; export const CoolComponent = styled.div` border: 1px solid ${props => props.theme.colors.pageBorderColor1}; padding: 1rem; `;