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

Programming JavaScript
1

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

2

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.

3

Hi @markcactus,

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

Happy coding

5

No here is a couple of screenshots

image
image1551×1012 50.2 KB

image
image996×775 19.3 KB

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

6

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

7

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

8

Hi @markcactus

720be861cca3ba5bdac166b221f4ebd7af73c217_2_1380x900
720be861cca3ba5bdac166b221f4ebd7af73c217_2_1380x9001380×900 160 KB

image (1)
image (1)996×775 45.1 KB

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.

9

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:

image
image917×567 18 KB

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

image
image525×421 11.6 KB

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

image
image1368×816 52.7 KB

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

image
image188×302 5.26 KB

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

Happy coding

10

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

11

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.

12

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.

13

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.

image
image1482×380 20.4 KB

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

14

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.