Introduction
To be honest with all you guys, this is my third time trying learning React JS.
But this time, I started by the begining: the concepts.
Sometimes as developers, we just want to start coding, set up the environment, open an IDE (Visual studio code, Visual studio, Atom or others) and create a new project, because there is a misconception of learning by doing: we just want the things now without the understanding of the basis.
And that's why I couldn't start learning React properly in the past, and I felt frustrated because I couldn't learn and other people did it.
In this article, I am going to cover the topics that helped me learn how to use React Js:
Find a roadmap
Understand the fundamentals concepts first
Find a small course o tutorial
Find a roadmap
There are developers that are smarter than us, but they are smarter because they have found an effective and efficient way to learn. And they are really kind and left us that path, they call them: roadmaps.
At some point, I had found the Fullstack, Backend and FrontEnd developers roadmaps, they let me see in what point I was; and I thought, it should have a ReactJS one; you know, for me it is better when I can see a diagram that indicates the steps to follow. And voilà!, I found it, ReactJS roadmap, it was created by Kamran Ahmed (Follow him in github, please, kamranahmedse). Thank godness he decided to create something to share with us (He has created a lot of roadmaps, you can see them at developer-roadmap).
After that, you have the whole picture, lots of topics to learn; but you need to focus on especific topics: from the basic to the advance. It is not a challenge or something like that, you have to find your own way without making the same mistake we do often: demonstrate that you are faster than others.
On the other hand, base on my experience you have to go to the oficial documentation, because it is a good source of knowledge, and React JS has a big community and they have their web page with all the things we need to know; you can see all you need here React official page.
Understand the fundamentals concepts first
If we can learn something properly, we have to understand the basis, no matter if this takes more time that we expect, for me this is the key of success.
ReactJs is a library
The first thing to understand here is "react is a library". Everybody says "React is a library, not a framework", but no one tells you why, or I didn't understand the explanation or they don't make themselves understood; to be honest, I think it is a both of them.
However, I'll try to tell you what I understand(But I think you are smarter than me, and you can figure out by yourself). For me, it is library because it doesn't have the predefined blocks of construction, you have to build them by yourself, I mean, if you want to build a form, you have to start it from zero. Anyway, if you haven't understood yet, I leave you this article that helped me clarify my questions, Why ReactJs is not a framework.
Thinking of components
The second concept to learn is thinking of components. It is clear that you can create your application in a single file and it is going to work, but, that is not recommendable for large applications; for a POC(Proof of concept), yeah!, you can do it. Despite, you can build all your app logic in a single file, there are some guidelines that the React community leaves us to do the things in a better way,reinvent the wheel is not a good idea, I guess.
However, if you use the components approach, you will be able to split the UI in separated, reusable and loose coupling pieces that can be maintainable properly.
There are two approaches of implementing components:
- Functional: it is a basic javascript function that returns a JSX code that is rendered in the DOM. The React community recommend using this approach for our developments.
- Classes: it is a javascript class that extends of React.Component.
Other concepts
These are the rest what I considered key concepts to understand:
- Props: They are properties or params that are passed from parent to its children. They are read only. You can use props to define variables that the user can modify from a form, for example.
- States: It is a global variable(managed within the component) that can be changed or modified by the user interaction with props.
Find a small course or tutorial
You can create your POCs during the understanding of the key concepts, that help us to clarify and see how those concepts work in our natural environment, the source code.
I recommend you to use the examples in the official documentation, Examples with ReactJS, because they explain the concepts to you and show small pieces of code where they apply them. It is always a good idea to create a small POC that lets you practice the less you know.
Conclusions
Learning React is not a big deal if you understand the basis at first. If you go step by step, you can achieve the goal. Obviously, you have to have a basic knowledge of Javascript and HTML.
I'm currently learning ReactJS, I already learned what I think are the basis, and I'll keep studying. My next steps are creating some small POCs(Todo list, login form, etc).
I hope this article can help you and if you have any extra advice or things that I have to learn, just let me know.
Happy learning!
Latest comments (0)