Let's keep this short. I am working on prototyping some ideas I am having, but React keeps being so unbelievably complex.
I am a backend engineer. However, I would like to extend my knowledge and work on ideas I have. Whenever my mind decides to use React, it always is so hard to only get a project up and running.
My only requirements: it must use TypeScript (because I want to get used to use TypeScript) and I need to call a backend API.
The first idea was to use Ruby on Rails, because well full stack! But then it felt a bit strange so I went to my colleagues. As they are experienced with React, I decided to go that way. The backend isn't that hard, picking or Go, or Spring Boot, whatever. That works just fine.
Complexities seem to occur on the frontend side of things. I got some thing working after just being frustrated and trying over and over. But I do not understand why it seems to be developer unfriendly. The basics work, but then calling the backend I need to add a proxy middleware. And then I something else breaks.
It feels I am not doing what I supposed to do. It feels that I am not using React in the way I should use it. So then I just looked for boilerplate frameworks and I found https://github.com/pankod/next-boilerplate which seemed to work, but wow. What a complexity in there.
So my question is: How do you work on full stack apps when you want to prototype an idea? Did you experience the same when trying React? What frameworks do you use?
Thanks for your time reading this ranting post.
Top comments (5)
Have you tried using create-react-app? Later versions have added support for creating typescript templates. Also, I have been using Reactjs for some time without needing a proxy middleware, So I am curious about your use case for it.
Well, mostly because the backend won’t be in React/JavaScript but either in Spring Boot or Golang so that will result in another application listening on another port. That causes CORS issues and thus I need the proxy middleware. It gives me more technology flexibility
I personally just use node.js as a backend usually, just because I'm very familiar with javascript/typescript and more of a front-end developer. But I don't think using any other language and or framework for the backend API should give more difficulties.
As someone else already mentioned, create-react-app is the easiest way to get started. But I personally just have a couple of configs ready in other projects now, as well as starter code.
The next framework is really good if you want really high performance applications, with good load times. But if you don't care for that too much, which I assume to be the case when prototyping, I wouldn't use it.
As for the CORS issues. I am still not a 100% sure what the deal with CORS is in general. However, when separating the client code and API code, I am quite sure that in most backend frameworks you can just indicate what clients it should serve? In node.js/express you have express-cors.
Hope that can be of any help, because once you know how to start with react, creating new applications is really just a breeze!
Take a look at nextjs.org, a react solution which includes a simple rest api. Next is a react framework for building progressive webapps without installing things like webpack, plugins etc.. all out of the box.
Create react app allows you to proxy requests in development. Just add "proxy":
"http://localhost:5000"to your react apps package.json where 5000 is the port your backend is running on.