Let's Make a Pokémon Themed Note Keeping App in React!

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SonarLint - Clean code begins in your IDE with SonarLint
  • Scout APM - Less time debugging, more time building
  • SaaSHub - Software Alternatives and Reviews
  • Poket-Book

    A Pokémon Themed Note Taking App Made with ReactJs.

  • kuma

    The project that powers MDN. (by mdn)

    //Favorites.js import React from 'react'; import {Col, Row} from 'react-bootstrap'; //Initiate the Faves function that will display our main display components, ie the link, button, and category function Faves ({ favorite, visitFaves, index, removeFaves }) { return ( {/*displays link*/} {favorite.text} {/*deletes favorite*/} removeFaves(index)} className="btn btn-icon-trash"> button> visitFaves(index)} className="btn btn-icon-redo"> button> ); } //sets our initial state of our fave list to null function FaveForm({ addFaves }) { const [value, setValue] = React.useState(""); const handleSubmit = e => { e.preventDefault(); if (!value) return; addFaves(value); setValue(""); }; //returns a form to add a new fave item to our list return ( setValue(e.target.value) }/> Favorite!💖 ); } //FavoriteLinks function ties it together function FavoriteLinks() { const [favorites, setFaves] = React.useState([ //default values are passed for display purposes { text: "https://www.youtube.com" }, { text: "https://github.com/christinec-dev" }, { text: "https://developer.mozilla.org/" } ]); //adds a favorite to the list const addFaves = text => { const newFaves = [...favorites, { text}]; setFaves(newFaves); }; //deletes the favorite from list const removeFaves = index => { const newFaves = [...favorites]; newFaves.splice(index, 1); setFaves(newFaves); }; //deletes the favorite from list const visitFaves = index => { const newFaves = window.location.href=`{favorite.text}`; setFaves(newFaves); }; //renders the main ui of to do list return (




    {/*maps over todo items and instantiates functions for existing items*/} {favorites.map((favorite, index, category) => ( ))} {/*form to add a new item*/}
    ); } //exports for use in other files export default FavoriteLinks;

  • SonarLint

    Clean code begins in your IDE with SonarLint. Up your coding game and discover issues early. SonarLint is a free plugin that helps you find & fix bugs and security issues from the moment you start writing code. Install from your favorite IDE marketplace today.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts