Components, props & states, those three are the basis of react.js, and are on our daily tasks and walk throught us, react devs, align these 3 pieces to make the bread, in this article, we’ll get in deeper until the bone.
Components
The components are the pieces of coding that allows to build APP'S, in short without redundancies, the components are the pieces of the puzzle that allow us to make the UI in a shorter time frame, also this is the very esasiest way cause in a vanilla delelopments the code can be confused.
components are functions that returns pieces of the UI, in a jsx sintax that will be transpileda along with the functionallity, also the components has a life-cicle wich is very easy to understand,the react,js creates a virtual dom that is a copy of the DOM, the DOM three is all those html elements on the app, now the life-cicle steps are:
-Instantiation: The component is created and initialized with its initial state and properties.
-Mounting: The component is added to the virtual DOM or real DOM and rendered on the screen.
-Updating: When the component's state or props change, the component re-renders to reflect the changes.
-Unmounting: The component is removed from the virtual DOM or real DOM and destroyed.
keep this on mind please cause some errors can be avided having this info while you're developing an APP.
This is an example of a component, that is handling a title it should be called in an app title fragment and also it is the react.js philosophy to make the development and management easy for us.
This is a layout as you can see, the app is composed by 4 components that allow us to make each of these independet in between, and also we can make each of them share information but we have to take care cause there are some anti-patterns that will cover into another articles.
Props:
There is something called PROPS that can be confused with STATE but what is it?, the props are properties wherever it is (booleans, numbers, string even functions, etc.), those props are just properties that cannot be modified cause the root is a static information none as states, props are immutable.
State:
The state is a piece in the memory that works as a very small info repo, we can explain it as a box that should have a non-mandatory-typo, but it have should be specified(as an object, string, number, or boolean, etc) this can be muted and modified by other components that manage some info in between them.
please feel free to reply if any misinformation is found or missing information has to be added or info needs to be modified
Top comments (0)