Core concepts you should know as a React Developer
Well, What is react at the first place ?
From reactsjs site we get the definition- “A JavaScript library for building user interfaces”. That is a pretty straight forward definition. Let’s divide it into two parts. First focus on the term ‘library’. React is a JavaScript library. It is not a ‘framework’.
To get a clear idea of what a library is, we must first see how it differentiates with a framework. A framework is basically of a large scale. It is more of a complete solution. Is serves a bigger purpose. Most of the times in a framework you get a bulk of the work done for you. You have to work your way around it to get your job done. In short, they are not flexible. They tell you to follow a certain path.
On the other hand, a library is something which is smaller in scale. Often, you will need to work with other libraries to get a job done. But you get a lot of freedom of your way of coding. You don’t need to follow a predefined path, rather you can build the path on your own. And react certainly lets you do that.
React is completely based on Components
One of the core features of react is its reusability. You build one component and then can use it in several places.
Components can be considered as simple functions. In case of functions, we call it with some input arguments passed in and it returns us a output. After that we can use these functions any where in our code, as much times as we want.
React components are exactly the same! In case of react, the input has a fancy name of “props” and what we get as an output is the UI itself. This components can then be used in several other parts of our program or even nested inside other components. The basic form of a React component is actually a plain-old JavaScript function.
Functions vs Classes
In react, a component can be created both as a function or a class. This function based components is a relatively new addition in react (added in early 2019). Although classes are going to stay in react for a good amount of time, it would be better to switch to function based component structure as it provides more dynamic with its integration with “hooks”.
Components vs Elements
Although in many places components and elements are used interchangeably, there are subtle differences between these two. And as a react developer, you must be familiar with that.
A React Component is a template. This can be either a function or a class (with a render method).
A react element is what we get return from a component. It’s basically an object that describes the DOM. If a function component is used, element is what that function returns.
