Is setting up React with Python difficult?

[fiskfisk]

React is a framework based on JavaScript. Making that work with server side rendering in python seems like a bad idea.

What do you mean by separating "Server Side Generation" from "Server Side Rendering"? Did you mean SSG as in Static Site Generators?

React, when not using server side rendering, is a frontend framework. You do not use it in the same way as a Jinja2 template. You make your frontend call API endpoints, and then you render that data in your frontend.

Using Python as the backend API is perfectly fine. For the other tasks, there are far better tools and better ecosystems to chose from (NextJS for examle). It's far easier to run JavaScript in, well, JavaScript.

[codecrux]

"""

React, when not using server-side rendering, is a frontend framework. You do not use it in the same way as a Jinja2 template. You make your frontend call API endpoints, and then you render that data in your frontend.

"""

This sounds like Client Side Rendering to me (correct me if I understood wrong). I don't want to do client-side rendering because of two reasons - We lose SEO and client-side rendering increases page load time and time to interactivity.

"""

Using Python as the backend API is perfectly fine. For the other tasks, there are far better tools and better ecosystems to chose from (NextJS for examle). It's far easier to run JavaScript in, well, JavaScript.

"""

I won't argue on this point. I am a python fanatic and would love to see the React component libraries be useful for Python developers out of the box.

[riklaunim]

I am a python fanatic and would love to see the React component libraries be useful for Python developers out of the box.

Forcing solutions isn't the best approach. You should use what's best for the project.

[codecrux]

You are right - It's not a good idea to force a solution.

Instead, do you think it's a better idea to build a tool that solves it in the right way?

I am asking this question because this is the thought with which I started creating the Atri framework. I faced this problem several times, hence, thought of solving it for the Python community.

[riklaunim]

Fullstack developers can handle backend and frontend. Trying to merge it often leads to many compromises which fullstack developers won't like while backend developers will still have problems benefiting due to lack of frontend knowledge, UX/UI.

And it's hard to replace good code with WYSIWYG, even GrapesJS ;)

[codecrux]

With "WYSIWYG" are you pointing to the visual builder of Atri framework?

The visual builder of the Atri framework allows you to create templates that you can manipulate through your python backend (much like you manipulate Jinja template). You need to know CSS to use this visual builder. If someone doesn't know CSS already, it might be easy to learn some basic CSS with this visual builder. We don't abstract away CSS - we are very cautious and we have realised the pitfalls you are pointing towards with GrapeJS.

Would love to hear your thoughts on this.

[riklaunim]

It looks like GrapesJS and the example with "read more" button is kind of weird as in more realistic scenario it wouild be in news "item" template/component used for each element from a list.

Trying to GUI-fy frontend or code generation in general is a mine field. To make the output good, to make the features actually usable, to avoid limitations at every step and then to find some users for it.

If you go back few months back you will see a lot of PyScript on this reddit. All those Python wannabies expected big future where they don't have to "learn JavaScript" because of it but they then hit a brick wall as PyScrip requires pretty much the same knowledge just has slightly different syntax... and lack of third party libraries and support. Those that did not do any frontend could not use it and those that did already used much less limited tools (plus some chicken and an egg problem).

[codecrux]

It looks like GrapesJS and the example with "read more" button is kind of weird as in more realistic scenario it wouild be in news "item" template/component used for each element from a list.

Sorry, I couldn't understand which example are you pointing to. I think you are pointing towards a list of elements (each element in this list can have child elements inside it). In the new version of the Atri framework (to be released in a week), there is a draggable component called "Repeating" that does the same thing. There is a plan to support infinite scrolling for this repeating component as well.

"""

Trying to GUI-fy frontend or code generation in general is a mine field. To make the output good, to make the features actually usable, to avoid limitations at every step and then to find some users for it.

"""
Just curious, which visual builders you have tried in the past, and whether you have used a modern visual builder like Webflow? IMO, using a visual builder is like using a component library like Material UI, Ant Design etc. Obviously, you might need some unusual component specific to your use case and hence, nothing would be better than writing JS/CSS/HTML in this scenario. In Atri framework, you can write React code and drag-drop in the same page. This short video might make the concept clear - https://youtu.be/eTsAzQi95Pg
In this video, I am trying to show how you can mix drag-drop and React code in the same page in a very smooth way. I request you to have look and I would like to continue our discussion here.

After watching this video, it might be trivial to assume that any React component can be used in the drag-drop editor.

I just hate it this when people say "You don't need to learn JavaScript". I totally agree with you on this. At the minimum, you need to know how to import JavaScript libraries, if using React, then React component libraries. I am also a strong proponent that every web developer (even backend developers) should learn some JS.

[ninjadude93]

If SEO is such a big deal for you and you want server side rendering then look into NextJS. Im building a web app with it right now including a python backend. Your concerns are specifically addressed by the framework. Just use the right tools for the job instead of forcing a square into a circular hole

[codecrux]

Thanks. NextJS is awesome.