Category: React Projects

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an issue tracker with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app issue-tracker

with NPM to create our React project.

Also, we’ve to install the uuid package to let us assign unique IDs to the issue entries.

To do this, we run:

npm i uuid

Create the Issue Tracker

To create the issue tracker, we write:

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  const [issue, setIssue] = useState({
    description: "",
    priority: "low",
    assignee: ""
  });
  const [issues, setIssues] = useState([]);

  const addIssue = (e) => {
    e.preventDefault();
    const { description, priority, assignee } = issue;
    const formValid = description && priority && assignee;
    if (!formValid) {
      return;
    }
    setIssues((issues) => [
      ...issues,
      { id: uuidv4(), description, priority, assignee }
    ]);
  };

  const deleteIssue = (index) => {
    setIssues((issues) => issues.filter((_, i) => i !== index));
  };

  return (
    <div className="App">
      <form onSubmit={addIssue}>
        <div>
          <label>description</label>
          <input
            value={issue.description}
            onChange={(e) =>
              setIssue((issue) => ({ ...issue, description: e.target.value }))
            }
          />
        </div>

        <div>
          <label>priority</label>
          <select
            value={issue.priority}
            onChange={(e) =>
              setIssue((issue) => ({ ...issue, priority: e.target.value }))
            }
          >
            <option>low</option>
            <option>medium</option>
            <option>high</option>
          </select>
        </div>

        <div>
          <label>assignee</label>
          <input
            value={issue.assignee}
            onChange={(e) =>
              setIssue((issue) => ({ ...issue, assignee: e.target.value }))
            }
          />
        </div>
        <button type="submit">add issue</button>
      </form>
      {issues.map((issue, index) => {
        return (
          <div key={issue.id}>
            <p>description: {issue.description}</p>
            <p>priority: {issue.priority}</p>
            <p>assignee: {issue.assignee}</p>
            <button type="button" onClick={() => deleteIssue(index)}>
              delete issue
            </button>
          </div>
        );
      })}
    </div>
  );
}

We define the issue state which is an object.

Then we define the issues state which is an array.

Next, we define the addIssue function to add items to issues .

In it, we call e.preventDefault to do client-side form submission.

Then we check if description , priority and assignee have values.

If they have, then we call setIssues with a callback that returns a copy of the issues array with a new entry added to it.

The uuidv4 function returns a unique ID for the issues entry.

Next, we define the deleteIssue function which calls setIssues with a callback that returns a copy of the issues array without the entry with the given index .

Below that, we add a form with the onSubmit prop set to addIssue to let us add an entry to the issues array.

Inside it, we have 2 inputs and one select element with their value and onChange props set.

value has the value of each field.

And the onChange prop let us set the values.

We set them to functions that call setIssue with a callback that returns a copy of the issue object with a new property overwriting the existing one.

Then button with type submit runs the onSubmit handler when we click it.

Below that, we call issues.map to render divs with the issue values.

And below that, we add a button with the onClick prop set to a function that calls deleteIssue to remove the issue with the given index .

Conclusion

We can create an issue tracker with React and JavaScript.

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a percentage calculator with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app percentage-calculator

with NPM to create our React project.

Create the Percentage Calculator

To create the percentage calculator, we write:

import React, { useState } from "react";

export default function App() {
  const [pointsGiven, setPointsGiven] = useState(0);
  const [pointsPossible, setPointsPossible] = useState(0);
  const [percentage, setPercentage] = useState(0);

  const calculate = (e) => {
    e.preventDefault();
    const formValid = +pointsGiven >= 0 && +pointsPossible > 0;
    if (!formValid) {
      return;
    }
    setPercentage((+pointsGiven / +pointsPossible) * 100);
  };

  return (
    <div className="App">
      <form onSubmit={calculate}>
        <div>
          <label>points given</label>
          <input
            value={pointsGiven}
            onChange={(e) => setPointsGiven(e.target.value)}
          />
        </div>

        <div>
          <label>points possible</label>
          <input
            value={pointsPossible}
            onChange={(e) => setPointsPossible(e.target.value)}
          />
        </div>
        <button type="submit">calculate</button>
      </form>
      <div>percentage:{percentage}</div>
    </div>
  );
}

We have the pointsGiven , pointsPossible , and the percentage states which are all numbers.

Next, we define the calculate function to calculate the percentage from pointsGiven and pointsPossible .

In it, we call e.preventDefault() to do client-side form submission.

Next, we check if pointsGiven and pointsPossible are 0 or larger.

If they are, then we call setPercentage with the expression to calculate the percentage .

Next, we add the form with the onSubmit prop to add the submit handler.

In it, we have the inputs with the value and onChange prop to get and set the states respectively.

e.target.value has the inputted value so we can use it to set the states.

The submit handler is run when we click on the button with type submit .

Below the form, we show the percentage result.

Conclusion

We can create a percentage calculator easily with React and JavaScript.

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a grade calculator with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app grade-calculator

with NPM to create our React project.

Also, we’ve to install the uuid package to let us assign unique IDs for each grade entry.

To do this, we run:

npm i uuid

Create the Grade Calculator

To create the grade calculator, we write:

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";

export default function App() {
  const [grades, setGrades] = useState([{ id: uuidv4(), value: 0 }]);
  const [average, setAverage] = useState(0);

  const addGrade = () => {
    setGrades((grades) => [...grades, { id: uuidv4(), value: 0 }]);
  };

  const deleteGrade = (index) => {
    setGrades((grades) => grades.filter((_, i) => i !== index));
  };

  const calculate = (e) => {
    e.preventDefault();
    const formValid = grades.every(({ value }) => !isNaN(+value));
    if (!formValid) {
      return;
    }
    setAverage(
      grades.map(({ value }) => value).reduce((a, b) => +a + +b, 0) /
        grades.length
    );
  };

  return (
    <div className="App">
      <form onSubmit={calculate}>
        {grades.map((g, i) => {
          return (
            <div key={g.id}>
              <label>grade</label>
              <input
                value={g.value}
                onChange={(e) => {
                  const grds = [...grades];
                  grds[i].value = e.target.value;
                  setGrades(grds);
                }}
              />
              <button type="button" onClick={() => deleteGrade(i)}>
                delete grade
              </button>
            </div>
          );
        })}

        <button type="button" onClick={addGrade}>
          add grade
        </button>
        <button type="submit">calculate average</button>
      </form>
      <div>Your average grade is {average}</div>
    </div>
  );
}

We define the grades state set to an array with one entry initially.

Then we define the average state that holds the average grade.

The addGrade function lets us add a grade entry.

In it, we call setGrades with a callback that returns a copy of the grades array with a new entry at the end.

The id is set to the return value of uuidv4 to set the unique ID.

Then we create the deleteGrade function that calls setGrades with a callback that returns the grades array without the given index to remove the given entry from the grades array.

The calculate function calculates the average.

In it, we call e.preventDefault() to do client-side form submission.

Then we check if each value property of each grade entry is a number.

If they are, then we call setAverage with an expression to calculate the average.

We map grades to an array with only the value values.

Then we call reduce on that array to add all the values together and return it with the callback.

The 2nd argument of reduce has the initial return value.

Below that, we have the form with the onSubmit prop set to submit to make the form submission.

Inside it, we render the grades array into an input.

The key prop is set to g.id to set it to a unique ID so that React can keep track of the entries.

The value is set to g.value .

In the onChange callback, we make a copy of grades . Then we set the value of the grades entry with the given index to e.target.value .

e.target.value has the inputted value.

Then we call setGrades to update the grades array with the latest values.

Below that, we have the delete grade button that calls deleteGrade when we click it.

And below the inputs, we have the add grade and calculate average buttons.

The add grade button calls addGrade when we click it.

And the calculate average button triggers the submit event since it has type submit .

And below the form, we show the average grade value.

Conclusion

We can create a grade calculator with Reacr and JavaScript.

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a temperature converter with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app temperature-converter

with NPM to create our React project.

Create the Temperature Converter

To create the temperature converter, we write:

import React, { useState } from "react";

export default function App() {
  const [celsius, setCelsius] = useState(0);
  const [fahrenheit, setFahrenheit] = useState(0);

  const convert = (e) => {
    e.preventDefault();
    const formValid = !isNaN(+celsius);
    if (!formValid) {
      return;
    }
    setFahrenheit(+celsius * (9 / 5) + 32);
  };

  return (
    <div className="App">
      <form onSubmit={convert}>
        <div>
          <label>temperature in celsius</label>
          <input value={celsius} onChange={(e) => setCelsius(e.target.value)} />
        </div>
        <button type="submit">convert</button>
      </form>
      <div>
        {celsius}c is {fahrenheit}f
      </div>
    </div>
  );
}

We have the celsius and fahrenheit states which we use to set the celsius and Fahrenheit values respectively.

The convert function is where we convert the celsius value to fahrenheit .

In it, we call e.preventDefault() to do client-side form submission.

Then we check is celsius is a number with isNaN .

If it’s a number, then we call setFahrenheit with the formula to compute the Fahrenheit from the celsius .

Below that, we have the form element with the onSubmit prop set to convert .

In it, we have an input to let us set the celsius .

value is set to celsius and the onChange prop is set to a function to set the celsius value.

e.target.value has the inputted value.

onSubmit is run when we click the button with type submit .

Below that, we display the celsius value and the fahrenheit equivalent.

Conclusion

We can create a temperature converter easily with React and JavaScript.

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a palindrome checker with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app palindrome-checker

with NPM to create our React project.

Create the Palindrome Checker

To create the palindrome checker, we write:

import React, { useMemo, useState } from "react";

export default function App() {
  const [word, setWord] = useState("");

  const isPalindrome = useMemo(() => {
    return word === word.split("").reverse().join("");
  }, [word]);

  return (
    <div className="App">
      <form>
        <div>
          <label>word to check</label>
          <input value={word} onChange={(e) => setWord(e.target.value)} />
        </div>
      </form>
      <div>Is Palindrome:{isPalindrome ? "Yes" : "No"}</div>
    </div>
  );
}

We have the word state which we bind to the input with the value and onChange props.

We set the value of it with the onChange prop, which has a function that calls setWord with e.target.value .

e.target.value has the inputted value.

Next, we create the isPalindrome variable with the useMemo hook.

The first argument of it is a callback that returns the comparison between word and the reversed word.

We reverse word with word.split to split the word into an array of characters.

Then we call reverse to reverse the character array.

And we call join to join the character array back to a string again.

In the 2nd argument, we pass in an array with the word entry so that the returned value in the callback in the 1st argument is updated whenever word changes.

In the form, we show the input and the value is isPalindrome to the user.

Conclusion

We can create a palindrome checker with React and JavaScript.