Basic Requirements for a To-Do List App

Before we begin writing code for the To-Do List App in React, it’s important to understand the tools, technologies, and requirements you’ll be working with. This module gives you a complete picture of everything you’ll need to follow along comfortably.

Basic Requirements

To build and run this React project on your local machine, make sure the following software is installed and set up properly:

1. Node.js (with npm)

React is built using JavaScript modules, and Node.js provides the environment to compile and run those modules on your system.

• Download from: https://nodejs.org
• Install the LTS (Long-Term Support) version.

After installing, check installation using your terminal/command prompt:

node -v

npm -v

npm (Node Package Manager) comes bundled with Node.js and is essential for installing packages like React.

2. Code Editor

A good code editor helps you write and debug code efficiently.

Recommended: Visual Studio Code (VS Code)

Download from: https://code.visualstudio.com

3. Web Browser

You’ll need a browser to preview and test your app.

Recommended: Google Chrome (for its developer tools)

4. Git (Optional)

Git is a version control system that helps manage code changes and collaborate with others.

Install from: https://git-scm.com

Why is Node.js essential?
React uses a build toolchain that requires Node.js under the hood. Even though React apps run in the browser, the development workflow depends on Node for compiling, bundling, and managing packages.

Tech Stack Used

Let’s now break down all the technologies and libraries used in this project and what each one is responsible for:

• ReactJS: Library for building the UI (components, JSX, state).
• JavaScript (ES6): For writing application logic, using features like fetch, arrow functions, etc.
• HTML/CSS: Standard markup and styling for the web page.
• JokeAPI (Sv443): A free REST API that returns jokes in JSON format (no API key required). We use it to fetch random jokes.
• Node.js: Provides the runtime and npm to manage packages (e.g., React).
• Netlify: Platform to deploy the static app online. Provides a live URL (like: https://guvi-todo-jaishree.netlify.app)

Note: There’s no backend or database in this project. All data is stored in memory using the React component’s state. That’s why your tasks disappear when you refresh the page.

Input

Unlike forms or login screens, this app deals with user input in a very focused and interactive way.

Here's what kind of input we handle:

All these interactions are handled by event listeners in React—like onClick, onChange, etc.—which update the app’s internal state.

Output

Every interaction produces an immediate visible change on the page:

All outputs are handled through JSX and styled using the App.css file. Transitions and colors give the UI a clean and modern feel.