Learn new Get simpler Do more

Build a shopping cart that displays the total price when adding items. Implement the Add to Cart logic, add an item to the cart when the button is clicked. Implement the + and - buttons to add or remove items from the cart. Implement the total sum at the bottom of the page. ShoppingCart.js import { useState } from 'react' const items = [{ name: 'apple', price: 0.79 }, { name: 'banana', price: 0...

Focus an input upon a component mounting. useRef: Within React, we normally interact with the virtual DOM. Sometimes we need to interact with the actual DOM, however, and to do so you can use refs. Uppm page load, focus the input. FocusInput.js import { useEffect, useRef } from 'react' export default function FocusInput() { const focusedInput = useRef(null) useEffect(() => { focusedInput.current..

Build a simple calculator. useReducer: Sometimes state becomes complicated in React, and there are multiple mutations you will need to implement on your data. useReducer helps simplify this by moving state management outside of the component. Implement the logic so that two numbers can be selected. Implement the logic to add these two selected numbers together. Same for subtraction Implement a c..

Build a pixel art drawing app. React Context: Allows you to share data between components more easily. Instead of having to pass a prop down multiple levels, you can use Context. When a color is clicked, that color becomes the drawing color, Then, when one of the grid squares is clicked, it should be colored in with the drawing color. Use React Context to share the state between your components...

Create a color-picking app so the user can select the page's background color. Upon clicking a color, change the whole page's background to that color. Make sure to use the Color subcomponent. ColorPicker.js import { useState } from 'react' import Color from './Color' const colors = [{ hex: '#91A6FF', name: 'Cornflower Blue' }, { hex: '#FF88DC', name: 'Persian Pink' }, { hex: '#80FF72', name: 'S..

Add and remove effects within React. The button that toggles mounting of a child component, WindowEvent. When the WindowEvent component is active, add an event listener to the window that triggers an alert if the user double-clicks on the page. Make sure to remove the window event when the component is toggled off. WindowEvent.js import { useEffect } from "react" export default function WindowEv..

localStorage: localStorage allows you to store data in the browser. localStorage.getItem(key) // retrieve an item localStorage.setItem(key, value) // set data in localStorage Display a score that can be increased or decreased. Use localStorage to store the score so that it persists when you come back to the page. You should be able to refresh the page and still see the score from the previous re..

Use a dog picture API to display dog images on React. // Using API: https://dog.ceo/dog-api/ Link to an API in a comment which you will use to fetch a random dog picture. DogPIcs.js import { useEffect, useState } from "react" const getDogPic = async () => { const response = await fetch('https://dog.ceo/api/breeds/image/random') const dog = await response.json() return dog.message } export defaul..

Validate a user sign-up form once the user submits that form. Requirements : The email password and password confirmation fields are all filled in. The email field must have exactly one @ sign in it. The password must be eight or more characters long. The password and the password confirmation field must be the same. if any of these conditions aren't met, you should display an error message. If ..

Implement a component that allows you to change from light to dark mode and back again. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log resul..