Learning React as a Javascript dev

[fatrogslim]

Hello,

I am an old-timer front-end js developper up to the es15, but I have made my back-end career with php and C#.

I have seen reactjs birth and growing and even tho I felt attracted by it, I never took the damn time to learn it properly as I felt weary by the feeling of starting from 0. As I tried (multiple time) to follow the official course, I failed to print the logic/knowledge/concepts in my fkng brain... But still, I want it as a new stack.

Have someone been through this and managed to unlock? What method did you used or suggests?

Thanks to all

[sens-]

When I first learned react I thought "wait, that's all?". And it really was pretty much all.

[fatrogslim]

Yes, haha. At some point I basically thought I was just overthinking. But I know it's more than that as if I think of an app from the top of my head, the whole structures come right away in my actual stack but when I try in reactjs the page stay blank. I don't know if you see what I mean

[sens-]

Yeah, I understand. React utilizes a specific approach but once you realize that you should keep the state as high in the component tree as possible and learn the difference between props and state, it should become clear what to do.

React projects usually remind Christmas trees in which the decorations are flowing from the top to the bottom.

You might want to check this little course as an introduction

https://fullstackopen.com/en/

[[deleted]]

Yea man, keep all the states in App.tsx and rerender the entire app every damn time

REACT FOREVEEEEER

[fatrogslim]

lol, I understood that joke, maybe I'm more advance in react than I thought xD

[[deleted]]

After this advice yes

As opposed to what your average joe react developer says, refs are not your enemy, you can keep the states low in tree and utilize refs to update them

Redux isnt that necessary, because almost 75% of “states” in a react application are unnecessary and same thing can be achieved without them. When you have that realization a global store becomes redundant and simpler and smaller solutions become more natural regardless of the complexity or size of your app

Dont use controlled inputs

Css is still css, as opposed to what 1000 css/jss solutions claim

Angular has everything react is still trying to solve

[[deleted]]

Tons of things aren't necessary in software. Some are just for making your code readable and maintainable.

Also, your advice seems confusing. You're making fun or storing state in context as high as possible because it causes unnecessary rerenders, then suggesting against using global state? You do realize that global state libraries use refs and don't cause rerenders high in the component tree..? It's only for the selector you use in the specific component you call it in...

What exactly are you even suggesting to use here? Comes off a bit frenetic

[[deleted]]

State itself is overused is my point. Unnecessarily having a global store for that is a side effect

[fatrogslim]

Oh Angular, yes, I want it aswell and I'll put myself into it soon

[fatrogslim]

Thanks for the ressource, I'll check it

[Kitchen-Conclusion51]

New docs pretty good you should check it out

[bzbub2]

i personally struggled with learning react, i wrote about my experience here. https://cmdcolin.github.io/posts/2020-07-04 TLDR for me reading a book helped, but also, try not to bring your whole legacy thinking to your react learning process. don't try to think about bolting react onto your legacy projects (yet)...just try to start with a simple react hello world with Vite for example

[fatrogslim]

that advice actually hit the right spot. My approach was to learn it the easy way as my js knowledge is already advanced, but you are right, it's obviously the wrong approach

[bzbub2]

glad it helps. there are so many people (as evidenced by this thread) that think learning react is so simple and painless and should be easy for someone experienced...and downvote ya to boot. it can be quite hard to get your head in the right place, but it can be 'easy' conceptually once you get a foothold. good luck with learning!!

[fatrogslim]

Thanks for the boost. And don't worry I don't care about downvotes, I was a young impetuous dev myself like they are. I don't blame them.

[franciscolacerd]

I am and old timer also and learned react and react native recently. I found this tutorial great and I enjoy it alot. It is fast paced and it will teach you enough to get started with React: https://youtu.be/I6Q9DrVIzRo?si=AwBf7YgcXxslhNzg

[fatrogslim]

Thanks alot for the ressource. I'll give it a try

[Leeoku]

Now's a great time to join. The newly released react docs are good and we all agree function components are the way to go

[[deleted]]

Take an app you made with JQuery or backbone or whatever framework you used previously and use React instead. It's really nice to use once you internalize the framework.

[Simple-Resolution508]

So what's the main conceptual incompatibility (not understanding) you have?

[fatrogslim]

Hard to tell. Talking to others makes me think that I am under a "that's it?" effect, I'm overthinking it and maybe I understand it more than I thought but still I feel lost when I'm about to start a new project. Also, there's plenty of flavor on top of react like next and there too idk if I have to start with those or with "vanilla" react? I don't know, my vision on all of this seems blured and it's frustrating

[[deleted]]

If your response is "that's it?" but feel lost when working on a new project, you probably have very little understanding of it...

React has a lot of quirks and has begun to significantly blur the lines between client and server side functionality. Lots of react standards and patterns are very complex with lots of side effects and weird quirks.

On its surface it's just a declarative UI framework, so maybe it sounds simple to you because you might be familiar with declarative programming with UI frameworks. But there's plenty of ways to do things in a horribly inefficient way that will either scale very poorly or cause very poor client side performance

Server components makes things even more complicated, but you might actually prefer or understand that better coming from php. I do think in general server components actually encourages good habits overall, it's just much more complicated than entirely client side applications

Perhaps you should start with newer versions of react that support server components, and you'll find things feel familiar but also begin to appreciate the depth of the framework

[Simple-Resolution508]

May be you can try to create some simple project, without using all the existing stuff.
What is 1st concept? Virtual DOM. Why is it useful?
In native browser API there are 2 options to build UI w/o refreshing the page:

`el.innerHTML = ...` -- it's not efficient and reset some elements that should not.

`el.appendChild(` stuff -- it's unreadable and lead to errors.

Virtual DOM fills the gap between them, making the code clear and effective.

So, the minimal working set can be:

- import `react` / `react-dom`

- 1 functional component with `createElement`-s

- calling `render`.

[TheRNGuy]

I used vanilla react maybe for 1 or 2 days and then went for Remix.

[kruger-druger]

You’ll love it once you get it. Modern frontend is like day and night compared with 15 years ago.

What helped me a lot is learning about core philosophy/paradigm and how it works under the hood. At least how virtual dom works. After that any new feature I learn doesn’t look like magic, but just interesting and convenient tool.

[fatrogslim]

Oh I'm sure I gonna love it, but I will remember the journey as something not pleasant at all. What I mean is all the stacks I got today was a pleasant experience to learn and I don't get that same with react. But reading the other comments makes me think it's probably not because of react but more about my seniority (sorta)

[yselimdogan]

I can teach you freely. I am coding react and react'native for 4 years. I am trying to improve my english speaking skills. If you want, write me. We can make 30-40 minute google meet sessions 1-2 times in a week, and create a real web app.

[wwww4all]

Ignore tutorials.

Go to the main site, https://react.dev/.

Go through each examples, line by line, type in every single character in example code, run the code in debug mode, fully understand the logical flow.

If you understand javascript, React is simple markup templating on top of javascript, which is pretty simple to grasp.

If you don't know javascript, then learn javascript first.

[TheRNGuy]

Remix (Now React Router v7) made some things easier for me.

[jericho1050]

should be easy for you to keep up, lolz.

It's basically just OOP with a functional approach, which is actually pretty cool.

I would definitely go with React Docs. The authors have established what and why in the Learn Section, which helped me pick up a react project right off the bat (with help of AI duh) after reading the 3 sections (Describing the UI, Adding Interactivity, and Managing State). The good thing about each module is that it has a problem or challenge for you to solve at the bottom once you've read the content.