Index

• Getting Started
  • Launch Project
• About Template
• Project Structure
  • Atoms
  • Components
  • Styles Structure
    • Themes
  • Hooks
• Libraries Added
• References

Getting Started

For install the dependencies, in the project directory, you can run:

npm install or yarn

Launch Project

In the project directory, you can run:

npm start or yarn start

Project Structure

The project structure is based in best practices for architecture, based in this template is for an simple widget o component, in case to need create an website whit pages and routing is recommend added the folders for an full website.

-- public/ -- src/ ---- Atoms/ ---- Components/ ---- Hooks/ ---- Styles/ --------- Atoms/ --------- Components/

Atoms

This are micro-components with the logics is simple and hinherited like a button, a list with a simple logic for reuse this

./src/Atoms/ |----Row/index.tsx |----Button/index.tsx |----Text/index.tsx |----Card/index.tsx

Example

For the example we will create an card using 2 components(you can use more) from style and inherited functions

import React from "react";
import { Text, Button } from "../../styles";

const Card = props => {
  return (
    <>
      <Text>{props.title}</Text>
      <Text>{props.subTitle}</Text>
      <Button title={props.title} onPress={() => props.action()} />
    </>
  );
};
export default Card;

Components

This is an specific component who use the atoms for develop an specific logic or function like view an list with data and buttons specific but using the atoms for made this. The components can use Hooks or Contexts for specifics calls or actions like transfer data or functionalities by the wrapper component like HOCs

./src/Components/ |---Carouse/index.tsx |---List/index.tsx |---Table/index.tsx

• Components can be reuse in diferents modules on inside other components like a list inde a table component

Example

• In this example card are imported inside a Slider conforming an Component reusable for and module or more modules.

import React from 'react';
import Card from '../../Atoms/Card';
...
const Catalog: React.FC<Props> = (props) => {
    return (
      <Slider>
         {props.cards.map((item) => {
            <Card image={item.img}>{props.title}</Card>
         })}
      </Slider>
    );
};

export default Catalog;

Styles Structure

• for declare a new style componet this need import into ./src/styles/index.tsx and exported for use in the project

import Text from './Generics/Texts'; export {Text};

./src/styles/ |----index.tsx |----Generics/Texts.tsx |----Generics/Buttons.tsx

Example

create a new style component file with the next base:

./src/styles/Generic/Buttons.tsx

import React, {Button} from 'react';
import {Colors, Fonts} from './constants';
import styled from 'styled-components/native';
...
const TouchableOpacity = styled.TouchableOpacity`
flexDirection: row;
justify-content: center;
padding: 30px 15px;
width: 70%;
`;


interface PropsCircleButton {
primarycolor?: boolean;
secondarycolor?: boolean;
small?: boolean;
medium?: boolean;
nameicon?: string;
coloricon?: string;
sizeicon?: number;
children: string;
onPress?: () => void;
}

const TouchableCircle = styled.TouchableOpacity`
align-items: center;
justify-content: center;
${(props: any) =>
props.small &&
                  `
border-radius: 50px;
height: 20px;
width: 20px;
`}
${(props: any) =>
props.medium &&
`
border-radius: 50px;
height: 30px;
width: 30px;
`}
${(props: any) =>
props.primarycolor &&
`
background-color: #17a4cc;
`}
${(props: any) =>
props.secondarycolor &&
`
background-color: #fff;
`} `;

const CircleButton = (props: PropsCircleButton) => {
const {onPress, ...rest} = props;
return (
<TouchableCircle {...{onPress}} {...rest}>
  <Text>{props.text}</Text>
</TouchableCircle>
);
                                                                                              };

export {CircleButton};

After this is needed to import into ./src/styles/Generics/index.tsx

import Text from "./texts";
import Button, { CircleButton } from "./Buttons";

export { Text, Button, CircleButton};

Themes

The themes are configurated for consume and object with the specific caracteristics and made more easy edit and add new themes

./src/styles/ |----index.tsx |----Constants/Colors.tsx

In the file Colors in src/styles/Constants/Colors.tsx we can see the structure for blank&white theme in an object like:

var Colors:any = {
  dark: {
    textColor: "white"
  },
  white: {
    textColor: "gray"
  }
};

export default Colors;

we can see the parameter textColor inside the object dark and white this paramenter is use in the styles for example in src/Styles/Atoms/Atom1/index.tsx:

import React from "react";
import { FontSize, Colors } from "../../Constants";
import Styled from "styled-components";

const Text = Styled.h4`
@media screen and (max-width:1020px){
 ${FontSize.small}
}
@media screen and (max-width:820px){
  ${FontSize.mini}
}

color: ${props => Colors[props.theme].textColor} ; <------- this is the use for the specific parameter from Colors Object
`;

const TextC = (props: any) => {
  return <Text theme="white"> props.text</Text>; 
};

export default TextC;

if we need add a new value is extricted add in the objects for theme or this can take the default style for html

Hooks

Hooks can controlle the state like redux for local components, in this template for widget can control the state, simulating an global state like redux.

Structure

Hooks is similar to redux in the reducer and the actions this data can be change for dispatchs and controlled by actions

The folder Structur for this template for widgets is the next:

---- src/ ------- Hooks/ --------- index.tsx --------- Hooks.Actions.tsx --------- Hooks.Reducer.tsx

In src/Hooks/index.tsx can found the initial state for the widget In the sr/Hooks/Hooks.Actions.tsx can found the actions for dispatch actions to the reducer from any component how called In the src/Hooks/Hooks.Reducer.tsx can found the Reducer how launch the updates to the State

Libraries Added

• Styles
  • Material-UI.
  • Styled-Components.

References

• Optimal file Structure for react applications
• React folder Structure