Introducing the Course
- What to Expect from the Course
- Getting a Code Editor
- Installing Node and React Tools
- Source Code for the Course
- Final Introductory Notes
Understanding React
- Understanding React Part 1
- Understanding React Part 2
React & ES6 App | NoteToSelf
- Previewing NoteToSelf
- ES6 | Class Definitions
- ES6 | Class Inheritance & Template Strings
- Setting Up NoteToSelf
- Rendering JSX onto the DOM
- Creating an App Component | ES6 Imports and Exports
- React Essentials | State
- Building a Bootstrap Form
- Introducing State into the Form
- ES6 | Arrow Functions
- Creating a List of Notes
- ES6 | Destructuring Objects
- Introducing Props with a Note Component
- React Lifecycle Methods and SFCookies
- Section Overview | NoteToSelf
Testing NoteToSelf with Jest and Enzyme
- Why You Should Write Tests
- Setting Up the Testing Environment
- Important: Enzyme Adapter
- Testing the Note Component
- ES6 | Spread Operator for Spread Attributes
- Testing the App Component
- Testing Form Behavior
- Testing the Cookies
- Reporting Test Coverage
- Section Overview | Testing NoteToSelf
Understanding Redux
- Understanding Redux
- Understanding Redux Visually
React App Two with Redux | FlashcardPro
- Previewing FlashcardPro
- Setting Up FlashcardPro
- Loading the StackList
- Introducing React-Router and Linking to Stacks
- Redux Action | setStack
- Redux Reducer | Setting the Stacks
- Creating the Redux Store
- Setting the Stack and Binding Action Creators
- Connecting the Stack Component
- Creating Card Components
- Styling and Revealing Card Answers
- Loading Stacks
- Creating a Stack Form
- Building Cards in the Stack Form
- Adding a New Stack
- Section Overview | FlashcardPro
Testing FlashcardPro with Jest and Enzyme
- Shallow Rendering the App Component
- Fixtures and Testing the Stack Component
- Testing the StackList | Challenge
- Testing the Rendering StackForm | Challenge
- Simulating Behavior and Testing the StackForm | Part 1
- Simulating Behavior and Testing the StackForm | Part 2
- Testing the Card | Challenge
- Testing the Redux Actions in FlashcardPro
- Testing the Redux Reducers in FlashcardPro
- Test Coverage and Why Tests Save Lives
- Bonus: Advanced React | Stateless Functional Components
- Section Overview | Testing FlashcardPro
React App Three with APIs and Redux | Jeopardy
- Previewing Jeopardy
- Setting Up Jeopardy
- Fetching Categories through Jservice
- Setting Categories through Redux
- Connecting the App Component
- Adding Routing and a Category Component
- Linking to Categories and Styling
- Picking a Category
- Fetching Category Data
- Creating a Clue Component
- Section Overview | Jeopardy
Testing Jeopardy with Jest, Enzyme, and Sinon
- Setting Up Tests for Jeopardy
- Testing the Jeopardy App Component
- Testing the Clue Component's Structure | Challenge
- Simulating the Clue's Behavior
- Unlinking | Category Tests Part 1
- Mocking APIs with Sinon | Category Tests Part 2
- Category Functionality | Category Tests Part 3
- Testing the Redux Actions in Jeopardy | Challenge
- Testing the Redux Reducers in Jeopardy | Challenge
- Test Coverage for Jeopardy
- Section Overview | Testing Jeopardy
Conclusion and Final Remarks
- Congratulations and Final Remarks
- Bonus Content
