Did you know that you can actually create a file directly within Visual Studio code?
We can work with the structure of our project and modify it directly within Visual Studio Code.
How do we do this?
We have two options.
First we can create the file by right clicking.
We right click on it and we select New File.
Then, we just write the name of the file.
Let's say that we are creating a button for our React app.
We're not going to actually write any code, but we're just creating the file. Button.
.js
You can see that, by including the extension, we're telling Visual Studio Code and our computer's operating
system what type of file we are creating.
So you can see that the logo changes right here.
Previously it was a generic file.
Then it was a JavaScript file.
If we change this, for example, to .py, we have a python file.
You can see the logo or .jsx for a particular type of file that we can create for a React app.
Let's keep JavaScript.
Okay?
But these logos are super, super helpful to know if our extension is correct.
Okay?
Then you press Enter and the file is created.
You have a new file.
Awesome,
right?
For now, we're just going to ignore these colors and letters that you can see right here because they
are related to version control.
We will see what they mean when you reach the section on git and GitHub within Visual Studio Code,
when we start working with the version control. For now, let's focus on the actual file.
Another way to create this file would have been selecting this option right here. In the name of the
folder,
we have an option to create a new file.
If we click on it.
You can see that we have the same effect.
We can create a different file.
For example, let's say Button2.js. Of course,
this would not be a very practical name, but this is just for demonstration purposes.
It's the same process, just two different alternatives
and you can choose whichever one you like.
Great.
You can also delete a file directly within the Explorer by right clicking on it and then selecting Delete
right here.
Clicking on Delete or using the Delete key.
Then you confirm that you want to delete button to the address and you move it to the recycle bin.
And that's it.
Bye bye.
JavaScript file.
Awesome,
right?
So far we've created two files, but those files were in the main folder, my-app.
What if we want to create a new file within, for example, the src folder?
We can do that too.
But in this case, we would just need to right click on that folder, on the name of the folder, and
then select a New File.
Now you will see that the new file will be created at the same level of indentation or space that indicates
that it is within the src folder.
Then let's say Form.js
We press Enter and now that file is within src.
If we collapse the folder, you can see that the Form.js file is within src.
Okay? It's right here.
It's not in the main folder, so that is super helpful as well.
Okay?
So now we have two new files, Button.js and Form.js, and we did all of this within Visual Studio
Code.