Share
Explore

icon picker
Instruction sheet for a React to-do list made with CodeSandbox

:Starter code for the PROJECT

React To-Do List Instruction Sheet

Prerequisites

Before getting started, you should have the following installed on your machine:
A modern web browser (Chrome, Firefox, Safari, etc.)
An internet connection

Getting Started

Navigate to in your web browser.
Click on the "Create Sandbox" button in the top right corner.
Select "React" as your template language and wait for the sandbox to load.

Creating the To-Do List

Open the src directory in the left sidebar and locate the App.js file.
x`Delete the existing contents of App.js.
Add the following code to create a basic to-do list:

import React, { useState } from "react";
function App() { const [todos, setTodos] = useState([]); const [newTodo, setNewTodo] = useState("");
const handleAddTodo = () => { if (newTodo.trim()) { setTodos([...todos, newTodo.trim()]); setNewTodo(""); } };
const handleRemoveTodo = (index) => { setTodos(todos.filter((_, i) => i !== index)); };
return ( <div> <h1>To-Do List</h1> <input type="text" value={newTodo} onChange={(e) => setNewTodo(e.target.value)} /> <button onClick={handleAddTodo}>Add</button> <ul> {todos.map((todo, index) => ( <li key={index}> {todo} <button onClick={() => handleRemoveTodo(index)}>x</button> </li> ))} </ul> </div> );}
export default App;
Save the changes to App.js.
Wait for the sandbox to recompile and the to-do list to appear in the right-hand pane.

Using the To-Do List

Type a new task into the input field and click the "Add" button to add it to the list.
Click the "x" button next to a task to remove it from the list.
Repeat steps 1-2 to add and remove tasks as needed.
Congratulations! You've created a simple React to-do list using CodeSandbox. From here, you can customize the styling and functionality to suit your needs.


implementation of a simple Tic Tac Toe game using React:
cssCopy codeimport React, { useState } from "react";import "./styles.css";
const BOARD_SIZE = 3;const EMPTY_CELL = "";
const TicTacToe = () => { const [board, setBoard] = useState(Array(BOARD_SIZE).fill(Array(BOARD_SIZE).fill(EMPTY_CELL))); const [player, setPlayer] = useState("X"); const [winner, setWinner] = useState(null);
const handleClick = (row, col) => { if (!board[row][col] && !winner) { const newBoard = board.map((rowArray, rowIndex) => rowIndex === row ? rowArray.map((cell, colIndex) => colIndex === col ? player : cell) : rowArray ); setBoard(newBoard); setPlayer(player === "X" ? "O" : "X"); checkWinner(newBoard); } };
const checkWinner = (board) => { // Check rows for (let i = 0; i < BOARD_SIZE; i++) { if (board[i][0] && board[i][0] === board[i][1] && board[i][1] === board[i][2]) { setWinner(board[i][0]); return; } }
// Check columns for (let i = 0; i < BOARD_SIZE; i++) { if (board[0][i] && board[0][i] === board[1][i] && board[1][i] === board[2][i]) { setWinner(board[0][i]); return; } }
// Check diagonals if (board[0][0] && board[0][0] === board[1][1] && board[1][1] === board[2][2]) { setWinner(board[0][0]); return; } if (board[0][2] && board[0][2] === board[1][1] && board[1][1] === board[2][0]) { setWinner(board[0][2]); return; }
// Check for a tie if (board.every(row => row.every(cell => cell))) { setWinner("Tie"); return; } };
const resetGame = () => { setBoard(Array(BOARD_SIZE).fill(Array(BOARD_SIZE).fill(EMPTY_CELL))); setPlayer("X"); setWinner(null); };
return ( <div className="game"> <div className="board"> {board.map((row, rowIndex) => ( <div key={rowIndex} className="row"> {row.map((cell, colIndex) => ( <div key={colIndex} className="cell" onClick={() => handleClick(rowIndex, colIndex)}> {cell} </div> ))} </div> ))} </div> <div className="status"> {winner ? `Winner: ${winner}` : `Next player: ${player}`} <button onClick={resetGame}>Reset</button> </div> </div> );};
export default TicTacToe;
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.