Refactor REACT App In Team Development
Refactor is the solution to make your implementation looks good, Even if you have tried your best to make a clean code
So, what is refactor? is that really important? Refactoring is a disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior. Sometimes you need this technique to tackle a error that is unexpected when you make an implementation of function, library, tools or any code.
In the react application there are some cases could happened that are
Bloated Components
Then, when coder create an react components sometimes there is master component that act as the end point of all the components and function. This master component usually created used a wrong implementation like this
The components above are implementation of JSX that make too many components in one render task, so you have to refactor it to make it cleaner.
You can create single React Component to avoiding a 1000000000 line code implementation in one by one component. So first of all you have to think as object oriented programmer. The object in one page as example is Header, Body, Footer, in body part we can also separate it to some object as Navigation, Body Card, Body Footer.
Repetitive Logic
When I needed to copy something fourth time and have to extracted. Then I have exhausting myself by repeat it again and again to make a same things. So to avoid it, you can step away to more useful implementation. You have to passing over an element because dependencies to the parent properties. React can do it, you can use Higher Order Component and also use passing parameters to other components by Render Props. When having
JSX Outside the Render Method
Then sometimes you need to make a function to rendering or passing a div component or else with some case or something else. Then you needed to avoid the JSX outside render method. You have to make a better look of your code.
Here the examples
Refactoring in Our Team
Bad Components :
On the components above there is too many components in one rendering, so, we have to seperate it, also we know that komentar is not only one item but may include some items from this function below
Penyelesaian :
The komentar Conten Render we create to simplify the rendering return functions.
This is the komentar render functions.
This is the button render functions.
React Patterns
Function Components : You may define function js in react app as usual, declaration is same as javascript function.
Destructuring Props : Props is a property in react app that can store value, and used in the function and other in same files.
JSX spread attributes : variable spread is one of JSX feature. You can make it use {} for the variable used, and the value will be stored in Props.
Conditional rendering : Is one of the special feature in JSX, and really useable in the react app. You can define it as :
if
{ condition && <span>Rendered when `truthy`</span>; }
Event Switch : Changing an event handler result by define a new function of event handler.
Our application example of react patterns
You can explore more about this react patterns here. In our apps we use only some of the pattern because some of the feature is not needed to used.
Conclusion
Keep you spirit to stick to the rule that react app use object oriented programming paradigm. You need to make separate component for a biggest component. You can step by step make the component smaller by make a sketch of your apps.
