SweetAlert VS create-react-app

Sunday morning programming fun. Created a little game to compare items from a list head-to-head and pick a winner. Inspired from social media short videos where people choose their favourite food, song, holiday destination etc. There are some example lists of cities, movies, actors, fragrances etc to play with and you can create your own list of items and play.

Check it out - https://yash.info/head-to-head.html

I created it mainly to pick a favourite fragrance from my collection of 50+. Not only is a fun project to build but it also allows me to use some of the interesting libraries and code snippets I find.

Programming logic wise there’s nothing fancy happening here, just picking a random element from an array and doing some JS and CSS around that.

New thing that I got to learn was generating a random color of a specific type (pastel, fluorescent, light) by playing with HSL values in a specific range instead of the RGB.

Discovered https://arraythis.com to convert a list to a JS array.

Used SweetAlert https://sweetalert.js.org for alert messages.

Been coding for 20+ years and such little projects still give me the joy of creation plus you always learn/find something that you did not know yesterday.

SweetAlert is a gorgeous notification library you can use to replace built-in alert function in your JavaScript applications. You can include buttons and icons, alter the text’s color, and even add alerts that adjust in response to user clicks.

Are you sure you're using SweetAlert2 and not SweetAlert1 because your syntax looks like 1.

SourceCode | Demo

Import Sweet Alert to your project

sweetalert:

Sweet Alert - A beautiful replacement for success messages, error messages or info messages

Big question, though: Are you using SweetAlert, or SweetAlert2 ?

Create React App (CRA) abstracts away the complexity of configuring Webpack, Babel, and other build tools, allowing developers to focus on writing React code. It includes features such as hot module reloading for efficient development.

Immerse yourself in the official Create React App documentation for a deeper understanding.

Create React App (https://create-react-app.dev/)

- And ofc, there are some templates/frameworks that bring something of that together (https://create-react-app.dev/; maybe https://vitejs.dev/) - google for templates.

I recommend finding some friend with modern experience or at least some youtube tutorials or at least some learning course. That would help you to catch up on the best way to bootstrap your first project. Then you can practice.

What's the connection?

Also, take a look at this response from 2021: https://github.com/facebook/create-react-app/discussions/117...

Create React App Documentation

Inside the react-tutorial-app folder, to create a new React project runs the following command using create-react-appand for more details on how create-react-app works and other staff, please visit the official website: https://create-react-app.dev/

Before we embark on our journey, make sure you have React installed and a React project set up. If not, fear not! Create React App is your trusty sidekick for a quick start.