React with Test Driven Development

Create the sign up page component and its tests, organize files under a pages folder, and validate the ui with react testing library while running npm test in watch mode.

Implement a React signup form that captures username, email, and password with a dynamic onChange, submits via Axios post to the backend, and tests mock Axios for reliable results.

Switch from axios to fetch for api calls, and use MSW to mock fetch in tests with REST handlers, ensuring tests reflect real user interactions.

Style the signup page using Bootstrap v5, adding a container, form controls, labels, and a primary button. Implement Bootstrap grid and card layouts to create a centered, responsive form.

Implement a progress indicator in the sign-up flow by disabling the submit button during API calls and showing a spinner, with test-driven validation for a single request.

Demonstrate sign up success flow using test driven development, showing activation email messaging, ui state updates, and robust tests with testing library and bootstrap alerts.

Learn to display per-field validation errors from a backend 400 response, update a signup form's errors state, and show messages under inputs like username, email, and password.

Update form styling with bootstrap validation by applying dynamic is-invalid and invalid-feedback to inputs, showing red borders and red error text for invalid entries.

students learn to display and test validation errors for remaining inputs (username, email, password) using table-driven and parametric tests, with a reusable input component and default text type.

Demonstrate client-side validation for password and password repeat, displaying a passwords mismatch error when inputs differ, and verify with tests that the error appears and clears as users type.

Learn to implement internationalization in a React app using the i18n next library by configuring resources, using translation keys, and adding language switching with json-based translations.

Extract a language selector as a separate functional component, implement i18n language switching with with translation or useTranslation hooks, and update tests with afterEach and act.

Learn to translate password mismatch validation messages for a React sign-up flow by switching between languages, fetching Turkish translations via Bequant, and updating tests and JSON keys.

Learn how to implement internationalization by using the accept-language header in api requests, test the language handling end-to-end, and verify server responses across languages.

Refactor api calls into a dedicated signup api module, creating a signUp function that wraps an Axios post and is imported by the signup page, with i18n header management.

Learn test-driven development in a React app by implementing client-side routing and page components (home, sign up, login, and user pages), with tests validating visibility based on the URL.

This lecture shows building a top navigation bar in React with home, sign up, and log in links, handling clicks to navigate without reload and preserve app state and translation.

Style a Bootstrap navigation bar, use a container and fragment wrappers, add a logo image from assets, and implement tests to verify the brand logo navigates home.

Demonstrates migrating client-side routing to React Router, installing the react-router package, and refactoring to use BrowserRouter, Route, and Link, with dynamic paths and hash routing.

Explore React component lifecycle across class and functional components, covering mounting, updating, and unmounting, and manage side effects with hooks like useEffect to prevent memory leaks.

Learn to implement and test an account activation flow in React with test driven development, extracting a token from the URL, calling the backend, and displaying activation results.

Explains how the use effect dependency list triggers reruns when external parameters change, demonstrates a missing dependency warning, and guides testing and fixing with dependency updates to ensure requests fire.

Showcases a React account activation flow with a conditional progress indicator and spinner during API calls, tested via tests to handle success, failure, and invalid activation tokens.

Extract reusable alert and spinner components in React, using a dynamic type prop and default props, then apply them to signup and activation pages.

Refactor the signup flow to use an inner async function activateRequest inside useEffect, handling undefined, success, and failure with try/catch and awaiting the activation, while tests pass.

Learn how higher order components in React take a component and return an enhanced version, enabling hover effects, translation wrappers, and prop passthrough.

Learn how to build a reusable hover hook in React using useEffect, useState, and useRef to track mouse over and out events, and apply it in a language selector.

Implement pagination in the test module by using page and size parameters, returning content, page, size, and total pages, and validate them via axios.

Learn to navigate from the user list to a user page in a React app using link components and programmatic history pushes, with test-driven validation of routing behavior.

Create a reusable user list item component in React by extracting the item, rendering the default profile image and username from props, and handling history with routing.

Develop translation and internationalization for the user list component using i18n, implement language switching (English and Turkish), and align tests with setup and translation keys.

Learn to implement a progress indicator that shows a spinner during API calls when loading the user list, using testing library queries like getByRole to streamline tests.

Develop the user page using a dynamic user id, fetch user data via API calls, and render the user name and profile image with a profile card, under test-driven development.

This lecture demonstrates test-driven development in a React app by using a spinner to indicate a loading user until the API response reveals the profile card.

Create a user not found layout in React with test-driven development, returning not found for non-existing users, displaying a not found message, and showing a loading spinner during requests.

Create a login page that mirrors the signup page, with email and password inputs and a login button initially disabled, validated by a layout test suite using testing library react.

Learn to implement form interactions in a React login page by enabling the submit button once email and password are filled, using useState, onChange handlers, and test-driven development.

Master test driven development in a react login flow by building API requests, validating payloads (email and password), and handling spinner states during API calls.

Handle authentication errors in a React with test driven development workflow by displaying server 'incorrect credentials' messages and showing an alert that hides as users edit email or password.

Develop and test a multilingual login page in a React app by implementing internationalization with locale files, language selector, and i18n hooks, and verify accept-language headers via axios interceptors.

Implement the success login flow by redirecting to the homepage after authentication, and add tests to cover routing with React Router and history.push in a test-driven development approach.

Extract the navigation bar into its own component to improve readability, create a new file, and use Link from React Router DOM with a logo, props, and translations via useTranslation.

Explore prop drilling in React and lifting state up to share logged-in user information across profile card and user page, highlighting the challenges of passing props through intermediate components.

Replace manual prop passing with the context API by creating a context, wrapping app in a provider, and consuming the value with useContext or Context.Consumer, including class components via contextType.

Refactor the app by extracting the authentication context into its own wrapper, moving the router to the root, and implementing a custom render to ensure tests pass.

Wrap the app with a react-redux provider, create a store with a reducer, and access state in the nav bar using useSelector or connect, including devtools support.

Refactor redux store architecture by extracting reducers into separate modules, creating a dedicated store factory, and replacing old context wrappers with a provider for unit tests.

Learn how to persist and restore app state with browser local storage, using a store and subscription to save changes and initialize state after reload.

Replace direct local storage usage with a dedicated storage abstraction that provides getItem, setItem, and clear, handling JSON conversion and decoupling tests from the API.

Learn to encrypt storage in a React app with secure-list, replacing the storage layer with a secure implementation for sensitive data like user IDs and authorization info, without breaking tests.

Learn how to store user credentials: id, username, image, and token, across storage and redux state, handle authentication flows, and drive tests for successful login in a test-driven React workflow.

this lecture demonstrates implementing a user update on the profile card with test-driven development, including an edit button for the logged-in user, a username input, and save or cancel actions.

Learn how to implement user updates via api requests in a test driven workflow, using spinner feedback, edit and save actions, and validating request payloads and authorization.

Learn how to drive updates in a react app using test driven development, validating edit mode, save actions, and username refresh after a 200 OK response.

Demonstrates implementing cancel update behavior in a React app with Redux, ensuring UI state and the Redux store reflect edits, and dispatching a user update success to synchronize username.

Fix reload of the user after navigation in a React with test-driven development course. Load user by ID on URL change using class component lifecycle, with a loading spinner.

Implement authentication aware user list by adding authorization headers to outgoing requests via a store interceptor, excluding the logged-in user from the list.

Implement logout in a react app using test-driven development by adding a logout link, updating redux state, clearing storage, and sending a logout api request to revoke the token.

Build a reusable react modal in this lecture by passing content via props, setting default props, and wiring onClick cancel and confirm handlers to close or confirm.

Implement delete confirmation triggered by the delete button, show a progress spinner during the API call, and coordinate dedicated delete API progress state across tests and UI.

Implement post-delete redirection to the homepage in a React app, update the navigation to reflect a logged-out state, and validate the flow with async, test-driven checks.

Refactor redux actions by introducing action creators for login, logout, and user update, and reuse them in the login page, profile card, and navigation bar to reduce typos. Tests pass.