Source: https://www.youtube.com/watch?v=-cMqr9HpZ-Y&t=21198s
- CSS: * { } <- applies to all elements.
- BEM (Block Element Modifier) Naming convention: http://getbem.com/naming/
- Comments in JSX: {/* */}
- Comment out layout in the components.
- CSS: .name <- name of the class to style.
- Material UI for Icons: https://mui.com/components/icons/
- Flex Box for alignment: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- padding: Apx Bpx <- A: Top + Bottom and B: Left + Right padding.
- justify-content: Aligns the flex items.
- Variables in CSS: --name-of-variable usage: var(--variable)
- Variables can be defined in a particular scope.
- 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.
- element>element div > p <- Selects all
elements where the parent is a
element- Direct child of div..
- vw - viewport width: the browser window size.
- Add classNames to everything to ensure CSS styling is smooth and easy.
- Component as a prop -> capitalized.
- 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.
- element:action e.g. element:hover -> controls display of action.
- !important <- overrides the parent's css.
- hr <- adding a horizontal line.
- export { a, b, c } => import { a, b, c } from file \ export default a => import a from file.
- Firebase: Collections (tables) have documents (rows) and documents have fields. But documents can have collections as well.
- useEffect - runs the code inside when the component is loaded if no dependencies but you can specify dependencies #
- https://exerror.com/attempted-import-error-firebase-app-does-not-contain-a-default-export-imported-as-firebase/ <- new firebase API.
- Switch from react-router-dom checks what route you are in and renders the appropriate screen.
- 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.
- https://usehooks.com/ <- check out the hooks.
- useReducer listens to any action which gets fired into the data layer.
- prop-drilling can be ugly -- flow of props..
- e.preventDefault() <- doesn't refresh the page.
- Action -> based on the action type the Reducer updates the state. Dispatcher is what dispatches the reducer to invoke an action.
- Add a hidden button for inputs that acts like a submit. Enter to submit.
- Firebase deployment:
- firebase init (might need a firebase login)
- build is the folder...
- firebase deploy
Top comments (0)