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 code
import 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;

This code defines a TicTacToe component that uses useState to keep track of the game state. The game board is represented as a two-dimensional array, where each cell can be either "X", "O", or an empty string. When a player clicks on a cell, the handleClick function is called, which updates the game board
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.