DEV Community

Mukund Raghav Sharma (Moko)
Mukund Raghav Sharma (Moko)

Posted on

Notes From Creating a Slack Clone in React.js

Source: https://www.youtube.com/watch?v=-cMqr9HpZ-Y&t=21198s

  1. CSS: * { } <- applies to all elements.
  2. BEM (Block Element Modifier) Naming convention: http://getbem.com/naming/
  3. Comments in JSX: {/* */}
  4. Comment out layout in the components.
  5. CSS: .name <- name of the class to style.
  6. Material UI for Icons: https://mui.com/components/icons/
  7. Flex Box for alignment: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  8. padding: Apx Bpx <- A: Top + Bottom and B: Left + Right padding.
  9. justify-content: Aligns the flex items.
  10. Variables in CSS: --name-of-variable usage: var(--variable)
    • Variables can be defined in a particular scope.
  11. flex: val <- specifies the val of flexible growth of the component or the component takes up (val * 100)% of the total space. e.g. flex: 0.3 => 30% of space is taken up.
  12. element>element div > p <- Selects all

    elements where the parent is a

    element
    • Direct child of div..
  13. vw - viewport width: the browser window size.
  14. Add classNames to everything to ensure CSS styling is smooth and easy.
  15. Component as a prop -> capitalized.
  16. Spans vs. divs: div is a block element. span is an inline element. This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.
  17. element:action e.g. element:hover -> controls display of action.
  18. !important <- overrides the parent's css.
  19. hr <- adding a horizontal line.
  20. export { a, b, c } => import { a, b, c } from file \ export default a => import a from file.
  21. Firebase: Collections (tables) have documents (rows) and documents have fields. But documents can have collections as well.
  22. useEffect - runs the code inside when the component is loaded if no dependencies but you can specify dependencies #
  23. https://exerror.com/attempted-import-error-firebase-app-does-not-contain-a-default-export-imported-as-firebase/ <- new firebase API.
  24. Switch from react-router-dom checks what route you are in and renders the appropriate screen.
  25. useHistory <- allows you to set the history or allows you to go back / forward from a page i.e. change the page or force a redirect.
  26. https://usehooks.com/ <- check out the hooks.
  27. useReducer listens to any action which gets fired into the data layer.
  28. prop-drilling can be ugly -- flow of props..
  29. e.preventDefault() <- doesn't refresh the page.
  30. Action -> based on the action type the Reducer updates the state. Dispatcher is what dispatches the reducer to invoke an action.
  31. Add a hidden button for inputs that acts like a submit. Enter to submit.
  32. Firebase deployment:
    • firebase init (might need a firebase login)
    • build is the folder...
    • firebase deploy

Top comments (0)