Introduction to JavaScript Libraries and Frameworks - What is Vite, and How Can It Be Used to Set Up a New React Project?

Tell us what’s happening:

I am not sure what I am suppose to be doing with the lesson. Am I just supposed to be just reading it and answering the questions or am I at least being encouraged to do it alongside working on the lesson. If the latter, I am not finding it very easy to understand and screenshots would be helpful. I am using windows 11 Home and can give version and build numbers if helpful. I think I have made so far but probably best for those seeing it, in the future to start at the beginning,

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0

Challenge Information:

Introduction to JavaScript Libraries and Frameworks - What is Vite, and How Can It Be Used to Set Up a New React Project?

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lecture-introduction-to-javascript-libraries-and-frameworks/6734e88cc46e6dc679420040.md at main · freeCodeCamp/freeCodeCamp · GitHub

By so far I nearly said but was aware I was nearly at the character limit. I stopped at npm install but that is assuming I am right to this point.

Hi @markcactus,

Do you see a package.json file in your project folder now? You should also have a node_modules folder.

Happy coding

No here is a couple of screenshots

Note: Identical lines are identical not repeated, the first screenshot showing the start, the second the end.

It looks like Node.js dependencies were installed. What is the structure of your my-react-app project?

Do not know how to answer that question, just trying to do what the lesson says.

Hi @markcactus

So, all dependencies have been installed and you can follow the task instructions.

There is description what is package.json and node_modules, how to run project, open up a new browser, etc.

This lesson is just about using Vite to help you set up a React project.

I went ahead and followed the instructions, and it looks like you did not actually let it do the setup for you because when it asked if it was okay to install with npm and start now, you answered “No”.

Here’s what my terminal in VSCode looks like:

Then skipping a bunch of complaints about eslint during the dependencies install:

I did “ctrl + click” on the localhost link and I see the starter template that Vite created for me:

And here’s what the file structure looks like in VSCode:

Hope that helps you understand a bit more about what Vite can do for you.

Happy coding

I showed you what could be seen on the command prompt unedited, not redone mistakes intact. I was already of doing that twice.

I don’t recall pressing no however in all the setting up I could see me pressing the wrong button. I personally feel this lesson probably could with more information though possible as a optional appendix (not correct terminlogy but hopefully context help) some what similar to the certification projects.

I am prepared to go back on this sentence what is included in the lesson contain what is common to all when factoring in operational systems and variation within what I was asking for is probably impractical, There are also probably guide online I did not make use of instead muddling along myself.

I am trying to do this again an I have come with something I did not last time. I thought rather than guess I would ask help.


Let me know if I need to do something else instead, due to errors I made last time such delete and redownload node.js.

the directory (which is an other name for folder) you have selected is not empty, so it is asking you if you want to keep the files inside that directory or remove them, or if you want to choose an other directory

To choose a different directory choose “Cancel operation” and then run again the command with a different folder name.

To delete the files inside the folder choose “Remove existing files and continue”.

To keep the files inside the folder choose “Ignore files and continue”.

Select the option you want to choose by going up and down with the arrows, and then press enter to confirm the option.

I think it is the second option in my case but I am not sure I would rather not create a bigger problem for me to fix. You may tell me you cannot due to the rule, ‘I need to work things out for myself’ but I would at least like to believe it is an appropriate place as it relate following along with a lecture, not a lab or certification project.
What I want to I have already said in a way in this message (‘following along with a lecture’) or in prior ones. However to say again in a detailed and clear way, to be able to entered all the commands in in lecture and achieve the desired effect.

you can also delete the my-react-app folder before trying again so the script does not ask you this question

Still confused how do I get to the node_modules folder and is what I have done so far the/a right way.


image

now that vite is installed, you can look inside the folder, or thorugh the Explorer of your computer, or through the file explorer of the code editor you are using, or through the terminal, depending on what you are used to

I think I am done, I am now able the modify the count number, I would be happy to share a screenshot the main reason I haven’t is in case I am breaking the sharing the full solution rule but you would know whether this is a violation or not. One thing to note both for those reading this and because I don’t full understand myself and might appreciate knowing more, if you find a folder called node that is node_modules. If I try to explain it in more detail I might go wrong, I will leave that to someone more knowledgeable e.g. @ILM.

I forget to stay it took me a while to work it out, based on what ILM said in the last post and reading the lesson properly, so encouragements to other to persevere. However I would not be surprised if other find it a lot easier, there are good reasons, it took me a while, in the context I was doing it.

the node_modules folder is called node_modules, like:

if you found a node folder that is a different folder