Week 5 (completed)

Week 5 is over! Almost at the half way mark of the program. This week we learned redux-react. Redux is a state management tool that can be used with React and Angular. At the beginning of the week, when our instructor introduced Redux to us. I understood it conceptually i.e. on a high level basis. As we started to work on our lab though, it turned into a different story. I think this was due to how the “work flow” (or should i say code flow) is structured. Setting up redux AKA mapping dispatch and states to props can be overwhelming . It seems daunting and confusing at first because of the initial set up but once you practice and use it, it gets easier and easier.

Important take-away from this week with Redux:
Redux is helpful when you have a large application with many components calling/using the same state. Think twitter, facebook, or a large social blog site. E.g. CRUD functions can be call from multiple area of a website. Websites divided into several different components. No problem! Redux will help you by sending different states to any components you want (just make sure to map it first!) Always remember to set up an initial state then set your rootReducer or Reducer state to the initial state. From there you can call on that state from any components you want. Then you can change the state from any components but make sure you have set up your functions (in this case ‘actions’) in your actions area and map it to your props. Your actions can contain multiple functions/actions that you can send to various components. The actions will tell the reducer to make a copy of the original state, modify that new state and set as a completely new state! WOW!!!

Another important take away from redux is thunk. Thunk is use to fetchData() i.e. API call. At least that’s what I think it does. What thunk does is it creates an action creator that DOES NOT create an object but rather returns a function. Since we are using it with Redux, which only likes plain objects, thunk allows redux to do this. Essentially, it’s just a function that is returned by another function. E.g.
function getUser(){ return function(){ return fetch('/current_user'): }; };
Redux actions with thunk usually comes in triplets. I.e. Begin, Success, Failure. Begin is the beginning action item which allows redux to fetchData and show loading state of that data. Success is when the fetch is complete and the payload is set and ready to be render/display. Failure is an error catch, in case the GET call fails or server is down; Failure action will handle that state accordingly.

Concepts to improve on:
You guess it! That’s right! If you are thinking to yourself “hmm his definition of thunk seems like it comes straight from a text book or something similar” Well you are somewhat correct! It was 50/50. Conceptually, I think I understand what thunk does and what it can do but I feel like I need to practice and use it more to see the benefits of using thunk/redux when I am writing an API GET calls. That’s it for me this week! ~SOOSH OUT!! YEET!! P.S. I think that sign off is here to stay.

Week 4 (completed)

Week 4 was a very productive week, but the reoccurring theme seems to be whenever my understanding of a concept seems to somewhat solidifies, we move onto a new concept.

What I learned this week:
React Switch and Router – Switch and Router can render a new state of your web app without actually taking you to a new page. That is probably the simplest way I can define it in terms that makes sense to me. It also works hand in hand Redirect, Link and Navlink. Redirect can help ‘redirect’ you to a page that you want to display/render. While Link and Navlink works similarly, Link is mostly used for actual links when you are using an API GET request. Navlink is used as a nav bar to render states or move between menus without redirecting the user to a different page.
I also learned how Axios and how it can call an GET request from an API then use that data to display/renders info on our web app.

Concepts I struggled with this week:
I was struggling with a lot of syntax errors this week. E.g. using fetchdata() inside a useEffect() but then forget that I am able to use fetchData() outside of useEffect().

That is all I have for this week. It was a productive week but I have been pretty busy due to a minor fender bender I had during the beginning of last week. Consequently, I have to deal with the other party insurance claim adjuster representative..person…guy…whatever! It’s late and I am schleepy again. ~Soosh out!

Week 3 (completed)

Week 3 was our personal project week, so no new concepts were introduced but it did require us to utilize all the previous concepts that we have learned. At first, I thought it was kind of uneventful and mellow but come to think of it, it was actually a critical week. It not only reaffirmed the choice that I made in attending a bootcamp. It also reaffirmed that I am heading in the right career/life direction. I was sleep deprived but happy. I stayed up every night until 1 AM just to code. I keep making excuses like “after I finish this part I’ll definitely go to sleep” or “just 15-30 more minutes” It was such a good feeling, I was obsessed with my project. I know it wasn’t the best or the most complex but it was extremely fun to work on. Here is a screen shot of it down below:

My take on Rock, Paper, Scissors

I got the idea for the game after looking up a tutorial for a simple Rock, Paper, Scissors game. I thought to myself “Pokemon is just a fancier Rock, Paper, Scissors. Why don’t I just add some sprites from my previous lab projects and make it pretty with some CSS”. It turned out better than I expected, and I have to thank the amazing super smash bros background for that. The functions in the project was half from tutorial and half mine. The user input (the elemental buttons) codes were mine, with the assistance from my camp’s TA as well.

Concepts that I have learned from week 3:
I didn’t learn any new concepts from week 3 but working on the project really solidifies my understanding of HTML, CSS and Javascript. I learned that you can just create one function that can select a different indexes from an array and use the value in that index. Here is the code snippet:
setUserChoice = (idx) => { this.setState({ playerAsh: this.state.pokemons[idx] }) }
This is the code that helped me understand how to create a user input for player Ash (the actual user on the right) to select one of the three pokemon inside the array to battle.
I also learned a cool CSS trick that can help me move and position things around the page. Here’s the code for that! objectYouWantToPosition { position: absolute (or relative); right (or left): XXpx; top (or bottom: XXpx; }

Another cool JS function that I’ve learned this week from practicing is
array.map(x=>x * 2)
To be fair I did learned this before but it didn’t stick but now it did (go figured lol). With that code, we can essentially turn the index to any other number without changing the original array! WOWWOWOW! What an age to be alive!??!? Ok I’m done. Good night!

Week 2 (completed)

I will post a short recap of week 2 due to this being technically week 3. I can’t believe we covered a language, React, within 1 week. I’m not sure how to feel about learning something like React in just 5 days but I managed to understand a few concepts. I mostly understood the concept of components, props, and states. I am still struggling to learn hooks and the benefits of using it.

React as a language act as a virtual DOM and use components to break down big chunks of functions, then export and import data via components. “Visually” it looks like this
Our main “App.js” => pass components we set => Return () or render our web page to visually display all the components that we have imported from ComponentA, ComponentB, etc. ComponentA could be a table written in HTML and has another component inside of it. The component inside ComponentA can be an array imported from another component called ComponentData, then ComponentData could have another component inside of it as well, so on and so forth. This makes building a website with different functions more manageable. React uses a JSX syntax that is similar to JS which gets compiled by Babel. Babel then takes React code and compiles into ES5 or ES6 to make it more universal for different browsers

Props are how data gets passed into React components. E.g. a React component called Sushi with a prop called name that is being passed, with a value called “Uni”
<Sushi name="Uni" />
Here’s a component filled with more than 1 prop.
let firstSushi = "Uni"; let secondSushi = "Otoro"; <Sushi className = "sushi" quantity = {4} name = {firstSushi + "and" + secondSushi}/>;
One important take away with React is its data-flow. One way flow from parent to child, that is read-only. If you want to communicate something to a parent component then you will need to have a function that will pass the function to the child component. If something happens within the child component, calling the function alerts the parent-component about the child component.

State is the primary method of storing data in a component and use to keep track of data in a component. A state-change trigger React to re-render components to display accurate data change. If something visual is being changed, it belongs in the state. Value and on change are used in two way binding to accurate display data change. I.e.,
State = { text: ‘’ } handleChange = (event) => { this.setState({ text: event.target.value }); };

Hooks let you use state and other React features without writing a class. That’s the definition directly from reactjs.org. Currently, I only understand how to use a State Hook which is display below.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The example component will have two states, count and setCount. Whenever you click on the button “Click Me” it will change your setCount by +1 then displayed your count times via prop {count}. That is all I have on hooks for now, like I mentioned. Not sure what are the benefits of using hooks vs. this.state. Alrighty, that is all I have for week 2 recap. See ya next time! ~Soosh signing off…nope! That still sounds ridiculous AF.