From 54e79b33cded74d746671def2cdeeaed987a34ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Rupi=C5=84ski?= Date: Thu, 8 Aug 2024 10:26:18 +0200 Subject: [PATCH 1/6] Modify md files to allow SQL course walkthrough in Github --- README.md | 2 +- react/Open_React_Overview.md | 204 +++++++++++++++++++++++++++++++++++ 2 files changed, 205 insertions(+), 1 deletion(-) create mode 100644 react/Open_React_Overview.md diff --git a/README.md b/README.md index 1d088ef..e74b04b 100644 --- a/README.md +++ b/README.md @@ -7,5 +7,5 @@ The material in this repository is divided by topic. * Rails * HTML/CSS * JavaScript -* React +* [React](/react/Open_React_Overview.md) * Full-Stack Project diff --git a/react/Open_React_Overview.md b/react/Open_React_Overview.md new file mode 100644 index 0000000..c1d55b0 --- /dev/null +++ b/react/Open_React_Overview.md @@ -0,0 +1,204 @@ +# React + +## Topics Covered + +- [React Fundamentals]() +- [Redux Fundamentals]() +- [Middleware and Thunks]() +- [Redux and the Rails API]() +- [Frontend Routing with React]() +- [Frontend Auth]() +- [Completing Bench BnB]() + + +## Notes + +React is the last instructional module in the App Academy Full Stack Developer +Curriculum. Our React module will have the last assessment on W8D2, where you +will be able to track our progress and understanding of the material as you +learn it. + +As with all future modules, any "Bonus" projects are to be completed after the +standard projects for each day are completed. Sometimes that could mean going +back to previous day's "Bonus" projects if you otherwise finish early. +Additional Resources are readings, videos, or articles that are not required, +but will serve to deepen your understanding of a topic. They will be denoted +with a specific icon in your task menu. + +## React Fundamentals +- [ ] 1. [NonTechnical Overview of React](readings/react_nontech.md) +- [ ] 2. [NPM 1](readings/npm_configuration_1.md) +- [ ] 3. [NPM 2](readings/npm_configuration_2.md) +- [ ] 4. [NPM 3](readings/npm_configuration_3.md) +- [ ] 5. [NPM 4](readings/npm_configuration_4.md) +- [ ] 6. [Webpack](readings/webpack_configuration.md) +- [ ] 7. [ES6 Syntax: Object Destructuring](readings/object_destructuring.md) +- [ ] 8. [ES6 Syntax: Import/Export](readings/import_export.md) +- [ ] 9. [React Developer Tools](readings/react_dev_tools.md) +- [ ] 10. [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html) +- [ ] 11. [React: Intro](https://player.vimeo.com/video/188074204) +- [ ] 12. [React: Transpilation](https://player.vimeo.com/video/188087366) +- [ ] 13. [React: Functional Components](https://player.vimeo.com/video/188090786) +- [ ] 14. [React: Lifecycle Methods](https://player.vimeo.com/video/188093789) +- [ ] 15. [Props and State](readings/props_and_state.md) +- [ ] 16. [Click Counter Code Demo](https://assets.aaonline.io/fullstack/react/demos/click-counter.zip) +- [ ] 17. [React Fundamentals Quiz](quizzes/react_fundamentals.md) +- [ ] 18. [Getting Started with NPM](homeworks/getting_started/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/homeworks/getting_started/solution.zip) +- [ ] 19. [React Calculator](homeworks/calculator/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/homeworks/calculator/solution.zip) +- [ ] 20. [Babel](readings/babel_configuration.md) +- [ ] 21. [React](readings/intro_to_react.md) +- [ ] 22. [JSX](readings/intro_to_jsx.md) +- [ ] 23. [React Components](readings/intro_to_react_components.md) +- [ ] 24. [Declaration](readings/component_declaration.md) +- [ ] 25. [Lifecycle Methods](readings/component_lifecycle.md) +- [ ] 26. [Synthetic Events](readings/synthetic_events.md) +- [ ] 27. [Official React Documentation](https://facebook.github.io/react/docs/getting-started.html) +- [ ] 28. [React Intro & First Components](https://player.vimeo.com/video/340114806) +- [ ] 29. [Nested Components & Props](https://player.vimeo.com/video/340114494) +- [ ] 30. [Class Components, State & onClick](https://player.vimeo.com/video/340113953) +- [ ] 31. [Lifecycle Methods, componentDidMount & Fetching](https://player.vimeo.com/video/340113661) +- [ ] 32. [CSS Friends Part 3](../html-css/micro-projects/css-friends/css-friends-12/README.md) +- [Solution](https://assets.aaonline.io/fullstack/html-css/micro-projects/css-friends/css-friends-12/solution.zip) +- [ ] 33. [Widgets](projects/widgets/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/widgets/solution.zip) +- [ ] 34. [Minesweeper](projects/react_minesweeper/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/react_minesweeper/solution.zip) +- [ ] 35. [MinRedux Liteesweeper](projects/redux_lite/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/redux_lite/solution.zip) +## Redux Fundamentals +- [ ] 1. [Nontechnical Overview of Redux](readings/redux_nontech.md) +- [ ] 2. [Flux and Redux Intro](readings/flux_redux.md) +- [ ] 3. [Store](readings/store.md) +- [ ] 4. [Reducers](readings/reducers.md) +- [ ] 5. [Actions](readings/actions.md) +- [ ] 6. [](readings/provider.md) +- [ ] 7. [connect()](readings/connect.md) +- [ ] 8. [Containers](readings/containers.md) +- [ ] 9. [Selectors](readings/selectors.md) +- [ ] 10. [Window API](readings/the_window.md) +- [ ] 11. [Testing on the Window](https://player.vimeo.com/video/303833296/) +- [ ] 12. [Intro to UI/UX](https://player.vimeo.com/video/206661754) +- [ ] 13. [Intro to UX for Web](https://player.vimeo.com/video/206661769) +- [ ] 14. [UI Affordances and Signifiers](https://player.vimeo.com/video/206661839) +- [ ] 15. [Designing to Look Good](https://player.vimeo.com/video/206661864) +- [ ] 16. [Fruit Stand Live Demo: Phase I Redux Only](http://appacademy.github.io/curriculum/react/fruit_stand_01/index.html) +- [ ] 17. [Fruit Stand Live Demo: Phase I Source Code](demos/fruit_stand_demos/fruit_stand_01/README.md) +- [ ] 18. [Fruit Stand Live Demo: Phase II React/Redux](https://player.vimeo.com/video/184374712) +- [ ] 19. [Fruit Stand Live Demo: Phase II Source Code](demos/fruit_stand_demos/fruit_stand_02/README.md) +- [ ] 20. [Fruit Stand Live Example](http://appacademy.github.io/curriculum/react/fruit_stand_02/index.html) +- [ ] 21. [Redux Fundamentals Quiz](quizzes/redux_fundamentals.md) +- [ ] 22. [Official React-Redux Documentation](https://github.com/reduxjs/react-redux/blob/master/docs/README.md) +- [ ] 23. [Job Listing](homeworks/job_listing/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/homeworks/job_listing/solution.zip) +- [ ] 24 [UX/UI Layout Practice](homeworks/ux/README.md) +- [ ] 25. [Selecting a Full-Stack Project](../full-stack-project/proposal/selecting-a-fsp.md) +- [ ] 26. [Approved Full-Stack Apps](../full-stack-project/proposal/projects-to-clone.md) +- [ ] 27. [Is Ageism In Tech An Under-The-Radar Diversity Issue?](https://www.fastcompany.com/3054204/is-ageism-in-tech-an-under-the-radar-diversity-issue) +- [ ] 28. [Building Accessibility Culture](https://modelviewculture.com/pieces/building-accessibility-culture) +- [ ] 29. [Building Better Tech Cultures for People with ADHD](https://modelviewculture.com/pieces/building-better-tech-cultures-for-people-with-adhd) +- [ ] 30. ["Brilliance," "Pride," and "Genius": How Tech Culture Hides Mental Illness](https://modelviewculture.com/pieces/brilliance-pride-and-genius-how-tech-culture-hides-mental-illness) +- [ ] 31. [Official Redux Documentation](https://redux.js.org/) +- [ ] 32. [Redux Intro & Store](https://player.vimeo.com/video/340778392) +- [ ] 33. [Redux Reducers](https://player.vimeo.com/video/340779518) +- [ ] 34. [Action Creators](https://player.vimeo.com/video/340779952) +- [ ] 35. [React-Redux Intro & mapStateToProps](https://player.vimeo.com/video/340781052) +- [ ] 36. [Redux - mapDispatchToProps](https://player.vimeo.com/video/340781971) +- [ ] 37. [Todos (Part 1)](projects/todos/todos_i.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/todos/solution_1.zip) +## Middleware and Thunks +- [ ] 1. [Higher-Order Functions](readings/higher_order_functions.md) +- [ ] 2. [Middleware](readings/middleware.md) +- [ ] 3. [Thunks](readings/thunks.md) +- [ ] 4. [Object.freeze](readings/object_freeze.md) +- [ ] 5. [Namespacing](readings/rails_router_namespacing.md) +- [ ] 6. [Debugging Arrow Functions in React](readings/debugging_arrow_functions.md) +- [ ] 7. [Middleware Quiz](quizzes/middleware_thunks.md) +- [ ] 8. [ES6 Arrow Functions](../javascript/readings/fat-arrows.md) +- [ ] 9. [Arguments](../javascript/readings/arguments.md) +- [ ] 10. [Submit Tentative Full-Stack Proposal](../full-stack-project/proposal/tentative-project-proposal.md) +- [ ] 11. [MVP List](../full-stack-project/proposal/mvp-list.md) +- [ ] 12. [Middleware Homework](homeworks/middleware/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/homeworks/middleware/solution.zip) +- [ ] 13. [Todos (Part 2)](projects/todos/todos_ii.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/todos/solution_1.zip) +- [ ] 14. [Todos (Part 3)](projects/todos/todos_iii.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/todos/solution_2.zip) +- [ ] 15. [React-Redux Review](https://player.vimeo.com/video/341894192) +- [ ] 16. [Middleware Lecture](https://player.vimeo.com/video/341894847) +- [ ] 17. [Why the nested functions, applyMiddleware?](https://player.vimeo.com/video/341895670) +- [ ] 18. [Thunk Lecture](https://player.vimeo.com/video/341901003) +## Redux and the Rails API +- [ ] 1. [Intro to Jbuilder](readings/intro_to_jbuilder.md) +- [ ] 2. [Jbuilder Documentation](https://github.com/rails/jbuilder) +- [ ] 3. [Normalizing State Shape](https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape) +- [ ] 4. [Updating Normalized Data](https://redux.js.org/recipes/structuring-reducers/updating-normalized-data) +- [ ] 5. [Redux and Rails API Quiz](quizzes/redux_rails_api.md) +- [ ] 6. [Giphy Homework](homeworks/giphy/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/homeworks/giphy/solution.zip) +- [ ] 7. [Full-Stack Proposal Prep: Schema](../full-stack-project/homeworks/proposal-prep/schema.md) +- [ ] 8. [Redux Developer Tools](readings/redux_dev_tools.md) +- [ ] 9. [N Plus One](../sql/readings/n_plus_one.md) +- [ ] 10. [CSS Review Video](https://player.vimeo.com/video/214597789) +- [ ] 11. [jBuilder Lecture](https://player.vimeo.com/video/342109524) +- [ ] 12. [Normalized State](https://player.vimeo.com/video/342110042) +- [ ] 13. [Selectors Lecture](https://player.vimeo.com/video/342111584) +- [ ] 14. [Jbuilder](projects/jbuilder/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/jbuilder/solution.zip) +- [ ] 15. [Pokedex (Part 1)](projects/pokedex/pokedex_i.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/pokedex/solution.zip) +## Frontend Routing with React +- [ ] 1. [Intro to React Router](readings/intro_to_react_router.md) +- [ ] 2. [](readings/link.md) +- [ ] 3. [](readings/switch.md) +- [ ] 4. [withRouter](readings/with_router.md) +- [ ] 5. [](readings/redirect.md) +- [ ] 6. [Advanced Containers](readings/advanced_containers.md) +- [ ] 7. [Frontend Routing with React Quiz](quizzes/frontend_routing_react.md) +- [ ] 8. [Rainbow Routes](homeworks/rainbow_routes/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/homeworks/rainbow_routes/solution.zip) +- [ ] 9. [Full-Stack Proposal Prep: Sample State Shape](../full-stack-project/homeworks/proposal-prep/state-shape.md) +- [ ] 10. [React Router Docs](https://reacttraining.com/react-router/web/guides/quick-start) +- [ ] 11. [Frontend Routing Intro](https://player.vimeo.com/video/342316185) +- [ ] 12. [Route Wildcard Props](https://player.vimeo.com/video/342319540) +- [ ] 13. [history.push](https://player.vimeo.com/video/342319155) +- [ ] 14. [Frontend Routes with Rails](https://player.vimeo.com/video/342318480) +- [ ] 15. [Container Component ownProps & Wildcard Routes](https://player.vimeo.com/video/342316812) +- [ ] 16. [componentDidUpdate](https://player.vimeo.com/video/342319968) +- [ ] 17. [Form Redirection (history.push)](https://player.vimeo.com/video/342320552) +- [ ] 18. [Pokedex (Part 2)](projects/pokedex/pokedex_ii.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/pokedex/solution.zip) +- [ ] 19. [Pokedex (Part 3)](projects/pokedex/pokedex_iii.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/pokedex/solution.zip) +## Frontend Auth +- [ ] 1. [Frontend Auth: Intro](https://player.vimeo.com/video/210683007) +- [ ] 2. [Frontend Auth: API Authentication](https://player.vimeo.com/video/210683951) +- [ ] 3. [Frontend Auth: Frontend Auth Pattern](https://player.vimeo.com/video/210684312) +- [ ] 4. [preloadedState](readings/preloaded_state.md) +- [ ] 5. [Front End Authentication](readings/front_end_auth.md) +- [ ] 6. [Frontend Authentication Quiz](quizzes/frontend_auth.md) +- [ ] 7. [Rails Auth Prep: Auth Pattern (Part One)](readings/auth-part-i.md) +- [ ] 8. [Rails/React/Redux Configuration Checklist](readings/checklist.md) +- [ ] 9. [React Context](https://facebook.github.io/react/docs/context.html) +- [ ] 10. [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) +- [ ] 11. [Active Storage and AWS S3 Hosting Demo](../full-stack-project/resources/ActiveStorageDemo/README.md) +- [ ] 12. [Front End Authentication Project](projects/front_end_auth/README.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/front_end_auth/solution.zip) +- [ ] 13. [BenchBnB (Part 1)](projects/bench_bnb/bench_bnb_i.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/bench_bnb/solution.zip) +## Completing Bench BnB +- [ ] 1. [React Map Demo](demos/react_map_demo/README.md) +- [ ] 2. [React Hooks Demo](https://player.vimeo.com/video/338923484) +- [ ] 3. [Last Quiz](quizzes/last_quiz.md) +- [ ] 4. [Full-Stack Proposal Prep: Routes](../full-stack-project/homeworks/proposal-prep/routes.md) +- [ ] 5. [(Don't) Submit Full-Stack Project Proposal](../full-stack-project/proposal/full-stack-project-proposal.md) +- [ ] 6. [The Tech Industry is Forcing Gentrification](https://thetempest.co/2017/05/01/now-beyond/tech-money/tech-industry-gentrification/) +- [ ] 7. [How Tech Campuses Hinder Diversity and Help Gentrification](https://www.wired.com/2017/02/tech-campuses-hinder-diversity-help-gentrification/) +- [ ] 8. [Silicon Valley's Poorest Workers](https://www.theguardian.com/technology/2016/jan/28/silicon-valley-service-workers-poor-intel-tech-facebook) +- [ ] 9. [Tech in Underserved Communities: Beyond Feel Good Stories](https://modelviewculture.com/pieces/tech-in-underserved-communities-beyond-feel-good-stories) +- [ ] 10. [The Accidental Classism and Unintentional Racism Of iOS Development for Children](https://modelviewculture.com/pieces/the-accidental-classism-and-unintentional-racism-of-ios-development-for-children) +- [ ] 11. [Google Maps API Key](projects/bench_bnb/maps_api_key.md) +- [ ] 12. [BenchBnB (Part 2)](projects/bench_bnb/bench_bnb_ii.md) +- [ ] 13. [BenchBnB (Part 3)](projects/bench_bnb/bench_bnb_iii.md) +- [Solution](https://assets.aaonline.io/fullstack/react/projects/bench_bnb/solution.zip) \ No newline at end of file From b848359e2dfe2e9ffc8ad1aa31ed774ec9877abf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Rupi=C5=84ski?= Date: Thu, 8 Aug 2024 10:26:55 +0200 Subject: [PATCH 2/6] Preserve original quizzes --- react/quizzes_originals/frontend_auth.md | 59 ++++++++++ .../frontend_routing_react.md | 87 ++++++++++++++ react/quizzes_originals/last_quiz.md | 65 ++++++++++ react/quizzes_originals/middleware_thunks.md | 81 +++++++++++++ react/quizzes_originals/react_fundamentals.md | 99 ++++++++++++++++ react/quizzes_originals/redux_fundamentals.md | 111 ++++++++++++++++++ react/quizzes_originals/redux_rails_api.md | 89 ++++++++++++++ 7 files changed, 591 insertions(+) create mode 100644 react/quizzes_originals/frontend_auth.md create mode 100644 react/quizzes_originals/frontend_routing_react.md create mode 100644 react/quizzes_originals/last_quiz.md create mode 100644 react/quizzes_originals/middleware_thunks.md create mode 100644 react/quizzes_originals/react_fundamentals.md create mode 100644 react/quizzes_originals/redux_fundamentals.md create mode 100644 react/quizzes_originals/redux_rails_api.md diff --git a/react/quizzes_originals/frontend_auth.md b/react/quizzes_originals/frontend_auth.md new file mode 100644 index 0000000..6be0125 --- /dev/null +++ b/react/quizzes_originals/frontend_auth.md @@ -0,0 +1,59 @@ +# Frontend Auth Quiz + + + +

On the frontend, how would we prevent a user who isn't logged in from viewing the index page?

+ Redirect them in the controller if they're not the `current_user` + Make an AJAX request to fetch the whole site only after they log in + Have the login page sit on top of every other component, and make it invisible with CSS once they log in + Render a functional component that will conditionally render the `Index` component or a `Redirect` component depending on whether the user is logged in + To create this behavior using React, we can create a functional component that will render either the `Index` component or a `Redirect` component based on our Redux `session` slice of state having a `currentUser` or not. + + + + + +

How can we set up a `preloadedState` to know who our `current_user` is?

+ Set `current_user` on the `window` + Use `localStorage` to store `current_user` + Store the `current_user` as a data attribute in the `head` of the root route + Make an AJAX request to `fetchCurrentUser` upon entering the root route + We can do all of the above to know who our `current_user` is! + + + + + +

We must remember to manually include the form authentication token when sending form data with an AJAX request in a Rails app.

+ True + False + The form authenticity token that is included in the AJAX request is handled by the `jquery_ujs` library. `jquery_ujs` adds the CSRF token (auth token) to a header on outgoing AJAX requests. + + + +```ruby +#routes.rb + +namespace :api, defaults: {format: :json} do + resources :cats, only: [:index, :show, :create] +end +``` + +```ruby +#controllers/api/cats_controller.rb + +def show + @cat = Cat.find(params[:id]) +end +``` + + + +

Consider the above code. Which view will be rendered when the `show` route is hit?

+ `views/api/cats/show.html.erb` + `views/cats/show.html.erb` + `views/api/cats/show.json.jbuilder` + `views/cats/show.json.jbuilder` + Our `cats` resource is namespaced under `api` so rails will look for a view in the `/api/cats` folder. Because we didn't specify a view to render, rails will default to looking for a view with the same name as the controller action which is `show`. We are no longer using `html.erb` files now that we are using React! We use `json.jbuilder` to send javascript objects to our frontend so that React can use that info to render the data to the user. + + diff --git a/react/quizzes_originals/frontend_routing_react.md b/react/quizzes_originals/frontend_routing_react.md new file mode 100644 index 0000000..ec11ff1 --- /dev/null +++ b/react/quizzes_originals/frontend_routing_react.md @@ -0,0 +1,87 @@ +## Frontend Routing with React Quiz + + + +

How does the React Router determine which components to render?

+ It matches the `path` prop from `Route` components to the url + It matches the name of the component to the url + It matches the `route` prop that components receive to the url + It flips a coin + The `path` prop is compared to the browser's url and renders the component given as a prop in the `Route` component. + + + +```jsx + +
+ + + +
+ +``` + + + +

Consider this code. Given the above router, which component(s) would render when a user navigates to `/profile`?

+ App + Profile + Album + Since we don't have a `` component that wraps all of our routes, any route that matches with the current url will get rendered. In this case, both `/` and `/profile` will be matched because `/` is not an exact path and `/profile` starts with a `/`. + + + +```jsx + +
+ + + +
+ +``` + + + +

Consider the above code. Given the above router, which component(s) would render when a user navigates to `/profile`?

+ App + Profile + Album + Only the `Profile` component would render for this case because `/` is an exact path. + + + +```jsx + +
+ + + + + +
+ +``` + + + +

Consider the above code. Given the above router, which component(s) would render when a user navigates to `/profile`?

+ App + Profile + Album + Now that we have a `` component wrapping our routes, the first Route that is matched will be the only route rendered. Because `/` is not an exact path, it will get matched for `/profile` and therfore `App` will be rendered. + + + + + +

If we navigate to `/photos/5`, matching route pattern `/photos/:id`, how would we retrieve the `:id` from the URL within the corresponding `Photo` component?

+ `this.state.params.id` + `this.state.id` + `this.state.match.params.id` + `this.props.params.id` + `this.props.id` + `this.props.match.params.id` + The wildcard variables (like `:id` in this case) are accessible through `this.props.match.params` + + diff --git a/react/quizzes_originals/last_quiz.md b/react/quizzes_originals/last_quiz.md new file mode 100644 index 0000000..9d316dc --- /dev/null +++ b/react/quizzes_originals/last_quiz.md @@ -0,0 +1,65 @@ +# Last Quiz!! + + + +

Which of the following are names of Ned's cats?

+ Markov + Breakfast + Curie + Sennacy + Markov and Curie! + + + + + +

App Academy was founded in which year?

+ 1066 + 1492 + 1776 + 1906 + 2012 + 21st century company! + + + + + +

True or False?

+ True + False + Neither + Both + Truuu + + + + + +

Evaluate the following: "This statement is false."

+ True + False + ??? + WAT + + + + + +

Burritos or tacos?

+ Burritos + Tacos + California burrito all the way. + + + + + +

The `Macarena` was composed by whom?

+ Jeff Fiddler + Prince + Queen + Los Del Rio + The Fiddler sadly did not. + + diff --git a/react/quizzes_originals/middleware_thunks.md b/react/quizzes_originals/middleware_thunks.md new file mode 100644 index 0000000..e2f5b09 --- /dev/null +++ b/react/quizzes_originals/middleware_thunks.md @@ -0,0 +1,81 @@ +# Middleware And Thunks Quiz + +```js +const thunkMiddleware = ({ dispatch, getState }) => next => action => { + if (typeof action === "function") { + return dispatch(action); + } + return next(action); +}; +``` + + + +

What is wrong with the above thunk middleware?

+ thunkMiddleware should condition on `typeof action == 'object'` + thunkMiddleware should `dispatch(action)` and then return `next(action)` + thunkMiddleware should return `action(dispatch)` + thunkMiddleware's first arguments should be `({ dispatch, getState }, next)` + Thunk should pass dispatch as an argument to the action instead of the other way around. + + + + + +

Redux middleware receives action dispatches _______ the reducer.

+ Before + After + When an action is dispatched, the redux middleware in your application will determine if a side effect (or some operation) is needed before sending the action to the reducer. + + + +```js +export const createKitten = (parentId, kitten) => dispatch => + CatAPIUtil.createKitten(parentId, kitten).then(kitten => + dispatch(receiveCat(kitten)) + ); +``` + + + +

What is wrong with the above action creator?

+ Action creators should return POJOs. + There is nothing wrong with `createKitten`. + `then` needs a second argument. + Functional action creators should return a promise. + There's nothing wrong! + + + + + +

When the user clicks a button on the view layer to load an index page, what is the order in which different pieces of code are triggered?

+ Button clicked => Dispatch (Request) Action => Middleware => API => Dispatch (Response) Action => Middleware => Reducer => Component re-renders + Button clicked => Dispatch (Request) Action => Middleware => Reducer => API => Component re-renders + Button clicked => Dispatch (Response) Action => Reducer => Middleware => Reducer => + Component re-renders + When the button is clicked, the `onClick` function will get invoked. This function will dispatch the request action to fetch all the items for the index page. The middleware will see the action, then use the API to fetch that data from the backend. A response action will be dispatched with the response received from the backend. The middleware will see this action, recognize it is a POJO, and send it to the Reducer, which will update the state. The state update then triggers a re-render! + + + + + +

What is the purpose of thunks?

+ To handle asynchronous events in Redux + To allow the store to have asynchronous function calls in the reducer + To allow actions to contain functions + To allow an application to make calls to `async` functions + Thunks are action creators that allow you to make asynchronous function calls. The resulting _thunk actions_ are then intercepted by a thunk middleware that invokes the asynchronous function and dispatches a normal action to the reducers with the result. + + + + + +

What is _Redux thunk_?

+ A middleware that allows you to call action creators that return a function + A special kind of object that is dispatched whenever you want to handle asynchronous events + A function that returns an array of objects + The only function that updates state + _Redux thunk_ is a middleware that allows you to call action creators that return a function. + + diff --git a/react/quizzes_originals/react_fundamentals.md b/react/quizzes_originals/react_fundamentals.md new file mode 100644 index 0000000..a39e138 --- /dev/null +++ b/react/quizzes_originals/react_fundamentals.md @@ -0,0 +1,99 @@ +# React Fundamentals Quiz + +```jsx +
+ { contents } +
+``` + + + +

What is wrong with the above code?

+ `class` should be `className` + Extraneous spaces inside the curly braces + Semi-colons inside curly braces + `jsx` is converted to `js` code before giving it to the browser. `class` is a reserved word in javascript and therefore causes trouble once the code is in javascript. React requires using `className` to specify the html class that you want. Additionally, the semi colons cause trouble when converting the `jsx` into javascript because it signifies the completion of a line in javascript. + + + + + +

Which of the following methods are required for any React component?

+ `constructor` + `componentDidMount` + `render` + `constructor` and `componentDidMount` are inherited and therfore don't need to be explicitly written in any React component we create. `render` is required because the React component needs to return _something_ that will converted to javascript and sent to the browser to render. + + + +```jsx +class DuckDuckGoose extends React.Component { + constructor(props) { + super(props); + this.state = { numDucks: 0, numGeese: 0 }; + } + + duckClick(event) { + event.preventDefault(); + this.state.numDucks += 1; + } + + gooseClick(event) { + event.preventDefault(); + this.state.numGeese += 1; + } + + render() { + return ( +
+ + +
+ ); + } +} +``` + + + +

What is wrong with the above code?

+ There should be separate components for `Duck` and `Goose` + The buttons need to have different `className`s + State is being set incorrectly in the click handlers and `this` is not bound + properly + There cannot be two buttons with different click handlers nested in the same + div + the `onClick` attributes need to be `this.duckClick()` and `this.gooseClick()` + The context of `this` in the `duckClick` and `gooseClick` methods will be the `window` when the methods are invoked. We want the context of `this` to be component itself so that we can access the local state and update it correctly. To do this, we need to bind the context of `this` so that it will be correct in our methods. + + + +```jsx +const CommentBlurb = ({ body, date, handleClick }) => ( +
+
{body}
+
{date}
+
+); + +const LikeCounter = ({ numLikes, handleClick }) => { +
+
{numLikes}
+
; +}; +``` + + + +

Consider the above functional components. Will both these components render correctly?

+ Yes + `LikeCounter` will not render correctly because it will not implicitly return + `CommentBlurb` will not render correctly because it is returning a single node + Neither will render correctly because they have no `render` method + To implicitly return with a fat arrow function we need parenthesis around the code that comes after the fat arrow (`=>`). If we wrap the code in curly braces, like in `LikeCounter`, we do not get an implicit return We would need to explicity return (`return ()`) for our component to return anything. + + diff --git a/react/quizzes_originals/redux_fundamentals.md b/react/quizzes_originals/redux_fundamentals.md new file mode 100644 index 0000000..80cc8f3 --- /dev/null +++ b/react/quizzes_originals/redux_fundamentals.md @@ -0,0 +1,111 @@ +# Redux Fundamentals Quiz + + + +

A React component's `#render` method will be invoked whenever:

+ The component's state changes + The component's props change + The component's parent re-renders + All three will trigger `render` for the component! + + + +```js +function UserReducer(oldState = {}, action) { + switch (action.type) { + case "LOGIN": + return action.user; + case "LOGOUT": + return {}; + case "UPDATE_FRIENDS": + oldState.friends = action.friends; + return oldState; + default: + return oldState; + } +} +``` + + + +

What is wrong with the above reducer?

+ It does not return the default state when invoked the first time. + It mutates the old state. + It does not return the oldState when passed irrelevant actions. + It does not `switch` on the correct property. + Reducers should **never mutate** old state. If a slice of state in a reducer is going to be updated then that reducer should return an entirely new object. + + + + + +

The `connect` function connects which two entities?

+ React components and the store + React components and action-creators + The store and action-creators + The store and api endpoints + Api endpoints and action-creators + `connect` connects the store to our React component! + + + + + +

The purpose of the provider is to:

+ Provide customer support by calling a toll-free hotline + Provide action-creators to the store with + Provide the store to the component hierarchy + Provide api endpoints to the store + `Provider` gives the component hirearchy access to the Redux store we create. + + + + + +

How does a React component gain access to the state?

+ The container component connects the component to the store, passing select pieces of the state as props to the component + `connect` takes the store as an argument and curries it along to the component + The store must be explicitly passed down from parent component to child component until it reaches its destination, where it can be used + We need to connect the React component to the store in the container for the component to have access to the state! + + + +```js +// frontend/actions/cats_actions.js +export const RECEIVE_CATS = "RECEIVE_CATS"; +export const REQUEST_CATS = "REQUEST_CATS"; + +//... +``` + + + +

The file above exports multiple objects. How would you import `RECEIVE_CATS` and `REQUEST_CATS` in another file?

+ ```import RECEIVE_CATS from '../actions/cats_actions'; + import REQUEST_CATS from '../actions/cats_actions';``` + `import * as CatActions from '../actions/cats_actions';` + `import { RECEIVE_CATS, REQUEST_CATS } from '../actions/cats_actions';` + `import RECEIVE_CATS, REQUEST_CATS from '../actions/cats_actions';` + Because `RECEIVE_CATS` AND `REQUEST_CATS` are exported individually from the `cat_actions.js`, we can either import all of the things exported from `cats_actions.js` (`import * as CatActions from '../actions/cats_actions';`) or we can destructure to explicity pull out the items we want to import by running (`import { RECEIVE_CATS, REQUEST_CATS } from '../actions/cats_actions';`) + + + +```js +// frontend/reducers/cats_reducer.js +const cats = (state = {}, action) => { + //... +}; + +export default cats; +``` + + + +

Above is a file that exports one object. How could you import `cats` in another file?

+ `import * as CatReducer from './cats';` + `import cats from './cats';` + `import { cats } from './cats';` + `import from './cats'` + When we export a single object using `export default` we just need to name the object we are importing - no destruturing by running `import cats from './cats';` + + diff --git a/react/quizzes_originals/redux_rails_api.md b/react/quizzes_originals/redux_rails_api.md new file mode 100644 index 0000000..58212d0 --- /dev/null +++ b/react/quizzes_originals/redux_rails_api.md @@ -0,0 +1,89 @@ +# Redux And Rails API + + + +

Which of the following can you **not** do in a Jbuilder template?

+ Access Rails helper methods + Access view partials + Use JavaScript code + Automate generation of nested JSON objects + Access instance variables from the controller + Use Ruby code + Can't use JavaScript! Jbuilder runs in Rails land, which is a Ruby environment. + + + + + +

Jbuilder produces which of the following?

+ JSON + XML + HTML + JavaScript Object Notation! + + + +```ruby + # @notes == [{body: "get groceries", author: "claire"}, ...] + + json.array! @notes do |note| + json.body note.body + json.author note.author + end +``` + + + +

What does the above Jbuilder code return?

+ `{ "notes": ["get groceries", "claire"], ... }` + `[{ "body": "get groceries", "author": "claire"}, ...]` + `[["get groceries", "claire"], ...]` + `{ "body": ["get groceries", ...], "author": ["claire", ...]}` + `json.array!` is going to create an empty array. Each `note` will be then turned into a POJO and stored as an element in the returned array. + + + +```ruby + # I. + json.author @author, :name, :language + + # II. + json.author do + :name, :language + end + + # III. + json.author do + json.name + json.language + end + + # IV. + json.author do + @author :name, :bibliography + end +``` + + + +

Suppose you have an `authors` table with columns for `name` and `language`. You want to create JSON formatted like the following: `{"author": {"name": "JK Rowling", "language": "English"}, ... }`. + Which of the above will correctly format your JSON?

+ I + I & II + II & III + II & IV + IV + Only option `I` will give you the format you want! + + + + + +

What purpose does Jbuilder serve?

+ Converting JSON to plain old JavaScript objects and back again + Allowing you to control which attributes and objects you want to build into JSON structures + Parsing database results into instances of the corresponding Rails models + Constructing and formatting the data object to be sent within an AJAX request + Jbuilder makes it easy for you to both select and structure the information you want to send in a JSON response! + + From 7d3c3dcd0ea70fd763b98694442f1204b825b53d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Rupi=C5=84ski?= Date: Thu, 8 Aug 2024 11:13:45 +0200 Subject: [PATCH 3/6] Fix quizzes for Github --- react/quizzes/frontend_auth.md | 91 +++++++------ react/quizzes/frontend_routing_react.md | 112 ++++++++-------- react/quizzes/last_quiz.md | 104 +++++++-------- react/quizzes/middleware_thunks.md | 136 +++++++++++--------- react/quizzes/react_fundamentals.md | 89 +++++++------ react/quizzes/redux_fundamentals.md | 163 +++++++++++++----------- react/quizzes/redux_rails_api.md | 120 +++++++++-------- 7 files changed, 435 insertions(+), 380 deletions(-) diff --git a/react/quizzes/frontend_auth.md b/react/quizzes/frontend_auth.md index 6be0125..7426fc3 100644 --- a/react/quizzes/frontend_auth.md +++ b/react/quizzes/frontend_auth.md @@ -1,35 +1,44 @@ # Frontend Auth Quiz - - -

On the frontend, how would we prevent a user who isn't logged in from viewing the index page?

- Redirect them in the controller if they're not the `current_user` - Make an AJAX request to fetch the whole site only after they log in - Have the login page sit on top of every other component, and make it invisible with CSS once they log in - Render a functional component that will conditionally render the `Index` component or a `Redirect` component depending on whether the user is logged in - To create this behavior using React, we can create a functional component that will render either the `Index` component or a `Redirect` component based on our Redux `session` slice of state having a `currentUser` or not. - - - - - -

How can we set up a `preloadedState` to know who our `current_user` is?

- Set `current_user` on the `window` - Use `localStorage` to store `current_user` - Store the `current_user` as a data attribute in the `head` of the root route - Make an AJAX request to `fetchCurrentUser` upon entering the root route - We can do all of the above to know who our `current_user` is! - - - - - -

We must remember to manually include the form authentication token when sending form data with an AJAX request in a Rails app.

- True - False - The form authenticity token that is included in the AJAX request is handled by the `jquery_ujs` library. `jquery_ujs` adds the CSRF token (auth token) to a header on outgoing AJAX requests. - - +On the frontend, how would we prevent a user who isn't logged in from viewing the index page? +- [ ] Redirect them in the controller if they're not the `current_user` +- [ ] Make an AJAX request to fetch the whole site only after they log in +- [ ] Have the login page sit on top of every other component, and make it invisible with CSS once they log in +- [ ] Render a functional component that will conditionally render the `Index` component or a `Redirect` component depending on whether the user is logged in + +
Answer: + +Render a functional component that will conditionally render the `Index` component or a `Redirect` component depending on whether the user is logged in
+
Explanation: + +To create this behavior using React, we can create a functional component that will render either the `Index` component or a `Redirect` component based on our Redux `session` slice of state having a `currentUser` or not.
+ +How can we set up a `preloadedState` to know who our `current_user` is? +- [ ] Set `current_user` on the `window` +- [ ] Use `localStorage` to store `current_user` +- [ ] Store the `current_user` as a data attribute in the `head` of the root route +- [ ] Make an AJAX request to `fetchCurrentUser` upon entering the root route + +
Answer: + +- Set `current_user` on the `window` +- Use `localStorage` to store `current_user` +- Store the `current_user` as a data attribute in the `head` of the root route +- Make an AJAX request to `fetchCurrentUser` upon entering the root route
+
Explanation: + +We can do all of the above to know who our `current_user` is!
+ +We must remember to manually include the form authentication token when sending form data with an AJAX request in a Rails app. +- [ ] True +- [ ] False + +
Answer: + +False
+
Explanation: + +The form authenticity token that is included in the AJAX request is handled by the `jquery_ujs` library. `jquery_ujs` adds the CSRF token (auth token) to a header on outgoing AJAX requests.
```ruby #routes.rb @@ -47,13 +56,15 @@ def show end ``` - - -

Consider the above code. Which view will be rendered when the `show` route is hit?

- `views/api/cats/show.html.erb` - `views/cats/show.html.erb` - `views/api/cats/show.json.jbuilder` - `views/cats/show.json.jbuilder` - Our `cats` resource is namespaced under `api` so rails will look for a view in the `/api/cats` folder. Because we didn't specify a view to render, rails will default to looking for a view with the same name as the controller action which is `show`. We are no longer using `html.erb` files now that we are using React! We use `json.jbuilder` to send javascript objects to our frontend so that React can use that info to render the data to the user. - - +Consider the above code. Which view will be rendered when the `show` route is hit? +- [ ] `views/api/cats/show.html.erb` +- [ ] `views/cats/show.html.erb` +- [ ] `views/api/cats/show.json.jbuilder` +- [ ] `views/cats/show.json.jbuilder` + +
Answer: + +`views/api/cats/show.json.jbuilder`
+
Explanation: + +Our `cats` resource is namespaced under `api` so rails will look for a view in the `/api/cats` folder. Because we didn't specify a view to render, rails will default to looking for a view with the same name as the controller action which is `show`. We are no longer using `html.erb` files now that we are using React! We use `json.jbuilder` to send javascript objects to our frontend so that React can use that info to render the data to the user.
diff --git a/react/quizzes/frontend_routing_react.md b/react/quizzes/frontend_routing_react.md index ec11ff1..c82b0e4 100644 --- a/react/quizzes/frontend_routing_react.md +++ b/react/quizzes/frontend_routing_react.md @@ -1,15 +1,18 @@ ## Frontend Routing with React Quiz - - -

How does the React Router determine which components to render?

- It matches the `path` prop from `Route` components to the url - It matches the name of the component to the url - It matches the `route` prop that components receive to the url - It flips a coin - The `path` prop is compared to the browser's url and renders the component given as a prop in the `Route` component. - - +How does the React Router determine which components to render? +- [ ] It matches the `path` prop from `Route` components to the url +- [ ] It matches the name of the component to the url +- [ ] It matches the `route` prop that components receive to the url +- [ ] It flips a coin + +
Answer: + +It matches the `path` prop from `Route` components to the url
+ +
Explanation: + +The `path` prop is compared to the browser's url and renders the component given as a prop in the `Route` component.
```jsx @@ -21,15 +24,18 @@ ``` - - -

Consider this code. Given the above router, which component(s) would render when a user navigates to `/profile`?

- App - Profile - Album - Since we don't have a `` component that wraps all of our routes, any route that matches with the current url will get rendered. In this case, both `/` and `/profile` will be matched because `/` is not an exact path and `/profile` starts with a `/`. - - +Consider this code. Given the above router, which component(s) would render when a user navigates to `/profile`? +- [ ] App +- [ ] Profile +- [ ] Album + +
Answer: + +- App +- Profile
+
Explanation: + +Since we don't have a `` component that wraps all of our routes, any route that matches with the current url will get rendered. In this case, both `/` and `/profile` will be matched because `/` is not an exact path and `/profile` starts with a `/`.
```jsx @@ -41,15 +47,17 @@ ``` - - -

Consider the above code. Given the above router, which component(s) would render when a user navigates to `/profile`?

- App - Profile - Album - Only the `Profile` component would render for this case because `/` is an exact path. - - +Consider the above code. Given the above router, which component(s) would render when a user navigates to `/profile`? +- [ ] App +- [ ] Profile +- [ ] Album + +
Answer: + +Profile
+
Explanation: + +Only the `Profile` component would render for this case because `/` is an exact path.
```jsx @@ -63,25 +71,29 @@ ``` - - -

Consider the above code. Given the above router, which component(s) would render when a user navigates to `/profile`?

- App - Profile - Album - Now that we have a `` component wrapping our routes, the first Route that is matched will be the only route rendered. Because `/` is not an exact path, it will get matched for `/profile` and therfore `App` will be rendered. - - - - - -

If we navigate to `/photos/5`, matching route pattern `/photos/:id`, how would we retrieve the `:id` from the URL within the corresponding `Photo` component?

- `this.state.params.id` - `this.state.id` - `this.state.match.params.id` - `this.props.params.id` - `this.props.id` - `this.props.match.params.id` - The wildcard variables (like `:id` in this case) are accessible through `this.props.match.params` - - +Consider the above code. Given the above router, which component(s) would render when a user navigates to `/profile`? +- [ ] App +- [ ] Profile +- [ ] Album + +
Answer: + +App
+
Explanation: + +Now that we have a `` component wrapping our routes, the first Route that is matched will be the only route rendered. Because `/` is not an exact path, it will get matched for `/profile` and therfore `App` will be rendered.
+ +If we navigate to `/photos/5`, matching route pattern `/photos/:id`, how would we retrieve the `:id` from the URL within the corresponding `Photo` component? +- [ ] `this.state.params.id` +- [ ] `this.state.id` +- [ ] `this.state.match.params.id` +- [ ] `this.props.params.id` +- [ ] `this.props.id` +- [ ] `this.props.match.params.id` + +
Answer: + +`this.props.match.params.id`
+
Explanation: + +The wildcard variables (like `:id` in this case) are accessible through `this.props.match.params`
diff --git a/react/quizzes/last_quiz.md b/react/quizzes/last_quiz.md index 9d316dc..35f7e0a 100644 --- a/react/quizzes/last_quiz.md +++ b/react/quizzes/last_quiz.md @@ -1,65 +1,53 @@ # Last Quiz!! - - -

Which of the following are names of Ned's cats?

- Markov - Breakfast - Curie - Sennacy - Markov and Curie! - - +Which of the following are names of Ned's cats?

+- [ ] Markov +- [ ] Breakfast +- [ ] Curie +- [ ] Sennacy +
Explanation: - - -

App Academy was founded in which year?

- 1066 - 1492 - 1776 - 1906 - 2012 - 21st century company! - - +Markov and Curie!
- - -

True or False?

- True - False - Neither - Both - Truuu - - +App Academy was founded in which year?

+- [ ] 1066 +- [ ] 1492 +- [ ] 1776 +- [ ] 1906 +- [ ] 2012 +
Explanation: - - -

Evaluate the following: "This statement is false."

- True - False - ??? - WAT - - +21st century company!
- - -

Burritos or tacos?

- Burritos - Tacos - California burrito all the way. - - +True or False?

+- [ ] True +- [ ] False +- [ ] Neither +- [ ] Both +
Explanation: - - -

The `Macarena` was composed by whom?

- Jeff Fiddler - Prince - Queen - Los Del Rio - The Fiddler sadly did not. - - +Truuu
+ +Evaluate the following: "This statement is false."

+- [ ] True +- [ ] False +- [ ] ??? +
Explanation: + +WAT
+ +Burritos or tacos?

+- [ ] Burritos +- [ ] Tacos +
Explanation: + +California burrito all the way.
+ +The `Macarena` was composed by whom?

+- [ ] Jeff Fiddler +- [ ] Prince +- [ ] Queen +- [ ] Los Del Rio +
Explanation: + +The Fiddler sadly did not.
diff --git a/react/quizzes/middleware_thunks.md b/react/quizzes/middleware_thunks.md index e2f5b09..41af2e7 100644 --- a/react/quizzes/middleware_thunks.md +++ b/react/quizzes/middleware_thunks.md @@ -9,25 +9,29 @@ const thunkMiddleware = ({ dispatch, getState }) => next => action => { }; ``` - - -

What is wrong with the above thunk middleware?

- thunkMiddleware should condition on `typeof action == 'object'` - thunkMiddleware should `dispatch(action)` and then return `next(action)` - thunkMiddleware should return `action(dispatch)` - thunkMiddleware's first arguments should be `({ dispatch, getState }, next)` - Thunk should pass dispatch as an argument to the action instead of the other way around. - - - - - -

Redux middleware receives action dispatches _______ the reducer.

- Before - After - When an action is dispatched, the redux middleware in your application will determine if a side effect (or some operation) is needed before sending the action to the reducer. - - +What is wrong with the above thunk middleware? +- [ ] thunkMiddleware should condition on `typeof action == 'object'` +- [ ] thunkMiddleware should `dispatch(action)` and then return `next(action)` +- [ ] thunkMiddleware should return `action(dispatch)` +- [ ] thunkMiddleware's first arguments should be `({ dispatch, getState }, next)` + +
Answer: + +thunkMiddleware should return `action(dispatch)`
+
Explanation: + +Thunk should pass dispatch as an argument to the action instead of the other way around.
+ +Redux middleware receives action dispatches _______ the reducer. +- [ ] Before +- [ ] After + +
Answer: + +Before
+
Explanation: + +When an action is dispatched, the redux middleware in your application will determine if a side effect (or some operation) is needed before sending the action to the reducer.
```js export const createKitten = (parentId, kitten) => dispatch => @@ -36,46 +40,54 @@ export const createKitten = (parentId, kitten) => dispatch => ); ``` - - -

What is wrong with the above action creator?

- Action creators should return POJOs. - There is nothing wrong with `createKitten`. - `then` needs a second argument. - Functional action creators should return a promise. - There's nothing wrong! - - - - - -

When the user clicks a button on the view layer to load an index page, what is the order in which different pieces of code are triggered?

- Button clicked => Dispatch (Request) Action => Middleware => API => Dispatch (Response) Action => Middleware => Reducer => Component re-renders - Button clicked => Dispatch (Request) Action => Middleware => Reducer => API => Component re-renders - Button clicked => Dispatch (Response) Action => Reducer => Middleware => Reducer => - Component re-renders - When the button is clicked, the `onClick` function will get invoked. This function will dispatch the request action to fetch all the items for the index page. The middleware will see the action, then use the API to fetch that data from the backend. A response action will be dispatched with the response received from the backend. The middleware will see this action, recognize it is a POJO, and send it to the Reducer, which will update the state. The state update then triggers a re-render! - - - - - -

What is the purpose of thunks?

- To handle asynchronous events in Redux - To allow the store to have asynchronous function calls in the reducer - To allow actions to contain functions - To allow an application to make calls to `async` functions - Thunks are action creators that allow you to make asynchronous function calls. The resulting _thunk actions_ are then intercepted by a thunk middleware that invokes the asynchronous function and dispatches a normal action to the reducers with the result. - - - - - -

What is _Redux thunk_?

- A middleware that allows you to call action creators that return a function - A special kind of object that is dispatched whenever you want to handle asynchronous events - A function that returns an array of objects - The only function that updates state - _Redux thunk_ is a middleware that allows you to call action creators that return a function. - - +What is wrong with the above action creator? +- [ ] Action creators should return POJOs. +- [ ] There is nothing wrong with `createKitten`. +- [ ] `then` needs a second argument. +- [ ] Functional action creators should return a promise. + +
Answer: + +There is nothing wrong with `createKitten`.
+
Explanation: + +There's nothing wrong!
+ +When the user clicks a button on the view layer to load an index page, what is the order in which different pieces of code are triggered? +- [ ] Button clicked => Dispatch (Request) Action => Middleware => API => Dispatch (Response) Action => Middleware => Reducer => Component re-renders +- [ ] Button clicked => Dispatch (Request) Action => Middleware => Reducer => API => Component re-renders +- [ ] Button clicked => Dispatch (Response) Action => Reducer => Middleware => Reducer => + Component re-renders + +
Answer: + +Button clicked => Dispatch (Request) Action => Middleware => API => Dispatch (Response) Action => Middleware => Reducer => Component re-renders
+
Explanation: + +When the button is clicked, the `onClick` function will get invoked. This function will dispatch the request action to fetch all the items for the index page. The middleware will see the action, then use the API to fetch that data from the backend. A response action will be dispatched with the response received from the backend. The middleware will see this action, recognize it is a POJO, and send it to the Reducer, which will update the state. The state update then triggers a re-render!
+ +What is the purpose of thunks? +- [ ] To handle asynchronous events in Redux +- [ ] To allow the store to have asynchronous function calls in the reducer +- [ ] To allow actions to contain functions +- [ ] To allow an application to make calls to `async` functions + +
Answer: + +To handle asynchronous events in Redux
+
Explanation: + +Thunks are action creators that allow you to make asynchronous function calls. The resulting _thunk actions_ are then intercepted by a thunk middleware that invokes the asynchronous function and dispatches a normal action to the reducers with the result.
+ +What is _Redux thunk_? +- [ ] A middleware that allows you to call action creators that return a function +- [ ] A special kind of object that is dispatched whenever you want to handle asynchronous events +- [ ] A function that returns an array of objects +- [ ] The only function that updates state + +
Answer: + +A middleware that allows you to call action creators that return a function
+
Explanation: + +_Redux thunk_ is a middleware that allows you to call action creators that return a function.
diff --git a/react/quizzes/react_fundamentals.md b/react/quizzes/react_fundamentals.md index a39e138..d708dcb 100644 --- a/react/quizzes/react_fundamentals.md +++ b/react/quizzes/react_fundamentals.md @@ -6,26 +6,29 @@ ``` - - -

What is wrong with the above code?

- `class` should be `className` - Extraneous spaces inside the curly braces - Semi-colons inside curly braces - `jsx` is converted to `js` code before giving it to the browser. `class` is a reserved word in javascript and therefore causes trouble once the code is in javascript. React requires using `className` to specify the html class that you want. Additionally, the semi colons cause trouble when converting the `jsx` into javascript because it signifies the completion of a line in javascript. - - - - - -

Which of the following methods are required for any React component?

- `constructor` - `componentDidMount` - `render` - `constructor` and `componentDidMount` are inherited and therfore don't need to be explicitly written in any React component we create. `render` is required because the React component needs to return _something_ that will converted to javascript and sent to the browser to render. - - +What is wrong with the above code? +- [ ] `class` should be `className` +- [ ] Extraneous spaces inside the curly braces +- [ ] Semi-colons inside curly braces +
Answer: + +- `class` should be `className` +- Semi-colons inside curly braces
+
Explanation: + +`jsx` is converted to `js` code before giving it to the browser. `class` is a reserved word in javascript and therefore causes trouble once the code is in javascript. React requires using `className` to specify the html class that you want. Additionally, the semi colons cause trouble when converting the `jsx` into javascript because it signifies the completion of a line in javascript.
+Which of the following methods are required for any React component? +- [ ] `constructor` +- [ ] `componentDidMount` +- [ ] `render` + +
Answer: + +`render`
+
Explanation: + +`constructor` and `componentDidMount` are inherited and therfore don't need to be explicitly written in any React component we create. `render` is required because the React component needs to return _something_ that will converted to javascript and sent to the browser to render.
```jsx class DuckDuckGoose extends React.Component { constructor(props) { @@ -58,20 +61,20 @@ class DuckDuckGoose extends React.Component { } ``` - - -

What is wrong with the above code?

- There should be separate components for `Duck` and `Goose` - The buttons need to have different `className`s - State is being set incorrectly in the click handlers and `this` is not bound - properly - There cannot be two buttons with different click handlers nested in the same - div - the `onClick` attributes need to be `this.duckClick()` and `this.gooseClick()` - The context of `this` in the `duckClick` and `gooseClick` methods will be the `window` when the methods are invoked. We want the context of `this` to be component itself so that we can access the local state and update it correctly. To do this, we need to bind the context of `this` so that it will be correct in our methods. - - +What is wrong with the above code? +- [ ] There should be separate components for `Duck` and `Goose` +- [ ] The buttons need to have different `className`s +- [ ] State is being set incorrectly in the click handlers and `this` is not bound properly +- [ ] There cannot be two buttons with different click handlers nested in the same + div +- [ ] the `onClick` attributes need to be `this.duckClick()` and `this.gooseClick()` +
Answer: + +State is being set incorrectly in the click handlers and `this` is not bound properly
+
Explanation: + +The context of `this` in the `duckClick` and `gooseClick` methods will be the `window` when the methods are invoked. We want the context of `this` to be component itself so that we can access the local state and update it correctly. To do this, we need to bind the context of `this` so that it will be correct in our methods.
```jsx const CommentBlurb = ({ body, date, handleClick }) => (
@@ -87,13 +90,15 @@ const LikeCounter = ({ numLikes, handleClick }) => { }; ``` - - -

Consider the above functional components. Will both these components render correctly?

- Yes - `LikeCounter` will not render correctly because it will not implicitly return - `CommentBlurb` will not render correctly because it is returning a single node - Neither will render correctly because they have no `render` method - To implicitly return with a fat arrow function we need parenthesis around the code that comes after the fat arrow (`=>`). If we wrap the code in curly braces, like in `LikeCounter`, we do not get an implicit return We would need to explicity return (`return ()`) for our component to return anything. - - +Consider the above functional components. Will both these components render correctly? +- [ ] Yes +- [ ] `LikeCounter` will not render correctly because it will not implicitly return +- [ ] `CommentBlurb` will not render correctly because it is returning a single node +- [ ] Neither will render correctly because they have no `render` method + +
Answer: + +`LikeCounter` will not render correctly because it will not implicitly return
+
Explanation:
+ +To implicitly return with a fat arrow function we need parenthesis around the code that comes after the fat arrow (`=>`). If we wrap the code in curly braces, like in `LikeCounter`, we do not get an implicit return We would need to explicity return (`return ()`) for our component to return anything. \ No newline at end of file diff --git a/react/quizzes/redux_fundamentals.md b/react/quizzes/redux_fundamentals.md index 80cc8f3..4c67a24 100644 --- a/react/quizzes/redux_fundamentals.md +++ b/react/quizzes/redux_fundamentals.md @@ -1,14 +1,18 @@ # Redux Fundamentals Quiz - - -

A React component's `#render` method will be invoked whenever:

- The component's state changes - The component's props change - The component's parent re-renders - All three will trigger `render` for the component! - - +A React component's `#render` method will be invoked whenever: +- [ ] The component's state changes +- [ ] The component's props change +- [ ] The component's parent re-renders + +
Answer: + +- The component's state changes +- The component's props change +- The component's parent re-renders
+
Explanation: + +All three will trigger `render` for the component!
```js function UserReducer(oldState = {}, action) { @@ -26,49 +30,57 @@ function UserReducer(oldState = {}, action) { } ``` - - -

What is wrong with the above reducer?

- It does not return the default state when invoked the first time. - It mutates the old state. - It does not return the oldState when passed irrelevant actions. - It does not `switch` on the correct property. - Reducers should **never mutate** old state. If a slice of state in a reducer is going to be updated then that reducer should return an entirely new object. - - - - - -

The `connect` function connects which two entities?

- React components and the store - React components and action-creators - The store and action-creators - The store and api endpoints - Api endpoints and action-creators - `connect` connects the store to our React component! - - - - - -

The purpose of the provider is to:

- Provide customer support by calling a toll-free hotline - Provide action-creators to the store with - Provide the store to the component hierarchy - Provide api endpoints to the store - `Provider` gives the component hirearchy access to the Redux store we create. - - - - - -

How does a React component gain access to the state?

- The container component connects the component to the store, passing select pieces of the state as props to the component - `connect` takes the store as an argument and curries it along to the component - The store must be explicitly passed down from parent component to child component until it reaches its destination, where it can be used - We need to connect the React component to the store in the container for the component to have access to the state! - - +What is wrong with the above reducer? +- [ ] It does not return the default state when invoked the first time. +- [ ] It mutates the old state. +- [ ] It does not return the oldState when passed irrelevant actions. +- [ ] It does not `switch` on the correct property. + +
Answer: + +It mutates the old state.
+
Explanation: + +Reducers should **never mutate** old state. If a slice of state in a reducer is going to be updated then that reducer should return an entirely new object.
+ +The `connect` function connects which two entities? +- [ ] React components and the store +- [ ] React components and action-creators +- [ ] The store and action-creators +- [ ] The store and api endpoints +- [ ] Api endpoints and action-creators + +
Answer: + +React components and the store
+
Explanation: + +`connect` connects the store to our React component!
+ +The purpose of the provider is to: +- [ ] Provide customer support by calling a toll-free hotline +- [ ] Provide action-creators to the store with +- [ ] Provide the store to the component hierarchy +- [ ] Provide api endpoints to the store + +
Answer: + +Provide the store to the component hierarchy
+
Explanation: + +`Provider` gives the component hirearchy access to the Redux store we create.
+ +How does a React component gain access to the state? +- [ ] The container component connects the component to the store, passing select pieces of the state as props to the component +- [ ] `connect` takes the store as an argument and curries it along to the component +- [ ] The store must be explicitly passed down from parent component to child component until it reaches its destination, where it can be used + +
Answer: + +The container component connects the component to the store, passing select pieces of the state as props to the component
+
Explanation: + +We need to connect the React component to the store in the container for the component to have access to the state!
```js // frontend/actions/cats_actions.js @@ -78,17 +90,20 @@ export const REQUEST_CATS = "REQUEST_CATS"; //... ``` - - -

The file above exports multiple objects. How would you import `RECEIVE_CATS` and `REQUEST_CATS` in another file?

- ```import RECEIVE_CATS from '../actions/cats_actions'; - import REQUEST_CATS from '../actions/cats_actions';``` - `import * as CatActions from '../actions/cats_actions';` - `import { RECEIVE_CATS, REQUEST_CATS } from '../actions/cats_actions';` - `import RECEIVE_CATS, REQUEST_CATS from '../actions/cats_actions';` - Because `RECEIVE_CATS` AND `REQUEST_CATS` are exported individually from the `cat_actions.js`, we can either import all of the things exported from `cats_actions.js` (`import * as CatActions from '../actions/cats_actions';`) or we can destructure to explicity pull out the items we want to import by running (`import { RECEIVE_CATS, REQUEST_CATS } from '../actions/cats_actions';`) - - +The file above exports multiple objects. How would you import `RECEIVE_CATS` and `REQUEST_CATS` in another file? +- [ ] ```import RECEIVE_CATS from '../actions/cats_actions'; + import REQUEST_CATS from '../actions/cats_actions';``` +- [ ] `import * as CatActions from '../actions/cats_actions';` +- [ ] `import { RECEIVE_CATS, REQUEST_CATS } from '../actions/cats_actions';` +- [ ] `import RECEIVE_CATS, REQUEST_CATS from '../actions/cats_actions';` + +
Answer: + +- `import * as CatActions from '../actions/cats_actions';` +- `import { RECEIVE_CATS, REQUEST_CATS } from '../actions/cats_actions';`
+
Explanation: + +Because `RECEIVE_CATS` AND `REQUEST_CATS` are exported individually from the `cat_actions.js`, we can either import all of the things exported from `cats_actions.js` (`import * as CatActions from '../actions/cats_actions';`) or we can destructure to explicity pull out the items we want to import by running (`import { RECEIVE_CATS, REQUEST_CATS } from '../actions/cats_actions';`)
```js // frontend/reducers/cats_reducer.js @@ -99,13 +114,15 @@ const cats = (state = {}, action) => { export default cats; ``` - - -

Above is a file that exports one object. How could you import `cats` in another file?

- `import * as CatReducer from './cats';` - `import cats from './cats';` - `import { cats } from './cats';` - `import from './cats'` - When we export a single object using `export default` we just need to name the object we are importing - no destruturing by running `import cats from './cats';` - - +Above is a file that exports one object. How could you import `cats` in another file? +- [ ] `import * as CatReducer from './cats';` +- [ ] `import cats from './cats';` +- [ ] `import { cats } from './cats';` +- [ ] `import from './cats'` + +
Answer: + +`import cats from './cats';`
+
Explanation: + +When we export a single object using `export default` we just need to name the object we are importing - no destruturing by running `import cats from './cats';`
diff --git a/react/quizzes/redux_rails_api.md b/react/quizzes/redux_rails_api.md index 58212d0..e54c707 100644 --- a/react/quizzes/redux_rails_api.md +++ b/react/quizzes/redux_rails_api.md @@ -1,27 +1,31 @@ # Redux And Rails API - - -

Which of the following can you **not** do in a Jbuilder template?

- Access Rails helper methods - Access view partials - Use JavaScript code - Automate generation of nested JSON objects - Access instance variables from the controller - Use Ruby code - Can't use JavaScript! Jbuilder runs in Rails land, which is a Ruby environment. - - - - - -

Jbuilder produces which of the following?

- JSON - XML - HTML - JavaScript Object Notation! - - +Which of the following can you **not** do in a Jbuilder template? +- [ ] Access Rails helper methods +- [ ] Access view partials +- [ ] Use JavaScript code +- [ ] Automate generation of nested JSON objects +- [ ] Access instance variables from the controller +- [ ] Use Ruby code + +
Answer: + +Use JavaScript code
+
Explanation: + +Can't use JavaScript! Jbuilder runs in Rails land, which is a Ruby environment.
+ +Jbuilder produces which of the following? +- [ ] JSON +- [ ] XML +- [ ] HTML + +
Answer: + +JSON
+
Explanation: + +JavaScript Object Notation!
```ruby # @notes == [{body: "get groceries", author: "claire"}, ...] @@ -32,16 +36,18 @@ end ``` - - -

What does the above Jbuilder code return?

- `{ "notes": ["get groceries", "claire"], ... }` - `[{ "body": "get groceries", "author": "claire"}, ...]` - `[["get groceries", "claire"], ...]` - `{ "body": ["get groceries", ...], "author": ["claire", ...]}` - `json.array!` is going to create an empty array. Each `note` will be then turned into a POJO and stored as an element in the returned array. - - +What does the above Jbuilder code return? +- [ ] `{ "notes": ["get groceries", "claire"], ... }` +- [ ] `[{ "body": "get groceries", "author": "claire"}, ...]` +- [ ] `[["get groceries", "claire"], ...]` +- [ ] `{ "body": ["get groceries", ...], "author": ["claire", ...]}` + +
Answer: + +`[{ "body": "get groceries", "author": "claire"}, ...]`
+
Explanation: + +`json.array!` is going to create an empty array. Each `note` will be then turned into a POJO and stored as an element in the returned array.
```ruby # I. @@ -64,26 +70,30 @@ end ``` - - -

Suppose you have an `authors` table with columns for `name` and `language`. You want to create JSON formatted like the following: `{"author": {"name": "JK Rowling", "language": "English"}, ... }`. - Which of the above will correctly format your JSON?

- I - I & II - II & III - II & IV - IV - Only option `I` will give you the format you want! - - - - - -

What purpose does Jbuilder serve?

- Converting JSON to plain old JavaScript objects and back again - Allowing you to control which attributes and objects you want to build into JSON structures - Parsing database results into instances of the corresponding Rails models - Constructing and formatting the data object to be sent within an AJAX request - Jbuilder makes it easy for you to both select and structure the information you want to send in a JSON response! - - +Suppose you have an `authors` table with columns for `name` and `language`. You want to create JSON formatted like the following: `{"author": {"name": "JK Rowling", "language": "English"}, ... }`. + Which of the above will correctly format your JSON? +- [ ] I +- [ ] I & II +- [ ] II & III +- [ ] II & IV +- [ ] IV + +
Answer: + +I
+
Explanation: + +Only option `I` will give you the format you want!
+ +What purpose does Jbuilder serve? +- [ ] Converting JSON to plain old JavaScript objects and back again +- [ ] Allowing you to control which attributes and objects you want to build into JSON structures +- [ ] Parsing database results into instances of the corresponding Rails models +- [ ] Constructing and formatting the data object to be sent within an AJAX request + +
Answer: + +Allowing you to control which attributes and objects you want to build into JSON structures
+
Explanation: + +Jbuilder makes it easy for you to both select and structure the information you want to send in a JSON response!
From b937ba39e48d1be293bb66a791aa827bc844f571 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Rupi=C5=84ski?= Date: Thu, 8 Aug 2024 11:16:43 +0200 Subject: [PATCH 4/6] Fix links to paragraphs --- react/Open_React_Overview.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/react/Open_React_Overview.md b/react/Open_React_Overview.md index c1d55b0..c478658 100644 --- a/react/Open_React_Overview.md +++ b/react/Open_React_Overview.md @@ -2,13 +2,13 @@ ## Topics Covered -- [React Fundamentals]() -- [Redux Fundamentals]() -- [Middleware and Thunks]() -- [Redux and the Rails API]() -- [Frontend Routing with React]() -- [Frontend Auth]() -- [Completing Bench BnB]() +- [React Fundamentals](#react-fundamentals) +- [Redux Fundamentals](#redux-fundamentals) +- [Middleware and Thunks](#middleware-and-thunks) +- [Redux and the Rails API](#redux-and-the-rails-api) +- [Frontend Routing with React](#frontend-routing-with-react) +- [Frontend Auth](#frontend-auth) +- [Completing Bench BnB](#completing-bench-bnb) ## Notes From c845f2e07b7fbc78b6ce7bb43da835054925ddc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Rupi=C5=84ski?= Date: Thu, 8 Aug 2024 11:40:27 +0200 Subject: [PATCH 5/6] Fix typos and missing materials --- react/Open_React_Overview.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/react/Open_React_Overview.md b/react/Open_React_Overview.md index c478658..3dd7f5e 100644 --- a/react/Open_React_Overview.md +++ b/react/Open_React_Overview.md @@ -65,7 +65,7 @@ with a specific icon in your task menu. - [Solution](https://assets.aaonline.io/fullstack/react/projects/widgets/solution.zip) - [ ] 34. [Minesweeper](projects/react_minesweeper/README.md) - [Solution](https://assets.aaonline.io/fullstack/react/projects/react_minesweeper/solution.zip) -- [ ] 35. [MinRedux Liteesweeper](projects/redux_lite/README.md) +- [ ] 35. [Redux Lite](projects/redux_lite/README.md) - [Solution](https://assets.aaonline.io/fullstack/react/projects/redux_lite/solution.zip) ## Redux Fundamentals - [ ] 1. [Nontechnical Overview of Redux](readings/redux_nontech.md) @@ -73,7 +73,7 @@ with a specific icon in your task menu. - [ ] 3. [Store](readings/store.md) - [ ] 4. [Reducers](readings/reducers.md) - [ ] 5. [Actions](readings/actions.md) -- [ ] 6. [](readings/provider.md) +- [ ] 6. [``](readings/provider.md) - [ ] 7. [connect()](readings/connect.md) - [ ] 8. [Containers](readings/containers.md) - [ ] 9. [Selectors](readings/selectors.md) @@ -150,10 +150,10 @@ with a specific icon in your task menu. - [Solution](https://assets.aaonline.io/fullstack/react/projects/pokedex/solution.zip) ## Frontend Routing with React - [ ] 1. [Intro to React Router](readings/intro_to_react_router.md) -- [ ] 2. [](readings/link.md) -- [ ] 3. [](readings/switch.md) +- [ ] 2. [``](readings/link.md) +- [ ] 3. [``](readings/switch.md) - [ ] 4. [withRouter](readings/with_router.md) -- [ ] 5. [](readings/redirect.md) +- [ ] 5. [``](readings/redirect.md) - [ ] 6. [Advanced Containers](readings/advanced_containers.md) - [ ] 7. [Frontend Routing with React Quiz](quizzes/frontend_routing_react.md) - [ ] 8. [Rainbow Routes](homeworks/rainbow_routes/README.md) @@ -178,7 +178,7 @@ with a specific icon in your task menu. - [ ] 4. [preloadedState](readings/preloaded_state.md) - [ ] 5. [Front End Authentication](readings/front_end_auth.md) - [ ] 6. [Frontend Authentication Quiz](quizzes/frontend_auth.md) -- [ ] 7. [Rails Auth Prep: Auth Pattern (Part One)](readings/auth-part-i.md) +- [ ] 7. [Rails Auth Prep: Auth Pattern (Part One)](../rails/demos/rails-auth/README.md) - [ ] 8. [Rails/React/Redux Configuration Checklist](readings/checklist.md) - [ ] 9. [React Context](https://facebook.github.io/react/docs/context.html) - [ ] 10. [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) From 0800d291dfb9836c861195259c2ca07c097f0ac6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Rupi=C5=84ski?= Date: Thu, 8 Aug 2024 11:41:46 +0200 Subject: [PATCH 6/6] Fix titles --- react/Open_React_Overview.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/react/Open_React_Overview.md b/react/Open_React_Overview.md index 3dd7f5e..f158a82 100644 --- a/react/Open_React_Overview.md +++ b/react/Open_React_Overview.md @@ -2,8 +2,8 @@ ## Topics Covered -- [React Fundamentals](#react-fundamentals) -- [Redux Fundamentals](#redux-fundamentals) +- [React Fundamentals I](#react-fundamentals-I) +- [Redux Fundamentals II](#redux-fundamentals-II) - [Middleware and Thunks](#middleware-and-thunks) - [Redux and the Rails API](#redux-and-the-rails-api) - [Frontend Routing with React](#frontend-routing-with-react) @@ -25,7 +25,7 @@ Additional Resources are readings, videos, or articles that are not required, but will serve to deepen your understanding of a topic. They will be denoted with a specific icon in your task menu. -## React Fundamentals +## React Fundamentals I - [ ] 1. [NonTechnical Overview of React](readings/react_nontech.md) - [ ] 2. [NPM 1](readings/npm_configuration_1.md) - [ ] 3. [NPM 2](readings/npm_configuration_2.md) @@ -67,7 +67,7 @@ with a specific icon in your task menu. - [Solution](https://assets.aaonline.io/fullstack/react/projects/react_minesweeper/solution.zip) - [ ] 35. [Redux Lite](projects/redux_lite/README.md) - [Solution](https://assets.aaonline.io/fullstack/react/projects/redux_lite/solution.zip) -## Redux Fundamentals +## Redux Fundamentals II - [ ] 1. [Nontechnical Overview of Redux](readings/redux_nontech.md) - [ ] 2. [Flux and Redux Intro](readings/flux_redux.md) - [ ] 3. [Store](readings/store.md)