React with Test Driven Development

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.

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.

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.

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.

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 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.

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.

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 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 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.

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.

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 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.