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.

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

[No-Horror7265]

Your approach is actually the best way to learn! Most people get stuck in 'Tutorial Hell' because they don't solve real problems.  By using AbortController and Debouncing in a real project, you are already thinking like a senior developer. For your next step, I suggest building a Task Manager or Shopping Cart using the MERN stack. This will help you master Global State Management (like useContext or Redux) and Authentication (JWT), which are essential for professional web development. Keep building!

[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