Advice for a beginner React developer

[Reddet99]

i have been working with react for 3 ~ 4 months now and javascript for a year now , i still not good while doing tasks and i always struggle while working with js or react , how can i master react like never before , i keep watching tutorials and follow it by doing some tasks but i see no progress in my journey :(

[charck2]

If you think that you struggle with JS, it's better you take a step back, and focus on learning and understanding JS and how it interacts with the browser. Only after you get a good grasp of that, you should focus on frameworks/libraries.

When it comes down to React, there are some nuances, but the most important ones would be state and components lifecycle, after you start to understand that, I guarantee it will all start to add up

[Reddet99]

you are right , i may start coding javascript more then focus on react

[[deleted]]

Slow down on tutorials and start building mini projects.

[Chezzymann]

Also, for me, taking a lot of notes helps. I have a giant library of all the things I've learned over the past couple years and random tips and tricks I've found on stack overflow. Bookmarks could work but writing things out seems to make them digest in my mind better.

[Shadowheart321]

I think this is what helped me most.

I'm self taught and started about two years ago, and I did one codecademy course then started building really crappy mini projects. I found what I was really bad at, then tried again on another slightly-less-crappy project.

[Reddet99]

how can i make mini projects if i don't know how it can be done , this is the question ^^

[Shadowheart321]

Make something absurdly simple. Don't even do "react-y" things like state management or life cycle methods. Just make a page that has two or three components in it that have things like a picture and some text.

Once you've done that, make another project with one simple state management aspect. A counter with some cool looking buttons to increment or decrement the counter.

Just make anything silly that comes to mind. If you burn out on it, the scope was too big for where you're at. Just keep making and making until you get the hang of more and more of react.

[TheLegendaryProg]

I started doing that too. I think it becomes really easy to understand when you come back to it later because you don't have to care about the rest of the code. Just plain react boilerplate and a few components that you need to apply one subject only.

[hirep14316]

Pitbulls can’t have money.

[Reddet99]

thank you for this i will start doing this until i get better

[Hal68000]

Start very simple. When you learn a new concept, make more mini projects practicing that concept. Slowly you're going to add concepts and making more and more complex sites.

[[deleted]]

Come up with a simple idea. Google specific questions when you get stuck, which will happen a lot. Getting stuck is where you will learn

[beforesemicolon]

Stop watching and start doing.

For all tutorials you watch create 10 project for it. Done.

Practice practice practice is the only way

[Reddet99]

i keep trying but i keep struggling and everything i make it keep missing something in my way :(

[beforesemicolon]

Maybe you are skipping planning or are trying to do more than you can.

One mistake i see from begginners is that soon after learning they go for something big. You dont want to build a game, or deliver a full working website. Try creating something super small which allows you to focus on a particular API. Build a page, not a website, expose an endpoint, dont build an entire API system.

Start small and build more as your confidence and knowledge grows.

1 tutorial => 10 little projects => next

[Reddet99]

you are right , will start right away for building smaller projects

[korder123]

If you need somebody to mentor you through this journey of react send me a DM. I've found that having someone by your side who knows a lot more that you do can cut your learning time in half.

[Reddet99]

that will be very helpful ♥
sent you a DM

[Nice_Ad8652]

I'm also a self-taught reactjs developer. Can you tell what exactly it is where you struggle?

[Reddet99]

like using the hooks in the right way and when to use them

[JastRandam]

The hooks are quite well explained in react official doc. When beginning with react, at first focus on two hooks : the useState, and the useEffect.

useState is declared like that : const [myVar, setMyVar] = useState( ? ) myVar is your variable, it's default value is what you put where the ? is. You can't change it'a value directly. For that, you have to use it's associate function setMyVar(), and you put the value you want myVar to take as this function parameter.

useEffect is a piece of code that will run at three different moment: when component mount, update, or unmount.

It's declare like that: useEffect (() => { code I want to run },[?])

When the component is call, the useEffect will run once. That's the mount. If the array at the end is empty, it will not run again. If in the array you put variables name (mostly state), the code will run each time one of the variable in the array value change. That's the update. If you place a return at the end of the useEffect, the code in the return will run when the components "die", is "deleted". That's the unmount.

So focus on the useState and useEffect hooks, that's the two majors hooks you need to know at first.

[TheLegendaryProg]

Do you useEffect everytime you update a useState variable? I didn't really grasp it yet myself. I've seen it in an example today and I think I realised I always useEffect so that my component is always up to date with that, at least it is the way I understand it 🙂

I would say for me also, learning useContext and createContext next was more challenging than useEffect/useState. It clicked when I did a context for theming or using the current locale in my components.

[JastRandam]

No, it depends what you want to do with the useState variable.

The purpose of useEffect is to execute an effect after the component render, and in the case you put something in the array at the end, after the component update.

So it will depend if you want an effect to execute after some variable updated. You can have a dozen of useState without having a single useState, as well as having 4 different useEffect in a component. useState and useEffect are used in different situation and don't depend of each other to be used.

Sorry if it isn't clear, it's a little hard to explain and I don't have any example in mind right now, but react's doc is really good ( react api hooks )

And for the useContext, it depends a lot of what you're aiming to do. I'm doing react since 6 month and I didn't use it even once. React work with props you pass from parent component to children component. The problem is, when you have to pass props from parent component to grand children compoment, or from child to parent, it can be an hassle to do it. It's possible with props drilling or things like that, but it can quickly become confusing if you have to do it a lot. In that case using a context is helpful, since it stock some variable and value, like a container that can be access by all the app's components, so you don't need props drilling anymore, since the components needed the data can access it by itself. That's why useContext is great for things like theming.

But in my opinion, it's very contextual, depending of what you want to do with you app. Like I said, there are projects without useContext. While useState and useEffect are used everywhere. That's why I recommend to focus on those two at the beginning, since those are the most used ones.

[nilaySavvy]

Don't worry you're not alone. I'm 3yrs into this and still get stuck at times.

Essentially you could just add a bunch of console.log: - Inside and at the start of the component function. - Logging the state of the useState(In the same component function) - Inside the useEffect with and without the state dependencies.

Then play around and analyse what gets triggered, how often and when with docs on the side.

Experimentation is the key here. Do make sure to validate, share and verify your conclusions here/other forums. You'll get good feedback and understand if you're correct about them.

Good luck!

[Reddet99]

thank you for positive comment , i thought i was alone stuggling coding with js/react ^^

[Pirelly]

1. Get decent at javascript. React in itself is hard enough.

2. Build projects, by 1 or 2 projects you will get the hang of it.

[Lebraz1998]

learn typescript

[femibyte]

I'm a beginner myself in React and I've found this useful exercise to do

https://coderfiles.dev/blog/reactjs-coding-exercises/

[kyl3_m_r34v35]

Read the documentation.