Flatiron School Phase 5 Things you Should Know

Through my time in Flatiron School phase 5 seemed to bring me the most anxiety, not sure if this is imposter syndrome ( which is normal ) or the fact that all of the hard work you put in comes down to this don't blow it!. Either way, you made it this far for a reason, you do know what you're doing you just haven't realized it yet, but you will. For myself, I feel the same way as you and for both of is I figured it'll be a good idea to write a study guide on things you should know/ practice.

FETCH

Fetch provides a JS interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. A global fetch() method makes an easy and logical way to fetch resources asynchronously.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Promises

A promise is a returned obj to which you attach callbacks, instead of passing callbacks into functions. A promise comes with some guarantees:

1. Callbacks added with then() will never be invoked before the completion of the current run of the JS event loop
2. These callbacks will be invoked even if they were added after the success or failure of the async operation that the promise represents.
3. Multiple callbacks may be added by calling then() several times. They will be invoked one after another, in the order in which they were inserted.

Asynchronous

An asynchronous model allows multiple things to happen at the same time. When you start an action, your program continues to run. When the action finishes, the program is informed and gets access to the results.

State vs Props

The state is a variable directly initialized and managed by the component, the state can be initialized by props too. Props are variables as well but passed down by their parent component.

Local State vs Global State

Global means our state is accessible by every element/component of the app. But the important fact is that it pollutes the whole app since it echoes in every component that accesses it. A local state, on the other hand, is not a state we define locally. It has the goal to encapsulate the data flow within the component.

Why setState()?

setState() enqueues changes to the components state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.

Why is setState() Async?

setState alters the state and causes rendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive. The setState calls are async as well as batched for a better UI experience and performance.

Differences between an arrow function and a regular function declaration

1. Syntax, the arrow function accomplishes the same goal but with less code.
2. Argument binding, arrow functions do not have argument binding.
3. this. , arrow functions do not have their own this.
4. new keyword, Regulae functions created using function declarations or expressions are constructable and callable. Since regular functions are constructible, they can be called using the new keyword. Arrow functions are only callable and not constructible, i.e arrow functions can never be used as constructor functions. Hence, they can never be invoked with the new keyword.

pass data/functions through to components using props

There are a few ways to go about this.

1. Using props, you can use props to pass data from the parent component to the child.
2. Using State management library (Redux, ContextAPI), All app state will be stored in a single place known as Store, its can be thought of as a client-side ‘single source of truth’, or database.

differences between function vs class-based components

A functional component is just a plain JS function that returns JSX. A class component is a JS class that extends to React.Component which has a render method. Inside of functional components, we pass props as a argumentof the function. In a class you need to use this to refer to props. Handling state use to be only done inside of a class component, but from React 16.8, React Hook useState was introduced to allow developers to write stateful functional components. For the class component the React.Component is important, “ The constructor for a React component is called before it is mounted. When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.”, Pretty much without implementing the constructor and calling super(props), all the state variables that you are trying to use will be undefined .

When to use a Functional component vs a Class component

If your component doesn't do much more than just taking in some props and render, go with a functional component. Look at them as pure functions because they will always render and behave the same, given the same props. Also, they don’t care about lifecycle methods or have their own internal state. If your component needs more functionality, like keeping state use a class component instead.

presentational components vs container components

Presentational components:

1. Focus on how things look.
2. Can contain both presentational and container components inside, and usually have some DOM markup and styles of their own.
3. Allow containment via this.props.children
4. No dependencies on the rest of the app, such as Flux actions or stores
5. Doesn’t specify how the data is loaded or mutated
6. Recieve datd and callback exclusively via props.
7. Rarely have their own state, if they do it’s UI state rather than data.
8. Written as functional components unless they need state, lifecycle, hooks, or performance optimization.

Container components:

1. Focus on how things work.
2. may contain both presentational and container components inside but usually don’t have DOM markup of their own except for some wrapping divs, and never have styles.
3. Provide the data and behavior to presentational or other container components.
4. Call Flux actions and provide these callbacks to the presentational components.
5. Are often stateful, as they tend to serve as a data source.
6. Are usually generated using higher order components such as connect() from React Redux, createContainer() from Relay, or Container.create() from Flux Utils.

Redux flow

“One-way data flow”:

• State describes the condition of the app at the specific point in time.
• The UI is rendered based on that state
• When something happens (like a button click), the state is updated based on what occured.
• The UI re-renders based on the new state.

For Redux specifically , we can break these steps down into more detail.

initial setup:

• A Redux store is created using a root reducer function
• The store calls the root reducer once, and saves the return value as its initial state
• When the UI is first rendered, UI components access the current state of the Redux store, and use that data to decide what to render. They also subscribe to any future store updates so they can know if the state has changed.

updates:

• Something happens in the app, such as a user clicking a button.
• The app code dispatches an action to the Redux store, like dispatch({type: ‘counter/incremented’}).
• The store runs the reducer function again with previous state and the current action, and saves the return value as the new state.
• The store notifies all parts of the UI that are subscribed that the store has been updated.
• Each UI component that needs data from the store checks to see if the parts of the state they need have changed.
• Each component that sees its data has changed forces a re-render with the new data, so it can update what’s shown on the screen.

mapStateToProps & mapDispatchToProps

mapStateToProps is a function used to provide the store data to your components, while mapDispatchToPtops is something that you will use to provide the action creators as props to your component.

Thunk async dispatches with redux

Redux Thunk is a middleware that lets you call action creators that return a function instead of an action obj. That function receives the store’s dispatch method, which is then used to dispatch regular synchronous actions inside the functions body once the asynchronous operations have been completed.

Rails Backend Concepts:

• Serializers: provides a way of creating custom JSON by representing each resource as a class that inherits from ActiveModel::Serializer
• RESTful routing: provides mapping between HTTP verbs, controller actions and (implicitly) CRUD operations in a database.
• controller methods: the logical center of your application. It coordinates theinteraction between the user, the views, and the model.

React lifecycle methods

There are three phases: Mounting, Updating, Unmounting.

Mounting:

React has four built-in methods that gets called, in this order, when mounting a component:

• constructor(): Is called before anything else, when the component is initiated, and it is the natural place to set up the initial state and other initial values.
• getDerivedStateFromProps(): Called right before the rendering the elements to the DOM.
• render(): Is required and will always be called, the others are optional and will be called if you define them.
• componentDidMount(): Method is called after the component is rendered.

Info on the other phases go to https://www.w3schools.com/react/react_lifecycle.asp

React has a Virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

In conclusion all of these concepts are some of the few things you should know and understand. What I've learned in this phase is to build as much as you can, because nothing beats muscle memory.