Learning React Website!!!

With my very limited html knowledge, most of which was learnt within an hour or 2 making this website, I have found react to be very intuitive and simple. With the help of this epic man, I was able to learn the basics of react in just 3 days and I was able to make this basic but professional "blog" website in preparation for my future collage assignment.

One good thing that stands out to me the most is how the "id" and "className" work and how it can be called in any file. I do most of my coding in the Godot game engine and if I want to use a function from another script I have to reference the script file path and save it as a variable then call the function. However if I want to add the className "main-container" to a div I can just do that without having to reference globals.css! All I need to do is import "@/styles/globals.css" into the main app.js script and it will be loaded for everything! This helps to stop massive, ugly and un-optimized code such as this, which is for loading variable from another script:

I don't even need a globals.css to reference it anywhere, I can reference menu.css from anywhere if I wanted to! Its only there for origination or for making a program more secure as you can import the css file on a per script bases so only menu.js can access menu.css.

One this I don't like about the class and ID system is that if I want to give something specific, specific properties I have to make a new ID for each one. However as I am typing this I have been informed by EnderDev that for things like images I can set the width and height in the same section that I can ID's and classNames so I wont need to make a million different ID's for each image!

One of the hardest things for me to understand and use are the "if statements" and the variable in react and how to use them to make buttons to open and close menus and to animate things. From what I have learnt so far is that you need to make a const that holds a variable(bool) and then a function to switch it from false to true and then set the useState. Then you need to pass them into a something, im not sure what to call this "set_open= set_menu_open open= menu_open" and then on the pages or components that you want to use these variables in you need to add it in the function part at the top of each js script. I think I have got that right and its a very bad explanation of this, but I can understand it, maybe EnderDev will edit this part of the website hahaha.

From here I will continue to expand on this website and just repeat type as much of the thing I have learnt already and not copy and paste them from other parts of scripts so I can fully learn the bare basics before I get ahead of myself like I do most the time when learning something new. Here is a check list on what I need to do for this website:

(Have not learnt how to render lists properly)

Soon after I have finished this website I will go on to make my own website for myself with links to every such as discord github etc etc. I am not sure what kind of website I want to make but I think it will be a lot of fun and very practical and will give me a lot of space to apply my knowledge and learn. I want to focus more on animations and media for my own websites as this one is very static and I have so many complicated idea I want to try!

The entire reason I am learning react and HTML is for an upcoming "learning to make websites" assignment where we are meant to design, plan and then code the websites similar to the 4.2 programming assignment I did recently. However this time I want to do it "properly" and make a really nice website and get top marks and hopefully have the best looking website in the class. We are suppose to make this website in only HTML and CSS however just like 4.2 we can do it however we want as long as we document our bad code and link any library's we used etc etc. Anyway after listing to EnderDev rant on about how powerful react is and how it is used with almost everything including desktop apps and games, I thought it would be one of the better things to learn over the easter holiday break.