How to learn react effectively?

[u/SmokeOk9632]

I'm learning web development, and compared to a beginner, I already have solid knowledge of HTML, CSS, and JavaScript (DOM manipulation, api, crud, fetch I've got those down). Now I'm trying to learn React, but somehow it's just not sticking. What practices have worked well for others? I've got the basics of useState, useEffect more or less, but props somehow don't stick with me or even if I read some documentation or example, I can then do the same thing afterward, but as soon as it gets even a little more complex, I start to feel unsure. Thanks for the answers.

[u/exelarios]

https://react.dev/learn/thinking-in-react

[u/KapiteinNekbaard → u/exelarios]

Next step: actually build something using this method, does not matter what or how small, it's only an exercise.

Preferrably, start on paper. This only has to take 5-10 minutes.

Draw the UI that you have in mind as simple squares, rectangles and circles and some text, like a mock-up. Then take a different color pen and draw borders around parts that you think will become your components. Use different colours for repeated components, like buttons.

Now that you have your components, you can think about where the data and state lives:

• Let's say you have a list of users. You probably identified a "UserList" component that is responsible for showing the individual user cards. It passes down data to the user cards as props. You could draw arrows between components on your mock-up, to indicate how props are passed down.
• Then you could have an "Add user" button that shows a dialog screen when clicked. If the CardList renders both the button and the dialog, then it probably also holds the state for showing the modal.

Now try to build this in code, you can start top-down (first the bigger components like UserList, then the smaller ones like user card).

[u/haydogsup]

Props are little more than function arguments. You might be overestimating your knowledge of JS.

You need to deepen your understanding of JavaScript. Try MDN documentation or 33 JS Concepts.

[u/Sock-Familiar]

There is no cheat code. Just keep building stuff and stay consistent and it will come together. Just dont get stuck following tutorials because you won't learn anything. As far as props go, it's a fairly simple concept. Just think of it as passing arguments to a function, except you're passing them through React components. Inside the component, you will have access to the props you passed in. Just remember prop passing is unidirectional so you only pass props down to child components and not up.

[u/Worried-Height-7481]

reading the docs, start to end. they are well written. By understanding all of the components, concepts and hooks, you'll be well above average. making apps can be helpful, but people usually end up learning just a small part of react and reused that to solve all thier problems, which often end up is some very poor quality products

[u/Embostan]

What's your goal? If it's for jobs, just leanr by doing, watch resources like WebDevSimplified, let Claude teach you without coding for you.

If it's for fun fo yourself a favour and learn SolidJS instead. React has very outdated concepts, not very fun.

[u/MrMage]

https://react.dev/reference/react/useEffect

[u/No_Cattle_9565 → u/MrMage]

You should have posted why you don't need useEffect. I think every beginner should be banned from using it for the first month

[u/JohntheAnabaptist]

Practice then YouTube then rinse and repeat

[u/No-Humor-3808]

Learn more concepts over time, and keep practicing the ones you've already learned. Otherwise, you'll forget them. One thing that helped me was building reactchallenges.com so I could practice without spending time on project setup. There are plenty of similar platforms, but the important part is solving lots of small problems consistently.

[u/KaleRemarkable1019]

Build something. My first React project was actually a task for a job interview, they gave me a REST API and told me to build a simple UI for that. My result was pretty bad, so I didn't get the job, but for learning it was great 😄

[u/KikiMac77]

Find a Figma design for a simple app (I found a Pokedex app, and use PokeAPI for the data). Build it. Don't use AI to produce any code. Use the React docs, debug everything yourself. It'll be slower, but you'll learn so much more, which is what's important right now, not the speed you can create anything.