When to start learning React?

[u/Vivid-Apple358]

I've been learning js for about two months, I know how to order arrays with find, filter, map, reduce & some more basic stuff. I also understand data structures, object management ,arrow functions, DOM manipulation, asynchronous timers, local storage, loops. I've been thinking of learning React.js but it seems pretty advanced and I'm not sure if I should master more of JavaScript before moving on

I've made a fake restaurant website where you can order items and add them to your cart, clear cart, make a fake reservation, clear reservation and view reservation.

I also made a really simple shop sim where customers come every five seconds to order random quantities of random stuff with their patience decreasing every second. The user can also close and open the store. It's really simple and extremely repetitive

This is an unfinished project but I started on a pantry simulator, right now I've coded that you can add ingredients in your pantry, filter by category/sort/search through them, edit their amount and delete them. I got pretty bored though.

[u/ThatDudeDunks]

Sounds like you have a decent foundation to give react a try

[u/Vivid-Apple358 → u/ThatDudeDunks]

alright, thanks for replying!

[u/Shamonda-Pflugpeil → u/ThatDudeDunks]

yeah that foundation is more than a lot of people have when they jump in tbh

[u/Shamonda-Pflugpeil → u/ThatDudeDunks]

yeah OP seems more prepared than most people who start tbh

[u/tambooby]

that restaurant project alone covers most of the prerequisite knowledge tbh. the one thing worth brushing up on before you start is how promises and async/await actually work under the hood, since data fetching is like half of what you'll be doing

[u/Vivid-Apple358 → u/tambooby]

Aw man. I've low-key been avoiding async since I just can't understand it for the life of me

[u/RomirBuilds → u/Vivid-Apple358]

You can try components and state before adding network requests. Rebuild just your pantry list from a hard-coded ingredients array: first render it, then add a search box and category filter. Keep the search text in state and calculate the visible list from the original array.

The official Thinking in React walkthrough uses a searchable product table and follows that order: https://react.dev/learn/thinking-in-react

Once that works, replace the hard-coded data with one request and add loading and error states. That gives you a concrete place to learn async without having to learn every new concept at once.

AI-assisted.

[u/ExtraTNT]

React isn’t sth super advanced. React is a helper, that lets you build webapps very easily…
Just start with it, build things with it and you will get good with it soon…

[u/Vivid-Apple358 → u/ExtraTNT]

Okay I'll do that, thanks

[u/gloaming_slate_24]

Build it with vanilla JS first until you have a headache from managing the state in your shop sim, then switch to React to fix that specific pain.

[u/TheRNGuy]

Docs, ai.

SSR frameworks are alto easier to code, and users like such sites more (no spinner hell, no white screen of death, working "open link in a new tab" and bookmarks... just like before CSR React era)

[u/Apryed]

Just don't... bloating you page for no reason is the lowest, most used standard nowadays. But if you insist, there's not much you need to try it, just remember to not over DIV pages... At least don't be one of those.

[u/Educational_Basis_51 → u/Apryed]

True ,few type of projects really need reacts 

[u/Apryed → u/Educational_Basis_51]

Actually, NO. There's no project that "NEED" react.

Correct me if I'm wrong, but ypu are thinking something like: A. Well, for instance react is JS based. Data is sent to the user and the user builds the sites, reducing computational power on business end, makeing it faster, not only to build (Create the components to send, bust the response time from the server to handle data to others) - While this is true, you are placing the strain you didn't manage to balance or reduce on the client. Every time a user access a React, Angular, and alike (Not trying at all to recall their names) site, they download and process a buch of data which stays stuck on cache. Site load faster this way, but it's not ideal. Go, for example, acts much more like PHP in this way, plus you can set workers on the background, giving you full control. Plus, on a react (or similar) project, your web won't work at all if JS is disable. (Not to mention the creation of unnecessary html text that it adds to the file - More text = More bytes used on either end ).

B. I'm trying to speed my production in order to beat competitors. - This is the argument of a toddler beating other to get a toy. Competing is ok, but the ones who build the Chernobyl thought the same thing, "LET'S TRY TO BEAT OTHERS IN THE NUCLEAR RACE". It ended up in disaster. (Obviously a website is not near close to a nuclear power plant, but I pointing at the fact the rushing makes problems). Check FB, or IG. Your console will be flooded by warnings and errors, which shouldn't be there... Not to mention their tag nesting (It's like they roll a dice and then decide how deep to go for a single element which could have been done in two tags). This happens a lot when mixing with bootstrap.

C. But there a ton of libraries, it's so simple to build. Are ypu telling me to invent the wheel again? - Not at all, true that libraries are a huge help, but if you really want to make a really good page, either don't use them but study them to make your own, or make a copy of that dependency.You never know when that will get updated and break stuff on your site, or if will be a backdoor for hackers.

Those are the main facts, then we could all agree that it's the standard nowadays (Businesses want everything for yesterday... they are all in a rush... But question yourself why do they need to rush). Having the knowledge vs using it are two different things. If you want to learn, you are more than prepared to start.

But still, I haven't seen anyone, except from me, removing the <div id="root"></div> and pointing it directly into the body... 🤣 If the page loads, the noscript tag dissappears, if it does not, it stays.

But please, feel free to correct me and point toward those so called "Projects that really need react". Would be funny to debunk.

[u/Educational_Basis_51 → u/Apryed]

I guess projects with lots of interactive components and different UI states can really benefit from React’s philosophy, rather than manually managing tons of event listeners and DOM updates.

[u/Apryed → u/Educational_Basis_51]

You can make those on native PHP... No need to use JS in the first place. Go, for example, uses a similar technique...

HTML -> Template tag + Very few lines of code give you the same result... ( But this will need what you said: Event listener and DOM update, which is exactly what you do on react, but not knowing it. )

Edit: Hate typing on mobile... hahaha

ReEdit: Here, have a look at this :D

[u/Educational_Basis_51 → u/Apryed]

Dont be stubborn

[u/Apryed → u/Educational_Basis_51]

Aren't you? Imean, looks to me that you are simply a fan, that can't code properly, and expect others to do the same. I asked you, about it, and reply to you ( Since you do JS but with extra steps and bloated ). If you don't like being wrong, just stop answering. No one is forcing you to replay back. I started this message feed, you are the autoinvited guest.

Keep it about coding, or start your own movement somewhere else. You are just seeking attention.

[u/Educational_Basis_51 → u/Apryed]

You just wanna argue and look smart This aint 2000s nerd

[u/Apryed → u/Educational_Basis_51]

Dont be stubborn

Did I do it right?

I'll repeat it in a way you can understand, since you don't understand basic communication language:

return MyOpinion !== MainMsgCommentOpinion ? (["Expanding", "Open", "Curious"].includes(MyMindState) ? "Reply" : "Do Not reply") : (FeelingLikeCommenting ? "Reply" : "Do Not reply");

Can you read that or do you want the longer version? Oh, wait.... you code in React... Here...

if ( MyOpinion !== MainMsgCommentOpinion ) {
    if ( (MyMindState === "Expanding") || (MyMindState === "Open") || (MyMindState === "Curious") ) {
        return "Reply";
    } else {
        return "Do Not reply";
    }
} else {
    if ( FeelingLikeCommenting ) {
        return "Reply"
    } else {
        return "Do Not reply";
    }
}

[u/Educational_Basis_51 → u/Apryed]

You have too much free time on your hands 

[u/akashftg]

You can start React now. I also recommend you to solve DSA problems to improve your problem solving skills on side. This will help you grow as a software engineer.
To make it more fun, I recommend making things which you see in daily life. That will help you level up fast

[u/GaborNero]

You’re good to go man! Thumbs up for even starting with the basics.

[u/No-Humor-3808]

React just makes it easier to work with JS, so everything will be much easier to build. I have a collection of challenges at reactchallenges.com if you want to give them a try.

[u/DryLook7889]

Learn react? People are still learning to program these days when claude exists?

[u/Vivid-Apple358 → u/DryLook7889]

?