React Attack Review

This is it. This is the Big Bang. My last phase of Flatiron Bootcamp. React. By far my most favorite module. I have discovered a new passion for Frontend development. It definitely feels like I am being spoiled through the experience of using React. Hot Reload, Error handling, organization of components, etc. All of which is made easy through React. I tend to copy the template of my last blog, because it seemed to have helped a lot of classmates. So here is a review template for React!

• What are the differences between class and functional components? Be able to write BOTH types of components and explain why you would use one type vs the other.

A functional component is exactly as it sounds just a pure function that accepts props as an argument and return a React element.

It is required in a class component to extend from React and create a render function which returns the React element.

• How does your client side routing work?

React renders information to the DOM using the component structure. Client side routing in React helps maintain a SPA(Single Page Application). This is achieved through a library called React Router.

• Thinking about just React (not Redux), what are the differences between props and state?

Props are passed down from a parent component then utilized in the child component to sometimes alter the state of the parent or use data that was passed from the parent.

State is an object that holds information that may change over the lifetime of the component. A good example of this would be a form holding the state of user data being passed in through an input field.

• Explain the flow of Redux when you dispatch an action.

Dispatch →Action →Reducer →Store

Dispatch- used to dispatch a functi`on that is inside our Actions file

Actions-once action is called from dispatch it will call on the reducer to update the state with the payload it is presented from said action.

Reducer-updates the store with payload that was passed in from the action ,by immutably changing state.

Store-has now been updated and we can mapStateToProps anywhere in our component to grab said data.

• What does fetch() return?

Promise

• When would you use this.props and when would you use props?

this.props → Class Component
props →Functional Component

• Why do we use Redux?

It is vital that we use redux in large scale application, It would be difficult to follow state down through multiple components, when instead we can just use the Redux Store to grab our state.

• Why do we use Thunk?

We use Redux Middleware Thunk because it allows us to dispatch actions within an asynchronous function.

• What’s the purpose of the mapStateToProps function? What’s the purpose of the mapDispatchToProps function? What do you need to do to make sure a component can access the Redux store?

We stitch the bond between our Store and Component through Connect this is given to us through the ‘react-redux’ library. We can then pass in two arguments to our connect, mapStateToProps and mapDispatchToProps.

mapStateToProps-grabs specific information from our store and maps it to the components props, which in return can be used throughout that component.

mapDispatchToProps-maps functions from our actions to our props used to dispatch information and manipulate the state of the Redux store.

• How did you decide what to make into a component?

Its not very hard to get carried away in making components. Essentially any element that is being displayed in your JSX can be made into a component. It nice to be able to separate everything into components. Application might get bigger file wise, but keeping things organized in React is key to having a well maintained application.

• What are the lifecycle stages?

Mounting-This process of creating instances and DOM nodes corresponding to React components, and inserting them into the DOM, is called mounting.
Updating- A component is updated whenever there is a change in the component’s state or props
Unmounting- when a component is removed from the DOM, or unmounting

After passing my final review I will be officially a Full Stack Web Developer through the grace of Flatiron. The experience to say the least has been a wild ride. Ups and downs with fellow students, but all experiences have taught me something new about code and myself. I have transitioned from a Fixed mind set to a Growth mindset. I didn't just find a passion for frontend development, but also a passion for learning. I wouldn’t have been able to do any of this without my Cohort Lead Enoch and all of my classmates. They are true mvps and I wish them the best in their endeavors. I tend to keep writing blogs or maybe even make vlogs to keep track of my process of learning. I encourage anyone who wants to learn more about code, or enjoys helping others learn more about code to follow my blogs/vlogs. Until next time !

<p>Goodbye, Flatiron</p>
<p>Hello, World</p>