One thing I have noticed so far in this course is that, having sections to read through, as well as videos to watch is that I find that the theoretical underpinnings of the content is coming through more clearly.
Day One mostly covered the basics, kicking off with an emphasis on four points of React:
Effectively this means taking simple functions and combining them into more complex functions. This is the bedrock of React and is reflected in the focus on components. React applications are more or less just one complex component made up of very many simpler components.
Imperative means to command, i.e. detailing every step of what needs to be done. Declarative means to declare what you want and the React or JS handles how exactly to do it.
In short, in React, you declare state and markup and React handles the imperative work of keeping the DOM in sync with your app.
React emphasises one-way data flow. Essentially this means that you maintain or mutate state in parent components and pass data down, via props to the child components. If a child component is responsible for triggering a state change, the handler that mutates state in the parent is passed down, via props to the child which will then call that handler so that the parent can mutate the state.
This is something I already have a sense for, but React, ultimately is only a view, and fundamentally is very JavaScript-y. You use .map to iterate over collections in order to display items. Unlike Angular which makes use og ngFor.
Instead of rending string templates, React uses JavaScript objects to describe and build UI. React elements describe DOM nodes. React uses a Virtual DOM, the render() method is what takes that description and renders actual DOM nodes to the browser. This is why it is so important to keep the concept of state in mind with React. React is very good at rendering, as long as it knows what is in state.
Another cornerstone of React is components. A key to working in React is to "think in components". Essentially, all UIs are just collections of components. Another phrase to keep in mind is to "favour composition over inheritance". Components extend React.Component, but it is only extended once. Instead of extending components, we compose components together via nesting and passing props.
Day Two kicked off with State Management. The golden rule to remember here is that components have "state" and when state changes, React re-renders the component (and all children). This is why it is critical to manage and set state correctly. This is done by using setState. setState will then trigger the re-renders. You never mutate state directly, what you do in fact, is create copy of the mutatated data and then setState will manage the update since it keeps track of all state.
Something else to keep in mind here is the following:
At this early stage, there are two options when it comes to constructing your components: Class-based Components and so-called Stateless Functional Components. Essentially, if your component is only responsible for rendering UI and changes no state, it can be a functional component. If your component needs to manage state, it will be class-based.
2 Questions to ask oneself when working with React:
As the saying goes: "Your UI is just a function of your state"...
Important: Do NOT initialise state with props!
Why? State will only be initialised with props when the component is first created. As such, if the props change (as a result of state change higher up the chain), the component will not know about it. This anti-pattern is a deviation from the concept of "single source of truth".
Remember: The magic of React is that, when state changes it automatically re-renders the component tree. As such, doing things "out of state", that should be "in state", is going to give you headaches at some point or other.