Well, it's been a few days since I started the React basics section on Scrimba. This was some of the most fun I've had.

Firstly:

I learned how to set up a React environment. You have to install Node.js on your computer and make sure you have npm installed. To be honest majority of the lessons were done in Scrimba's editor so they had the dependencies set up already.

However, they still explained how to set up the environment on your local machine. First I did it the standard way of using create react app. Later they introduced us to this technology called Vite, and this cut down the time to get the React App set up by a huge amount. This was nothing to sniff at. I think in the future I will be using Vite to set up my projects in VScode. It has options for vanilla JS, Vue, React, and some others I haven't heard of, preact, lit and svelte. Inside React they have an option for regular React with Typescript.

We covered what Components are and how React uses Components to build out a full website. So instead of working on the entire site with HTML, CSS, and JS, you would build the site component by component. However, for a basic static site, you may not see the full benefits of React other than being more organized.

I learned that for the different JS files to speak to one another you would have to import and export the different files where necessary.

Secondly:

I learned about Props. Props were a huge topic. Basically, if you want to include dynamic information into a specific component like, let's say a Card. You would go to the App.js file and give it "props" in the same way you would give an HTML element its attributes. Then in the Component file when creating the component you would pass props into the function as a parameter and you would be able to access the props given to the Component in the App.js file to introduce dynamic data.

The way we did it was still a way of hard-coding data into the component. So moving on further, we used a JS file with an array of data. We would use the .map method to iterate over the array of data and pass in the props to the components that way, this would dynamically update each individual component using the data we received.

That was a lot, lol. Look forward to putting that information into practice and create a project using it. That's all for now. Till next time.