DEVELOPMENT PRINCIPLES

Keep it simple and reuse as much as possible.

A code that looks like a single person wrote it

Write for scalability.

GENERAL

• We use Atomic Design as a methodology for creating components: atoms, molecules, organisms, templates and pages.
• Name images relative to their function.

React Components structure

Follow this structure to create components. The comments set specific spaces to import other components or features.

we use functional components and React-hooks.

We use in line named export.

// ------------------------------ import libraries
import React from 'react';

// ------------------------------ import components
import { ImportedComponent } from '../components/ImportedComponent ';

// ------------------------------ import styles and images
import image from './assets/image.jpg'
import { StyledComponents } from './styled/NewComponent/'

// -------- import redux actions
import { actions } from '../actions/actions';

// ------------------------------------ COMPONENT ------------------------------------//
// description of the component.
export const NewComponent = () => {
	return (
		<section>
			<div> This is an component structure </div>
		</section>
	);
};

Styled Components structure

We use in line named export.

// ------------------------------ import libraries
import styled from 'styled-components';

// ------------------------------ import variables
import { colors, spacing } from '../../global-styles/Variables';

// ------------------------------------ COMPONENTS ------------------------------------//
export const HeaderStyled = styled.header`
	display: flex;
	justify-content: space-around;
	overflow: hidden;
	border-radius: ${Spacing.borderRadius};
	background-color: ${Colors.secondColor};
`;

export const Link = styled.a`
	width: 100%;
	padding: ${Spacing.sectionSpacing};
	text-align: center;
	color: ${Colors.mainColor};
	font-weight: bold;
	transition: 0.5s;
	&:hover {
		color: ${Colors.lightColor};
		background-color: ${Colors.mainColor};
	}
`;

SYNTAXIS