Udemy/Oak Academy: React TS First App

Link to the course

i know, i know... don't save API keys in version control

HUGE OUT OF DATE

1. Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.
2. 1. fix:
3. react_devtools_backend.js:4026 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
4. 1. fix... same link as above
5. the tutorial was getting undesired behavior, that needed a work around. the behavior was showing the HOME component regardless of which route was selected because it included a slash.
6. 1. the fix was to add exact before path in the Route
7. passing props to the element since we aren't using component as an JSX attr...
8. You don't need to use an exact prop on anymore. This is because all paths match exactly by default. from

HUGER OUT OF DATE history.push using props... huge breaking change in react-router-dom v6

const navigate = useNavigate();
setTimeout(() => {
  navigate('/contact');
}, 1500);

didn't need the SWITCH tag, it just worked

I'm just going to use the same repo for the entire course so I can use the GitHub issues

Out of date: Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more

Lesson 12: Glad I'm not skipping remedial sections. This is actually interesting. On Babel's website, they have an ES6 -> super vanilla JS converter that translates code in real time.

Lesson 12: the HTML attributes for and class need to be htmlFor and className respectively

Lesson 13: 'youll see this error eventually' Uncaught Error: Objects are not valid as a React child (found: object with keys {text}). If you meant to render a collection of children, use an array instead.

BLOG POSTS starts with branch section-03

Section 3: could've used an array for the card component calls

HEMISPHERE DISPLAY starts with branch section_04

Lesson 30: Rules of a class based component

1. must be a JS class
2. must extend React.Component
3. must define a render method

Lesson 31: State Rules

1. state only usable w/ class components
2. state is a JS obj that contains data relevant to a component
3. updating state on a component causes the component to rerender
4. state must be initialized when a component is created
5. state can only be update using the function setState

Lesson 33: Lifecycle Methods Overview

1. JS file loaded up browser
2. App component gets created
3. Constructor function gets called
4. this.state property assigned the state object
5. we call geolocation service
6. react calls the components render method
7. App returns JSX, gets rendered to page as HTML after some period of time
8. we get results of geolocation request
9. we update our state obj w/ this.setState
10. React calls render method a second time
11. render method returns some JSX
12. React takes that JSX and updates the content on the screen

Lesson 35: Lifecycle Methods

1. constructor: good place for one time setup
2. render: just return JSX
3. componentDidMount: good place to load data
4. componentDidUpdate: good place to load more data when state/props change
5. componentWillUnmount: good place to do cleanup

Lesson 37:

Don't need constructor function to initialize state

Lesson 38:

We don't have to pass entire props object. Destructure it for simpler code *note: fails if you have a latitude of 0... Test Cases, man...

Lesson 49:

Uncontrolled vs Controlled Input

dont store info in HTML elements, centralize in React state good way to... ie... force UPPERCASE text

Lesson 50:

most common React error message Uncaught TypeError: Cannot read properties of undefined (reading 'state')

this - solution options

this.onFormSubmit = this.onFormSubmit.bind(this); in the constructor

or

write event handler as an arrow function

Lesson 67:

render a modal, via PORTALS as a child of another element (besides #root)

Section 11: React Context API and Hooks

1. Context API: clean & easy way to share states between different components
2. 1. makes communication between components easier
3. 1. a way to 'share state up & down the component tree easily'
4. 1. using props can get messy
5. 1. when used with HOOKS can be an alternative to REDUX
6. 1. no longer need to pass props down the tree
7. Hooks: allows us to do a 'whole bunch of stuff' inside functional components, that we cna only do inside class-based components like using staets or lifecycle methods

In the context file we are going to createContext() and also create another component that's a class component, and inside have some STATES, and that state will be the data we want to share among different components

Whenever So when we create a context, we have to also create a provider which is basically a tag that surrounds whichever components we want to be able to use that context inside.

<ThemeContextProvider>
  <Navbar />
  <TodoList />
</ThemeContextProvider>

The children are acceddisble to the Context Provider 'wrapper' as props The children are returned as JSX when used as {this.props.children} This context provider tag provides all the data in the value={} attr to its children

note holy crap, that was actually really COOL ^^^^

React dev tools:

{
  "value": {
    "isDarkTheme": true,
    "lightTheme": {
      "text": "#222",
      "background": "#d8ddf1"
    },
    "darkTheme": {
      "text": "#fff",
      "background": "#5c5c5c"
    }
  },
  "children": ["<Navbar />", "<TodoList />"]
}

Lesson 76:

Further reading on context

consumer works in both functional and class-based components consumer also allows consuming mulitple contexts per component

Lesson 77: it bears repeating. i really like how clean this Context API is... smooth and simple, yet powerful in its functionality

Lesson 80: HOOKS

1. special React functions that allow us to perform some operations in the functional component that were previously only possible in class-based
2. 1. using state
3. 1. life cycle methods
4. useState() allows us to use STATE in functional comp
5. useEffect() helps us render the component whenever we want
6. useContext() allows us to use context in the functional comp

Lesson 86: I remain in awe of context.. also. the instructor did a great job of showing how to consume CONTEXTs in different manners