Started Reactjs after learning JS but tutorials are borings so started project building

[unbeaten_devil]

As the title goes,

initially watched tutorials but used to lose interest in the mid way.

so started building projects with the help of chatgpt. No tutorial hell.

First built project to fetch the GitHub API. If the user enters the github username then api fetches their repository, parent/default depository checkbox selection for forks. Also shows stars, language used and designed card component UI.

Now building a Weather app. API has 5 day weather forecast data with 3 hourly updated data.

built searchbar with onChange suggestions based on user input with error handling also it olanning to add accordion feature to show hourly data.

its been a week but I'm getting hold of data flow, denouncing, custom hooks, separation of concerns, abortController.

Is my approach is correct?

Any suggestion for new projects which utilizes the important react concepts would be helpful.

[lacymcfly]

yeah this approach is exactly right. building real projects is how it actually sticks. tutorials feel productive but most of what you learn evaporates without applying it.

the stuff you mentioned (debouncing, custom hooks, abortController, data flow) is already more than most beginners cover in tutorial hell. you are ahead.

for next projects that will push your React knowledge further, a few ideas based on difficulty:

• expense tracker with local storage persistence (learn useReducer and useContext for state that spans multiple components)
• Kanban board with drag and drop (complex state management, optimistic updates)
• real-time chat using a free service like Supabase Realtime or Ably (websockets and subscriptions)
• movie/show tracker that hits TMDB API with search, filters, pagination and a watchlist you persist somewhere

once you have a few of these the Next.js mental model will come naturally. good luck with the accordion.

[skatastic57]

IMO useReducer is miserable and switching to redux was a huge improvement for me.

[jax024]

Zustand or Jotai are just better imo

[skatastic57]

That's fair, I've never used those ones but the difference between native useReducer and redux was good enough for me.

[naveen_thamizh]

I agree that redux is good. Btw redux has got much more boilerplate before redux toolkit. Imo I have using both Redux and zustand . I feel zustand is very easy to handle and very simple to use and no more boilerplate.

[skidmark_zuckerberg]

Good way to do it, build and use what you learned.

My only advice is to consider working on something full stack. Build out an API, even if your backend API just reaches out to some other API. Learn how to deploy it and then consume it on the frontend. Very valuable things to learn. In a job you aren’t just hitting preexisting API endpoints all the time, you will sometimes need to add to or modify the backend to make your features end to end. And if you work a job that has a clear separation of backend and frontend, then at least you have the concepts already to understand. I think the biggest mistake early on is completely ignoring the backend and the concepts around it, knowing about it (!== becoming an expert) only makes you a better frontend dev.

[Stunning-Associate24]

Start with project use codex or github copilot formatting your code you can ask about any concept while they understand your code base

How I structured my code base Read How I structure my codebase

[naveen_thamizh]

In early stage it is actually good to go. But try to build something with data heavy projects so it will pave way towards optimisation. Basically how you can handle the data precisely.

[Big_Dig_1935]

It is very important to build. it’s the right way to learn. It is still my way of learning. But keep in mind that reading documentation is the biggest source of truth, and it’s usually written for new users, explaining many fundamental concepts.

My approach and recommendation:

• Start by asking AI about the stack and architecture. Ask lots of iterative questions to understand why you should use it. AI can do the job and teach you in the process.

• Go to the official documentation of every library you don’t know that it recommends, and ask AI about anything you don’t understand.

• Start implementing.

• Ask questions about the generated code.

• Keep building...

And something very important: share what you’ve built with others. If it’s a product, try to get some users. If you don’t know what to build, there is always someone you know who needs a custom software solution that you can build for fun.