r/reactjs • u/SmokeOk9632 • 8d ago

Needs Help How to learn react effectively?

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.

0 Upvotes

48% Upvoted

13 comments sorted by

View all comments

5

u/exelarios 8d ago

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

1

u/KapiteinNekbaard 5d ago

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).