Left Arrowback

Atomic Design

August 1st, 2021

I recently was turned into the atomic design. I have been using danilowoz's https://danilowoz.com/blog/atomic-design-with-react as a reference.

I enjoyed learning the concepts from atomic design. I was always looking to improve on my organization and implement functional programming where I could, atomic design gave me the blueprint to scale my projects.

Before the atomic design pattern, I would struggle to maintain the SASS, CSS, and React templates in my projects. Each project would start off well but over time they would be disorganized and I would end up unintentionally creating non-reusable code.

The concept and how I implemented the design pattern: https://github.com/robert-s-hogan/react-query-pagination-assessment.

The first part of the design I noticed was that the majority of the templates used in the project were visible within the main APP.js file.

import { QueryClient, QueryClientProvider, useQuery } from 'react-query';
import React, { useState } from 'react';
import Card from './components/molecules/card';
import Pagination from './components/molecules/pagination';
import ListItem from './components/atoms/listItem';
import './components/templates/default/styles.css';
import GithubLogo from './github-icon.png';
import './bootstrap';

const queryClient=newQueryClient();
function Content(){ 
const [ page, setPage ] = useState(1);

const { isLoading, error, data } = useQuery([ 'people', page ], ()=>
fetch(`https://swapi.dev/api/people/?page=${ page }`)
.then((res)=>
res.json()), { keepPreviousData:true, staleTime:5000 });

if(isLoading)return 'Loading...';

if(error)return `Anerrorhasoccurred:${ error.message }`;
return (
  <div
    className="default">

  <div
    className="colFull">

  <a
    rel="noreferrer"
    target="_blank"
    href="https://github.com/robert-s-hogan/react-query-pagination-assessment">

  <img
    src={ GithubLogo }
    className="github-logo"
    alt="GithubLogo" />

  </a>

  <img
    width="320"
    className="centerpy-3"
    src="http://vignette1.wikia.nocookie.net/disney/images/8/8b/Starwars-logo.png"
    alt="StarWarsLogo" />

  <h2
    className="mt-0">
ReactPaginationAssessment
  </h2>

  <PaginationpeoplePerPage={ data.results.length }totalPeople={ data.count }page={ page }setPage={ setPage } />

  <div
    className="cardGrid">
{ data.results.map((person)=>
(
  <Card
    className="card"
    title={ person.name }
    key={ person.name }uniqueId={ person.url.match(/\d/g) }page={ page }>

  <ul>

  <ListItem>
	Mass:{ person.mass }
  </ListItem>

  <ListItem>
	Height:{ person.height }
  </ListItem>

  <ListItem>
	HairColor:{ person.hair_color }
  </ListItem>

  <ListItem>
	SkinColor:{ person.skin_color }
  </ListItem>

  <ListItem>
	EyeColor:{ person.eye_color }
  </ListItem>

  <ListItem>
	BirthYear:{ person.birth_year }
  </ListItem>

  <ListItem>
	Gender:{ person.gender }
  </ListItem>

  </ul>

  </Card>
)) }
  </div>

  </div>

  </div>
);
 }
export default function App(){ return (
  <QueryClientProviderclient={ queryClient }>

  <Content />

  </QueryClientProvider>
);
 }

*Still working on the format of the code

More to come...

Left Arrowback

Made by Robert 2018