React doesn't Work

[MahloKevin]

Hey Guys,

so i'm pretty new to web development. I tried to install React, that seems to have worked. Unfortunately the example code on the React Website still doesn't work.

If someone could help me and explain what i did wrong, i would be very thankful.

[ryanfabela]

Can you share where you got the code from?

[MahloKevin]

Can you share where you got the code from?

https://react.dev/learn/add-react-to-an-existing-project The code itself is from Step 2

[ryanfabela]

made a pr hopefully fixing your issue: https://github.com/MahloKevin/bestellsystem/pull/2

You needed to add a build system for React to work properly. I added vite

[ryanfabela]

@MahloKevin Taking a look at the issue you mentioned in the PR. Didn't see that message till now

[ryanfabela]

@MahloKevin try running npm run dev. Worked for me. I'll look into the build issue

[ryanfabela]

@MahloKevin the issue is that you are probably trying to view the index.html file in the root of your project. This will not work since it is referencing the un-compiled react file. Instead you need to use the dist/index.html file instead. This dist folder contains all the transpiled react code and updated html files that now reference the correct code for the browser. You can quickly test this by "cd-ing" into the dist folder and then running python3 -m http.server. This create a server, likely with port 8000, though you can see what port it uses in the output. View the site at http://localhost:8000

[ryanfabela]

^ after running npm run build of course

[MahloKevin]

@MahloKevin the issue is that you are probably trying to view the index.html file in the root of your project. This will not work since it is referencing the un-compiled react file. Instead you need to use the dist/index.html file instead. This dist folder contains all the transpiled react code and updated html files that now reference the correct code for the browser. You can quickly test this by "cd-ing" into the dist folder and then running python3 -m http.server. This create a server, likely with port 8000, though you can see what port it uses in the output. View the site at http://localhost:8000

I'm gonna cry tears of happiness! It works!!! Thank you so much. Imma note that down. Do you per chance know what i would need to do so i can host it on a real Webserver?

[MahloKevin]

@MahloKevin the issue is that you are probably trying to view the index.html file in the root of your project. This will not work since it is referencing the un-compiled react file. Instead you need to use the dist/index.html file instead. This dist folder contains all the transpiled react code and updated html files that now reference the correct code for the browser. You can quickly test this by "cd-ing" into the dist folder and then running python3 -m http.server. This create a server, likely with port 8000, though you can see what port it uses in the output. View the site at http://localhost:8000

Sorry that i need to disturb you again, but do you know why my cards are different from my local version? The button ist just gone...

[ryanfabela]

No problem. I will take a look at that.

To host it you could deploy the dist folder with github pages easily. For backend you could use something like https://fly.io/ or some other cheap shared VM. But I wouldn't worry about hosting until you have your site ready. No need to pay for all of that or add all that complexity until you have some MVP/Beta ready to go

[ryanfabela]

If you look below, you can see that your styles for height are not applied before compile (or what you called local), but afterwards they are.

1. Your height is too small to cover your content. You should either remove it, or set it to the correct height. Be mindful that if you set a height and you have a long item name, then it will overflow and you will lose the button again. You can use text-overflow to handle that case
2. The order of your styles matter. Remember, CSS stands for Cascading Style Sheet. So the last one will be applied if the specificity is the same for multiple matching styles. In the precompiled, its above bootstrap in the index.html. In the compiled index.html it is below bootstrap so your styles.css is overriding bootstrap.

If you decide you want to set the height, you will need to address item 2 above. You can do that in two ways:

1. Move your styles.css import to the top of the file in the root index.html
2. increase the specificity of your selector. Something like .card.card_fit or div.card_fit

There is no right answer for those two options. Its a preference and you will get different answers and different pros and cons. Personally I would go and do both because why not? I get the best of both and only real consequence I see is a few extra characters for the extra specificity, which is nothing

Before compile: After compile:

[MahloKevin]

If you look below, you can see that your styles for height are not applied before compile (or what you called local), but afterwards they are.

1. Your height is too small to cover your content. You should either remove it, or set it to the correct height. Be mindful that if you set a height and you have a long item name, then it will overflow and you will lose the button again. You can use text-overflow to handle that case
2. The order of your styles matter. Remember, CSS stands for Cascading Style Sheet. So the last one will be applied if the specificity is the same for multiple matching styles. In the precompiled, its above bootstrap in the index.html. In the compiled index.html it is below bootstrap so your styles.css is overriding bootstrap.

If you decide you want to set the height, you will need to address item 2 above. You can do that in two ways:

1. Move your styles.css import to the top of the file in the root index.html
2. increase the specificity of your selector. Something like .card.card_fit or div.card_fit

There is no right answer for those two options. Its a preference and you will get different answers and different pros and cons. Personally I would go and do both because why not? I get the best of both and only real consequence I see is a few extra characters for the extra specificity, which is nothing

Before compile: After compile:

Well that indeed is a very detailed explanation. I'm still a bit confused by the priority of my own styles.css but i guess i will figure it out. You helped me a lot, thank you very much. At least for now all my problems are fixed thanks to you. :)

[MahloKevin]

Welp, i broke it again. This stuff is too complicated for me

[ryanfabela]

I'm headed to bed right now (CST time zone) but I will take a look in the morning.

And you got this. It takes time. I struggled with the same issues and difficulty when I started on react. I still run into issues several years later. I'll send some learning resources later as well that might be able to help

[MahloKevin]

Yeah no problem, have a good sleep. Thank you for all your help and the kind words.

Edit: I just saw that React worked when i used "npm run dev", but it didn't when i used "python3 -m http.server" Maybe that helps us or smth

[ryanfabela]

jsx issue

So the issue was likely that you had not built it and ran the python3 -m http.server command in the root directory, not in the build directory. npm run dev essentially will handle serving the original (source) code for you and do hot reloading on changes.

• You can read more about their hot module replacement: https://vitejs.dev/guide/features.html#hot-module-replacement
• You can read more about the dev server options here: https://vitejs.dev/guide/cli.html#dev-server
• Here is their docs on building for production: https://vitejs.dev/guide/build.html

Running the dev server gives you better debugging and nicer dev experience at the cost of performance of your app. The performance is not an issue but should not be used to serve your app in production for that reason AND you should not debug performance issues using the dev build. Instead build a production build and do your testing there (unlikely you will have much performance issues outside of complex animations or rendering large lists [or doing complex UIs like figmas online editor])

Learning Resources

I don't know your experience so I am going to assume you are just starting out with web development.

• I find the classes at freecodecamp to be a great place to start
• you should definitely go through reacts learning page: https://react.dev/learn
• When I first started learning react, I learned by building a lot of things and watching this guys videos. He is fantastic. I know this isn't free but I still feel like its worth it
• Some youtube channels that I find useful:
  • Continuous Delivery
  • Language agnostic opinions for architecture, coding practices and soft skills (the most important skills really)
  • DevTips
  • Old channel (just started posting again recently though) but great information on web development
  • Dreams of Code
    • A wide range of topics covered. Great way of learning new things
  • Fireship
    • great short videos on a wide range of topics. Another great way to get introduced to new ideas
  • Google for Developers
    • short videos about web development, in specific Chrome. Might have to filter out some stuff to only focus on the web dev stuff or devtool videos but overall pretty good stuff
  • Hussein Nasser
    • A fantastic resource on deep dives into how things work in web and the backend. Really in depth and technical but he does a great job of making it easy to follow. Might be too much right now but give it a shot and if not, try again later down the line.
  • Web Dev Simplified
    • another great resource. Covers all things web development, including CSS. Shorter and longer videos as well
  • Zen of Coding
    • a great resource when it comes to react, event the older things

Resources I am currently using (outside of the youtube channels above)

1. Frontend Masters, specifically this video right now: https://frontendmasters.com/courses/algorithms/
2. leetcode.com: I use this for practice sometimes. Most jobs are not using things you would do in leetcode but its important to polish your problem solving skills in general and apply/learn/refine the fundamental algorithms
3. https://gameprogrammingpatterns.com/contents.html: just more design patterns

[ryanfabela]

Definitely focus on understanding not just React but typescript/javascript as well (you really should be using/learning typescript from now on). Also learn your tools and things (like React, npm, node, vite, etc) that you use. You don't need to learn every little thing but you should read the docs and understand how they work and why we use them. You'll get a deeper knowledge of it as you use it more.

Try to stick to a tech stack and set of tools once you find ones you like. switching to often can result in you knowing very little about anything. Better to be a master of a few things then a novice at a lot things

[MahloKevin]

Definitely focus on understanding not just React but typescript/javascript as well (you really should be using/learning typescript from now on). Also learn your tools and things (like React, npm, node, vite, etc) that you use. You don't need to learn every little thing but you should read the docs and understand how they work and why we use them. You'll get a deeper knowledge of it as you use it more.

Try to stick to a tech stack and set of tools once you find ones you like. switching to often can result in you knowing very little about anything. Better to be a master of a few things then a novice at a lot things

I will try more. I maybe should read more in the docs and dont always ask for help. Thank you for the Learning Ressources and thanks for looking into my project. I hope that's the last time i need to ask about some issues i'm having.

[ryanfabela]

No no, feel free to message me or ask questions online or to others. I do it all the time too and I'm a lead developer. It's no problem at all and part of this industry. We all are learning. There's way to much to know for one person or even one team. I mean most companies I have worked for outsource some portion of the tech to another company. We all need assistance. You got this. I'm here to help as is the rest of the community

[MahloKevin]

Hey Ryan, could you have a look on this project as well https://github.com/MahloKevin/V2.git, somehow the build ist completly wrong. I can't seem to find the issue and chatgpt is not very helpful atm. thank you <3

[ryanfabela]

Just saw this No problem, I will take a look later today

[ryanfabela]

What issues are you having? It looks pretty good to me. Was able to run npm run build and npm run dev without issue. Website looks fine

[MahloKevin]

Yeah with npm run dev it works but if i start it via phython it doesn't load my react elements. The same occurs if i clone and build my project in my apache webserver. I guess in the end it is pretty much the same thing, my theory is that i placed react wrong in my project or i need to configure something. (Just wanna say that i also did improve in knowledge about vite and react thx to you)

[ryanfabela]

Glad to hear the improvement! Apologize for the delay, a little busy at work. Taking a look right now

[ryanfabela]

When you run npm run build you can see it tells you that the script tags are missing the type="module" attribute. Adding those fixes the issue:

You can see the diff below on the changes I made to get it to work:

[ryanfabela]

Let me know if that works for you

[MahloKevin]

So apparently my brain just ignored this little warning. Now i fixed it and built it again, but unfortunatly it still doesn't work. Still i've found a message that might help. I don't know the error message and how to fix it, i will try to find something that helps. If you know what i need to do, i would be grateful if you tell me.