React Projects Course: Build Real World Projects

Build a pomodoro timer app in React with start, stop, and reset controls and dynamic text updates. Learn how React renders and use the useRef hook to track timer state.

Explore building real-world projects in the React projects course by coding a Pomodoro timer with start, countdown logic using useState and setInterval, minutes and seconds formatting, and memory leak cleanup.

Build a pomodoro timer in react by implementing start timer, stop timer, and reset timer, storing the interval in a useRef, and updating the title with a 25-minute reset.

Build a markdown editor that converts markdown to html, showing headings, lists, block quotes, bold, and italic styling. Preview the output as you type and learn list spacing.

build a markdown editor from scratch, storing markdown in state, rendering a live preview with a markdown parser, and styling the output for a polished blog-like display.

Build a browser tab UI by moving a highlight with the mouse using React events, and implement routing to swap components and update the URL for about and features.

In this highlight tabs lecture, learn to build a React real-world tab UI by creating a movable highlight with state, mouse move events, and a reusable tab component.

Refactor the app and implement routing with react router dom. Create components and pages (home, about, features) and use nav links with end prop to highlight the active tab.

Refactor the app by extracting header tabs into a header component and moving routes into a routes file, renaming routes to router to avoid conflicts, and using react-router-dom nav link.

Build a rock, paper, scissors game by letting users choose an option while the computer randomly generates its move, and track wins and losses as you play again.

Set up a React rock paper scissors project, implement user choices with buttons and state, and add a computer player using useEffect to pick a random option.

Track wins and losses with React state, determine the winner from user and computer choices, and enable a reset, while rendering dynamic win/loss text and icons.

Implement rock, paper, Caesar game logic in a React app to determine win, loss, or draw with state updates and a losses-to mapping. Add a restart button and outcome messages.

Create a moving box controlled by four directional buttons and arrow keys, using useState, useRef, and event listeners in a real-world React projects course.

Learn to set up a React canvas and box, make it full screen with use effect, draw a 2D rectangle, and move it with four buttons updating x and y.

learn to handle keyboard arrows in a react project by adding a keydown listener with useEffect and a move(direction) function for up, left, down, right, and on-screen buttons.