Assessments/
└── 2021-01-11-Cohort/
├── Module-3/
│ ├── assessment-8/
│ │ ├── Graph-Project/
│ │ ├── images/
│ │ ├── FR-Network-Devices.md
│ │ └── Multiple-Choice.md
│ └── assessment-9/
│ ├── AJAX-Project/
│ ├── CSS-Properties-Project/
│ ├── FR-Media-Query.md
│ └── Multiple-Choice.md
│
├── Module-4/
│ ├── assessment-10/
│ │ ├── SQL-Project/
│ │ ├── Sequelize-Project/
│ │ ├── FR-Define-A-Table.md
│ │ ├── FR-Unique-Constraint.md
│ │ └── Multiple-Choice.md
│ ├── assessment-11/
│ │ ├── express-application-a-master/ **Rename
│ │ └── Multiple-Choice.md
│ └── assessment-12/
│ ├── FR-API-Design.md
│ └── Multiple-Choice.md
│
├── Module-5/
│ ├── assessment-14/
│ ├── assessment-15/
│ └── assessment-16/
Assessments/
└── 2020-12-07-Cohort/
└── Module-3/
├── assessment-7/
│ ├── Algorithms-Problems/
│ ├── Data-Structures-Problems/
│ └── Multiple-Choice.md
├── assessment-8/
│ ├── Graph-Project/
│ ├── images/
│ ├── FR-Network-Devices.md
│ └── Multiple-Choice.md
└── assessment-9/
├── AJAX-Project/
├── CSS-Properties-Project/
├── FR-Media-Query.md
└── Multiple-Choice.md
Assessments/
└── 2020-11-02-Cohort/
├── Module-1/
│ ├── assessment-1/
│ │ ├── Calculator.md
│ │ ├── FR-Asking-Questions.md
│ │ ├── Highest-Average.md
│ │ └── Multiple-Choice.md
│ ├── assessment-2/
│ │ ├── Creating-Files-Project/
│ │ ├── Spec-Problems/
│ │ ├── FR-Variable-Declarations.md
│ │ └── Multiple-Choice.md
│ └── assessment-3/
│ ├── Spec-Problems/
│ ├── FR-Event-Loop-Message-Queue.md
│ ├── FR-First-Class-Objects.md
│ ├── FR-Sync-Vs-Async.md
│ ├── Interpolate-Strings.md
│ └── Multiple-Choice.md
│
├── Module-2/
│ ├── assessment-4/
│ │ ├── Basic-DOM-Project/
│ │ └── Multiple-Choice.md
│ ├── assessment-5/
│ │ ├── Test-Driven-Problems/
│ │ ├── Create-A-Parent-Class.md
│ │ ├── Define-A-Class.md
│ │ └── Multiple-Choice.md
│ └── assessment-6/
│ ├── Test-Driven-Problems/
│ ├── images/
│ └── Multiple-Choice.md
│
├── Module-3/
│ ├── assessment-7/
│ │ ├── Algorithms-Problems/
│ │ ├── Data-Structure-Problems/
│ │ └── Multiple-Choice.md
│ ├── assessment-8/
│ │ ├── Graph-Project/
│ │ ├── images/
│ │ ├── FR-Network-Devices.md
│ │ └── Multiple-Choice.md
│ └── assessment-9/
│ ├── AJAX-Project/
│ ├── CSS-Properties-Project/
│ ├── FR-Media-Query.md
│ └── Multiple-Choice.md
│
└── Module-4/
└── assessment-10/
├── SQL-Project/
├── Sequelize-Project/
├── images/
├── FR-Define-A-Table.md
├── FR-Unique-Constraint.md
└── Multiple-Choice.md
Assessments/
└── 2020-10-05-Cohort/
└── Module-1/
├── assessment-1/
│ ├── Coding-Problems.md
│ ├── FR-Asking-Questions.md
│ └── Multiple-Choice.md
└── assessment-2/
├── Creating-Files-Project/
├── Spec-Problems/
├── FR-Variable-Declaration.md
└── Mutliple-Choice.md
Learning-Objectives
├── Module-1
│ ├── week-1.md
│ ├── week-2.md
│ └── week-3.md
│
├── Module-2
│ ├── week-4.md
│ ├── week-5.md
│ └── week-6.md
│
├── Module-3
│ ├── week-7.md
│ ├── week-8.md
│ └── week-9.md
│
└── Module-4
├── week-10.md
└── week-11.md
Notes
└── 2021-01-11-Cohort
Notes
└── 2020-12-07-Cohort
└── Module-3
├── Week-7
├── Week-8
└── Week-9
Notes
└── 2020-11-02-Cohort
├── Module-1
│ ├── Week-1
│ ├── Week-2
│ └── Week-3
│
├── Module-2
│ ├── Week-4
│ ├── Week-5
│ └── Week-6
│
├── Module-3
│ ├── Week-7
│ ├── Week-8
│ └── Week-9
│
└── Module-4
└── Week-10
Notes
└── 2020-10-05-Cohort
└── Module-1
├── Week-1
├── Week-2
└── Week-3
curl -s https://raw.githubusercontent.com/appacademy/aa-setup-checker/master/run.sh | bash
brew update
brew upgrade
brew install nvm
from your home folder~~~~~~~
code .zshrc
place in the .zshrc file~~~~~~~~~
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh
quit terminal, reopen~~~~~~~~~~
nvm --version
~should be 0.35.3~
nvm install --lts
heroku pg:reset -a ygo-da-deck-builder --confirm ygo-da-deck-builder && heroku run -a ygo-da-deck-builder flask db upgrade && heroku run -a ygo-da-deck-builder flask seed all
W14D2 React Basics & React Router https://vimeo.com/manage/videos/536537238 EOD: https://vimeo.com/536583505/ef78983a68 W14D3 Basic Hooks https://vimeo.com/536971788/8682985dc7 EOD https://vimeo.com/537041794/a7b29eda68 W14D4 React Context w/Miah https://vimeo.com/537373618/5473820771 EOD https://vimeo.com/537511834/5341a5ca4c W15D1 Class Component Lecture: https://vimeo.com/538903882/33d96ea898 EOD: https://vimeo.com/538923936/7530933ba6 W15D2 React-Redux https://vimeo.com/539378173/2a68ed6b17 EOD: https://vimeo.com/539413799/aa809411cb W15D3 W15D4 Fullstack Dataflow: https://vimeo.com/540417329/29282a23aa
docs: https://react-redux.js.org/api/hooks useSelector
- takes in a callback function as an argument
- that callback receives the current "state" that your redux store is managing
- the return value here is what
- returns the effect of the callback(return value of cb) useDispatch
- takes in no arguments(normally)
- returns a dispatch function(object)
- we only need this to later be able to send things to our store reducers
- just functions
- input: 1st: state, 2nd: the argument we passed to our dispatch function
- 1st argument of state is the previous reducer function return value
- return: what the slice of state that this reducer is managing should look like
- the structure of this object/array should stay consistent
- the combined output of all our reducers creates the combo object that represents our global state
state management library on the frontend
redux cycle steps
setup:
- create a store(single source of data truth on front end) - configureStore - usually in a store.js file
- write reducer functions(determining the structure of what our store looks like)
- install react-redux package
- useSelector, useDispatch hooks
- Provider component around all parts of our app that will need access to store implementation(start from a component):
- seeing content on the page
- React- component gets rendered
- react will request(from store) information this component needs - useSelector
- once it has the info from store, will then render on page
- React- component gets rendered
- changing content on the page
- need access to the dispatch
const dispatch = useDispatch();
- dispatch has 1 job: send things to the redux store(hits reducers as 2nd argument)
- dispatch()
- the info passed as an argument to dispatch, is the argument that will be passed to all my reducers in the future
- need access to the dispatch
thunk:
- ensure that only pojo get sent to our reducers(store) useSelector
- input argument: callback function
- that input argument will be the global "state" present in our app
- whenever we see useSelector, it's because we're trying to access information from our store useDispatch()
- main function is to get access to dispatch when submitting a form(walking through data flow)
- clicking "submit" button
- invokes our handleSubmit function(written in this component)
- we use the dispatch, and the
createPokemon
thunk action creatordispatch(createPokemon(payload))
- we are dispatching(to our store) the return value of
createPokemon(payload)
- this happens to be another function
- because we tried to dispatch a function to our store, thunk sees this and instead of allowing function through to our store, it redirects
- redirects: calling the function that tried to go to store and passing
dispatch
as argument to that function
- redirects: calling the function that tried to go to store and passing
- this function that thunk is going to invoke and pass the
dispatch
argument to is typically our BE fetch requests - we make the request to our BE service
- it does stuff with our database
- save a pokemon
- returns a response with results of trip to DB
- it does stuff with our database
- we use the dispatch that thunk passed as argument to this function
- we dispatch the return value of the action creator
dispatch(addOnePokemon(pokemon))
- this action object(return vlaue of action creator) gets sent to our reducers
- we dispatch the return value of the action creator
- our reducers see the action object and decide if they know what to do with it
- in this case: it adds the one pokemon we just created to our global state
- return the new slice of state wih the new pokemon added
- each component that is utilizing some part of our global state, a re-render is triggered by redux(not us) whenever our global state changes/updates
const pokeTypes = useSelector(state => state.pokemon.types);
- once component is triggered to re-render
- all the react stuff happens again
https://github.com/gootieno/thunks-lecture https://github.com/jshafto/week_18_demo