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