React Starting Template

Template based on create-react-app with an opinionated architecture to make starting new react apps quicker!

Work In progress.

Motivation

Why this?

Directure Structure

Main Structure

/src
├── /__tests__      
├── /config         # Text for the app
├── /context   
├── /hooks    
├── /routes      
├── /services       # Requests and API
├── /store          # Global Redux store
├── /styles  
├── /types  
├── /utils          # Common used functions
├── /views          # Anything to do with UI  
│   ├── atoms       # Used for building blocks i.e button, input   
│   └── molecules   # Made from atoms i.e search bar  
│   └── organisms   # Complex UI components i.e carousel   
│   └── pages       # Respresents a page  

Short brief what it is and why like put it like that

Tests

Views

Styles

/styles  
├── /0-vendor       # 3rd party libraries i.e tailwindcss   
├── /1-helpers      # mixins   
├── /2-base         # global styles   
├── /3-layouts      # global layouts such as: header, footer, nav, sidebar  
├── /4-atoms        # Used for building blocks i.e button, input     
├── /5-molecules    # Complex UI components i.e carousel     
├── /5-organisms    # 
├── cheat           # hot fixes - should be cleaned once a while  
├── styles          # imports all above  

Links to explain each choice of architecture: Sources:

Workflow

GIT Commits

Branches

Templates

VSCode for efficiency

Function Namings

Pattern for naming common methods when to use what and the naming

onClick
handleClick
handlerClick

setAnimal
removeAnimal

Create default templates with keyboard

Methodology

Futher resources

• Structuring Brad Frost https://bradfrost.com/blog/post/atomic-web-design/
  https://atomicdesign.bradfrost.com/table-of-contents/

• Naming Adam Wathan
  https://github.com/adamwathan/laracon2017
  https://www.youtube.com/watch?v=MF0jFKvS4SI

CSS Methodologies
BEM - Block Element Modified
SMACSS - Scalable and Modular Architecture for CSS
OOCSS - Object Oriented CSS

Other
https://betterprogramming.pub/avoiding-premature-software-abstractions-8ba2e990930a

Contributions

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.