React Portfolio Project - React Training for Beginners

Install react-router-dom and set up routes for the home page and article page (with slug) using switch and exact, mapping to global feed and article components.

Implement a top bar component in a React app, rendered on all pages, with log-on, home, sign in, sign up, and a logotype, using Link and NavLink with exact matching.

Create an authentication page in the pages folder, export a default authentication component, render a login form with email and password, and link to the register page using routing.

Explore managing state inside a React component with the use state hook, update inputs on change, and render updated values such as a counter and user name.

Use the state hook to manage email and password in a login page, update state on input changes, and prevent default on form submission.

This video shows how to use useRef to create a mutable reference for an input element, read the email value from ref.current, and confirm it doesn't trigger re-renders.

Explore how the useEffect hook handles side effects, such as updating the document title and posting data. Learn how a dependencies array triggers the effect on specific changes like email.

Learn to fetch data in a React useEffect using axios for post requests, manage a submitting state, handle errors, and disable the login button during the API call.

Learn to create a custom hook (use fetch) in React that manages isLoading, isLoggedIn, response, and errors, and exposes a doFetch function for API calls.

Implement a register page by reusing the authentication component, distinguishing login and register via route props, and conditionally rendering the username field and signup API endpoint.

Handle registration responses, save the authentication token in local storage, and use a declarative redirect to the home page after a successful signup.

Create a custom local storage hook that returns a [value, setValue] pair and uses an effect to synchronize updates with local storage by key and an initial value.

Fix react hooks warnings by enforcing exhaustive dependencies in useEffect. Avoid disabling Slint rules and ensure useFetch and local storage key dependencies are properly managed.

Create a current user context in React to access user data from any component, using a provider, useState, and useContext to share login state.

Learn how to handle validation errors in a React form by rendering backend error messages, creating a dedicated error messages component, and tightening dependencies to keep the console clean.

Implement a current user checker that fetches the user on app mount, attaches the token from local storage in headers, and updates the current user context for wrapped components.

Use the use callback hook to memoize the fetch function and prevent infinite renders in useEffect. Wrap fetch in useCallback with an empty dependency array to stabilize function between renders.

Use the current user context to conditionally render the top bar links based on login status, showing home for all and profile, settings, and post options for logged-in users.

Build a reusable, stateless feed component and integrate it across global and user feeds. Plan article data fetching, render previews and tags for a cohesive home page experience.

Build a reusable pagination component for global feed and tag pages, computing pages from total and limit, and deriving current page and offset from the URL query string.

Create a reusable popular tags component that fetches tags from /tags, renders them in the global feed across pages, and includes loading and error states.

Build a reusable feed toggle that switches between your feed, global feed, and tag feed using react-router links with active highlighting and tag-based URLs.

Adapt the global feed into a tag feed by reading the tag slug from the route and adding a tag query to the API, while reusing a shared banner component.

Implement your feed by reusing the global feed, fetch from /api/article/feed with limit and offset, and show it only when the user is logged in using current user context.

Implement a single article page by fetching article data via slug, rendering author info, created date, tags with a reusable tag list component, and interactive follow, favorite, and comments features.

Learn how to manage the current user state with use reducer, defining initial state and actions, and dispatching authorized and unauthorized updates with a payload user.

Build a reusable article form component in React, shared by create and edit article pages, with initial values, error handling, and a publish workflow using useEffect and controlled inputs.

Create article teaches building a functional article creation form that posts to /articles, handles API responses and errors, and redirects after submission while guarding access with the current user authentication.

Learn to build an edit article page in a React portfolio project by reusing the create form, fetching data by slug, and updating with put.

Learn to implement edit and delete article features in a React portfolio project by checking author status with context, wiring delete API calls, and redirecting after deletion.

Create a user settings page that pre-fills image, name, biography, email, and password from current user, updates profile via put, and logs out via local storage and context.

Implement the add to favorites feature by building a reusable component that toggles like status via the article slug, calling post or delete to /api/articles/{slug}/favorite, and updating the favorites count.

Build a user profile page in a React portfolio project, routing /profiles/:slug to display profile info, posts, and favorites using shared components and data fetching.

Implement user articles on a user profile page by building a reusable articles component that fetches via author slug, offset, and a favorites flag, rendering a feed with pagination.

Prevent memory leaks by canceling asynchronous tasks in a useEffect cleanup function when a component unmounts, ensuring fetches and subscriptions don’t update an unmounted component.

Complete a medium clone project built from scratch with reusable components and hooks, and explore future features like follow, comments, and board-like project ideas.