Learn to code To Do App Using Reactjs Javascript

learn to code simple todo app using reactjs javascript

React.js is a popular JavaScript library for building user interfaces. It was developed by Facebook and released in 2013. React.js allows developers to create reusable UI components and efficiently manage the application state, making it a powerful tool for building complex and interactive web applications. React.js is widely used in the development of single-page applications (SPAs) and large-scale applications. In this blog, you will learn to code simple todo app using Reactjs JavaScript

We will build simple todo app using Reactjs.

Step 1: Set up a new React js project

  • Ensure that Node.js is installed on your computer.
  • Open your terminal or command prompt and navigate to the desired directory where you want to create your React project.
  • Run the following command to create a new React project using Create React App (CRA):
npx create-react-app todo-app
  • This will create a new directory called “todo-app” with the basic structure and dependencies for a React project.

Step 2: Navigate to the project directory and install additional dependencies

  • Change to the project directory:
cd todo-app
  • Install the required dependencies for handling CSS styles and class names:
npm install bootstrap

Remove unnecessary files:

  • Delete the files src/App.css, src/App.test.js, src/logo.svg, and src/setupTests.js.
  • Clear the content of src/App.js and src/index.css files.

File Structure:

  • After setting up the project using Create React App and deleting unwanted files, the initial file structure will look like this:
todo-app/
  src/
    App.js
    App.css
    index.js
    index.css
    ...
  public/
    index.html
    ...
  node_modules/
  package.json
  ...

Step 3: Update the project files

  • Open the project directory in your preferred code editor.
  • Replace the contents of the src/App.js file with the following code:
import React, { useState } from 'react';
import './App.css';
function App() {
  const [todos, setTodos] = useState([]); 
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleAddTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const handleDeleteTodo = (index) => {
    const updatedTodos = [...todos];
    updatedTodos.splice(index, 1);
    setTodos(updatedTodos);
  };

  return (
    <div className="container">
       <a href="https://codingissimple.com">Coding is Simple</a>
      <h2 className="mt-5 mb-3">Todo App</h2>
      <div className="input-group mb-3">
        <input
          type="text"
          className="form-control"
          placeholder="Add a new todo"
          value={inputValue}
          onChange={handleInputChange}
        />
        <button className="btn btn-primary" onClick={handleAddTodo}>
          Add
        </button>
      </div>
      <ul className="list-group">
        {todos.map((todo, index) => (
          <li key={index} className="list-group-item d-flex justify-content-between align-items-center">
            {todo}
            <button className="btn btn-danger" onClick={() => handleDeleteTodo(index)}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

This creates App component which can be resused. You will see later that this component is called in index.js file.

The useState hook is called inside a functional component and returns an array with two elements: the current state value and a function to update the state. The first element of the array is commonly referred to as the state variable, and the second element is known as the setter function.

In the example above, the useState hook is used to create a state variables called todos and inputValue with an initial value of [] and '' respectively. The set function is used to update the value of these state variables.

Whenever set function is called, React will re-render the component, updating the value of todos and inputValue and reflecting the changes in the UI.

The component is returning html like code which is using javascript , it’s called JSX Syntax:

  • JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript.
  • In the code, elements like <div>, <h1>, <input>, and <button> are JSX elements.
  • JSX elements can have attributes like className, value, and onChange, which are similar to HTML attributes.
  • Curly braces {} are used to embed JavaScript expressions within JSX.
  • For example, {inputValue} and {handleInputChange} are JavaScript expressions within JSX.

CSS Styling:

  • The Bootstrap CSS framework is used in this example for basic styling.
  • The classes container, form-control, btn, list-group, and list-group-item are Bootstrap classes used to style the components.
  • The custom CSS in App.css provides additional styling for the app.

Step 4: Create a CSS file for styling

  • In the src directory, create a new file called App.css.
  • Open the App.css file and add the following CSS code:
.container {
  max-width: 500px;
  margin: 0 auto;
}

.btn {
  margin-left: 10px;
}

li {
  margin-top: 10px;
}

Step 5: Update the src/index.js file

  • Open the src/index.js file and update with following code.
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

createRoot(document.getElementById('root')).render(<App />);

Step 6: Start the development server

  • In your terminal or command prompt, make sure you are in the project directory in this case it is todo-app directory.
  • Run the following command to start the development server:
npm start
  • The app will open in your default browser at http://localhost:3000, and you should see the todo app UI.

That’s it! You have a basic todo app built with Reactjs JavaScript, You can further customize this react js app or add more features based on your need.

You can try using the app

Don't Miss Out! Subscribe to Read Our Latest Blogs.

If you found this blog helpful, share it on social media.

Subscription form (#5)

Leave a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Scroll to Top