Ok I'm just kidding, but anyways! You've found yourself in my very first rodeo with React development, for this adventure, I followed the "Complete intro to react V8" course with Brian Holt, I already had knowledge in frontend development but React.js was a whole different can of worms
React is a framework for showing stuff in a web environment, if we imagined HTML, CSS and Javascript were all pens and pencils, React.js would be some sort of stamp, of course, setting up your stamp is going to be way harder than making your drawing with pencils, but in the long run, the websites this will creat will be way more lightweight, the code will be easier to read and it is simply way more convenient.
As said, I followed the "Complete intro to React V8" course when making this project, making it so it's pretty similar to the course's content.
The course and its API are all about making a pet adoption website, where you can look at a pet, its info, and a picture, as I said before, React.js is kind of like a stamper tool, where I didn't need to write each and every pet and its info down by myself, but just created a "stamp" that looked for different info on an API and then showed multiple values from that API.
funny story, I like to diversify myself from the course, which is why the folder name is called Eat Me! because it was supposed to be a butcher shop instead of an adoption store, but I later learned that the info pulled from the API wasn't useful for a butcher shop, and that it would look really really awkward if I implied Lila the bunny would get a grim fate, so yeah... I abandoned that idea pretty quickly
GitHub pages didn't quite work for me, maybe because index.html wasn't in the root directory, but rather in src, which is why I'll tell you now how to install it into your computer to run it locally!
The very first step is obvious, clone this repository into your machine, open up your Git terminal of choice and type:
git init
git clone BraixenFan/Test-course-for-react
That should download a ton of files into your computer, my files! But not all the files, the files in node_modules are .gitignore-d and you may also not have a proper version of React installed on your machine.
Go install Node.js on your computer from this website, version 18.15.0 should be enough for this project, also install the React development tools if you use a chromium browser, once you've got that installed, open this project in visual studio and run:
npm init -y
npm install --global prettier
npm install -D prettier@2.7.1 -D
npm install -D eslint@8.24.0 eslint-config-prettier@8.5.0
npm install -D vite@3.1.4 @vitejs/plugin-react@2.1.0
npm install react@18.2.0 react-dom@18.2.0
npm install -D eslint-plugin-import@2.26.0 eslint-plugin-jsx-a11y@6.6.1 eslint-plugin-react@7.31.8
npm install -D eslint-plugin-react-hooks@4.6.0.
npm install react-router-dom@6.4.1.
npm install @tanstack/react-query@4.10.1
This should install everything needed for this to run, as well as care for the code if you deecide to play with it yourself. If you just want to see the code though, then just go into the terminal and type:
npm run dev
If it didn't automatically open a browser window for you, then open your favourite browser and go to http://localhost:5173/, vite should have deployed the site to this host for you to see it, it should also tell you if the port is different, but it should be that one.
And there you go! You should be seeing the fruits of my labour now! And I hope you like what you see, of course it isn't very me if you get what I say, but it's just the beginning of my adventure with React, I've already got other ideas that would be perfectly fit for this framework, and this is just the first step.
So stay tuned!