Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
-
@cursee it's just an image... i m reading the 389 page book.... at 11:30PM... i have to work tmr....
-
@billgates is it for exam? Why are you torturing yourself?
-
@cursee continuous learning... learning React so I can use ReactNative... and can also add to my CV...
-
@billgates It's more likely because of the nature of js rather than react.
time to consider for a new book 🤔 maybe -
@cursee well i m learning the React concepts but I sorta wanted to just know is this how it's really done... or is this guy just a Academic.
Sorta reminds me of the code in Algo textbooks and God functions... Is there a way to break up these into smaller code blocks. -
@devTea what do you mean by deconstructing?
My problem is sometimes he users like ()=> (return { ... })
Sometimes () => ({... })
(id => {id})
([location] => {location})
But he doesn't say why or what the fuck the difference is -
Maybe you are only in like first few chapters of the book.
I'm not familiar with react but I have experience with Vue. And in Vue you can write similar code like in your image but can also write prettier and cleaner code using components and templates. But learning components and templates take a bit more time.
Probably the same with using map or setState.
For clean code practice, this may or may not help. https://github.com/ryanmcdermott/... -
@cursee I'm at 50% and it's not reusing prebuilt functions it's just the code looks like shit. It's almost like multiple people are writing the code snippets with different code styles...
-
@billgates then you really picked a not very nicely written book 😁 maybe the author used snippets he found on SO.
-
@sunfishcc hooks is still new and state isn’t going to be deprecated tho
@billgates try airbnb linting, they got rules there, also the syntax you replied to me doesn’t really make sense? -
@devTea I mean mobx or redux
-
@sunfishcc redux is.. a pain to setup, never heard of mobx I’ll look into it
-
@devTea we use mobx. Very easy to setup. Never need to worry about state again 👍
-
@sunfishcc Using Redux is in later chapters.
-
@Fradow but the render() feels like a god function... Can the JSX itself be broken up so it can be more like
<div>
{generateHeader()}
{if (this.state.canEdit) generateEditable() : generateReadOnly()}
</div> -
@billgates did you follow a tutorial or something? It’s more difficult to convert states into redux than use redux from ground up.
Btw, don’t know if you already noticed, the onClick function will create multiple instances which isn’t the most efficient way to do it. It’s preferred to create a function inside class and then call it. (Use arrow func, so you don’t have to bind) -
@sunfishcc I'm reading React In Action
-
@billgates think React as JS function. Any func can return JSX element. Just like return document.createElement()
render() { return (
<>
{this.renderHeader()}
{this.state.showBody && this.renderBody()}
</> )}
renderHeader = () => (
<div>{this.props.headerContent}</div>
) -
@billgates the render is the function returning the object HTML template.
Objects should be small enough so that their render function isn't huge (if it is, you might need to split the objects).
Splitting the render function makes things less readable in my opinion, because now I need to hunt down what other functions render to have a sense of what the object is.
As always with that sort of things, it's a matter of opinion.
when your code is a mess but everything work out in the end
When you keep getting +1s on a rant you posted a month ago.
Go big or go home.
Please fucking tell me there's a better cleaner way to write this render() function?
The use of so many "in-line" code evaluations, arrow functions, (), {}, ...
Just spent like probably 30 minutes just trying to figure out what closes what...
And the author is inconsistent?
Sometimes he uses map( location => { return ... })
other times he uses setState((prevState) => ({ key: this.state.keyValue}))
And there's no note as to why... are they interchangeable, used in specific cases, does it matter????!!!!!!
Or is he just trying to demonstrate 1000 different ways you can say the same thing in JS?
!@#!#@!$#%#$!@#!@#!#$$%
rant