...

Frontend:

• See our low fidelity Figma Prototype: https://www.figma.com/file/zFFuYLSSdc4TnQafDWgKP1/Structs.sh-Interface-Prototype?node-id=401%3A5

• FigJam prototyping space: https://www.figma.com/file/KQcuxGJwz8I7trRlt69Vsy/Structs.sh-Brainstorming?node-id=0%3A1

...

Libraries:

• React – JavaScript library for making complex UI in a performant and maintainable way

• Material UI – a collection of pretty pre-made UI components, designed according to well-researched UI standards

• Cypress – an end-to-end testing library

  • Running Cypress tests will involve literally spinning up a browser and executing automated actions like clicking on buttons and asserting results after those actions

• Jest – a unit testing library

  • When used with React Testing Library, it lets you check whether React components will have the HTML or state that you expect when an event takes place. Eg. after you perform user actions like button clicks, you might assert that a counter value goes up.

• Various other libs – npm has a huge amount of great libraries. We’re using a number of them such as react-console-emulator, react-helmet, react-cookie, etc.

  • It’s preferable to not re-invent the wheel, but we should be careful not to bloat our package.json with poorly-supported dependencies.

...

1. Suppose you're working on LinkedList.jsx. Add a new file called LinkedList.module.scss

2. Write your SCSS code in that file. Remember SCSS is a superset of CSS so you can just write regular CSS.

   Code Block
   language scss
   .container { margin: 10px; }

3. Import the scss module in LinkedList.jsx and apply the style like this:

   Code Block
   language js
   import styles from './LinkedList.module.scss'; const LinkedList = () => { return <div className={styles.container}>...</div>; };

Styling with styled components

Using global CSS/SCSS is a nightmare in a large project because you will likely encounter name collisions and CSS specificity issues.

Using inline styles is limited (doesn’t allow for self-selectors like &, pseudo-selectors like :hover, media queries etc.)

To style a component, we can use Material UI styled components:

1. Suppose you’re working on Menu.jsx.

2. At the top of the file, write a styled component

const Container = styled('div')(({ theme }) => ({
  margin: 10px,
}))

1. Use the styled component in the JSX

const Menu = () => {
  return <Container>...<Container />
}

React Visualiser UI:

This section provides an overview of the visualiser UI components hierarchy. This is probably the most complex part of the React codebase and deserves its own clarification section.

...