Gallery
Share
Explore

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

Peter Sigurdson
: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
CodeSandbox
⁠
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.