- React Fundamentals I
- Redux Fundamentals II
- Middleware and Thunks
- Redux and the Rails API
- Frontend Routing with React
- Frontend Auth
- Completing Bench BnB
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.
- 1. NonTechnical Overview of React
- 2. NPM 1
- 3. NPM 2
- 4. NPM 3
- 5. NPM 4
- 6. Webpack
- 7. ES6 Syntax: Object Destructuring
- 8. ES6 Syntax: Import/Export
- 9. React Developer Tools
- 10. Thinking in React
- 11. React: Intro
- 12. React: Transpilation
- 13. React: Functional Components
- 14. React: Lifecycle Methods
- 15. Props and State
- 16. Click Counter Code Demo
- 17. React Fundamentals Quiz
- 18. Getting Started with NPM
- Solution
- 19. React Calculator
- Solution
- 20. Babel
- 21. React
- 22. JSX
- 23. React Components
- 24. Declaration
- 25. Lifecycle Methods
- 26. Synthetic Events
- 27. Official React Documentation
- 28. React Intro & First Components
- 29. Nested Components & Props
- 30. Class Components, State & onClick
- 31. Lifecycle Methods, componentDidMount & Fetching
- 32. CSS Friends Part 3
- Solution
- 33. Widgets
- Solution
- 34. Minesweeper
- Solution
- 35. Redux Lite
- Solution
- 1. Nontechnical Overview of Redux
- 2. Flux and Redux Intro
- 3. Store
- 4. Reducers
- 5. Actions
- 6.
<Provider /> - 7. connect()
- 8. Containers
- 9. Selectors
- 10. Window API
- 11. Testing on the Window
- 12. Intro to UI/UX
- 13. Intro to UX for Web
- 14. UI Affordances and Signifiers
- 15. Designing to Look Good
- 16. Fruit Stand Live Demo: Phase I Redux Only
- 17. Fruit Stand Live Demo: Phase I Source Code
- 18. Fruit Stand Live Demo: Phase II React/Redux
- 19. Fruit Stand Live Demo: Phase II Source Code
- 20. Fruit Stand Live Example
- 21. Redux Fundamentals Quiz
- 22. Official React-Redux Documentation
- 23. Job Listing
- Solution
- 24 UX/UI Layout Practice
- 25. Selecting a Full-Stack Project
- 26. Approved Full-Stack Apps
- 27. Is Ageism In Tech An Under-The-Radar Diversity Issue?
- 28. Building Accessibility Culture
- 29. Building Better Tech Cultures for People with ADHD
- 30. "Brilliance," "Pride," and "Genius": How Tech Culture Hides Mental Illness
- 31. Official Redux Documentation
- 32. Redux Intro & Store
- 33. Redux Reducers
- 34. Action Creators
- 35. React-Redux Intro & mapStateToProps
- 36. Redux - mapDispatchToProps
- 37. Todos (Part 1)
- Solution
- 1. Higher-Order Functions
- 2. Middleware
- 3. Thunks
- 4. Object.freeze
- 5. Namespacing
- 6. Debugging Arrow Functions in React
- 7. Middleware Quiz
- 8. ES6 Arrow Functions
- 9. Arguments
- 10. Submit Tentative Full-Stack Proposal
- 11. MVP List
- 12. Middleware Homework
- Solution
- 13. Todos (Part 2)
- Solution
- 14. Todos (Part 3)
- Solution
- 15. React-Redux Review
- 16. Middleware Lecture
- 17. Why the nested functions, applyMiddleware?
- 18. Thunk Lecture
- 1. Intro to Jbuilder
- 2. Jbuilder Documentation
- 3. Normalizing State Shape
- 4. Updating Normalized Data
- 5. Redux and Rails API Quiz
- 6. Giphy Homework
- Solution
- 7. Full-Stack Proposal Prep: Schema
- 8. Redux Developer Tools
- 9. N Plus One
- 10. CSS Review Video
- 11. jBuilder Lecture
- 12. Normalized State
- 13. Selectors Lecture
- 14. Jbuilder
- Solution
- 15. Pokedex (Part 1)
- Solution
- 1. Intro to React Router
- 2.
<Link> - 3.
<Switch> - 4. withRouter
- 5.
<Redirect> - 6. Advanced Containers
- 7. Frontend Routing with React Quiz
- 8. Rainbow Routes
- Solution
- 9. Full-Stack Proposal Prep: Sample State Shape
- 10. React Router Docs
- 11. Frontend Routing Intro
- 12. Route Wildcard Props
- 13. history.push
- 14. Frontend Routes with Rails
- 15. Container Component ownProps & Wildcard Routes
- 16. componentDidUpdate
- 17. Form Redirection (history.push)
- 18. Pokedex (Part 2)
- Solution
- 19. Pokedex (Part 3)
- Solution
- 1. Frontend Auth: Intro
- 2. Frontend Auth: API Authentication
- 3. Frontend Auth: Frontend Auth Pattern
- 4. preloadedState
- 5. Front End Authentication
- 6. Frontend Authentication Quiz
- 7. Rails Auth Prep: Auth Pattern (Part One)
- 8. Rails/React/Redux Configuration Checklist
- 9. React Context
- 10. localStorage
- 11. Active Storage and AWS S3 Hosting Demo
- 12. Front End Authentication Project
- Solution
- 13. BenchBnB (Part 1)
- Solution
- 1. React Map Demo
- 2. React Hooks Demo
- 3. Last Quiz
- 4. Full-Stack Proposal Prep: Routes
- 5. (Don't) Submit Full-Stack Project Proposal
- 6. The Tech Industry is Forcing Gentrification
- 7. How Tech Campuses Hinder Diversity and Help Gentrification
- 8. Silicon Valley's Poorest Workers
- 9. Tech in Underserved Communities: Beyond Feel Good Stories
- 10. The Accidental Classism and Unintentional Racism Of iOS Development for Children
- 11. Google Maps API Key
- 12. BenchBnB (Part 2)
- 13. BenchBnB (Part 3)
- Solution