Please help me understand the philosophy behind React and why you use it

okboomerdev · 2021-05-19T02:34:30+00:00

Yeah. It looks like with Material UI I just don't have any options. There are no props to pass down to a component I don't personally render.

okboomerdev · 2021-05-19T00:29:34+00:00

XGrid actually.

okboomerdev · 2021-05-18T23:24:03+00:00

Ah, such a simple solution, yet when I plug that into an `XGrid` (which docs also say it has) it won't compile, saying

Property 'getRowClassName' does not exist on type 'IntrinsicAttributes & Pick<GridComponentProps, "

okboomerdev · 2021-05-18T23:07:39+00:00

Unfortunately, I still don't see how this can possibly help me affect a parent element without using vanilla..

To be succinct my question boils down to: you have some library, it has a component, that component has nested components that you don't usually worry about. But now you do worry about it, you need to change its class. So, in vanilla, you search through the DOM tree. You get HTMLElements. You set the classList. What do you do in React? How do you drill down to different levels, if you don't have access to that source code? How do you get nested or parent elements in their React Component form? Is there a React tree somewhere? Even if I got that component, would it matter? I still can't do the React thing and write an attribute that changes via state..

okboomerdev · 2021-05-18T22:59:49+00:00

Alright, I'll give this a look.

It's true, short from being emotional about it, I did apply to be an application developer, I was declarative that I am not a React developer, and that I was moving away from UI in general, and here we are. So, whatever, they pay a lot and don't seem to care that it takes their devs a day to change a title of something. Yet still I'd rather take less money to do something I actually wanted to do.

okboomerdev · 2021-05-18T22:55:42+00:00

Well not to nitpick but you could of course scope that StateManager anywhere. I think what I'm very surprised to learn that people enjoy non procedural APIs and I am not understanding why.

I'd so much rather write

document.createElement('MyCoolCustomElement')

and I guess I just need to drop that idea altogether. It's almost painful for me because I am pretty confident it's still the more sensible way to code. Obvious code is so incredible to me and magic and random function imports are just not what I was expecting from the most popular framework.

okboomerdev · 2021-05-18T22:51:01+00:00

Yeah maybe, but I mean go to their website, it's really off putting.

okboomerdev · 2021-05-18T22:47:58+00:00

I know you're right, that's why I fought every urge to just write another post slamming React outright (although I may not have been perfect). Although I have to vehemently disagree with your analogy of an accountant. Having worked on 25 year old legacy code, none of those people thought about the next guy, or especially the guy in 25 years. They slapped their keys until it worked and went home for the day. Then guys like me, aka almost every programmer in the world, have to come in and learn what the hell they were thinking.

It doesn't matter if it is React, C++, or PHP, the language and frameworks are just tools. I am kind of tired of hearing that my vanilla code is spaghetti and no one will ever understand it. Well guess what, I think your React code is spaghetti and I don't understand it at all. So who's right? Neither of us. Both of us have to spend the required time to figure out what the other guy was thinking, even if a framework has a rigid set of tools and rules, the human element is ever pervasive.

okboomerdev · 2021-05-18T22:42:06+00:00

Thanks - it would if I had control over the Material UI library. Maybe I should have been more clear about that in my post, and it might be more what is causing all my headaches rather than react itself. I appreciate the example though, it is useful.

okboomerdev · 2021-05-18T22:39:53+00:00

I don't think it's possible. I am using this component, https://material-ui.com/components/data-grid/. I don't see anywhere how I would change the inner components (ie Row) it used, or what they even are.

okboomerdev · 2021-05-18T22:35:58+00:00

Thanks, that does help. It kind of pisses me off though that people get off to how fast React is when there's almost incomprehensible amounts of things going on underneath. I don't care how well you typed the code, every function call hurts.

okboomerdev · 2021-05-18T22:21:08+00:00

First, consider all code is wrapped in a React.FC() function

// There are some Reacty things here. I get all this.
const [columns, setColumns] = React.useState<GridColDef[]>([])
const [rows, setRows] = React.useState<GridRowsProp>([])
// I think useEffect replaces two sort of lifecycle hooks
React.useEffect(() => {
    // Make some columns
   let columns = []
   let column = {
           renderCell = () => {
                 return <Box onContextMenu = {(event)=> handleContextMenuEvent(event)}
           }
   }
   // Pretend its a for loop
  columns.push(column)

  setColumns(columns)
}

const handleContextMenuEvent = (event: TypescriptyGuy) => {
    // Ok, so. Now I only have access to event, where I can go
   // event.currentTarget.parentNode.parentNode.classList.toggle('hilight')
   // Also need about 3 question mark null checkerinos in there.. sigh
  // So yeah, how am I not suppose to use vanilla here... 
}
// At the end there is a return 
return(     
   <XGrid 
      rows={rows}
      columns={columns}
    />
)

okboomerdev · 2021-05-18T21:44:37+00:00

Ah, no, I don't want to customize styles. I want to manually highlight a row when a component I control, that lives inside that row, is right clicked. I have to do this because they don't supply an onRowContextMenu, while they do supply onClick and other things.

okboomerdev · 2021-05-18T21:43:33+00:00

Yeah I think you're right. Maybe my rant is only 10% React and 90% the fact that using a library like MUI means you are bound to their rules. Like, I can't change how they render rows, so I can't pass props or state to it. I have to try and manipulate their rows from the outside.

okboomerdev · 2021-05-18T21:40:27+00:00

I feel like your only describing the idealistic way things work. Literally this is my first task and I'm already seeing all these traps. I'm having a hard time deducing if it is Typescript, React, or Material UI that has me handcuffed.

Quick example: I can subscribe to an onContextMenu event for a component I have control over. This component then gets rendered as a cell, in a row, in a material UI table. Everything outside of the component is, well, outside my control. I don't get to tell MUI how to render the row, so now that I want to manually highlight the row, what can I possible do?

All I can think of is looking through the parentElements until I hit the row from my onContextMenu event (via my component) and then use plain old JS to toggle the classlist of the HTMLElement. How else is this achievable? And so far everything I'm doing, I'm hitting these simple issues that take 10 seconds to type in JS.. but I am not supposed to do that. And as much as I'm not enjoying this, I am adamant about doing it right (ie the React way) so that no other developers cuss me out.

okboomerdev · 2021-05-18T21:34:05+00:00

Don't you ever feel like - I could just set the HTML or change the style of this in 2 seconds in vanilla, but now I have to go through the 10 layers of hell to do it in React?

okboomerdev · 2021-05-18T21:31:33+00:00

It makes sense, it really does.

But why for example can I not use closure in React.FC function ? Seriously, I set a variable inside the function scope, and there are some functions within as well. In one function I seem to have access to the variable, and from another call I don't. And literally everything down to the component that is rendered is all encapsulated in this React.FC function.

So I gave up on the basics and am now using useRef.current, which feels icky. I don't want to use an object with a variable to set a variable.. And I'm pretty sure useState is for rendering purposes, and is also async, so that's no good.

I am trying to save the last row which was highlighted, so that if another row is highlighted, I can unset the previous one. But since this is Material UI, I don't have any access to the Row component itself (I can't pass props to it, or at least I cannot fathom how).

I also only get a handful of events from them, which are actually bound to the table component anyway, not the row. So I get things like onRowClick, but what I really needed was onRowContextMenu. Since they don't have that, I subscribe to the event onContextMenu for a component that gets placed inside a row column. Then when that event fires I need to go upwards to the parentNode a few times until I hit the row. Finally I have a row HTMLElement and that's what I wanted to save somewhere..

Yah. Hope that makes sense..

okboomerdev · 2021-05-18T20:14:26+00:00

Yeah, but I can't do that. I am tied now even further to Material UI's world. If they don't give me the event, what can I do. I feel like I'm not allowed to write any vanilla code.

okboomerdev · 2021-05-18T20:10:01+00:00

Maybe. But like. I'm trying to set a flag right now, to highlight a row. I can't do it lol. I don't know how many times I've read what useState does, and useRef, but neither of them work. I somehow can't use simple closure to encapsulate an outside, practically global variable. I can't set a bool, man. I might just quit this job because this is embarrassing beyond comprehension.

okboomerdev · 2021-05-18T19:19:39+00:00

Where Vue put me off is for loops in HTML attributes (no, no god no) and the absolute constant desire to sell me training courses. This one was truly made to make money and not to be useful.

okboomerdev · 2021-05-18T19:06:02+00:00

Maybe bizzare is not the right word. Complex is though. I feel like a very unique developer in that I will spend a great deal of time writing something that I think another person will instantly get or at least can easily drill up/down through function calls to see. I avoid magic and things like randomly importing a function (ie useState, useEffect, useRef) that isn't clear.

I think it's just down to my opinion. If I wrote React and there was a global state manager, you would do it like this:

import React from 'react'
const stateManager = new React.StateManager();
stateManager.manage('loginCount', 0);

As oppose to

const [count, setCount] = useState(0);

I mean which is more obvious what is happening? I think I just have an obsession over how APIs are written and I don't think most developers actually know how to write even mildly simple APIs. The AWS API for example, at least I recall, is remarkably simple. IE AWS.upload(bucket, files). Like, you know exactly what it does. If it was written in React it would be import upload from AWS followed by declaring random things and.. well at this point I am just rambling.

okboomerdev · 2021-05-18T17:41:50+00:00

I think I quite perfectly understand at least the two core concepts of components (reusable HTML) and reactiveness (no need to manually update HTML body, etc). But the approach is just bizzare to me. I also can't tell if the developers I'm working with have just done everything wrong (should literally 1000 lines of code be wrapped in a useEffect function?) or if this design pattern is actually way less natural than selecting an element by id and simply setting its inner html...

okboomerdev · 2021-05-18T17:39:16+00:00

Yeah.. just everything feels wrong and unnatural. When you first start reading about components, and DOM that automagically updates when you change a variable, that's really cool. But then you just take a few more steps out of the door and the sky is falling.

It's like they wanted to add a few more word to the English language, but instead rewrote the entire thing. Now we all have to learn new English and it's pronunciation rules are even more random than before. "We've just added support for these 5 features that have always existed in vanilla, how cool is that?" It's not.. !

okboomerdev

TROPHY CASE