FRONTEND.md

Back to README

Front-End Technology

The front end for the landing page is built primarily using React.js, Javascript and JSX.

Content

• Front-End Libraries
• Style Sheet Language
• Components

Front-End Libraries

Link to package.json

• React documentation
• React-DOM
• React-Scripts
• Webfontloader
• Node-sass - Allows us to import .scss files into our components without needing to manually compile it into .css

Style Sheet Language

The style sheet language used is Syntactically Awesome Stylesheets (SASS). The file architecture for SASS follows the 7-1-pattern. Stylesheets are stored inside files that end with .scss.

• SASS docs
• 7-1-pattern

Components

Components are reusable pieces of code that returns a React element. Components can be smart/stateful components or dumb/pure components.

• Smart/Stateful Components

  • Smart/Stateful components are components that manage its own state. These tend to be class-like object that extends React.Component. Smart/Stateful components focus primarily on implementing functionality to the web app rather than displaying elements.

• Dumb/Pure Components

  • Dumb/Pure components' main job is to display elements. These components should not have a state, and will instead have props passed down to them.