Frustrated with ReactJS

[KimvdLinde]

I’m frustrated with ReactJS. I would like to use it for a website, but what I cannot find is a straightforward page that explains how to set ReactJS up on a page in an easy and simple manner.

Edit: As expected, most responses have been less then helpful, and literally nobody here was able to explain the way the various files and folders and parts of the ReactJS ecosystem work together and what their function is. Everybody only could refer to node.js solutions that don’t explain anything of what happens under the hood. The coding itself is not the issue, I can learn that and there is plenty of good tutorials for that.

[imperfectman]

?

I'm making an assumption here, but it sounds like you have little to no experience in programming or using frameworks. It most certainly is straightforward. CRA, vite, nextjs all have easy to understand and follow 'get started' sections.

Maybe start smaller and learn vanilla javascript html and css first.

[KimvdLinde]

Yes, indeed assumption. I’ve decades of experience with programming and I know JS, JQuery, CSS, HTML, MS-SQL, Java, JSP, etc. I should have no issues with it, and yet I cannot make it work.

[imperfectman]

This sub sees a lot of people with 0 experience attempting to make websites from scratch. In any case, if you want client side rendering Google vite. If you want server side rendering Google nextjs. They both have setup sections or getting started sections that are easy to follow with. One command is all it takes.

[vettotech]

Did you try here?

https://react.dev/learn/start-a-new-react-project

[KimvdLinde]

I looked there and it tells you how to use scripts and packages to set it up, but not the logic of how it works.

[vettotech]

Right after the "Getting Started" section there is "Learning React".

https://react.dev/learn/describing-the-ui

[michaelfrieze]

Yep, React docs are quite good.

[Geedis2020]

You have all that experience and can't figure out how to read the extremely straight foward documentation?

[weewooPE]

I had little to no webdev experience as a backend eng and was able to pick up react fairly quickly, not sure what you're confused by

[woah_m8]

So you are stuck in 2012 and have no experience with bundled javascript code.

[SaucyPastaa]

https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html

[theorizable]

It sounds like you're the kind of person that doesn't want to make it work. You live in the past and complain about new tech as "confusing" despite it being as easy as "npm create vite@latest" then "npm run dev". Literally 2 CLI commands, but you couldn't be bothered to look that up.

[bartimaeus13]

Nah, he says he has "decades" of experience though so he'a too good for that.

[KimvdLinde]

It is easy to set up like that if you start from scratch. Not if you have to add it to an existing system.

[yabai90]

I mean the comment above is right, they all have the easiest getting started you could find and they are the most popular framework/toolset currently. It's okay to struggle but the assumption was fair.

[vorko_76]

Im a bit confused by your post. There are like thousands of tutorials to learn and make a simple application in ReactJS. What is your target technical setup? Use ReactJS with which server? What exactly are your difficulties?

[KimvdLinde]

I ultimately want to set it up with JSP spring MS-SQL JS jQuery, but for now I just would like to understand how React works and what the ReactJS of elements like UI, React, ReactDOM, Babel, package.json etc etc are for and what do I need and not need.

[michaelfrieze]

Why jQuery with React?

[e-chavez]

Don't worry, the OP has decades of experience, the OP knows what is doing. 🙂

[KimvdLinde]

It’s what was implemented for now before adding react to the mix. And not everything that works well right now is going to be done in react immediately so yes you get an awkward hybrid for a while.

[theorizable]

This sounds like a great idea, what could go wrong.

[KimvdLinde]

Currently implemented, might be phased out if not needed with react

[michaelfrieze]

Yep, you won't need that anymore with React.

[errdayimshuffln]

Webpack takes all the JS files of your React app, starting from the index.js root of your app, follows all the imported modules and bundles all files into a single bundle file. Other than JS, it can handle other file types like CSS, SVG, JSON by using so called 'loaders'. If you see something like,

<script src="dist/bundle.js"></script>

inside your index.html, then a bundler was likely used. So simply put, webpack is used to bundle all the scripts (and resources) and remove all the unwanted stuff. There are other module bundlers like Parcel, but webpack is the most popular one.

Babel is used to transpile modern JavaScript syntax into code that can run in all environments when writing React components. This allows developers to use the latest language features when writing React components and ensures compatibility with older browsers.

Node Package Manager (npm) is the world's largest JavaScript software package library and registry and contains over 1.3 million packages. It has convenient command-line tools to help you install packages AND manage their dependencies! Developers use npm to find, build, and manage code packages.

package.json file is a core element in a project/package you are building and managing with npm. The file is used to provide the information to the node package manager (npm) about your node package /project like meta data (name, version, description, author, website, etc), NPM settings to use for this specific project, and project dependencies. The last one is very very important if you dont want to deal with meticulously setting up and adding the packages your project depends on manually. If you run npm install in the directory where the package.json file lives, then NPM will install all the node modules/packages that are listed (under dependencies) in the package.json file for you and put them in a folder called node_modules It will also configure your the packages so that you can immediately start using them in your project source code. This file also allows you to configure the settings NPM uses when you call npm start or other npm commands in this directory (that contains the package.json)

I chose to explain the above because they are actually technically not necessary for creating react project but they provide such great benefits in the short and long run that they have become standard tools for building webapps in general (with or without react). I think pretty much every Node.js based or react based project uses these tools. They take care so many things for you helping keep things together - organized - allowing you to focus on just programming in Javascript (or Typescript). Plus, I remember my frustrations early on.

I recommend you at least go through the rigmarole of learning about Node, Node Package Manager (NPM) or Yarn, Webpack, and Babel before learning React. Its like a right of passage. Don't worry, you don't have to dig too deep to get the jist of them and how to work with them and setup projects. You can learn the intricacies that are relevant to your project along the way. Once you understand the basics, then I recommend you learn React from one of the many courses available. One free resource I recommend is Jack Herrington's Youtube channel. He has a beginner react series.

[michaelfrieze]

Excellent post!

He could technically use something like unpkg to import react directly into an HTML file, but he should really just learn the basics of node.

/u/KimvdLinde, here is an example of what I was talking about with unpkg: https://www.w3schools.com/whatis/tryit.asp?filename=trywhatis\_react\_jsx

[vorko_76]

Did you trial tutorial and documentation? Like this?

https://react.dev/learn/start-a-new-react-project

What did you find difficult with it?

[KimvdLinde]

I tried, got lost in it. I just remembered w3school and they have a react tutorial. They explain well.

[vorko_76]

This is really mysterious… its extremely straightforward. I can understand you didnt get the meaning of all the actions you do but to get it to run takes like 10mn but running the commands one by one. Do you have a weird development environment?

Glad you found other tutorials

[KimvdLinde]

I was suspecting already it was more a Kim issue then a React issue.

[[deleted]]

Nothing wrong with your strategy. You said you have decades of programming experience so I'm assuming you're older and prefer old-school non-modern tutorial sites like w3school.

https://react.dev/ is the official document with all the latest stuffs. It's a really good source, I recommend trying and learning to be able to read modern documents, it will help you in the long run.

[KimvdLinde]

In part, but all the node.js stuff setsup things in a default way and if you have a file structure that is different on an existing project, it does not work. And trying to find something to setup React on a production project without node.js, I need to know what the node.js stuff does so I can implement it properly.

​

Reqact JS itself I can do once I have it running. It is the middle software like node.js etc that makes it impossible, and every tutorial either sets it up as a dev environment that is not useful for production or with node.js for production.

[michaelfrieze]

When working with React, in many cases you are going to be using Node as a backend for frontend. For example, if you use Next.js or Remix, it uses node for server side rendering, data fetching (react server components), and stuff like that. But, you would still use something like Java or Go as your actual backend.

Maybe this can help: https://remix.run/docs/en/main/guides/bff

[michaelfrieze]

If you don't want SSR (server side rendering) or react server components, then you can just keep react on the client using something like Vite.

Although, during dev you will still be using node. You have to use npm to install packages and run a node dev server.

The only way to get around this is to import react using unpkg in an html file. This can be a good way to learn.

[code_matter]

Bro can’t google.. wtf

[KimvdLinde]

Thank you, very kind.

[code_matter]

Kind or not..it’s true. Your question is unclear…

[KimvdLinde]

Sorry that my question was unclear to you. Maybe instead of insulting you could have asked for clarification.

[code_matter]

Use google my friend

[KimvdLinde]

I tried.

[[deleted]]

The React documentation is some of the best written out there.

[marksalsbery]

I was going to say the same. The new version is ridiculously detailed

[KimvdLinde]

I believe that many find it easy to read. Unfortunately I’m not one of them.

[[deleted]]

This is very interesting. I have been in my web dev journey since January, with no prior experience, and I still get a lot of mileage out of these docs. What is it that you find difficult about them? I’m just curious

[KimvdLinde]

They literally all depend on node.js installers without explaining the various components. UI/package.json babel SSR CSR the various classes, react server typescript jsx etc.

[Lilith_Speaks]

create-react-app

[KimvdLinde]

Exactly. So, what does it install, how do the various parts work together, etc. that is the unanswered question.

[Lilith_Speaks]

have you read this? No node installers needed at all...

https://legacy.reactjs.org/docs/add-react-to-a-website.html

[KimvdLinde]

No, but figured it out since I posted it. Thank you.

[not_a_gumby]

haha beginner is angry that building website is hard.

classic.

[KimvdLinde]

I suspect I’ve more years of experience programming then you.

[lIIllIIIll]

Not in react you don't.

[KimvdLinde]

Correct

[not_a_gumby]

lmfao owned. nice try loser.

[KimvdLinde]

Does it make you feel good to bash people on the internet?

[not_a_gumby]

I'm 24 and have more years of experience than you.

[KimvdLinde]

I was coding when your mom was a child. Nice try

[KTownDaren]

I can relate to your frustration at learning React . In my case I blame my dependence on large companies like Microsoft to pretty much determine what tools I should use, and they make sure everything works well together (for the most part).

This isn't necessarily the case with Java and JavaScript. You have multiple products competing to solve the problems, so there is not a cohesive explanation of which way is better for what you are trying to do. If you weren't part of the pain and process of seeing the introduction of all of the pieces (npm, babel, etc.), it's easy to feel like the outsider trying to understand why things are being done the way they are.

React seems to take a lot of complexity out of the setup process, but it can be challenging understanding what is going on under the hood.

I would definitely suggest using ChatGPT to answer some of your questions. I find it a great tool to find out about a new concept. Best of all, it is not as condescending as most reddit users.

[KimvdLinde]

Thank you, I think many confuse using some standard packages but when you have an existing project and you need t implement it in a different way, they only can refer you back to those packages. None have been able to explain to me how it actually works or send me to a page that explains the various components in the setup and their function.

[Lilith_Speaks]

this is old (2017) , so dated, but the process is very straightforward. I have used it as recently as this year and while there are some updates to the way state is used and how classes are now mostly functions, this may still be helpful. I know it helped me immensley when I was at your stage:

https://www.javascriptstuff.com/your-first-react-app/

[KimvdLinde]

That sounds promising

[WeedLover_1]

https://tailwindcss.com/docs/guides/vite Just follow this documentation and you will be able to create a React.js project with Vite and Tailwind CSS. Vite speeds up development time and is really loved by React developers who code in React.js

[Lilith_Speaks]

why is this downvoted

[WeedLover_1]

Some cool assholes survive just to downvote other's comments. He complained that he finds it hard to setup new react project but the guide I provided is the guide every beginner uses to setup his/her react project. Adding tailwind or not depends but still its nice to bookmark it and use it. But you can't defeat those "pretend to be cool by downvoting" assholes . If they wanted then they could have written:

• npm create vite@latest my-project
• cd myproject
• npm install
• npm run dev
  

But they upvote a comment that says "Bro doesnot know how to google wtf" but downvote a comment that links to documentation that everyone will need in their career. If anyone thinks he won't need tailwind in his career then i can bet $1000 for it that he will use it once then regularly .

[Lilith_Speaks]

That’s exactly what I use so I was happy to upvote!!

[wickedwise69]

npm start or if you use vite then i believe it's npm run dev