Before we get started, I want to introduce you to a powerful online code editor called code sandbox, which we'll be using for the majority of these lessons. We're gonna start by creating a new project by clicking on Create sandbox. As you can see code sandbox supports not only react, but many other popular frameworks as well. I'm gonna go ahead and select the React project. And with a single click, I now have a fully functioning react app up and running in my browser. Code sandbox has allowed me to skip the setup and focus on the React fundamentals we're here to learn.

First thing I'm going to do since I already have an account assigned to code sandbox is my GitHub account, feel free to create an account of your own so you can follow along with the lessons. The file editor portion of code sandbox is pretty standard and work the same as most popular code editors out there. Today, you have your file browser, we can view all the files and directories in the project. As you can see, code sandbox has gone ahead and created some files for us already. If I want to add a new file or directory, I can use the buttons over here at the top. Below the file editor, we have the dependency section.

This displays all the NPM dependencies installed for the project. You can see that code sandbox has already installed some react dependencies For us, adding new dependencies is easy as well just click on Add dependency, search for the one you want, and then click it to install a single click on a file open in the preview mode. While double clicking on a file, open the file in edit mode, you may have noticed on the right something that looks like a browser window. This is a live view of the apple auto reload when a file changes. To demonstrate, I'm gonna go ahead and update our h1 to say hello react beginners. And now you can see as soon as the update is done, it automatically updates here on the right.

Lastly, I want to show you code sandbox is built in console is pretty much mimics the functionality of your browser's console. So if I go ahead and console log something else, I can see the pier here in code sandbox is console. And just like the browser console, I can also execute commands as well. If I go ahead here and an alert that says hello from the console, you can see that it gets executed and appears here at the top of the browser. Alright, enough about code sandbox already. We're here to learn about react after all.

But that being said, let's go ahead and get started.