unkempt hollow
I just started the react course and since I wanted to have it on my own pc I use VS code, I just can't see a proper output.
I started with npm install and when I the navbar didn't show properly I started using GoLive like Bob said in lesson 5, but I still can't see a proper navbar (but I was right on the challenges so I just carried on 🙂 ) and now I got to JSX and it shows me this weird listing directory instead of a simple h1, any help on how to resolve it?
slate laurel
Unfortunately, when you download a project from scrimba it doesn't come with everything you would need (as far as I know).
You won't be able to use live-server for a project which doesn't purely static. Live server will create you a server to serve your files and listen to file changes.
For a react/svelte/vue/solidjs etc... project you would need a bundler which will bundle your files.
The easiest approach would be the following:
vite: https://v4.vitejs.dev/guide/#scaffolding-your-first-vite-projectnpm install - this will install all the packages/dependencies your project needsnpm run dev - this will start the developer server, usually on port 5173cmd + left click on the link in the console or open up a browser and type in the following: localhost:5173
unkempt hollow
thanks 🙂 I'll try it after lunch... 🍔
mild merlin
@slate laurel I have tried it and it worked for most of the project but for React movie project , blank screen is appearing , do you know why it might have happened?
slate laurel
<@331129557681963018> I have tried it and it worked for most of the project but ...
Would you be able to share a github repo with us?
The error message in the developer console could also be helpful. 🙂
mild merlin
@slate laurel https://github.com/chetu2/movie_react/tree/main here it is
slate laurel
<@331129557681963018> https://github.com/chetu2/movie_react/tree/main here it is
hm I am afraid you started to setup your project manually using webpack. You are missing a lot of configuration, unfortunately.
As I recommended in a message before, use vite to setup your base project, then start moving your files into it.:
https://v4.vitejs.dev/guide/#scaffolding-your-first-vite-project
mild merlin
@slate laurel
https://github.com/chetu2/movie_2/tree/master/react_mov
can you please look into this
slate laurel
<@331129557681963018>
https://github.com/chetu2/movie_2/tree/master/react_mov
this looks better. I'll take a look.
slate laurel
<@331129557681963018>
https://github.com/chetu2/movie_2/tree/master/react_mov
The reason why you don't see anything when you run the dev server is because by default vite looks for an index.html in the root directory but you have in inside the public folder. You can either move the html file into the root directory or configure vite's entry point.
Take a look at their documentation, they explain why they took this step:
https://v4.vitejs.dev/guide/#index-html-and-project-root
Then you can read about how to make it work if you have multi page applications.
https://v4.vitejs.dev/guide/build.html#multi-page-app
In your case the easiest solution would be to move the index.html into the project's folder.
Now this would make you see a white screen at least not a 404 error.
The next error is inside the console:
This error occurs because JavaScript running on the web doesn’t include default support for ES module syntax.
To solve this, inside your index.html you need to add type="module" to the script tag to indicate the browser that you are using modular system.
<script type="module" src="/src/main.jsx"></script>
@mild merlin I would also recommend you not to push node_modules golder to your github repo. It is not necessary, the package.json contains (or should contain) all the relevant packages in order to run the application.