The maintainability of the system deteriorates since wide use of class-based components. Theoretically, researchers have dedicated their work on addressing the common problems of Class Components as: Huge components, Duplicated logic and Complex patterns. Recently, replacing the Class Components by converting to Functions is expected as a solution to eradicate such problems.  In fact, we still lack the practical paradigm to guide the conversion projects. Furthermore, the adoption of the solution is based on the code quality improvements assessed on the newly generated functional codebase in a practical environment.   Based on their Web platform, Glodon company provided the codebase conversion from Class to Functions with support of React-Hooks techniques. Thereafter, in this research, a design science study was employed as the main methodology to build a set of guidelines to conduct the conversion project. By application of the guideline and observing the data output from the Glodon project, the researcher studied the feasibility and effectiveness of the conversion from Class to Functions in a practical environment.      Aslo, other methodologies were conducted to help collect the data and understand the research questions: an interview was used to identify the pain points of the class-based code; the code review and open discussion with the developers were conducted to evaluate the effectiveness of the code conversion. In the end, the examples and the consideration output in the project were analyzed and summarized for optimizing the conversion guideline which was evaluated by a survey and will contribute to other developers for their future conversion practice.