Why copying tutorial projects does not help you to learn React

One year ago I needed React for a Project at work. I have wanted to learn it before, but I never had the time to do it. Now the time has come and I decided to dive deeper into web development with the React framework.

First of all I decided to watch some tutorials on YouTube because that's what you usually do when learning new programming things.

Fig.1 - YouTube search results for React Tutorials

My first decision was a very informative tutorial by DevEd where he shows how to develop a simple to-do app.
After that, I watched more and more tutorials and copied their projects.

In my opinion that was not the best start I could have had. By just copying and following a tutorial, you do not learn the basics. It would be better to learn concepts and understand how the framework itself works than just copy lines of code.

Comparison

Todo App

My first ever React project.
Obviously not only mine.

Fig.2 - TodoList by Chirag

Fig.3 - TodoList by Auxfuse

Fig.4 - My version of the TodoList

As you see, the difference between the compared screenshots of to-do apps is not wide.
Even if I conquered my weaker self and extended the feature set, it seems like they are a one to one copy of each other. No wonder.

Corona Tracker

In Covid-19 pandemic, I wanted to create a page where I can find all important key numbers for Germany.
For that I followed a tutorial by Javascript Mastery and extended it.

Fig.5 - Corona Tracker by JavascriptMastery

Fig.6 - My version of the Corona Tracker

The difference is a bit wider than in the above example. Most likely because of the added dark mode (#hateAgainstLightMode xD). But with a closer look you can see the components are very similar.

Better approach

1. Search for a good project at the skill level that suits you
2. Implement the idea in the way you image it
3. Search for solutions or best practices on the internet whenever you don't know how to achieve a certain behavior, or you want a better way of implementation
4. As a sideline you can watch videos explaining little concepts such as states, context and so on

Conclusion

For a first entry point to learning a new framework or language, it could help to copy a tutorial and enhance it a bit afterwards.
But after copying one or two projects, copying does not lead you to getting better, learning the technique really or understanding basic principles.
Try to write code yourself.

Please feel free to write your opinion in the comment section!

TimoFollow

• GitHub: tim0-12432